前言

登录注册

查看用户是否存在

校验

  用户存在了提示注册失败，

  用户不存在执行注册

2. 添加新用户

查看用户是否存在
校验用户名和密码
返回标识

cookie 存在客户端，安全性不高

session  存在服务器，安全性高 ，服务一旦挂了，数据丢失  

token 存在服务器，存的是一套算法，可以跨域

  jsonwebtoken

用户注册

  router.post('/register', async (req, res) => {
    try {
      // 1. 查看用户是否已经注册  
      const sql = 'select * from user2 where username = ?'
      const { results } = await db.query(sql, req.body.username)
      // 2. 注册新用户
      if (results.length === 0) {
        const sql = 'insert into user2 set ?'
        const { results } = await db.query(sql, req.body)
        if (results.affectedRows !== 1) return res.send({ status: 0, message: '注册失败' })
        res.send({
          status: 0,
          message: 'success'
        })
      } else {
        res.send({
          status: 1,
          message: '用户已经存在'
        })
      }
    } catch (error) {
      res.send({
        message: error
      })
    }
  })

router.post('/login', async (req, res) => {
    const sql = 'select * from user2 where username = ?'
    const { results } = await db.query(sql, req.body.username)

    if (results.length === 0) {
      return res.send({
        status: 0,
        message: '用户不存在'
      })
    }
    // 2. 判断用户名和密码是否正确  
    if (results[0].username === req.body.username && results[0].password === req.body.password) {
      // 3. 生成token返回给客户端   
      const token = jwt.sign(results[0].id)
      console.log(token)
      res.send({
        status: 0,
        token
      })
    }

  })

一、入口文件

const express = require('express')
const path = require('path')
const app = express()
// 设置跨域
app.use(require('cors')())

app.use(express.static(path.join(__dirname, './apidoc')))

app.use(express.urlencoded({ extended: false }))
app.use(express.json())

require('./routes/index.js')(app, express)

app.listen(3000, ['10.41.153.32', '127.0.0.1'], () => {
  console.log('本地服务 http://127.0.0.1:3000')
  console.log('远程服务 http://10.41.153.32:3000')
})

二、./routes/index.js

const db = require('../db')
const jwt = require('../utils/jwt')//生成token
const auth = require('../middleware/auth')//设置权限
module.exports = (app, express) => {
  const ctrl = require('../controller')
  const router = express.Router()

  // 请求资源
  router.get('/users', auth, ctrl.getUsers)

  // 根据id请求资源
  router.get('/users/:id', auth, ctrl.getUserById)

  // 添加资源
  router.post('/users', auth, ctrl.addUser)

  // 根据id更新资源
  router.put('/users/:id', auth, ctrl.updateUser)

  // 根据id删除资源
  router.delete('/users/:id', auth, ctrl.deleteUser)

  // 注册新用户
  router.post('/register', async (req, res) => {
    try {
      // 1. 查看用户是否已经注册  
      const sql = 'select * from user2 where username = ?'
      const { results } = await db.query(sql, req.body.username)
      // 2. 注册新用户
      if (results.length === 0) {
        const sql = 'insert into user2 set ?'
        const { results } = await db.query(sql, req.body)
        if (results.affectedRows !== 1) return res.send({ status: 0, message: '注册失败' })
        res.send({
          status: 0,
          message: 'success'
        })
      } else {
        res.send({
          status: 1,
          message: '用户已经存在'
        })
      }
    } catch (error) {
      res.send({
        message: error
      })
    }
  })

  // 登录
  router.post('/login', async (req, res) => {
    const sql = 'select * from user2 where username = ?'
    const { results } = await db.query(sql, req.body.username)
    if (results.length === 0) {
      return res.send({
        status: 0,
        message: '用户不存在'
      })
    }
    // 2. 判断用户名和密码是否正确  
    if (results[0].username === req.body.username && results[0].password === req.body.password) {
      // 3. 生成token返回给客户端   
      const token = jwt.sign(results[0].id)
      console.log(token)
      res.send({
        status: 0,
        token
      })
    }

  })

  app.use(router)
}

三、加密解密（../utils/jwt）

const SECRET = 'GAJLGHJALR'
const jwt = require('jsonwebtoken')
module.exports = {
  // 加密 
  sign(id) {
    return jwt.sign(
      {
        id
      },
      SECRET,
      { expiresIn: 1000 * 60 * 60 * 24 * 7 }
    )
  },
  // 解密
  async verify(token) {
    const { id } = await jwt.verify(token, SECRET)
    return id
  }
}

四、设置权限（../middleware/auth）

const jwt = require('../utils/jwt')
const db = require('../db')

