node+mysql+express实现登录、注册功能
18.3、mysql+node实现注册功能(接着18.1
)
经验:前端人员需要注意这个
需求
1.失焦时,查询电话号码是否存在,若存在,显示已被注册
2.当电话号码、密码、确认密码全部通过才能注册到数据库
步骤
1.给项目安装数据库
2.实现需求一
1.更改register.html为如下,这样才能提交数据过去
2.修改register.js
思路
:把前端输入的手机号码传到后端,后端拿这个值查询数据,若返回的是空数组
,则没注册,否者为注册了的
注意
result为数组 若长度为0,没有注册,长度不为0,为注册了
register.js
var express = require('express');
var router = express.Router();/* GET users listing. */
router.get('/', function(req, res, next) {res.render('register');
});// 检测电话号码是否被注册
router.post('/selectUser', function(req, res, next) {// console.log(req.body)//获取前端当前需要注册的用户名var username=req.body.usernameconsole.log(username)// 连接数据库查询该用户名是否已经存在// 引入mysqlvar mysql = require('mysql'); // 创建mysql的连接(配置连接数据库的基本信息)var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : 'root', //自己设置的密码 port: '3306', database: 'h5' //数据库名}); // 连接数据库connection.connect();var sql = 'SELECT * FROM user where username=?';var sqlparams=[username]//查connection.query(sql,sqlparams,function (err, result) {if(err) return console.log(err)// result为数组 若长度为0,没有注册,长度不为0,为注册了// console.log(result)// res.send()发送数据到前端, 只要后端有输出 则为ajax请求成功的返回值if(result.length){// 注册了res.send('1')}else{//没注册res.send('2')}});connection.end();
});
module.exports = router;
此时效果图
- 3.实现需求二
为了全部正确才能跳转,在register.js中设置三个值全为false
接下来就是全部正确后通过ajax发送数据给后台,后台拿到值后写进数据库 - 4.总结:
1)实现手机号通过,对应的flag为true的情况只能是在未被注册时
,而为false:不满足条件赋值为true
2)第二次密码不需要写正则,只判断是否与密码相等
3)实现手机号、密码、确认密码全部通过后点击注册才能有用更简单的写法
4)ajax请求和点击事件会冲突,即提交表单的时候用submit,不用ajax
18.4、mysql+node+express实现登录功能
前期准备 安装了mysql node express
效果图
功能需求
点击登录后,如果输入的信息与数据库不匹配,不会跳转到登录成功界面,否者,跳转到登录成功页面
思路:再表单里面把手机号、密码传到后端,后端根据手机号查询数据库,然后比较传过去的密码和查出来的密码,若相同,渲染页面,否者,你输入的密码或者手机号错误
步骤
1.更改form表单的action和提交方式
2.因为action指向的/loginsuccess,所以需要再routes新建/loginsuccess,然后引入app.js,再app.js使用
3.先在loginsuccess.js里面写让页面渲染
var express = require('express');
var router = express.Router();/* GET home page. */
router.get('/', function(req, res, next) {res.render('loginsuccess');
});router.post('/', function(req, res, next) {//res.render渲染页面res.render('loginsuccess')
});module.exports = router;
- 4.上一步过后就可以连接数据库了,然后查找输入的手机号对应的密码,并比较两个密码,一样就渲染页面
总结
1)自己第一次写这个功能,经验不足,反应慢
2)ajax请求要在局部刷新的时候用,当有表单的时候,一般提交给action的路径,不要用ajax
node+mysql+express实现登录、注册功能相关推荐
- vue+node前后端实现登录注册功能
使用vue cli3脚手架搭建一个vue项目 创建一个vue_cms项目,没安装脚手架全局安装即可,安装过程选择默认的即可 vue create vue_cms 安装路由,axios,完成后启动项目, ...
- node mysql登录注册_图解NodeJS实现登录注册功能
该Demo根据菜鸟教程的练手项目,请提前到菜鸟教程的官网查看nodejs的相关教程,根据教程实际操作一遍,然后自己动手去实现登录.注册功能,此Demo只作参考,不符合前端相关规范. 使用的技术栈 no ...
- Django练习——基于Mysql的登录注册功能界面(django模型、模板、表单简单应用)
目录 1.创建 2.配置Mysql (1)连接数据库驱动 (2)创建表格 (3)创建迁移文件并同步到数据库 3.admin后台 (1)创建超级用户 (2)注册模型login_msg 4.路由与视图 4 ...
- PHP个人相册管理系统源码,实现了相册分类和相册分组,还有相册图片管理,数据库采用mysql,实现了登录注册功能
PHP个人相册管理系统,实现了相册分类和相册分组,还有相册图片管理,数据库采用mysql,实现了登录注册功能.PHP个人相册源码,相册管理系统,PHP相册管理系统,界面美观简单,适合用来当做课程设计或 ...
- vue+node---使用element框架实现的前后台用户登录注册功能
为了更进一步清晰地了解前台数据向后台提交的过程,更好地加强巩固前端开发学习,整理了基础的[前后台用户登录注册功能]实现代码.后台通过node.js开发,数据存储在sqlite中,前台vue+eleme ...
- 注册登录案例用MVC和mysql_用MVC模式实现简单用户登录注册功能
Model2模式 Jsp+Servlet+JavaBean MVC:开发模式 M:Model 模型层 ----> JavaBean V:View 视图层 ----> Jsp C:Contr ...
- spring 3.x 学习笔记_spring mvc、spring jdbc 实现网站的登录注册功能
使用spring mvc.spring jdbc 实现网站的登录注册功能 1. 据业务模型 创建model 一般实现序列化 2. 用spring 注解(@Repositor ...
- MVC框架实现用户的登录注册功能
MVC是什么? MVC,全称model view controller-模型,视图,控制器 model是将数据库中的表到Java中变成实体类 view是编写JSP页面 controller是用来业务逻 ...
- php注册登录描述,基于PHP实现用户登录注册功能的详细教程
教程前先给大家看看小编的实现成果吧! 图1: 图2: 图3: 教程: 实现这个功能我们需要五个php文件: login.php (登录界面,如图2) 登录 登录页面 用户名: required=&qu ...
最新文章
- stream filter_Stream 流实践
- MyBatis——动态SQL讲解
- 在Sublime Text 3上安装代码格式化插件CodeFormatter
- [leetcode]203. Remove Linked List Elements链表中删除节点
- python基础知识 - Day4
- 【问题记录】RIDE-1.7.3.1控制台及日志中文乱码处理
- 为什么叫光呆公式光_光镊力学理论简析
- 从零开始,DIY一个jQuery(2)
- python入门经典100例-Python3经典100例(Python3入门习题) 含答案 doc版
- 4K视频在线看,网速跟不上怎么办?
- day 4 基本数据类型/list列表的操作/元组/range数数
- 贝叶斯概率推断:概率分布
- pcb天线和纯铜天线_PCB天线是什么
- asp服务器组件安装包,IIS安装asp组件:JMail 邮件收发组件
- 南京大学计算机实验教程,南京大学 计算机系统基础 课程实验 2018(PA0-1)
- Express4.X版本修改默认模板jade为ejs并且试用html为视图模板后缀名
- 使用友盟社会化分享IOS版SDK分享纯图片到微信
- 西安理工大学计算机视觉与应用,关于举办计算机视觉与图像处理应用最新进展报告会的通知...
- 可以免费发布本地生活分类信息的网站大全
- pscp上传文件至服务器