2018.06.09 早上8点到晚上10点 冲刺前后端交互(vue+express+mysql)
8:00-12:00 : 前端把请求写好:
登录 | Login
登录
注册
12:00 - 17:00 后端开始进行交互来尝试着接受前端的post请求:
一。首先配置好proxytable,来实现代理和跨域,这样的话一个后端的路由就可以处理来自两个url的请求了:
dev: {
env: require('./dev.env'),
host:'localhost',
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/' : {
target:'http://localhost:3000/',
changeOrigin: true,
}
},
cssSourceMap: false
},
二。写好后端接受的代码:这样的话后端接收到post请求可以进行处理:
const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser')
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors({
origin:['http://localhost:8080'],
methods:['GET','POST'],
alloweHeaders:['Conten-Type', 'Authorization']
}));
app.set('port', (process.env.port || 3000))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
app.use(cookieParser())
app.use(userApi)
app.listen(app.get('port'), function () {
console.log('Visit http://localhost:' + app.get('port'))
})
router.post('/api/login', function (req, res) {
let userName = req.body.username,
password = req.body.password,
resBody = {state: ''}
if (userName !== undefined && userName.length > 0) {
conn.query("SELECT * FROM users WHERE ?", {name: userName}, function (err, doc) {
if (err) {
resBody.state = '账号不存在';
res.send(resBody);
} else {
if (doc.length === 0) {
resBody.state = '账号不存在';
res.send(resBody);
} else {
console.log(doc);
resBody.state = '登录成功';
res.send(resBody);
}
}
})
}
else {
resBody = {state: '请输入用户名'}
res.send(resBody)
}
});