前后端分离--前端脱离后台，调试页面

前言

利用nodejs作为后台服务，使用nginx解决跨域或者在node中接受跨域请求，使用mock做假数据。

安装库

1. http-server
2. supervisor
3. mock
4. nginx

过程

1. 在前端页面所在文件夹内，调出命令行，输入 http-server 。将本目录作为服务器根目录。

   默认端口为8080，如果有冲突使用参数-p,例如：http-server -p 5000,此时开启的服务端口为5000

2. 编写node服务端代码，处理前端请求。

    const express = require('express');
    const app = express();
    const port = 3000;
    const bodyParser = require('body-parser');
    const Mock = require('mockjs');
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
        extended: true
    }));
    let _data = {}
    app.post('api/接口地址', (req, res) => {
        //code 可以根据请求参数编写简单的处理逻辑
        //根据自己的系统拼装报文
        _data = {
            "code": "状态码",
            data: Mock.mock({
                'list|20': [{
                    "data1": '@float( 0, 9, 2, 2 )',
                    "data2": '@float( 0, 9, 2, 2 )',
                    "data3": 1523808000000,
                    "data4": '@float( -1, 0, 4, 4 )'
                }],
                page: 1,
                size: 10,
                total: 100,
            }),
            message: '提交成功',
            t: new Date().getTime()
        };
        //返回数据
        res.status(200).json(_data);
    });
    app.get(...)
    app.post(...)
    app.listen(port, function () {
        console.log('[Server] localhost:' + port);
    });
   

启动node服务器，一般启动使用node app.js ，但是这里我们用supervisor app.js启动，因为这样启动一旦服务器文件被改变 他讲自动重启node服务

3. 配置nginx
   配置nginx的80端口代理本机的5000端口，此处的5000为前面http-server启动时配置的端口号
   配置nginx拦截ajax的请求地址，代理转发到3000端口，此处的3000为node服务器的端口号

    http {
        server {
            listen       80;
            #拦截接口地址
    		location ^~/api{
    			proxy_pass http://127.0.0.1:3000/api;
    		}
    		#代理服务器地址
            location / {
    			proxy_pass http://127.0.0.1:5000;
    			proxy_intercept_errors on;
    			proxy_set_header HOST   $host;
    			proxy_set_header X-Real-IP      $remote_addr;
    			proxy_set_header X-Forwarded-FOR $proxy_add_x_forwarded_for;	
            }
        }
    
    }
   

进到nginx安装目录 输入start nginx启动nginx服务

补充

如果不想配置nginx，可以在node内配置允许跨域请求。

app.all('/dbank/*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "X-Requested-With");
	res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
	res.header("X-Powered-By", ' 3.2.1');
	res.header("Content-Type", "application/json;charset=utf-8");
    next();
});