Node学习（九）07-使用验证码——必须登录才能访问页面 & 模糊搜索的时候重置分页页码

Node学习（九）07-使用验证码——必须登录才能访问页面 & 模糊搜索的时候重置分页页码

8.6 验证码

• 首先在项目代码中，npm安装express-session模块。
• 在app.js中，在使用session之前，配置session

  const session = require('express-session'); app.use(session({ 
        secret: 'ad325sdfjl23', // 加密的串。随意定义 cookie: { 
        maxAge: 60000 }, // 过期时间，单位毫秒。目前过期时间是1分钟 resave: false, saveUninitialized: false })); 

• 将生成的验证码使用session记录

• 登录接口中，使用验证码进行判断即可

执行 git add . 和 git commit -m '登录页面使用验证码（使用session保存的验证码）'

8.7 必须登录才能访问页面

不是所有页面都需要登录的，login.html 和 register.html 不需要登录，其他页面都需要登录。

具体做法是，在登录的接口中，当登录成功，记录session：

为了能够明确的区分哪些页面及接口需要登录、哪些不需要登录，所以得将项目中所有的接口、页面、静态资源分成两个部分，一个部分是需要登录，一个部分是不需要登录的：

所以先调整一下代码（总之能够将接口明确的分成两个部分即可）

• 先调整静态资源

• 所有的静态页面都需要一个接口

• 调整这些接口的顺序
  • 不需要登录的全部放到前面
  • 需要登录的全部放到后面
  • 在他们中间件，写一个中间件，控制“需要登录才能够访问”

    app.use((req, res, next) => { 
            // 如果登录了，则next；如果没有登录，则提示并终止向后执行 if (req.session.isLogin === true) { 
            next(); } else { 
            res.send('<script>alert("请先登录"); location.href="/login.html";</script>'); } }); 

执行 git add . 和 git commit -m '调整代码，实现需要登录才能访问'

九、模糊搜索页码显示问题

只需要在搜索的时候，设置调用分页的对象的一个属性即可：

执行 git add . 和 git commit -m '模糊搜索时重新设置分页页码'

附

app.js详细版

// 加载express const express = require('express'); // 创建app对象 const app = express(); // 监听端口，开启服务 app.listen(3000, () => console.log('服务启动了')) // 处理静态资源 app.use(express.static('manager')); // app.use(express.static('uploads')); // 如果数据库存的是文件夹，没有uploads，可以使用这个方案 app.use('/uploads', express.static(__dirname + '/uploads')); // 处理 x-www-form-urlencoded 编码格式的请求体 const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ 
   extended: false})); const session = require('express-session'); app.use(session({ 
    secret: 'ad325sdfjl23', // 加密的串。随意定义 cookie: { 
    maxAge: 60000 }, // 过期时间，单位毫秒。目前过期时间是1分钟 resave: false, saveUninitialized: false })); // 导入db模块 const db = require('./db.js'); /// 后面完成各种接口  // 1. 取出所有的英雄 app.get('/getHeroes', (req, res) => { 
    if (!req.session.isLogin) { 
    res.send('<script>alert("请先登录"); location.href="/login.html";</script>'); return; } let keywords = req.query.keywords || null; // 搜索的关键字 let page = req.query.page || 1; // 当前的页码 let pageNum = 5; // 每页显示多少条 // 根据keywords 生成一个where条件 let w = ''; if (keywords) { 
    w = ' where name like "%'+keywords+'%" or nickname like "%'+keywords+'%" ' } // let sql = `select * from heroes limit ${(page-1) * pageNum}, ${pageNum}`; let sql = 'select * from heroes ' + w + ' limit ' + (page-1) * pageNum + ',' + pageNum; sql += ';select count(*) c from heroes' + w; db(sql, null, (err, result) => { 
    if (err) throw err; // 接口响应，响应查询到的结果 console.log(result); // 因为一次性执行两条SQL，所以result 是一个二维数组 res.send({ 
    data: result[0], pageTotal: Math.ceil(result[1][0].c / pageNum) }); }); }); /* app.get('/time', (req, res) => { res.send(Date.now() + ''); }); */ // 加载multer const multer = require('multer'); const upload = multer({ 
    dest: 'uploads/' }); // 2. 完成添加接口 app.post('/addHero', upload.single('heroIcon'), (req, res) => { 
    // 使用body-parser是不能接受到form-data类型的数据的。因为提交的数据的编码格式为 multipart/form-data // 需要使用新的模块，叫做 multer // upload.single('heroIcon')。里面的 heroIcon 是表单中文件域的 name值 // console.log(req.file); // 包含图片信息 // console.log(req.body); // 包含文本信息，比如英雄的名字、昵称、技能等 // 后续，写SQL语句，完成添加即可 let sql = 'insert into heroes set ?'; let values = { 
    // 字段: 值 name: req.body.heroName, nickname: req.body.heroNickName, file: req.file.path, skill: req.body.skillName }; db(sql, values, (err, result) => { 
    if (err) { 
    // res.send(可以填js对象); // 在响应数据的时候，send方法会将对象转成json res.send({ 
   code: 201, message: '添加失败'}); } else { 
    res.send({ 
   code: 200, message: '添加成功'}); } }); }); // 3. 根据id，获取一个英雄 / * 浏览器在请求这个接口的时候，必须要传递id参数 */ app.get('/getHeroById', (req, res) => { 
    // 服务器端，首先要获取url中的id参数的值。req.query可以获取到url上所有的参数 // console.log(req.query); // { id: '3', age: '24' } let id = req.query.id; if (!id || isNaN(id)) { 
    res.send('参数错误'); return; } // 如果id没有问题，则根据id查询一个英雄 db('select * from heroes where id=?', id, (err, result) => { 
    if (err) throw err; // result 的值是一个数组 ： [{"id":3,"name":"嘉文四世","nickname":"德玛西亚皇子","file":null,"skill":null,"age":22,"sex":"男"}] res.send(result[0]); }); }); // 4. 完成更新的接口 app.post('/updateHero', upload.single('heroIcon'), (req, res) => { 
    // 使用body-parser是不能接受到form-data类型的数据的。因为提交的数据的编码格式为 multipart/form-data // 需要使用新的模块，叫做 multer // upload.single('heroIcon')。里面的 heroIcon 是表单中文件域的 name值 // console.log(req.file); // 包含图片信息 // console.log(req.body); // 包含文本信息，比如英雄的名字、昵称、技能等 // 后续，写SQL语句，完成添加即可 let sql = 'update heroes set ? where id = ?'; let values = { 
    // 字段: 值 name: req.body.heroName, nickname: req.body.heroNickName, skill: req.body.skillName }; // 针对file要单独判断 // console.log(req.file); // 如果更新的时候，用户没有选择新的头像，则req.file === undefined if (req.file !== undefined) { 
    // 说明更新的时候，选择了头像 values.file = req.file.path; } // return; db(sql, [values, req.body.id], (err, result) => { 
    if (err) { 
    // res.send(可以填js对象); // 在响应数据的时候，send方法会将对象转成json res.send({ 
   code: 201, message: '更新失败'}); } else { 
    res.send({ 
   code: 200, message: '更新成功'}); } }); }); // 5. 完成删除的接口 app.get('/deleteHero', (req, res) => { 
    // 获取url上的id参数 let id = req.query.id; if (!id || isNaN(id)) { 
    res.send('参数错误'); return; } // 写一条delete语句，完成删除即可 db('delete from heroes where id=?', id, (err, result) => { 
    if (err) { 
    res.send({ 
   code: 201, message: '删除失败'}); } else { 
    res.send({ 
   code: 200, message: '删除成功'}); } }); }); // 6. 完成注册（接收提交过来的账号和密码，然后添加到数据库即可） app.post('/reg', (req, res) => { 
    console.log(req.body); // 写SQL，完成注册 let sql = 'insert into user set ?'; // let values = { 
    // username: '' // } db(sql, req.body, (err, data) => { 
    if (err) { 
    // 如果提示注册不成功，就 throw err res.send({ 
   code: 201, message: '注册失败'}); } else { 
    res.send({ 
   code: 200, message: '注册成功'}); } }); }); // 7. 登录接口 app.post('/login', (req, res) => { 
    console.log(req.body); // 提交信息到接口，马上进行验证码验证。验证通过才验证账号和密码（略） if (req.body.vcode.toUpperCase() !== req.session.captcha.toUpperCase()) { 
    res.send({ 
   code: 202, message: '验证码错误'}); return; } // 下面验证账号和密码 let sql = 'select * from user where username = ? and password = ?'; db(sql, [req.body.username, req.body.password], (err, result) => { 
    if (err) throw err; // console.log(result); // 账号密码正确，得到一个非空数组；账号密码错误，得到空数组 if (result.length > 0) { 
    // 记录登录成功的标志 req.session.isLogin = true; res.send({ 
   code: 200, message: '登录成功'}); } else { 
    res.send({ 
   code: 201, message: '登录失败'}); } }); }); // 8. 生成验证码的接口 var svgCaptcha = require('svg-captcha'); app.get('/captcha', function (req, res) { 
    // var captcha = svgCaptcha.createMathExpr({ 
    var captcha = svgCaptcha.create({ 
    color: true, background: '#ed52c9' }); // 将验证码记录到session中。其他接口就可以使用它了 req.session.captcha = captcha.text; // 输出验证码字符的结果： console.log(captcha.text); res.type('svg'); res.status(200).send(captcha.data); }); 

db.js详细版

module.exports = (sql, values, cb) => { 
    const mysql = require('mysql'); const conn = mysql.createConnection({ 
    host: 'localhost', port: 3306, user: 'root', password: '', database: 'yingxiong', multipleStatements: true }); conn.connect(); conn.query(sql, values, cb); conn.end(); } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-nodejs/10825.html