如何一步步将已完成的vue-cli的项目,添加node中间件

Node 服务做中间件

优点:

1. 前后端解耦
2. 可在node内自行组织想要的数据结构
3. 解决跨域问题
4. 后台可用其他语言去写只返回原始数据, 在node层利用js可以很方便的组装数据,在页面不用去写处理数据的操作, 直接渲染即可.
5. 实现微服务, 可以做一些公用的服务供该服务调用
6. 即使node服务出现异常或者挂了,对其他服务业务没有任何影响.

 

我们是将已经用vue-cli写好的一个项目添加node中间件

 

第一步

首先要搭一个node服务

基于 express 来快速构建node服务

 

npm install express 安装express

 

express myapp 新建一个项目 myapp

 

cd myapp 进入 新建的项目

 

npm install 安装新新建项目依赖

 

npm start 启动项目

 

浏览器打开 http://localhost:3000

看到如图字样说明你的node 服务已经搭建成功;

 

第二步

我们一起来看下目录结构

 

bin 配置文件  打开可以看到 配置的端口号

var port = normalizePort(process.env.PORT || '3000');

app.set('port', port);

 

node_modules 文件夹里主要放一些 项目的依赖包npm install 安装的东西都会在该文件夹内

 

public 文件夹 只要是放置一些静态资源 待会会用到

 

routes 文件夹 里面放的是请求路由以及接口

 

views 当然放的是页面了

 

app.js 项目启动文件

 

下面两个 package 文件主要方式的是项目依赖表 每npm install 安装一个依赖 就回对应生成一条记录 依赖包的名字加上 包的版本号;

第三步

修改一些东西

打开views 文件夹看到 都是jade 模版文件

我们肯定希望看到的是html 文件

新建一个 index.html 文件 里面随便添加点字表示该文件

 

然后打开app.js 文件

修改 jade 为html

 

打开routes 下面的index 文件夹

将原有的代码注释加上新代码即可;

 

然后在命令行 ctry+c  y 结束项目 npm start 重新打开项目

 

刷新浏览器

说明html已经改好

 

第四步

npm install request 安装request

在index.js 头部引入request

const request = require('request');

 

然后新添加一个接口

router.get('/getuser', function(req, res) {

  let data = {

    'userName': '王思聪'

  }

  res.json(data);

});

 

然后重启项目

浏览器打开http://localhost:3000/getuser 发送请求

然后修改之前做的项目的一个接口 将请求头修改 http://localhost:3000

会发现报错 类似如下

该报错的意思是设计到了跨域问题

 

这里 npm install cors 安装

打开 app.js

添加如上代码 然后重启项目 打开前端项目 发现请求成功了;

 

第五步

将请求转发到真实要请求的地址

利用request请求,然后 res.json(data) 返回数据到页面;

 

如果之前的请求有url拼接参数 可修改如下,req.url就是原来请求的url

 

router.get('/user/getUserInfo', function (req, res, next) {

    let url = root + req.url;

    request({

        method: 'GET',

        url: url,

        headers: req.headers

    }, function (error, response, body) {

        if (!error && response.statusCode == 200) {

            console.log(response.body);

            let data = JSON.parse(response.body);

            res.json(data);

        }

    });

});

 

这样请求转发就实现了

 

然后将之前打包好的项目放到 这个node服务下;

将打包好的 dist 文件下的 index.html 放到 views 下;

将static文件夹放到 public静态文件夹下 这一步非常重要;

然后重启项目就好的