1.express建一个 server.js
// Setup basic express server
var express = require('express');
var compression = require('compression')
var bodyParser = require('body-parser');
var app = express();
app.use(compression());
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({
extended: false
}))
app.use(bodyParser.json());
app.use(function(err, req, res, next) {
if (err) {
console.error(err.stack);
res.status(500).send({
error: 'Something failed!'
});
} else {
next(err, req, res, next);
}
})
app.use('/', require('./routes/routes'));// routes.js 里面写 api路由设置
var port = process.env.PORT || 3000;
app.listen(port, function() {
console.log('Server listening at port %d', port);
});
2.vue-cli 建立项目
1. npm install cue-cli webpack
2. vue init webpack vueTest(项目名字)
3.npm install
4.npm run dev
3.设置config中index的proxyTable
proxyTable: {
'/api/*': {
target: 'http://127.0.0.1:3000/',
preserveHost: false
}
},
assetsPublicPath: './',
这样就可以请求express中的api 了。ok
4.在前端vue文件中调用
可以用fetch或者是axios 在vue项目中的mai.js中添加fetch or axios ： Vue.ProtoType.fetch = fetch.
this.axios.post("/api/users/login", { name: this.name, password: this.pwd });
this.fetch('/api/users/login',{
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json"
},
method: "POST",
body: JSON.stringify({
//参数
})
})