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

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

如果验证成功,将登陆状态保存在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. [LeetCode] 24. Swap Nodes in Pairs ☆☆☆(链表,相邻两节点交换)

    Swap Nodes in Pairs 描述 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 示例: 给定 1->2->3->4, 你应该返回 2->1->4 ...

  2. NORDIC BLE升级

    NRF52832 SDK15.3.0 概述: 所谓DFU(Device Firmware Update),就是设备固件升级的意思,而OTA是DFU的一种类型,准确说,OTA的全称应该是OTA DFU, ...

  3. HDU - 6242 Geometry Problem (几何,思维,随机)

    Geometry Problem HDU - 6242 Alice is interesting in computation geometry problem recently. She found ...

  4. Java&Selenium自动化测试调用JS实现单击

    Java&Selenium自动化测试调用JS实现单击 /* * the method of invoking js to do something * * @author davieyang ...

  5. #Python语言程序设计Demo - 七段数码管绘制

    Python设计七段数码管绘制 单个数码管效果: 设计总数码管效果: Pyhton 编程: #七段数码管绘制 import turtle as t import time as T def drawG ...

  6. hbase实践之写流程拾遗

    keyvalue KeyValue中包含了丰富的自我描述信息: KeyValue是支撑"稀疏矩阵"设计的一个关键点:一些Key相同的任意数量的独立KeyValue就可以构成一行数据 ...

  7. npm设置成淘宝镜像

    1.淘宝 npm 网址 https://npm.taobao.org/ 2.修改 2.1 通过命令配置 2.1.1. 命令 npm config set registry https://regist ...

  8. 编译安装 openmcu

    1. install toolssudo apt-get install libtool autoconf flex bison automake pkg-config 2.yasm-1.3.0sed ...

  9. HDU 6154 - CaoHaha's staff | 2017 中国大学生程序设计竞赛 - 网络选拔赛

    /* HDU 6154 - CaoHaha's staff [ 构造,贪心 ] | 2017 中国大学生程序设计竞赛 - 网络选拔赛 题意: 整点图,每条线只能连每个方格的边或者对角线 问面积大于n的 ...

  10. paramiko多线程远程执行命令

    import paramiko import sys import getpass import threading import os def rcmd(host=None, port=22, us ...