本文为后端练兵内容,重复造轮子,重复造轮子才能有经验,才能生出花来。

本次练兵,采用的是数据库保存账户密码,后端通过查数据库的方式,实现账号和密码的校验。

如果验证成功,将登陆状态保存在session上面,然后重定向首页。

如果session过期重定向到登陆页面。

前端登陆页面,访问路径/login

<div>
<input type="text" id="username" placeholder="Search" name="username">
<input type="text" id='password' name="password" value="">
</div>
<button id="login">Submit</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 可选地,上面的请求可以这样做
let btn = document.querySelector("#login")
console.log(btn)
btn.addEventListener('click', function () {
let username = document.querySelector('#username').value
let password = document.querySelector('#password').value
axios.get('/users/login', {
params: {
username: username,
password: password
}
})
.then(function (res) {
if (res.data.status === ) {
alert('登录成功')
location.href='/'
} else{
alert('登录失败')
}
})
.catch(function (error) {
console.log(error);
});
}) </script>

后端路由

var express = require('express');
var router = express.Router();
var exec = require('../db/mysql')
var exec = exec.exec
/* GET users listing. */
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});
//登录校验接口 /users/login
router.get('/login', function (req, res, next) {
let name = req.query.username, pwd = req.query.password
let sql = `select * from user where username='${name}' and password=${pwd}`
exec(sql).then((result) => {
if (result.length > ) {
req.session.islogin =
res.json({
status: ,
msg: '操作成功',
result: []
})
} else {
req.session.islogin =
res.json({
status: ,
msg: '查询失败',
result: []
})
}
}).catch((err) => {
res.json({
status: ,
msg: '登录失败',
result: []
})
})
});
module.exports = router;

数据库连接配置/db/mysql

var mysql = require('mysql');
var con = mysql.createConnection({
host: 'localhost',
port: '',
user: 'root',
password: '',
database: 'test'
}); con.connect(); function exec(sql){
return new Promise((resolve,reject)=>{
con.query(sql,(err,result)=>{
if(err){
reject(err)
return
}
console.log(result,'res')
resolve(result)
})
})
} module.exports={
exec
}

数据库采用的mysql,账号和密码可以自行建表设计。

代码很粗糙,主要是效果。

使用express-session实现登录效果的更多相关文章

  1. express session 实现登录

    https://www.cnblogs.com/mingjiatang/p/7495321.html Express + Session 实现登录验证   1. 写在前面 当我们登录了一个网站,在没有 ...

  2. Express + Session 实现登录验证

    1. 写在前面 当我们登录了一个网站,在没有退出登录的情况下,我们关闭了这个网站 ,过一段时间,再次打开这个网站,依然还会是登录状态.这是因为,当我们登录了一个网站,服务器会保存我们的登录状态,直到我 ...

  3. nodejs+express+mongodb实现登录注册

    nodejs+express+mongodb实现登录注册 1 简介 登录注册功能使用nodejs+express+mongodb完成,其中对mongodb的操作使用mongoose完成,对mongod ...

  4. express session 和 socketio session关联

    express session http是没有状态的协议, 需要web框架自己实现会话和会话管理工作. express框架有session插件可以使用. 见如下介绍: https://www.tuto ...

  5. 创建Cookie,简单模拟登录,记录登录名,购物车记录先前添加内容,session控制登录

     工作任务:模拟淘宝登录和购物车功能:使用cookie记录登录名,下次登录时能够记得上次的登录名,使用cookie模拟购物车功能,使用session记住登录信息并验证是否登录,防止利用url打开网站, ...

  6. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. xpath技术解析xml以及案例模拟用户登录效果

    问题:当使用dom4j查询比较深的层次结构的节点(标签,属性,文本),比较麻烦!!! xpath就在此情况下产生了--主要是用于快速获取所需的[节点对象]. 在dom4j中如何使用xPath技术 1) ...

  8. 使用COOKIE实现登录 VS 使用SESSION实现登录

    注:本文使用的代码基于PHP,其他语言逻辑同理. 一:使用COOKIE实现登录验证 使用cookie实现登录的方式,主要通过一些单向的加密信息进行验证.比如admin用户登录了之后,服务端生成一个co ...

  9. Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果

    前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...

  10. net mvc中实现记录用户登录信息(记住登录效果)

    现记录用户登录信息(记住登录效果) 本文讲述了使用cookies实现网站记住登录效果,效果如下: 主要实现方法,当用户选择记住登录时建立cookies保存用户名和用户密码,当用户登录不选择记住登录时, ...

随机推荐

  1. 阿里云 ecs win2016 FileZilla Server

     Windows Server 2016 下使用 FileZilla Server 安装搭建 FTP 服务 一.安装 Filezilla Server 下载最新版本的 Filezilla Server ...

  2. redis slot 槽点

    Redis 集群中内置了 16384 个哈希槽,当需要在 Redis 集群中放置一个 key-value 时,redis 先对 key 使用 crc16 算法算出一个结果,然后把结果对 16384 求 ...

  3. doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.

    在settings.py中增加 INSTALLED_APPS = [ ... 'django.contrib.sites', ] 问题就解决了.什么原因.——不知道.. 具体请看: https://s ...

  4. 使用Python进行3DES加密-pyDes

    pyDes.py源码 ############################################################################# # Documenta ...

  5. TCP中的长连接和短连接(转载)

    原文地址:http://www.cnblogs.com/onlysun/p/4520553.html 次挥手,所以说每个连接的建立都是需要资源消耗和时间消耗的  示意图:               ...

  6. vue1 微博demo

  7. windows 端口转发 netsh

    原文地址 listenaddress # 本地监听的ip listenport # 本地监听的端口 connectaddress # 转发请求接收的主机ip connectport # 转发请求接收的 ...

  8. [Google Guava] 2.1-不可变集合

    范例 01 public static final ImmutableSet<String> COLOR_NAMES = ImmutableSet.of( 02 "red&quo ...

  9. 27、AOP-AOP功能测试

    27.AOP-AOP功能测试 AOP : [动态代理]指程序运行期间动态的将某段代码切入到制定方法位置进行运行的编程方式. 导入AOP模块:Spring AOP(spring-aspects) 定义一 ...

  10. pat 甲级 1057 Stack(30) (树状数组+二分)

    1057 Stack (30 分) Stack is one of the most fundamental data structures, which is based on the princi ...