前面写过，很多前端小伙伴在尝试使用Vue搭建前端项目时，使用的数据都是假数据，但注册和登录功能非常简单。很难使用假数据进行测试。本文将教大家如何使用node作为后台，mysql作为数据库，实现登录注册功能。本文基于vue-cli入门（四）——vue-resource登录注册实现及Vue+MySQL+Express小测展开。Mysql配置对于没有接触过数据库的朋友，推荐下载XAMPP，比较轻量级，好用。下面列出创建数据库的具体步骤。输入xampp-mysql-bin-mysql.exe并输入以下命令：usetest;createtableuser(idintnotnullprimarykeyauto_increment,usernamevarchar(100)notnull,passwordvarchar(100)notnull)ENGINE=InnoDB默认字符集=utf8；点击xampp的Admin后，会发现有一个正在测试的user表，所以你已经建立了一个数据库Node文件，并在根文件夹下新建了一个server文件。文件结构如下图|--build|--config|--node_modules|--server|--api|--userApi.js|--db.js|--index.js|--sqlMap。js|--源码|--static|--.babelrc|--.editorconfig|--.gitignore|--index.html|--package.json|--README.mddb.js--用于添加mysql配置和索引。js----Expressserver入口文件不需要改原代码sqlMap.js----sql语句映射文件，用于api逻辑调用varsqlMap={user:{add:'insertintouser(username,password)values(?,?)',select_name:'SELECT*fromuserwhereusername=?',//查询用户名select_password:'SELECT*fromuserwherepassword=?'//查询密码}}module.exports=sqlMap;api/userApi.js----用于测试的api示例varmodels=require('../db');varexpress=require('express');varrouter=express.Router();varmysql=require('mysql');var$sql=require('../sqlMap');//连接数据库varconn=mysql.createConnection(models.mysql);conn.connect();varjsonWrite=function(res,ret){if(typeofret==='undefined'){res.send('err')}else{//res.json(ret);res.send('ok')}};//增加用户接口router.post('/addUser',(req,res)=>{varsql_name=$sql.user.select_namevarsql=$sql.user.添加；varparams=req.body；console.log(params)；conn.query(sql_name,params.username,function(err,result){if(err){console.log(err)}if(result[0]===undefined){conn.query(sql,[params.username,params.password],function(err,result){if(err){console.log(err)}if(result){jsonWrite(res,结果)}})}else{res.send('-1')//当当前注册的用户名与数据库相同时，data返回-1}})});//找到用户界面router.post('/selectUser',(req,res)=>{varsql_name=$sql.user.select_name;varsql_password=$sql.user.select_password;varparams=req.body;conn.query(sql_name,params.username,function(err,result){if(err){console.log(err)}if(result[0]===undefined){res.send('-1')//找不到用户名，数据返回-1}else{conn.query(sql_password,params.password,function(err,result){if(err){console.log(err)}if(result[0]===undefined){res.send('0')//用户名后正确，密码错误，数据返回0}else{//ServerSet-Cookie设置过期时间7天res.cookie('isAuth',1,{maxAge:7*24*60*1000})jsonWrite(res,result);}})}})});module.exports=路由器；注册函数vue-clilogin-vue注册函数修改register(){if(this.newUsername==""||this.newage==""){alert("请输入用户名或密码")}else{letdata={'username':this.newUsername,'age':this.newage}this.$http.post('/api/user/addUser',data).then((res)=>{console.log(res)/*接口传值是（-1，用户已经存在）*/if(res.data==-1){this.tishi="账号已经存在"this.showTishi=truethis.username=''this.age=''}elseif(res.status==200){this.tishi="注册成功"this.showTishi=truethis.username=''this.age=''/*跳转注册成功后回到登录页面*/setTimeout(function(){this.showRegister=falsethis.showLogin=truethis.showTishi=false}.bind(this),2000)}})}}原代码设置代理和跨域是正确的，但是代理不成功我，所以我谷歌了它根本没有解决方案。回头看评论会发现是一样的，但是仔细看评论可以找到解决办法：需要启动快递服务器2017/10/31补充：使用第三方接口时，其他设置跨域限制使用反向代理时，需要推荐npmhttp-proxy-middleware。在工作场景中，一般是前后端分离，由后端完成接口的注册登录功能。在server文件夹中shift+右键，选择在这里打开命令窗口，输入npminstall-gnodemon下载完成后，输出nodemon索引，启动服务器，就可以访问我的一个完整的项目了。欢迎观看并开始！模仿拉勾网的移动端页面，所以坑都填完了。本文仅适用于没有接触过前端的人。结束伙计。当你读到这里并尝试自己动手时，恭喜你，你已经进入全栈了。最后再次感谢海岛新嘿和yuanyuanispeakHTTPS代码库更新：添加HTTPS环境支持具体代码见commit，如何让HTTPS在本地开发环境5分钟内跑起来??如果不想搭建https环境请删除指定commit代码参考[1]vue-cli介绍(4)-vue-resource登录注册实现链接1[2]Vue+MySQL+Express小测试链接2[3]接口完整代码[4]HowtomakeHTTPSin本地开发环境5分钟内运行1.中文翻译地址2.原文地址medium.com
