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);
加上這一句，果然就好了。
啟示：知其然也要知其所以然，不能單純隨便復制一下，按鈕，組件都出來就算完成了。

【彩彩只能變身隊】後端工作總結