前端快速开发---node接口模拟后端数据（包含跨域）

项目基础：iview cil 2.0 ，写的不是很详细，有问题欢迎留言哈，会及时回复的

1.webpack.dev.config.js配置修改（支持跨域）

module.exports = merge(webpackBaseConfig, {
    devtool: '#source-map',
    output: {
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[name].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js'
        }),
        new HtmlWebpackPlugin({
            filename: '../index.html',
            template: './src/template/index.ejs',
            inject: false
        })
    ],
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        stats: { colors: true },
        proxy: {        
            '/api': {    //匹配代理的url
              target: '你的目标地址',     // 目标服务器地址
              pathRewrite: {'^/api' : '/api'},//路径重写
              changeOrigin: true
            }
         }
    }
});
复制代码

项目要配置的东西就这些，util需要你自行配置好你要用的方法(post,get等)，然后在你的methods里自行调用就行

2.node服务端配置

1.package.json 依赖项（cnpm i 自行安装）

{
  "name": "node-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3"
  }
}

复制代码

2.ap.js （放在主目录下即可，处理请求并返回数据）

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

//跨域
app.all('*', function (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();
});

var questions = [{//返回数据
        data: 213
    }
]
app.get('/123', function (req, res) {//get请求处理，接口名为第一个参数，可以自定义，返回之前也可以链接数据库做一些其他操作
    console.log("get接收:" + JSON.stringify(req.query))//命令行会自行打印收到的参数
    res.status(200),
        res.json(questions)
});
var urlencodedParser = bodyParser.urlencoded({
    extended: false
})
app.post('/post', urlencodedParser, function (req, res) {//post请求处理，接口名为第一个参数，可以自定义，返回之前也可以链接数据库做一些其他操作
    console.log("post接收:" + JSON.stringify(req.body)) //命令行会自行打印收到的参数
    res.json(questions);
});
var server = app.listen(1136, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('启动', host, port);
})
复制代码

get请求收到的参数在req.query里，post收到的参数在req.body里

3.以上完成后，启用一个命令行，运行ap.js就可以愉快的发请求玩了

这里真的没有了
复制代码