用node和express连接mysql实现登录注册的实现代码


Posted in Javascript onJuly 05, 2017

为了数据库课设,打算后台用node搭建,前台用vue搞个博客出来(因为前段时间在学啊)。本来node不想用框架,喜欢先打好基础的,奈何3个星期要把他做完和应付各种考试,所以最后还是用了express,大大简化我的学习成本。

数据库我选了比较“正式”的MySQL,代码方面这个比MongoDB复杂一些。而且这是数据库课设,如果用mongodb老师肯定让我挂了,因为没有涉及到设置主键、外键等。

先在主入口js引入登录注册业务js和发起一个监听端口

var express = require('express');
var user = require('./controll/user'); 

var app = new express();

app.use(express.static('public')); //静态资源的入口
app.use('/user',user);    //这样写是为了以后如果改变了请求路径,也不用改逻辑js而是改这行的路径即可

var server = app.listen(3000)

html

$("#signup").click(function(){
  $.ajax({
   url: "/user/signup",
   type: 'post',
   data: $("#formid").serialize(),
   success: function(data) {
    if(data.status == 99999) {
     alert("3秒后跳转到首页");
     setTimeout(function() {
      location.href='http://'+window.location.host+'/html/index.html';
     },3000)
    }else {
     alert('登录名或密码错误')
    }
   }
  })  
 })


 $("#register").click(function(){
  $.ajax({
   url: "/user/register",
   type: 'post',
   data: $("#formRegister").serialize(),
   success: function(data) {
    console.log(data);
    if(data.status == 99999) {
     alert("注册成功")
    }else {
     alert("登录名已经有人用")
    }
   }
  })  
 })

user.js

var mysql = require('mysql');
var express = require('express');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var session = require('cookie-session');

function select(sql) {
 var promise = new Promise(function(resolve,reject) {
  var result = null;
  var mysql = require('mysql');
  var connection = mysql.createConnection({
   host: 'localhost',
   user: 'root',
   password: 'root'
  });

  connection.connect();
  connection.query("USE test");
  connection.query(sql, function (err, results, fields) { 
   if (err) { 
    console.log("err");
    reject(err); 
   }else {
    console.log("yes");
    if(results.length > 0) {
     resolve({status: 99999});
    }else {
     resolve({status: 00000});
    }   
   } 
   } 
  );
  connection.end(); 
 })

 return promise; 
}


var router = express.Router();
router.use(bodyParser.urlencoded({ extended: true }));
router.use(cookieParser())
router.use(session({
 secret: 'blog'
}))
router.use(function timeLog(req,res,next) {
 var _user = req.session.user;
 if(_user) {
  //router.locals.user = user;
 }
 next();
})

//登录
router.post('/signup',function(req, res) {
 var _user = req.body.user;
 var name = _user.name;
 var password = _user.password;
 select('SELECT * FROM name WHERE name = "'+ name + '" AND password = "' + password + '";').then(function(data) {
  //session存user name和userid
  req.session.user = name;
  data.status > 50 ? data.url = '/html/index.html' : null;
  res.json(data);
  res.end();
  req.redirect("/");
 }).catch(function(err){})

})

//注册
router.post('/register',function(req, res) {
 var _user = req.body.user;
 var name = _user.name;
 var password = _user.password;
 console.log(name+"  "+password)
 select('SELECT * FROM name WHERE name = "'+ name + '";')
  .then(function(data) {
   if(data.status == 99999) {
    console.log("已有此用户名")
    res.json({status:00000});
    res.end();
   }else {
    select('INSERT INTO name(name,password) VALUES ("'+name+'", "'+password+'");')
    .then(function(data) { 
     res.json({status:99999});
     res.end();
    }).catch(function(err){})
   }   
  }).catch(function(err){

  })

});

//退出
router.get("/logout",function(req, res) {
 delete req.session.user;
 res.end();
})

//获取session
router.get("/session",function(req, res) {
 console.log("user in session");
 console.log(req.session.user);
 res.json({user:req.session.user});
 res.end();
})

module.exports = router;

代码很多,不一一解释了,如果以后有空再补回。先说几个点

  1. 我把连接数据库的逻辑都包在了select方法里。因为最后要把查询到的结果返回回去,所以就要return,但是!!查询数据库是异步操作!!所以直接在select函数的最后一行return是没有效果的,所以就算return都要在查完后的那个回掉函数,但是在回掉函数return 的话是不能return到select函数外的。解决方案就是es6的Promise。详细的就自己学相关知识了。
  2. 拿到查询后的结果,登录与注册要分清楚逻辑,什么时候是成功的什么情况是失败的。注册这里我掉坑了。因为名不能重复,所以要先查询,如果能查到放回的是status=99999。刚开始我没理解清楚Promise,以为查询不成功就是走reject(err)其实并不是,查询不成功返回的是[],执行的还是resolve(),区分就只能看他返回来的status。
  3. 还有保存登录状态,就是session,这里我也没怎么弄懂。但是这一步可以放在router的中间件执行,这样每个经过这个router就能执行那一步了。如果存在req.session.user的时候,就把当前的locals.user赋值。
  4. 导致我注册那里摔了很久还爬不上来除了没理解清楚Promise外,还有mysql不能输入中文。当时我没有设utf8,所以一直报错,走的是reject(err)。不只只把mysql的语言设置为utf8,还要注意navcicat新建属性的时候的字符类型,不然字符冲突搞得不能插入语句成功。

最后来个展望未来。

文章页我打算用jade渲染整个文章html再返回出来。因为文章嘛,要变的其实也不多,而且用vue的话,个人感觉像评论啊这种小组件用比较好,文章都是静态的,所以先在后端渲染出来直接返回,还不用再请求一遍再渲染。

想了想进度了能力,除了增删改查文章,我觉得我的博客也只能有查看和评论文章的功能,不知道vue哪里能用。。。可能我也还没很好的接触和理解vue毕竟我才学到vur-router。应该大的功能就是做一个简洁版markdown吧

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 #Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 #jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 #jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 #jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
详解vue express启动数据服务
Jul 05 #Javascript
You might like
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
json原理分析及实例介绍
2012/11/29 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python