搭建vue+express项目
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({ //参数 }) })