码迷,mamicode.com
首页 > 其他好文 > 详细

express框架

时间:2017-12-02 22:14:11      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:typeerror   push   注意   encode   name   []   head   url   title   

const express = require(‘express‘);

var server = express();
server.use(‘/‘,function(req,res){
   // 一共两个参数,分别是‘/’(代表访问根目录下的文件),和function(){}
})

server.listen(8080);

最基本用法:use

const express = require(‘express‘);

var server = express();
server.use(‘/a.html‘,function(req,res){
    res.send(‘abc‘);
    res.end();
})
server.use(‘/b.html‘,function(req,res){
    res.send(‘123‘);
    res.end();
})

server.listen(8080);

执行结果:
技术分享图片

注意:res.write()是原生的,res.send()是express框架的新方法

比较两者不同:

send是增强版的write。
栗子:

const express = require(‘express‘);

var server = express();
server.use(‘/a.html‘,function(req,res){
    res.send({a:12,b:34});
    res.end();
})

server.listen(8080);

输出结果:
{"a":12,"b":34}
send方法可以显示json,但是write不行:

const express = require(‘express‘);

var server = express();
server.use(‘/a.html‘,function(req,res){
    res.write({a:12,b:34});
    res.end();
})

server.listen(8080);

会报错:TypeError: First argument must be a string or Buffer 必须是字符串或者二进制原始数据

总结:

express保留了原生的功能,添加了一些方法。

基本的用法:

1.创建服务
var server=express();

2.监听
server.listen(8080);

3.处理请求
server.use(‘地址‘, function (req, res){
});

三种方法

.get(‘/‘, function (req, res){});
.post(‘/‘, function (req, res){});
.use(‘/‘, function (req, res){});  对post和get方法通吃

具体实例

html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="ajax.js" charset="utf-8"></script>
    <script type="text/javascript">
    window.onload=function (){
      var oUser=document.getElementById(‘user‘);
      var oPass=document.getElementById(‘pass‘);
      var oBtn=document.getElementById(‘btn1‘);

      oBtn.onclick=function (){
        ajax({
          url: ‘/login‘,
          data: {user: oUser.value, pass: oPass.value},
          success: function (str){
            var json=eval(‘(‘+str+‘)‘);
            if(json.ok){
              alert(‘登录成功‘);
            }else{
              alert(‘失败:‘+json.msg);
            }
          },
          error: function (){
            alert(‘通信失败‘);
          }
        });
      };
    };

    window.onload = function(){
      var oUser = document.getElementById(‘user‘);
      var oPass = document.getElementById(‘pass‘);
      var oBtn = document.getElementById(‘btn1‘);

      oBtn.onclick=function(){
        ajax({
          url:‘/login‘,
          data:{ user:oUser.value, pass:oPass.value},
          success: function(str){   //收到server.js文件中res.send返回的{ok:...,mag:...}的json字符串
            var json = eval(‘(‘+str+‘)‘);
            if(json.ok){
              alert("登录成功");
            }else{
              alert(‘失败‘+json.msg);
            }
          }
        })
      }
    }

    </script>
  </head>
  <body>
    用户:<input type="text" id="user" /><br>
    密码:<input type="password" id="pass" /><br>
    <input type="button" value="登录" id="btn1" />
  </body>
</html>

提示: eval()解析json字符串时为什么要加上‘(‘+str+‘)‘?
原因: json字符串格式是{},在js中会被默认当做一条语句,加上括号后才会被当做对象。

server.js文件

import { read } from ‘fs‘;

const express = require(‘express‘);
const expressStatic = require(‘express-static‘);

var server = express();
server.listen(8080)

// 用户数据
var users = {
    ‘张雯‘:‘123‘
}

server.get(‘/login‘,function(req,res){
    var user = req.query[‘user‘];
    var pass = req.query[‘pass‘];

    // 
    if(users[user]==null){
        res.send({ok:false,msg:‘不存在该用户‘})
    }else{
        if(users[user]!=pass){
            res.send({ok:false,msg:‘密码错误‘})
        }else{
            res.send({ok:true,msg:‘登录成功‘})
        }
    }
})

// 如果server.get没有获取到数据,就进入这一步
server.use(expressStatic(‘./www‘));

ajax.js文件

function json2url(json){
    var arr=[];
    for(var name in json){
        arr.push(name+‘=‘+json[name]);
    }
    return arr.join(‘&‘);
}
function ajax(json){
    json=json || {};
    if(!json.url)return;
    json.data=json.data || {};
    json.type=json.type || ‘get‘;

    var timer=null;

    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject(‘Microsoft.XMLHTTP‘);
    }

    switch(json.type){
        case ‘get‘:
            oAjax.open(‘GET‘,json.url+‘?‘+json2url(json.data),true);
            oAjax.send();
            break;
        case ‘post‘:
            oAjax.open(‘POST‘,json.url,true);
            oAjax.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
            oAjax.send(json2url(json.data));
            break;
    }

    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            clearTimeout(timer);
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                json.success && json.success(oAjax.responseText);
            }else{
                json.error && json.error(oAjax.status);
            }
        }
    };
}

express框架

标签:typeerror   push   注意   encode   name   []   head   url   title   

原文地址:http://www.cnblogs.com/n2meetu/p/7955617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!