node做中间层

一、为什么用node做中间层？

后端出于性能和别的原因，提供的接口所返回的数据也许不适合前端直接使用。前端所需的排序功能、筛选功能，以及到了视图层的页面展现，也许都需要对接口的所提供的数据进行二次处理。这些处理虽可以放在前端来进行，但也许数据量一大便会浪费浏览器性能。因而至今，曾加node端便是一种良好的解决方案。

很多项目中后端应用往往不止一个服务，而是一群各司其职的服务，比如nginx的存在就是因为服务器上运行着多个服务，而不同的网络请求由不同的服务处理，需要在这些服务前假设一层nginx做为代理，将请求分发给不同的服务，nginx在这里的角色就相当于中间层。

对于一个比较复杂的web站点，页面中的请求通常分为两种，请求页面与请求数据(ajax)。如果后端是个单体应用，当发现所有请求量太多应付不过来的时候就可以考虑做这样的分离，将处理页面渲染的请求分给另一个服务，挡在前面，自己只负责数据相关的请求。nodejs擅长处理io密集型任务，很适合做处理页面渲染的服务，于是很多人选择了nodejs。淘宝也是类似的架构，据说现在所有淘宝的页面都是由node服务渲染的。

二、vue-cli3.0安装配置

1、vue-cli3.0安装

npm install -g @vue/cli

vue create my-vue //创建项目

2、第一个是默认配置，一般选第二个，自己配置，这里选择最后一个

3、选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里

4、下一步之后问询问你安装哪一种 CSS 预处理语言，你随意选择，我是一直用的less

5、下面这个是问你选择哪个自动化代码格式化检测，配合vscode编辑器的 Prettier - Code formatter插件，我选的随后一个

6、第一个是：放独立文件放置   第二个是：放package.json里 这里推荐放单独配置文件

7、 修改vue.config.js:打包文件到指定位置

三、express框架搭建（也可以用koa2）

1、安装express框架

1、安装node

2、安装express:npm install -g express

3、安装npm install -g express-generator

4、创建一个express工程：express helloworld

5、进入项目主目录：cd helloworld

6、安装必备包：npm install

7、启动express程序：npm start

2、修改node-express里面的app.js 

 

3、设置node允许跨越：https://blog.csdn.net/lbPro0412/article/details/84767678

 4、项目打包完 =》启动node 刷新页面出现404  解决方法：https://blog.csdn.net/lbPro0412/article/details/82501440

四：vue配置环境变量

1、

2、

3、运行命令 npm run build -- test  运行结果

4、获取环境变量的值

注意：

（1）在项目中，也就是src中使用环境变量的话，必须以VUE_APP_开头，见.env.test文件

（2）新建的文件.env.test文件必须有NODE_ENV="production"，否则打包的文件名字没有hash值

本地启动命令也能配置环境变量：

五、配置node服务端环境变量，这里借助的事pm2

1、运行命令：pm2 delete mypractice.json && pm2 start mypractice.json --env test 

2、环境变量获取：

打印：

 

3、这里使用request去请求接口，然后返回给客户端

如果不封装方法，可参考：https://blog.csdn.net/lbPro0412/article/details/82285841

如果封装方法，见下面：

调用：

注意：

get请求获取参数是req.query

post请求获取参数是req.body

项目地址：https://github.com/binliuli/node_vue

仅供参考，有问题欢迎指出。。。。。