vue+node+mysql注册登录功能实现

第一次用vue+node做前后端分离的项目，注册登录入手，就已经踩了很多坑，记录一下大概思路

客户端 vue-cli

构建页面,我做的手机端，用的ui框架是vant，pc端差不多

路由

/router/index.js

const routes = [{path: '/',name: 'Home',component: Home},{path: '/login',name: 'login',component: login},{path: '/register',name: 'register',component:register},
]

数据传递

login.vue

<script>
import axios from 'axios'
import VueAxios from 'vue-axios'
import { Dialog } from 'vant';
export default {data() {return {userName: '',password: '', };},methods: {//提交按钮绑定事件onSubmit () {//定义一个date对象存输入框获取到的用户名和密码let data = {userName: this.userName,userPassword: this.password}//通过axios把数据传递给服务端，记得装axios依赖this.axios.get('/api/login', {params: data}).then((res) => {//这里是服务端返回信息后的处理，可以暂时不看console.log(res.date)})}},
}
</script>

因为要给服务端传递数据，涉及到跨域问题

• 跨域问题的产生是因为受到了同源策略的影响，就是你自己电脑一个浏览器从一个端口去访问本机的另一个，是不同源的所以产生跨域问题
• 跨域问题可以由后端解决也可以由前端解决，这里用来前端
• 根目录下（和package.json同级）新建一个vue.config.js文件
• 最好不要多加东西，和我一样就够了，真的真的很容易出错

module.exports = {devServer: {// open: true,host: "localhost",//客户端端口port: 8080,// https: false,// hotOnly: false,proxy: {//这里的api在axios传递数据时要用，可以检测请求地址，如果以"/api"开头，就会默认使用下面的代理'/api': {target: 'http://127.0.0.1:3000', //API服务器的地址changeOrigin: true,//"changeOrigin"用来设置开启代理pathRewrite: {'^/api': ''}}},}
}

服务端

新建文件，安装express

• npm install express
• app.js

// 引入express
var express = require('express');
let loginRouter = require('./routes/login');// 1. 创建app
var app = express();// 登录路由
app.use('/api/login',loginRouter)app.listen(3000,function(){console.log('服务端正在运行.......');
})

• 终端运行 node .\app.js
  
• login.js

let express = require('express');
let router = express.Router();
//————————————连接数据库——————————
//记得装mysql依赖啊
var mysql = require('mysql');
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',//数据库用户名password : '',//密码database : 'bookshop'//数据库名
});connection.connect((err)=>{if(err){console.log(err)}else{console.log("数据库连接成功")}});
//获取客户端数据
router.get('/', function(req, response, next) {// 把从客户端传来的名字，密码赋值到新的变量let name = req.query.userNamelet pwd = req.query.userPassword// 通过名字查询数据库用户表得到密码  password是数据表字段名，表名user_infoconnection.query("SELECT password FROM user_info WHERE user = '"+name+"'",function (err,res,fields) {// 当没有查找到密码时if(err) {throw errreturn;}else{if(res.length>0){//将数据库传来的数据转化为JSON格式let uPasswordString = JSON.stringify(res);let userPassword = JSON.parse(uPasswordString)[0].password;if(userPassword == pwd){//将数据库的密码userPassword 和服务端 传来的密码相等response.send({statusCode:200, msg:'登录成功'})return}else{response.send({ statusCode:0, msg:'密码不正确'})  return} }} //如果没有数据，说明用户名填写错误 response.send({ statusCode:0, msg:'用户名不正确'})   
});
module.exports = router;

此时，就可以在客户端找到返回数据

注册页面类似，以下是完整代码
文件结构

vue login.vue

