【彩彩只能变身队】后端工作总结

标签：成功   交流   mod   ==   OLE   方法   parser   express   row   

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);
加上这一句，果然就好了。
启示：知其然也要知其所以然，不能单纯随便复制一下，按钮，组件都出来就算完成了。

【彩彩只能变身队】后端工作总结

标签：成功   交流   mod   ==   OLE   方法   parser   express   row   

原文地址：https://www.cnblogs.com/colorfulhw/p/9164996.html