module.exports = async (req, res, next) => {
  const token = req.query.token || req.headers.token || req.body.token || String(req.headers.authorization || '').split(' ').pop()

  if (!token) {
    res.send({
      status: 1,
      message: '请登录，检查是否传递了有效token'
    })
  }
  const id = await jwt.verify(token)
  console.log(id)
  if (!id) {
    res.send({
      status: 1,
      message: '用户不存在'
    })
  }

  const sql = 'select * from user2 where id = ?'
  const { results } = await db.query(sql, id)
  req.user = results
  next()
}

五、控制层（./controller/index.js）

const db = require('../db')
const moment = require('moment')
module.exports = {
  async getUsers(req, res) {
    try {
      const sql = 'select * from user where isdel = 0'
      const { results } = await db.query(sql)
      res.send({
        status: 0,
        message: results
      })
    } catch (error) {
      res.send({
        message: error
      })
    }
  },
  async getUserById(req, res) {
    try {
      const sql = 'select * from user where isdel = 0 and id = ?'
      const { results } = await db.query(sql, req.params.id)
      if (results.length === 0) return res.send({ status: 1, message: '英雄不存在' })
      res.send({
        status: 0,
        message: results
      })
    } catch (error) {
      res.send({
        message: error
      })
    }
  },
  async addUser(req, res) {
    try {
      const sql = 'insert into user set ?'
      const body = req.body
      body.add_time = moment().format('YYYY-MM-DD HH:mm:ss')
      const { results } = await db.query(sql, body)
      if (results.affectedRows !== 1) return res.send({ status: 1, message: '添加失败' })
      res.send({
        status: 0,
        message: 'success'
      })
    } catch (error) {
      res.send({
        message: error
      })
    }
  },
  async updateUser(req, res) {
    try {
      const sql = 'update user set ? where id = ?'
      const body = req.body
      body.add_time = moment().format('YYYY-MM-DD HH:mm:ss')
      const { results } = await db.query(sql, [body, req.params.id])
      if (results.affectedRows !== 1) return res.send({ status: 1, message: '更新失败' })
      res.send({
        status: 0,
        message: 'success'
      })
    } catch (error) {
      res.send({
        message: error
      })
    }
  },
  async deleteUser(req, res) {
    try {
      const sql = 'update user set isdel = 1 where id = ?'
      const { results } = await db.query(sql, req.params.id)
      if (results.affectedRows !== 1) return res.send({ status: 1, message: '删除失败' })
      res.send({
        status: 0,
        message: 'success'
      })
    } catch (error) {
      res.send({
        message: error
      })
    }
  }
}

六、连接层（./db/index.js）

module.exports = {
  query(sql, params = []) {
    return new Promise((resolve, reject) => {
      // 1. 引入mysql  
      const mysql = require('mysql')
      const dbConfig = require('./db.config')

      // 2. 创建连接对象 
      const connection = mysql.createConnection(dbConfig)

      // 3. 开启连接  
      connection.connect(err => {
        if (err) return reject(err.message + '----数据库连接失败')
        console.log('连接数据库成功')
      })

      // 4. 执行查询语句  
      connection.query(sql, params, (err, results, filds) => {
        if (err) return reject(err.message)
        resolve({
          results,
          filds
        })
      })

      // 5. 关闭连接  
      connection.end(err => {
        if (err) return reject(err.message)
        console.log('关闭数据库连接')
      })
    })
  }
}

./db/db.config.js

module.exports = {
  host: '127.0.0.1',
  user: 'root',
  password: 'root',
  database: '2101_3'
}

页面渲染上

1.首页（index.html）（加删除页）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h1>英雄管理</h1>
    <a href="./add.html" class="btn btn-success pull-right">添加</a>
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody">

      </tbody>
    </table>


  </div>
  <script src="./js/jquery.min.js"></script>
  <script>
    function getUsers() {
      //获取本地token
      const token = localStorage.token
      console.log(token)
      $(function () {
        $.ajax({
          url: 'http://10.41.153.32:3000/users',
          //发送网络请求带上token
          headers: {
            Authorization: 'Bearer ' + token
          },
          success(res) {
            let html = '' 
            res.message.forEach(item => {
              html += `
            <tr>
              <td>${item.id}</td>
              <td>${item.name}</td>
              <td>${item.age}</td>
              <td>${item.sex}</td>
              <td>${item.add_time}</td>
              <td>
                <a href="./edit.html?id=${item.id}" class="btn btn-primary">编辑</a>
                <button type="button" class="btn btn-danger" data-id="${item.id}" id="deleteUsers">删除</button>
              </td>
            </tr>
            `
            })
            $('#tbody').html(html)
          }
        })
      })
    }
    getUsers()

    $('#tbody').on('click', '#deleteUsers', function () {
      // console.log($(this).data('id'))
      $.ajax({
        type: 'delete',
        url: 'http://10.41.153.32:3000/users/' + $(this).data('id'),
        success(res) {
          console.log(res)
          // location.reload()
          getUsers()
        }
      })
    })
  </script>
