[Vue四]：node.js后端响应请求并返回数据——以登录响应为例

一、须知知识点

1.node.js编程
2.express框架
3.body-parser中间件，解析post请求
4.隐藏知识点：前端Vue及相应框架实现对对后端的访问请求
[Vue二]：实现页面登录功能对element-ui，vue-router，axios，vuex的学习和掌握
[vue三]：用户登录状态保存和请求进行判断，vuex结合vue-router，axios的学习

二、在项目中安装依赖框架

1.项目所需框架都是在node服务项目文件夹下通过npm进行安装和添加依赖(-S 代表当前环境安装，非全局安装)
生成默认的package.json文件

npm init -y

package.json默认内容为：

{
  "name": "nodestydy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

安装express

npm install express -S

安装body-parser

npm install body-parser –S

查看package.json文件可以看到npm自动将所有安装的框架添加了依赖:

{
  "name": "nodestydy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  	"body-parser": "^1.19.0",
    "express": "^4.17.1",
  }
}

三、编写api对前端请求给与反应

1.在工作目录下新建app.js文件，实现接受请求并返回数据：

//导入模块
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const fs = require('fs')
app.use(bodyParser.urlencoded({extended: true}));
//生成token的所需的md5加密
const md5 = require('md5');

//请求用户的token
let token = ""

//对于登陆的post求情做出回应
var count = 0;
//中间件对访问次数进行统计
app.post('/loginapp',(req,res,next)=>{
    count ++;
    console.log(count);
    next();
});
app.post('/loginapp',(req,res)=>{
    let user = req.body;
    console.log(user)
    if(user.usename == 'admin' && user.password == 123456){
        token = md5(user.usename+user.password)
        res.send({'msg':'S','token':md5(user.usename+user.password)});
    }else{
        res.send({'msg':'F'})
    }
});

app.get('/loginapp',(req,res,next)=>{
    count ++;
    console.log(count);
    next();
});
app.get('/loginapp',(req,res)=>{
    let user = req.query;
    console.log(user)
    if(user.usename == 'admin' && user.password == 123456){
        token = md5(user.usename+user.password)
        res.send({'msg':'S','token':md5(user.usename+user.password)});
    }else{
        res.send({'msg':'F'})
    }
});

/**
 * 获取info信息的get */
app.get('/getInfos', (req, res)=>{
	//对前端请求进行token验证
    let authorization = req.get('Authorization')
    if(token === authorization){
        fs.readFile('./data.json','utf8',(err,data)=>{
            res.send({"msg":'S',"infos":data})
        })
    }else{
        res.send({"msg":'F'})
    }
});

app.listen(8080,()=>{
    console.log('node server is running...');
})

在开发中陆续导入MD5和fs模块用于token的生成和json文件的读取，用于返回前端的请求。通过exprss模块

const express = require(‘express’);
const app = express();

生成app实例用于调用post和get方法。对于用户的登录请求，利用app.post方法接受，并且将用户名和密码经过MD5加密生成token返回给前端；同时利用：

app.post(’/loginapp’,(req,res,next)=>{})

方法中添加next参数对请求进行拦截处理，实现统计登陆次数的功能。
对于用户请求数据的接口getInfos，将服务器的json数据读取返回给前端，并且对前端请求进行token验证，验证通过返回数据，验证失败返回失败标识。
最终绑定服务器api接口的端口号为8080：

app.listen(8080,()=>{
    console.log('node server is running...');
})

四、开启api服务

在当前目录打开终端输入：
启动服务

node app.js

终端中出现 **node server is running…**说明服务启动成功！

欢迎大家关注本人的微信公众号，微信公众号将不定期发送相应学习文章和教程

微信号：chiyizao

或者微信公众号搜索： 迟亦早

二维码