2018.06.09 早上8點到晚上10點 沖刺前后端交互(vue+express+mysql)
8：00-12：00 ： 前端把請求寫好：
<template>
<div class="LoginForm">
<el-form ref="form" label-width="80px" action="api/info">
<!--<myCanvas></myCanvas>-->
<el-row>
<el-col :span="8"><div class="grid-content"></div></el-col>
<el-col :span="8">
<div class="grid-content login">
<p class="loginTitle">登錄 | Login</p>
<el-input type="text" v-model="userName" placeholder="請輸入你的用戶名"></el-input>
<el-input type="password" v-model="ori_password" placeholder="請輸入你的密碼"></el-input>
<el-button type="info" @click="login">登錄</el-button>
<el-button type="info" @click="dialogFormVisible = true">注冊</el-button>
<!--<el-button type="warning" @click="findPasswordVisible = true" style="float: right">找回密碼</el-button>-->
</div>
</el-col>
<el-col :span="8"><div class="grid-content"></div></el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import store from '../store/index'
export default {
name: "LoginForm",
data() {
return {
userName: '',
ori_password: '',//原始未加密
}
},
methods: {
login() {
this.password = this.ori_password
this.$http.post('api/login', {
username: this.userName,
password: this.password}
).then((response) => {
this.loginResponse(response)
}, (response) => {
console.log(response)
}
)
},
loginResponse(response){
let body = response.data;
if(body.state === '登錄成功'){
this.$router.push('/home');}
//let userid = body.id;
//this.$store.dispatch('setUsername', {name: this.userName, id:userid, token:body.token});}
else this.$router.push('/');
}
}
}
</script>
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)
}
});
2018.06.10 早上8點到中午12點 沖刺前后端交互成功(vue+express+mysql)
遇到挫折：不管怎么刪除怎么改，讓功能怎么簡化，前端的post請求總是傳不到后端，后端一點反應都沒有。
功能已經刪減的不能再刪減了，刪到后端接收到請求就返回一個驗證成功的res，但還是一點反應都沒有。
然后和前端交流一下，前端login按鈕又調試了一下沒問題。
前端后端都沒問題，于是懷疑代理跨域有的小語法沒有掌握，
瘋狂google，按照上面的方法，反復去嘗試，去修改proxytable，改了幾個版本之后，還是不行。
于是后端又把流程走了一次，發現main里面有一個東西沒配置，那就是：
Vue.use(VueResource);
加上這一句，果然就好了。
啟示：知其然也要知其所以然，不能單純隨便復制一下，按鈕，組件都出來就算完成了。
 增加多語言!)
...)