</body>

</html>

2.添加（add.html）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h1>添加英雄</h1>

    <form>
      <div class="form-group">
        <label for="">姓名</label>
        <input type="text" class="form-control" id="name" placeholder="Input field">
      </div>

      <div class="form-group">
        <label for="">年龄</label>
        <input type="text" class="form-control" id="age" placeholder="Input field">
      </div>

      <div class="form-group">
        <label for="">性别</label>
        <input type="text" class="form-control" id="sex" placeholder="Input field">
      </div>

      <button type="button" class="btn btn-primary" id="addForm">Submit</button>
    </form>

  </div>
  <script src="./js/jquery.min.js"></script>
  <script>
    $(function () {
      // 1. 获取要传递的参数
      $('#addForm').click(function () {
        var data = {
          name: $('#name').val(),
          age: $('#age').val(),
          sex: $('#sex').val()
        }
        // 2. 发送ajax请求  
        $.ajax({
          type: 'post',
          url: 'http://10.41.153.32:3000/users',
          data,
          success(res) {
            console.log(res)
            // 3. 手动跳转到首页 
            location.href = '/'
          }
        })
      })
    })
  </script>
</body>

</html>

3.编辑（edit.html）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h1>编辑英雄</h1>

    <form id="editForm">

    </form>

  </div>
  <script src="./js/jquery.min.js"></script>
  <script>
    $(function () {
      // const id = location.search.split('=')[1]
      const params = new URLSearchParams(location.search)
      const id = params.get('id')
      $.ajax({
        url: 'http://10.41.153.32:3000/users/' + id,
        success(res) {
          let html = `
            <div class="form-group">
              <label for="">姓名</label>
              <input type="text" class="form-control" id="name" value="${res.message[0].name}">
            </div>

            <div class="form-group">
              <label for="">年龄</label>
              <input type="text" class="form-control" id="age"  value="${res.message[0].age}">
            </div>

            <div class="form-group">
              <label for="">性别</label>
              <input type="text" class="form-control" id="sex"  value="${res.message[0].sex}">
            </div>

            <button type="button" class="btn btn-primary" id="editUsers">Submit</button>
          `
          $('#editForm').html(html)
        }
      })

      // 1. 获取要传递的参数
      $('#editForm').on('click', '#editUsers', function () {
        console.log(1)
        var data = {
          name: $('#name').val(),
          age: $('#age').val(),
          sex: $('#sex').val()
        }
        // 2. 发送ajax请求  
        $.ajax({
          type: 'put',
          url: 'http://10.41.153.32:3000/users/' + id,
          data,
          success(res) {
            // 3. 手动跳转到首页 
            location.href = '/'
          }
        })
      })
    })
  </script>
</body>

</html>

4.登录（login.html）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h1>请登录账号</h1>

    <form>
      <div class="form-group">
        <label for="">用户名</label>
        <input type="text" class="form-control" id="username" value="admin">
      </div>

      <div class="form-group">
        <label for="">密码</label>
        <input type="password" class="form-control" id="password" value="admin">
      </div>


      <button type="button" class="btn btn-primary" id="loginForm">登录</button>
    </form>

  </div>
  <script src="./js/jquery.min.js"></script>
  <script>
    $(function () {
      // 1. 获取要传递的参数
      $('#loginForm').click(function () {
        var data = {
          username: $('#username').val(),
          password: $('#password').val(),
        }
        console.log(data)
        // 2. 发送ajax请求  
        $.ajax({
          type: 'post',
          url: 'http://10.41.153.32:3000/login',
          data,
          success(res) {
            // console.log('success')
            // 把token 保存到本地存储  
            localStorage.token = res.token
            location.href = './index.html'
          }
        })
      })
    })
  </script>
</body>

</html>

nodejs-设置权限

前言

用户注册

登录

一、入口文件

二、./routes/index.js

三、加密解密（../utils/jwt）

四、设置权限（../middleware/auth）

五、控制层（./controller/index.js）

六、连接层（./db/index.js）

./db/db.config.js

页面渲染上

1.首页（index.html）（加删除页）

2.添加（add.html）

3.编辑（edit.html）

4.登录（login.html）