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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web安全

web安全 DOS命令 web攻防必备课笔记 慕课xss学习 阮一峰&#xff1a;MVC、MVP和MVVM的图示转载于:https://www.cnblogs.com/hanxuming/p/7774092.html

JavaScript --- 渲染数据量大的数组

很多时候&#xff0c;需要在页面上展示从后台来的大量数据,如果一次性渲染&#xff0c;会影响用户的体验。(而且浏览器中的JS严格限制了资源) /* *使用分组的思想来渲染大量的数组 *parmas array 要处理的数组 *params process 对数组中每一个item进行的操作 *parmas context …

Jquery操作select小结

每次操作select都要查资料&#xff0c;干脆总结一下。 为select设置placeholder <select class"form-control selOP" placeholder"Pick Orchestration Plan"><option value"" disabled selected styledisplay:none;>Pick Orchestrat…

第六讲:PrintClient工具的使用

一些简单命令&#xff1a; cp -rf 源目录 目的目录 chmod -R 777 文件名 motelist 查看节点路径 make telosb 编译代码 make telosb reinstall 下载但不编译 make telosb install 编译并且下载 make telosb install, 2 bsl,/dev/ttyUSB0 下载指定路径 java net.tinyos.tools.Li…

SQL Server

查看数据库服务器名称&#xff1a;tracert 192.168.10.01 转载于:https://www.cnblogs.com/hongwei2085/p/9174760.html

css --- 选择器

标签选择器 // 标签选择器是最简单的选择器, 它的命名只要和对应的HTML标签相同即可 h1 {font-size: 30px;color: #333; }类选择器 // 类选择器也称为class选择器,它的语法非常简单,在class名称前面加上一个"."符号 <div class"red content"></…

C++标准输入流、输出流以及文件流

1、流的控制 iomanip 在使用格式化I/O时应包含此头文件。 stdiostream 用于混合使用C和C 的I/O机制时&#xff0c;例如想将C程序转变为C程序 2、类继承关系 ios是抽象基类&#xff0c;由它派生出istream类和ostream类&#xff0c; iostream类支持输入输出操作&…

Hadoop学习笔记—8.Combiner与自定义Combiner

一、Combiner的出现背景 1.1 回顾Map阶段五大步骤 在第四篇博文《初识MapReduce》中&#xff0c;我们认识了MapReduce的八大步凑&#xff0c;其中在Map阶段总共五个步骤&#xff0c;如下图所示&#xff1a; 其中&#xff0c;step1.5是一个可选步骤&#xff0c;它就是我们今天需…

6-12mysql库的操作

1&#xff0c;mysql库的各种分类: nformation_schema&#xff1a; 虚拟库&#xff0c;不占用磁盘空间&#xff0c;存储的是数据库启动后的一些参数&#xff0c;如用户表信息、列信息、权限信息、字符信息等.  performance_schema&#xff1a; MySQL 5.5开始新增一个数据库&am…

css --- 行内框和内容区

css规定font-size的大小实际上是字体的高度 可以将内容区理解为font-size的大小. 行内高可以理解为 ( (line-height) - (font-size) ) /2 然后再font-size 的上下加上前面的值 看下面的例子 <p style"font-size:12px;line-height:12px;">this is text, <em&…

DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0(ver 3.0.7Beta) 增加多语言!

英文名&#xff1a;DotNetTextBox V3.0 WYSWYG Web Control For Asp.Net2.0 中文名&#xff1a;DotNetTextBox V3.0 所见即所得编辑器控件 For Asp.Net2.0 类型: 免费控件(保留版权) 作者: 小宝.NET 2.0(Terry Deng) 主页&#xff1a;http://www.aspxcn.com.cn 控件演示页面: h…

phantomjs

npm 安装 phantomjs失败&#xff0c;解决办法是到http://phantomjs.org/download.html 下载需要的压缩包&#xff0c;然后放到%appData%\Local\Temp\phantomjs\下&#xff0c;重新执行npm i 转载于:https://www.cnblogs.com/tellme/p/7777626.html

js动态删除行错误

Uncaught TypeError: Failed to execute removeChild on Node: parameter 1 is not of type Node. js中出现如上错误&#xff0c;检查验证document.getElementById&#xff08;&#xff09;中的参数是否传递正确&#xff0c; 例&#xff1a; var textnumber parseInt(docume…

css --- 浮动元素与 块框/行内框重叠时的细节

块框,可以认为是块级元素(如div、h1)的内容区 内边距 行内框可以认为是行内元素(如span)的内容区 内边距 当 块级框/行内框 和一个浮动元素重叠时&#xff0c;行内框的边框、背景和内容都在幅度元素之上&#xff0c;块级框的边框和背景都在浮动元素的下面&#xff0c;但内容在…

Android 禁止Viewpager左右滑动功能

做项目要求某种情况下ViewPager不能滑动 百度后发现重写ViewPager&#xff0c;覆盖ViewPager的onInterceptTouchEvent(MotionEvent arg0)方法和onTouchEvent(MotionEvent arg0)方法&#xff0c;这两个方法的返回值都是boolean类型的&#xff0c;只需要将返回值改为false&#x…

error C1853: “Debug\BigBuffer.pch”预编译头文件来自编译器的早期版本,或者预编译头为 C++ 而在 C 中使用它(或相反)...

<pre id"best-content-1299104064" mb-10""" style"font-size: 14px; line-height: 28px; ">该错误是因为当项目中混合了 .cpp 和 .c 文件时&#xff0c;编译器会对它们采取不同的编译方式&#xff08;主要是因为对函数声明的处理方式…

6.13的练习

#&#xff01;Usr/bin/env python # -*- coding:utf-8 -*- # Author:Alex Li 一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上268又是一个完全平方数&#xff0c;请问该数是多少&#xff1f;&#xff1a;for i in range(1,1000):for j in range(1,1000):i…

npm --- 包的发布与导入

安装好NODE后,下面演示如何编写一个包,并将其发布到NPM仓库中,最后通过NPM安装回本地. 以下例子是在windows*64环境下运行的. 1.编写模块 exports.sayHello function(){return Hello World; }将上述代码保存在hello.js中 2.初始化包描述文件: 使用npm init指令,快速生成包…

账号注册的form

class RegForm(forms.ModelForm):password forms.CharField(widgetforms.PasswordInput, label密码, min_length6) # 重写默认字段re_password forms.CharField(widgetforms.PasswordInput, label确认密码, min_length6) # 新增字段class Meta:model models.UserProfile …

servlet面试常考 (转载)

编辑 删除 1、说一说Servlet生命周期&#xff08;非常重要&#xff09; Servlet生命周期包括三部分&#xff1a; 初始化&#xff1a;Web容器加载servlet&#xff0c;调用init()方法…