脚本宝典收集整理的这篇文章主要介绍了

Node+Mysql+Vue实现登录注册功能 – 入门(内含HTTPS环境)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

写在前面

很多前端小伙伴都尝试着使用vue构建前端项目时,使用的数据都是假数据,但是注册登录功能很难使用假数据进行测试,这篇文章就手把手教你如何使用node做后端,mysql做数据库实现登录注册功能。本文基于vue-cli入门(四)——vue-resource登录注册实现Vue+MySQL+Express小试牛刀进行拓展。

Mysql配置

Node+Mysql+Vue实现登录注册功能 – 入门(内含HTTPS环境)-脚本宝典
对于没有接触过数据库的小伙伴,我推荐下载XAMPP
这个比较轻量级,简单易用。具体步骤如下

  1. 列表项目
  2. 创建数据库
  3. 进入xampp - mysql - bin - mysql.exe
  4. 输入以下命令:

    use test;
    create table user(   id int not null primary key auto_increment,   username varchar(100) not null,   password varchar(100) not null    )ENGINE=InnoDB DEFAULT CHARSET=utf8;  
  5. 之后点击xampp的Admin,你会发现在test下有个user表,这样你就已经建好数据库了

Node 文件

在根文件夹下新建一个server文件,
文件结构如图

|-- build |-- config |-- node_modules |-- server   |-- api     |-- userApi.js   |-- db.js   |-- index.js   |-- sqlMap.js |-- src |-- static |-- .babelrc |-- .editorconfig |-- .gitignore |-- index.html |-- package.json |-- README.md

db.js----用来添加mysql配置和index.js----Express服务器入口文件都不需要更改
原代码

sqlMap.js----SQL语句映射文件,以供api逻辑调用

var sqlMap = {     user: {         add: 'insert into user( username, password) values ( ?, ?)',         select_name: 'SELECT * from user where username = ?',    //查询 username         select_password: 'SELECT * from user where password = ?'      //查询 password     } } module.exports = sqlMap;

api/userApi.js ---- 测试用api示例

var models = require('../db'); var express = require('express'); var router = express.Router(); var mysql = require('mysql'); var $sql = require('../sqlMap'); // 连接数据库 var conn = mysql.createConnection(models.mysql); conn.connect(); var jsonWrite = function(res, ret) {     if(typeof ret === 'undefined') {         res.send('err')     } else {         //res.json(ret);         res.send('ok')     } }; // 增加用户接口 router.post('/addUser', (req, res) => {     var sql_name = $sql.user.select_name     var sql = $sql.user.add;     var params = 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, result)                 }             })         }else {             res.send('-1')    //当前注册username与数据库重复时,data返回-1         }     })      });  //查找用户接口 router.post('/selectUser', (req,res) => {     var sql_name = $sql.user.select_name;     var sql_password = $sql.user.select_password;     var params = req.body;     conn.query(sql_name,params.username,function(err, result) {         if(err) {             console.log(err)         }         if(result[0]===undefined) {             res.send('-1')    //查询不出username,data返回-1         }else {             conn.query(sql_password,params.password, function(err, result) {                 if(err) {                     console.log(err)                 }                 if(result[0]===undefined) {                     res.send('0')    //username正确后,password错误,data返回 0                 }else {                     jsonWrite(res, result);                 }             })         }     }) }); module.exports = router;

注册功能

Vue-cli login-vue注册功能修改

register(){             if(this.newUsername == "" || this.newage == ""){                 alert("请输入用户名或密码")             }else{                 let data = {'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 = true                         this.username = ''                         this.age = ''                     }                     else if(res.status == 200){                         this.tishi = "注册成功"                         this.showTishi = true                         this.username = ''                         this.age = ''                          /*注册成功之后再跳回登录页*/                         setTimeout(function(){                             this.showRegister = false                             this.showLogin = true                             this.showTishi = false                         }.bind(this),2000)                     }                 })             }         }

其他

设置代理与跨域

原代码是正确的。
但是我自己就是代理不成功,google了一下也没有解决办法,
返回看评论可以发现他们也一样,但是如果你仔细读评论,就可以找到解决办法:需要启动express服务器

2017/10/31补充:
使用第三方接口时,别人设置跨域限制时,需要利用反向代理
推荐 npm http-proxy-middleware
在工作场景中,一般是前后端分离,后端给接口完成注册登录功能

  1. 在server文件夹下shift+右键 ,选择在此打开命令窗口
  2. 输入 npm install -g nodemon 回车
  3. 下载完成后输出 nodemon index
  4. 启动服务器后,才能访问

图片描述

我的一个完整项目,欢迎Watch和start!

仿拉勾网移动端页面
所以得坑都填完了,本文仅适用于前端没有接触后端的小伙伴。
当你读到这里的时候并且自己尝试着做了之后,恭喜你已经入门全栈了。
最后,再次感谢海岛心heyyuanyuanispeak

HTTPS

代码库更新:添加HTTPS环境支持
如何在5分钟内让HTTPS在本地开发环境中运行
具体代码参见commit
⚠️如果不想搭建https环境请删除指定commit代码


参考

总结

以上是脚本宝典为你收集整理的

Node+Mysql+Vue实现登录注册功能 – 入门(内含HTTPS环境)

全部内容,希望文章能够帮你解决

Node+Mysql+Vue实现登录注册功能 – 入门(内含HTTPS环境)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过