【彩彩只能变身队】后端工作总结
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);
加上这一句,果然就好了。
启示:知其然也要知其所以然,不能单纯随便复制一下,按钮,组件都出来就算完成了。
转载于:https://www.cnblogs.com/colorfulhw/p/9164996.html
【彩彩只能变身队】后端工作总结相关推荐
- 【彩彩只能变身队(第七组)】Beta版本
本篇博客包括前期博文汇总.任务墙.团队管理细节与交流细节.代码管理.Beta阶段冲刺.团队总结.用户使用报告.Postmortem报告. 服务器网址:http://47.106.227.154/ 彩彩 ...
- 【彩彩只能变身队】燃尽图暨一周总结(6.10)
彩彩只能变身队六月近期任务:1.完善登陆页面 2.写各个页面需要组件 3.对各种组件操作的响应的技术学习 4.前后端交互的进一步学习 截至今天6月冲刺已基本结束,阶段任务也已经完成. 前端半数页面已经 ...
- 【彩彩只能变身队】用户需求分析(二)—— 调查结果
目录 1. 引言 1.1. 编写目的 1.2.项目背景 1.3. 项目范围 2.用户需求分析 2.1. 调查问卷(User Survey) 2.2. 市场分析(Market Analysis) 1. ...
- 【彩彩只能变身队(第七组)】Alpha版
演示总结 -by 彩彩只能变身组(第七组) Part one:功能简介 教师端--班级主页 教师端--创建班级 教师端--批改作业 教师端--作业上交情况 学生端--班级主页 学生端--作业上传 在开 ...
- 彩彩只能变身队团队项目进展记录by后端
2018.06.03 早上8:00-晚上8:00 后端小组一起在图书馆四楼边学边做: 1.首先搞定了数据库,学会了怎样用命令行来操作数据库,并且建立了一个用户表. 2.然后自己设计了一个简陋的前端页面 ...
- 【彩彩只能变身队】第四次会议
第四次会议 时间:3月24日 时长:2小时 地点:图书馆303研讨室 会议内容: 1. 前后端人员确定 2. 技术细节讨论 3. 督促学习进度 具体议程: 1. 前后端 ...
- 【彩彩只能变身队】第七次会议
时间:2018年5月27日晚 地点:三教A楼讨论区 时长:2小时 会议内容: 1.现状: 主要矛盾:后半学期不断加重的专业课程压力与日益增长的软工进度要求之间的矛盾. 当前的主要困难:全组为大二小白, ...
- 【彩彩只能变身队】第三次会议
第三次会议 时间:3月10日 时长:2小时 地点:图书馆306研讨室 会议内容: 1. 讨论问卷扩散 2. 具体角色分工 3. 大致功能计划 具体议程: 1. 扩散调查 ...
- 彩彩只能变身队团队项目进展记录by曾琪峰
计划完成内容:完成webstorm的熟悉,对后端部分的熟悉,数据库的安装和操作熟悉,简单的对接 实际完成部分:对webstorm有了一定的了解,在组员的帮助下对后端有了了解,操作了几个简单的界面,安装 ...
最新文章
- Attack on Alpha-Zet
- 【新手教程】如何向App Store提交应用
- 函数的实参 函数的形参 闭包 js
- Zabbix监控华为交换机CPU、温度并显示到拓扑图
- 如何化身BAT面试收割机?都是精髓!
- 世界笔记本巨头厂商 Compal 被勒索1700万美元
- 在C#中什么时候用分号?
- Problem 1036 四塔问题
- 数值分析-LU三角分解
- 集合论的创始人康托尔(G.Cantor)的故事
- 数独解法/n皇后的回溯算法
- 抖音上超火系列的透明头像是怎么弄的?操作原来如此简单
- 怎么根据日志分析出 PV 和 UV?
- 切换电脑计算机名称软件,多电脑切换器
- 如何使用 Java 将 PDF 转换为文本 (TXT)
- 从零开始安卓端相机功能开发(一)了解用什么去开发以及流程
- 2014款macbookpro 15-inch 升级硬盘
- 新大陆云平台app制作(史上最简单)
- RTT WK2412 spi-uart
- java怎么实现发布说说_仿QQ发表说说