VuePress + Node

Vuepress

config.js：配置接口对应跨域信息，支持跨域

devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8085/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },

接口请求：对数据进行特殊处理传给node进行处理

let param = new URLSearchParams();
param.append('directory', this.form.directory)
param.append('title', this.form.title)
param.append('content', this.form.content)
this.$axios({
    method: 'post',
    url: '/api/editor',
    data: param
}).then((res) => {
    this.directory = JSON.parse(res.data) // 返回数据为res.data
})

Node

安装包准备：

cnpm install express --save // node框架
cnpm install body-parser --save //  处理 JSON, Raw, Text 和 URL 编码的数据
cnpm install cookie-parser --save // req.cookies获取请求的cookie并转成对象
cnpm install multer --save // 处理上传的文件数据

服务器准备：

创建server文件夹作为服务器，文件夹内配置逻辑

main.js：服务器启动文件

var express = require('express')
var app = express()
var api = require('./api')
// 路由接口监听
app.use('/api', api)
// 监听本机8085端口
var server = app.listen(8085, function() {
    var host = server.address().address
    var port = server.address().port
    console.log('Server has running at http://%s:%s', host, port)
})

api.js：服务器接口文件

var express = require('express');
var router = express.Router();
// 数据表单解析
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });
// 文件处理
var multer = require('multer');
var fs = require("fs");


// 路由匹配接口调用，get请求返回数据
router.get('/directory', function(req, res) {
    fs.readFile('./directory.json', 'utf8', (err, data) => {
        if (err) {
            console.error(err)
            return
        }
        res.end(JSON.stringify(data));
    })
})

// post请求中有表单类型数据时需传入表单类型解析参数进行处理
router.post('/editor', urlencodedParser, function(req, res) {
    let data = req.body; // req.body存储请求中的data数据
    /*
      执行上传逻辑
    */
})