用node+WebSocket+MySQL+vue仿做学习通的一些功能（一）：用户登录和注册页面的实现

配置webpack已经写了很多次了，这次就不写了：https://blog.csdn.net/ziyue13/article/details/121318279

先新建一个数据库test6

CREATE DATABASE test6;

新建一个用户表，储存全部的用户信息

CREATE TABLE users(id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,name1 VARCHAR(20) COMMENT '用户名',pass VARCHAR(60) COMMENT '密码'
)

新建app.vue、zhuce.vue、login.vue组件，并且配置好路由 router.js

import Vue from 'vue'
import Router from 'vue-router/dist/vue-router.js'
import login from '../components/login.vue'
import zhuce from '../components/zhuce.vue'
Vue.use(Router);
export default new Router({routes: [{path: '/',redirect:'/login'},{path: '/login',component: login},{path: '/zhuce',component: zhuce},]
})

app.vue:

<template><router-view></router-view></template><script>
</script><style></style>

<template><div class="div1"><form action="/login" method="post"><div class="div2">用户名：<input type="text" name="username" placeholder="请输入用户名" value=""></div><div class="div2">密码：<input type="password" name="pass" placeholder="请输入密码" value=""></div><div class="div3"><div class="div31"><button id="login">用户登录</button></div><div class="div32"><router-link to="/zhuce">用户注册</router-link></div></div></form></div>
</template><script>
</script><style>.div1{width: 500px;height: 300px;border: 1px solid #00FFFF;margin: 50px auto;}.div2{width: 300px;height: 50px;margin: 50px auto;border: 1px solid transparent;}.div3{width: 300px;height: 50px;margin: 50px auto;border: 1px solid transparent;}.div31{float: left;}.div32{float: right;}
</style>

zhuce.vue：

<template><div class="div1"><form action="/login" method="post"><div class="div2">用户名：<input type="text" name="username" placeholder="请输入用户名" value=""></div><div class="div2">密码：<input type="password" name="pass" placeholder="请输入密码" value=""></div><div class="div3"><div class="div31"><button id="login">用户登录</button></div><div class="div32"><router-link to="/zhuce">用户注册</router-link></div></div></form></div>
</template><script>
</script><style>.div1{width: 500px;height: 300px;border: 1px solid #00FFFF;margin: 50px auto;}.div2{width: 300px;height: 50px;margin: 50px auto;border: 1px solid transparent;}.div3{width: 300px;height: 50px;margin: 50px auto;border: 1px solid transparent;}.div31{float: left;}.div32{float: right;}
</style>

服务器创建连接MySQL：

var mysql = require('mysql');
var connection = mysql.createConnection({     host     : 'localhost',       user     : 'root',              password : '1234',       port: '3306',                   database: 'test6'
}); //连接MySQL
connection.connect();

创建一个请求路径为/zhuce的post请求，接收请求参数，并加密保存到数据库之中

app.post('/zhuce',async (req,res)=>{const {username,pass} = req.body;//生成盐值const salt = await bcrypt.genSalt(10);//密码加密const result = await bcrypt.hash(pass,salt);var  addSql = 'INSERT INTO users(name1,pass) VALUES(?,?)';var  addSqlParams = [username, result];connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);return;}        console.log('--------------------------INSERT----------------------------');//console.log('INSERT ID:',result.insertId);        console.log('INSERT ID:',result);        console.log('-----------------------------------------------------------------\n\n');  });res.redirect('/index.html');
})

数据库结果：

再写一个请求路径为login的post请求：

app.post('/login',async (req,res)=>{const {username,pass} = req.body;//拼接查询数据库代码var sql = "select pass from users where name1="+"'"+username+"'";var k;connection.query(sql, function (err, result, fields) {if(err){//err.message会返回错误的信息console.log('[SELECT ERROR] - ',err.message);return;}console.log('--------------------------SELECT----------------------------');//result的结果是一个数组对象const flag = bcrypt.compare(pass,result[0].pass);if(flag){//设置session对象保存登录状态//设置session属性req.session.flag=1;res.send('登录成功');}else{res.send('登录失败');}console.log('------------------------------------------------------------\n\n');  });})

注意：因为数据库代码是异步代码，所以做查询之后的功能需要写在查询之内

设置允许跨域

//设置允许跨域
app.all("*",function(req,res,next){//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin","*");//允许的header类型res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");res.header("Access-Control-Allow-Credentials",true);//跨域允许的请求方式res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("Content-Type","application/json;charset=utf-8")if (req.method.toLowerCase() == 'options')res.sendStatus(200);  //让options尝试请求快速结束elsenext();
});

用node+WebSocket+MySQL+vue仿做学习通的一些功能（一）：用户登录和注册页面的实现相关推荐

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-6.用户登录(二),token验证技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录，密码的bcrypt（hash）加密与验证
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-5.用户登录,密码的bcrypt(hash)加密与验证技能学习:学习使用php(tp6框架) + vue.js,开发前端全 ...
PHP+Mysql 实现用户登录，注册界面
目标: 实现用户的登录 .注册 .修改密码.重置密码.添加书签,显示书签,删除书签等功能进一步目标: 实现对用户输入信息的控制,具体表现在对注册信息.登录信息的的过滤,具有简单的防sql注入 ...
从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客一.主体布局 ...
【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录
vue实现用户长时间不操作,提示用户登录已过期请重新登录 1.实现思路使用 mouseover事件来监测是否有用户操作页面,然后写一个定时器间隔特定时间检测是否长时间未操作页面,如果是清除token ...
前端开发学习--登录和注册页面设计（html和css，可完成两个页面点击切换）
今天学习了登录和注册页面的设计,主要是HTML和CSS部分,注册和切换采用了Js代码进行,后面将通过js进行填写内容的验证,进而可通过JSP跳转到Servlet进行DAO数据的校验,这属于后端部分了. ...
用python和mysql做注册登录系统_python3.6 下连接mysql数据库实现用户登录与注册
在python3.6中连接数据库只能使用pymysql包,安装方法直接通过pip install pymysql安装即可,较为方便. 初学者一定要做的便是用户的注册与登录,同时牵涉到数据库的相关操作, ...
Vue项目实战之电商后台管理系统(一) 用户登录模块
目录一.项目概述二.项目初始化 2.1 前端项目初始化步骤 2.2 后台项目的环境安装配置三.用户登录/登出功能实现 3.1 登录功能概述 3.1.1 登录状态保持 3.1.2 登录逻辑: 3. ...
尚硅谷谷粒学院学习笔记9--前台用户登录，注册，整合jwt，微信登录
用户登录业务单点登录(Single Sign On),简称SSO. 用户只需要登陆一次就可以访问所有相互信任的应用系统单点登录三种常见方式 session广播机制实现使用redis+cookie ...
【安卓SDK学习之anyChatSDK】 1_1 实现用户登录和房间进出(根据官方HelloAnyChat的demo整理的简要的开发流程)
AnyChat SDK是一套多媒体即时通讯平台库,只需要几个简单的API调用,即可实现多个用户之间的语音.视频.文字交互.AnyChat支持"一对一"."一对多" ...

用node+WebSocket+MySQL+vue仿做学习通的一些功能（一）：用户登录和注册页面的实现

先新建一个数据库test6

新建一个用户表，储存全部的用户信息

新建app.vue、zhuce.vue、login.vue组件，并且配置好路由 router.js

服务器创建连接MySQL：

创建一个请求路径为/zhuce的post请求，接收请求参数，并加密保存到数据库之中

设置允许跨域

用node+WebSocket+MySQL+vue仿做学习通的一些功能（一）：用户登录和注册页面的实现相关推荐

最新文章

热门文章