<template><div id="login"><van-form @submit="onSubmit"><van-fieldv-model="userName"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/><div style="margin: 16px;"><van-button round block type="info" native-type="submit">提交</van-button></div></van-form></div>
</template><script>
import axios from 'axios'
import VueAxios from 'vue-axios'
import { Dialog } from 'vant';
export default {data() {return {userName: '',password: '', };},methods: {onSubmit () {let data = {userName: this.userName,userPassword: this.password}this.axios.get('/api/login', {params: data}).then((res) => {console.log(res)var code = res.data.statusCodevar msg = res.data.msgif( code == 200) {//登录成功，直接跳转首页this.$router.push('/')}else {//这里用的vant框架，弹出框，错误提示Dialog.alert({message: msg,}).then(() => {// on close});}})}},
}
</script>

vue register.vue

<template><div id="register"><van-form validate-first @submit="onSubmit"><!-- 头像上传 --><!-- <van-uploader :after-read='onRead'  v-model="fileList" multiple :max-count='1' image-fit='cover'/> --><!-- 通过 pattern 进行正则校验 --><van-fieldv-model="username"name="pattern"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><!-- 通过 validator 进行函数校验 --><van-fieldv-model="password"type="password"name="validator"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/><!-- 通过 validator 进行异步函数校验 --><van-fieldv-model="email"name="asyncValidator"placeholder="邮箱":rules="[{ required: true, message: '请填写邮箱' }]"/><van-field name="radio" label="身份选择"><template #input><van-radio-group v-model="radio" direction="horizontal"><van-radio name="1">用户</van-radio><van-radio name="2">卖家</van-radio></van-radio-group></template></van-field><div style="margin: 16px;"><van-button round block type="info" native-type="submit">提交</van-button></div></van-form></div>
</template><script>
import { Dialog } from 'vant';
export default {data() {return {username: "",password: "",email: "",radio: "1",};},methods: {onSubmit() {let data = {userName: this.username,userPassword: this.password,email: this.email,radio: this.radio,}this.axios.get('/api/register', {params: data}).then((res) => {var code = res.data.statusCodevar msg = res.data.msgif( code == 200) {Dialog.alert({message: msg,confirmButtonText:'去登录',}).then(() => {confirm:this.$router.push('/login')});}else {Dialog.alert({message: msg,}).then(() => {confirm:this.$router.go(0)});}})},// 头像图片传到后端// onRead (file) {//   let data = new FormData();//   data.append("file", file.file);//很重要 data.append("file", file);不成功//   this.axios.post('/api/upload',data, {//       headers: { "content-type": "multipart/form-data" }//   }).then(res => {//     console.log(res.data)//   })// }}
};
</script>

node app.js

var express = require('express')
var app = express()
var bodyParser = require('body-parser')
let loginRouter = require('./routes/login');
let registerRouter = require('./routes/register')// 登录路由
app.use('/api/login',loginRouter)
// 注册路由
app.use('/api/register',registerRouter)app.listen(3000,function(){console.log("服务端正在运行")
})

node login.js

let express = require('express');
let router = express.Router();
// var CircularJSON = require('circular-json');
//————————————连接数据库——————————
var mysql = require('mysql');
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '',database : 'bookshop'
});connection.connect((err)=>{if(err){console.log(err)}else{// console.log("数据库连接成功")}});
//获取客户端数据
router.get('/', function(req, response, next) {// 把从客户端传来的名字，密码赋值到新的变量let name = req.query.userNamelet pwd = req.query.userPassword// 通过名字查询数据库用户表得到密码connection.query("SELECT password FROM user_info WHERE user = '"+name+"'",function (err,res,fields) {// 当没有查找到密码时if(err) {throw errreturn;}else{    if(res.length>0){//将数据库传来的数据转化为JSON格式let uPasswordString = JSON.stringify(res);let userPassword = JSON.parse(uPasswordString)[0].password;if(userPassword == pwd){//将数据库的密码userPassword 和服务端 传来的密码相等response.send({statusCode:200, msg:'登录成功'})return}else{response.send({ statusCode:0, msg:'密码不正确'})  return} }} //如果没有数据，说明用户名填写错误 response.send({ statusCode:0, msg:'用户名不正确'})    });   
});
module.exports = router;

node register.js

let express = require('express');
let router = express.Router();
//————————————连接数据库——————————
var mysql = require('mysql');
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '',database : 'bookshop'
});connection.connect((err)=>{if(err){console.log(err)}});//获取客户端数据
router.get('/', function(req, response, next) {let name = req.query.userName// console.log(name)let pwd = req.query.userPasswordlet email = req.query.emaillet radio = req.query.radio// 查找数据表中是否已经存在名字connection.query("SELECT * FROM user_info WHERE user = '"+name+"'",function (err,res,fields) {let uName = res[0]if(uName==undefined){//    不存在时插入数据connection.query('INSERT INTO user_info SET  ?',{user:name,password:pwd,email:email,role:radio},function(err,data){if(err){response.send({statusCode:0, msg:'注册失败，请重试'})return } else {response.send({statusCode:200, msg:'注册成功'})return } })}else{response.send({statusCode:0, msg:'用户名已存在'})
}
})});
module.exports = router;

不知道为什么，response.send()的内容总是有问题，明明if语句执行过来，else里的内容也会执行，好在磕磕绊绊也算完整，等有时间再继续优化。