使用Node.js为Vue.js提供WebAPI接口前的配置

默认读者已经安装了node环境和vue环境

安装Node.js的Express框架：

1. 全局安装express-generator

npm install express-generator -g

2. 在合适的文件夹下创建Express框架的Node.js项目

express + 项目名

创建Vue.js项目

1. 创建一个基于Webpack模板的新项目

vue init webpack + 项目名

2. 进入项目目录，安装项目依赖

npm install

接下来进行细节配置

Vue.js项目启动8087端口，Node.js项目启动3000端口。

Node.js中的配置

1.首先在app.js中的设置

var bodyParser = require('body-parser');		//node.js body 解析中间件 为post请求做准备
app.use(bodyParser.urlencoded({extended: true}));		//设置body-parser中间件
var testRouter = require('./routes/test');		//引入准备写API的路由文件地址
app.use('/test', testRouter);		//引入路由

2. 在routes文件夹下创建test.js文件，编辑里面内容

var express = require('express');
var router = express.Router();

router.get("/getmodel", (req, res, next) => {
   res.json({
   	status: '1',
   	msg: '访问GET请求成功！'
   });
})

router.post("/postmodel", (req, res, next) => {
   res.json({
   	status: '1',
   	msg: '访问POST请求成功！'
   });
});

module.exports = router;

Vue.js中的配置

1.编辑config文件夹下的index.js文件中的proxyTable
【注意】这部分改动完一定要重新启动一遍Vue.js服务

proxyTable: {
      '/info': {
          target: 'http://localhost:3000',	//3000是node服务的端口
          changeOrigin: true,
          pathRewrite: {
              '^/info': 'info'
          }
      }
  }

2.在Vue.js中安装axios并且引入，在函数中使用axios发起请求

import axios from 'axios'

axios.get('/test/getmodel').then((res) => {
 	console.log(res);
});

axios.post('/test/postmodel').then((res) => {
 	console.log(res);
});

测试结果