node服务配置，express配置引入vue项目中(前后端联调)

1、使用express插件快速搭建node服务，首先安装express插件

npm install express --save

通过express配置服务后，每次都需要node server.js显得有些繁琐，因此有了需求，能不能将自己配置的服务放在vue配置文件中，这样只需要启动vue项目，后台配置也就完成了，答案是可以的。

先说总体过程，再说详细内容

2、使用vue-cli3脚手架工具搭建的vue项目，在根目录下新建vue.config.js配置文件，由于数据交互存在跨域问题，所以在项目中需要配置跨域，我们的后端服务配置在8100端口，前端端口配置在8080端口。跨域配置如下：

module.exports={
  devServer: {
    port: 8080,
    proxy: {
        '/api': {
            target: 'http://localhost:8100',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
        }
    },
  },
}

配置好跨域后，在module.exports同级下配置后端服务。配置前先安装body-parser插件，方法为

npm install body-parser --save

该插件的作用就是方便提取post方式提交的数据，使用req.body就能获得post提交的数据。如果不使用该插件将会变得很麻烦，建议安装使用。

我是使用了mongdb数据库，所以配置内容较多。

//后端提交数据配置
const express = require("express")
//引入mongoose库
const mongoose = require("mongoose")
const DB_URL = "mongodb://127.0.0.1:27017/blog"
const bodyparser=require("body-parser")
mongoose.connect(DB_URL)
mongoose.connection.on("open", function() {
    console.log("链接成功");
})
//定义文档模型，类似于数据库建表
const User = mongoose.model(
    "userName",
    new mongoose.Schema({
        title: { type: String, require: true },
        body: { type: Number, require: true }
    })
)
//新增数据
User.create(
    {
        title: "喵星人",
        body: 19
    },
    function(err, doc) {
        if (!err) {
            console.log(doc);
        } else {
            console.log(err);
        }
    }
)
//删除数据
User.remove({ age: 20 }, function(err, doc) {
    console.log(doc);
})
//修改数据
User.update({ name: "功夫熊猫1" }, { $set: { age: 28 } }, function(err, doc) {
    console.log(doc);
})
//新建app
const app = express();
//body-parser为中间件，方便获取post操作数据，需要先使用一下。
app.use(bodyparser.urlencoded({extended:false}))
//请求数据
app.get("/", function(req, res) {
    res.send("<h1>hello world</h1>");
})
app.post(`/dataName.html`, function(req, res) {
    if(req.body.user=='admin'&&req.body.password=='123'){
		res.sendFile(`${__dirname}/test.html`);
	}else{
		res.send("404");
	}
})
app.get("/dataName.html", function(req, res) {
    res.send("您好")
})
app.get("/home.html", function(req, res) {
  console.log(req.query);
})
//返回json类型数据
app.get("/data", function(req, res) {
    User.find({}, function(err, doc) {
        res.json(doc);
    });
})

//监听8100端口
app.listen("8100", function() {
    console.log("8100");
})

配置完成后，只需要像以往启动项目一样，不同的是启动项目同时，也启动了node服务，当点击提交数据时候，就会跳转到响应内容中