express安装、配置、接受请求、响应

1、在cmd中进入项目的根目录下，安装express：npm install express

2、express只是在原生的nodejs中添加了一些功能，保留了原生的功能

比如res.write()和res.end()都保留，多了res.send()---可以直接返回json格式的数据，而res.write()则会报错

3、介绍

// 1、创建服务
const express = require('express');
let server = express();
// 2、监听端口
server.listen(8080);
// 3、处理请求
server.use('地址',(req,res)=>{
	// 返回数据，可以 直接返回json
	res.send({a:1});
	// 断开连接
	res.end();
});

--------------------
// 处理请求有3种方法
server.get('/',res)=>{});   //接受用户的get请求
server.post('/',res)=>{});  //接受用户的post请求
server.use('/',res)=>{});   //接受用户的get  post请求

具体例子

服务端：

const express = require('express');
let server = express();

server.get('/',res)=>{
    console.log('get');
});

server.post('/',res)=>{
    console.log('post');
});

server.use('/',res)=>{
    console.log('info');
});

server.listen(8080);

客户端：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form action='http://localhost:8080' method="POST">
            用户名：<input type='text' name="user" value=''><br />
            密码：<input type='password' name="pass" value=""/><br />
            <input type="submit" value='提交'>
        </form>
    </body>
</html>

4、express的中间件（插件）---express-static：用于处理静态文件

例子：

服务端代码：

const express = require('express');
let server = express();

let expressStatic = require('express-static');
// 告诉服务器去哪里读取静态文件
// 参数是静态文件的路径
server.use(expressStatic('./www'));

server.listen(8080);

在浏览器的地址栏输入如下：

5、模拟一个客户端进行登录的简单场景

客户端代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script src='jquery-3.1.1.min.js'></script>
    </head>
    <body>
        <form action='http://localhost:8080'>
            用户名：<input type='text' name="user" id="user" value=''><br />
            密码：<input type='password' name="pass" id="pass" value=""/><br />
            <input type="button" value='登陆' id="btn">
        </form>
       <script>
           $(function(){
               document.getElementById('btn').addEventListener('click',function(e){
                   let user = $('#user').val();
                   let pass = $('#pass').val();
                   let data = {user:user,pass:pass};
                    //这个请求处理的地址和服务器端相配合
                   let url = '/login';
                   $.ajax({
                       url:url,data:data,dataType:'json',type:'GET',success:(data)=>{
                           console.log(data);
                       },error:(res)=>{
                           console.log(res);
                       }
                   });
               });
           });
       </script>
    </body>
</html>

服务端代码：

const express = require('express');
let server = express();

let expressStatic = require('express-static');

// 存用户数据代替数据库
let users = {
    'zhang':'12','li':'22','ss':'33'
};

// 处理请求
server.get('/login',res)=>{
    let params = req.query;
    console.log(params);
    let user = params['user'];
    let pass = params['pass'];
    
    if(users[user] == null ){
        res.send({status:'0',msg:'此用户不存在',data:''});
    }else if(users[user] != pass){
        res.send({status:'0',msg:'密码不正确',data:''});
    }else{
        res.send({status:'2',msg:'登陆成功',data:''});
    }
});

// 告诉服务器去哪里读取静态文件
// 参数是静态文件的路径
// 在地址栏输入localhost:8080/a.html，会显示其页面内容
server.use(expressStatic('./www'));

server.listen(8080);

express安装、配置、接受请求、响应

相关文章