使用express、ejs完成注册登录功能（服务端渲染）

使用express、ejs完成注册登录功能（服务端渲染）

---

一、准备工作

1、使用Navicat工具 创建数据库 创建数据表

2、目录结构

• app.js大家一定都不陌生了吧，项目的入口处 全局要用的东西都放在这里

const express = require('express');
const app = express();
const ejs = require('ejs') //安装npm i ejs
//因为涉及到判断是否登录 所以要使用session  安装: npm i express-session   如果前后端分离可以使用JWT验证机制 下次再写这个
const session = require('express-session')  
app.use(session({
    secret:'keyboard cat',
    resave:true,
    saveUninitialized:true,//是否保存未初始化的会话
}))
//导入 解析处理提交表单数据
app.use(express.urlencoded({extended:false}));//这里也可以使用body-parser 
//导入路由
const userRouter = require('./router/user')
app.use('/api',userRouter);

app.engine('html',ejs.__express);
app.set('view engine','html');
//设置静态资源文件  这里一定要注意路径的问题 否则可能会导致某些引入的样式被覆盖
app.use('/node_modules/',app.use('./node_modules'));
app.listen(3000,()=>{
    console.log('server is running at http://127.0.0.1:3000/api/login');
})

• 因为练习中会有对数据库的操作 所以先安装数据库模块

npm i mysql

• 在db文件夹中 存放了数据库模块

const mysql = require('mysql');

//创建链接
const db = mysql.createPool({
    connectionLimit: 10,
    host: '127.0.0.1',
    user: 'root',
    password: '123456',
    database: 'my_db_02',
})
// 导出
module.exports = db;

• router文件夹中包含了路由文件 对路由的处理

const express = require('express');
const router = express.Router();

• api文件夹中 是路由模块中的处理函数

二、注册

实现注册 步骤：

1. 首先确定输入的用户名和密码不为空
2. 先拿到用户名判断是否存在 若存在 提醒修改
3. 不存在用户名重复 可以添加到数据库中

在api/user.js中

module.exports.register = (req,res)=>{
    const userinfo = req.body;
    //1.确定输入的用户名和密码不为空
    if(!userinfo.name||!userinfo.password){
        return res.send({status:1,message:'用户名或密码不能为空!'});
    }
    //2.检查用户名是否已存在
    const sql = 'select * from users01 where name=?';
    db.query(sql,userinfo.name,(err,result)=>{
        if(err)throw err;
        //用户名被占用
        if(result.length>0){
            return res.send({
                status:1,
                message:'用户名被占用!请更换其他用户名!'
            });
        }
        //用户名可用
         //密码加密
        userinfo.password = bcryjs.hashSync(userinfo.password,10);
        //添加用户到数据库中   最好此处给密码加密！！！！ 可以使用bcryjs插件  npm install bcryptjs
          const sql2 = 'insert into users01 set ?'
        db.query(sql2, {name:userinfo.name,password:userinfo.password}, (err, result) => {
            if (err) throw err;
            //sql执行成功但影响行数不为1
            if (result.affectedRows !== 1) {
                return res.send({ status: 1, message: '用户注册失败!请稍后再试' });
            }
        })
    })
    
}

三、登录

实现登录 步骤：

1. 先判断输入的用户名和密码是否为空
2. 不为空 先判断用户名是否存在 若不存在转跳去注册
3. 存在用户名 再比较密码输入的是否正确
4. 全部正确允许进入index页面

在api/user.js中

module.exports.login = (req,res)=>{
    const userinfo = req.body;
      //1.确定输入的用户名和密码不为空
     if(!userinfo.name||!userinfo.password){
        return res.send({status:1,message:'用户名或密码不能为空!'});
    }
    //2.输入都不为空 判断用户名是否存在 若不存在转跳去注册
    const sql = 'select * from users01 where name =?';
    db.query(sql,userinfo.name,(err,result)=>{
        if(err)throw err;
        if(result.length!==1) return res.send({status:0,message:'登录失败!'});
        //存在用户名 比较密码输入的正确与否 bcryjs的compareSync
        // 拿着用户输入的密码,和数据库中存储的密码进行对比
   const compareResult = bcrypt.compareSync(userinfo.password, result[0].password);
        // 如果对比的结果等于 false, 则证明用户输入的密码错误
    if (!compareResult) {
        return res.redirect('/api/login');
        }
             //信息正确
            req.session.user = req.body; //用户信息存储到session中
            req.session.isLogin = true;// 用户状态存储到session中
            console.log(req.session);
            return res.redirect('/api/index');
   })
}

判断是否是登陆状态

module.exports.check = (req, res) => {
    // 判断session状态 如果有效 返回index  无效转回登录
    if (req.session.isLogin) {
        res.render('index', { name: req.session.user.name });
    } else {
        res.redirect('/api/login');
    }
}

退出登录功能 删除用户对应的session

module.exports.logout = (req,res)=>{
    //清空session
    req.session.destroy()
    return res.redirect('/api/login')
}

这些暴露出来的功能必须导入到router/user.js下被调用

router/user.js中

const express = require('express');
const router = express.Router();
const userHandler = require('../api/user')

router.get('/register',(req,res)=>{
    res.render('register.html');
})
router.post('/register',userHandler.register);
//展示登录页面
router.get('/login',(req,res)=>{
    res.render('login.html');
})
//登录的操作处理
router.post('/login',userHandler.login)
router.get('/index',userHandler.check)
// 退出登录
router.get('/logout',userHandler.logout)
module.exports = router;