默认读者已经安装了node环境和vue环境
安装Node.js的Express框架:
- 全局安装express-generator
npm install express-generator -g
- 在合适的文件夹下创建Express框架的Node.js项目
express + 项目名
创建Vue.js项目
- 创建一个基于Webpack模板的新项目
vue init webpack + 项目名
- 进入项目目录,安装项目依赖
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);
});
测试结果