Nodejs cqmanager项目

最新推荐文章于 2024-04-18 20:48:01 发布
最新推荐文章于 2024-04-18 20:48:01 发布
阅读量2.9k 收藏
点赞数 1
分类专栏： Nodejs mysql 文章标签： Nodejs 数据库 mysql javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cool_breeze_/article/details/107208897
版权

cqmanager项目

王者荣耀英雄管理系统

  • code码含义
服务器说明作用描述
http://127.0.0.1:4399服务器基地址
200请求成功 状态码
401用户名已存在 或者 用户名错误
402密码错误 或者 验证码错误
500服务器内部错误
302服务器重定向
  • 项目中的接口列表
接口名称URL请求方式请求参数返回值
查询英雄列表/hero/listgetsearch: 英雄名称，不传返回所有[heros:{英雄列表}]
查询英雄详情/hero/infogetid: 英雄id{data:英雄详情}
编辑英雄/hero/updatepostid{cod:200}
新增英雄/hero/addpostname, skill, icon{code:200}
验证码/captchaget无验证码图片
用户注册/user/registerpostusername,password,code:验证码{code:200|401|402}
用户登录/user/loginpostusername,password{code:200|401|402}
退出登录/logoutget无无

后端大体框架

// 1. 导包
const express = require("express");
const hm = require("mysql-ithm");
const cors = require("cors");
const multer = require("multer");
const bodyParser = require("body-parser");
var svgCaptcha = require("svg-captcha"); // 生成验证码的插件
var cookieSession = require("cookie-session");

// 帮你创建一个uploads文件夹
var upload = multer({ dest: "uploads/" });

// 连接数据库
//如果数据库存在则连接，不存在则会自动创建数据库
hm.connect({
  host: "localhost", //数据库地址
  port: "3306",
  user: "root", //用户名，没有可不填
  password: "lijiazhao123", //密码，没有可不填
  database: "wzry", //数据库名称
});

// 创建Model(表格模型：负责增删改查)
//如果table表格存在则连接，不存在则自动创建
let heroModel = hm.model("hero", {
  heroName: String,
  heroSkill: String,
  heroIcon: String,
  isDelete: String,
});

let userModel = hm.model("user", {
  username: String,
  password: String,
});

// 2. 创建服务器
const app = express();

// 3. 托管静态资源
// 例如，通过如下代码就可以将 www、uploads 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：
app.use(express.static("www"));
app.use(express.static("uploads"));

// 4. 配置中间件
app.use(cors());
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// 设置cookie的中间件
app.use(
  cookieSession({
    name: "session",
    keys: ["libai", "luban", "diaochan"], // 加密用的加盐

    // Cookie Options 过期的时间
    maxAge: 7 * 24 * 60 * 60 * 1000, // 24 hours * 7 表示这个cookie7天后过期
  })
);

// 5. 写接口

// 6. 开启服务器
app.listen(4399, () => {
  console.log("服务器开启成功了...");
});

写接口

  • 判断有没有登录的接口

    req.session.user 是在登录接口里面设置的，如果没有登录 req.session.user 就为空，如果登录了就有值，并由此来判断是否可以打开相关页面

app.get("/isLogin", (req, res) => {
  // 如果你登录了，那你响应回去的 就是有内容的
  // 如果你没有登录，那你响应回去的就是没有内容的
  res.send(req.session.user);
});
  • 查询英雄列表
app.get("/hero/list", (req, res) => {
  // a.有可能会传一个要查询的英雄名字参数过来，也有可能什么参数都没有
  let { search } = req.query;
  //   console.log(search); // 有查询参数就是有值的，没有查询参数就是undefined
  if (!search) {
    // 如果进到这里来了，说明没有查询参数，我就要查询出所有没有删除的英雄
    heroModel.find('isDelete="false"', (err, results) => {
      if (err) {
        res.send({
          code: 500,
          msg: "服务器内部错误",
        });
      } else {
        res.send({
          code: 200,
          heros: results,
        });
      }
    });
  } else {
    // 进到这里来，说明有查询参数
    // 涉及到了一个模糊查询，加入名字中包含 鲁班 的都查出来
    // 模糊查询的语法 字段 like "%鲁班%"
    // 还有一个并且语法 and isDelete = "false"
    heroModel.find(
      `heroName like "%${search}%" and isDelete="false"`,
      (err, results) => {
        if (err) {
          res.send({
            code: 500,
            msg: "服务器内部错误",
          });
        } else {
          res.send({
            code: 200,
            heros: results,
          });
        }
      }
    );
  }
});
  • 查询英雄详情
app.get("/hero/info", (req, res) => {
  // a. 接收传递过来的英雄id
  let { id } = req.query;

  // b. 根据id查询英雄信息
  heroModel.find(`id=${id}`, (err, results) => {
    if (err) {
      res.send({
        code: 500,
        msg: "服务器内部错误",
      });
    } else {
      res.send({
        code: 200,
        //因为是根据id查询得到的英雄数据，肯定是唯一的，因为id也是唯一的.
        //所以这里results这个数组可以取值返回
        data: results[0],
      });
    }
  });
});
  • 编辑英雄
app.post("/hero/update", upload.single("heroIcon"), (req, res) => {
  // 如果不改头像，只改名字和技能，我们希望这种需求也是可以的
  // console.log(req.file); // 接收到的是文件（头像），如果没有传，那是undefined
  // console.log(req.body); // 接收到的是文本参数
  // 赋值
  let { id, heroName, heroSkill } = req.body;
  let obj = {
    heroName,
    heroSkill,
  };
  // 如果修改了头像，那obj对象里面就有heroName,heroSkill,heroIcon
  // 如果没有修改头像，那obj对象里面就只有heroName,heroSkill
  if (req.file != undefined) {
    // 能够进到这里来，说明传了修改后的头像进来
    obj.heroIcon = "http://127.0.0.1:4399/" + req.file.filename;
  }
  // 调用mysql-ithm模块中的方法，把数据更新到数据库中
  heroModel.update(`id=${id}`, obj, (err, results) => {
    if (err) {
      res.send({
        code: 500,
        msg: "服务器内部错误",
      });
    } else {
      res.send({
        code: 200,
        msg: "修改成功",
      });
    }
  });
});
  • 删除英雄
app.post("/hero/delete", (req, res) => {
  // a. 接收前端传递过来的要删除的英雄id
  let { id } = req.body;
  heroModel.update(`id=${id}`, { isDelete: "true" }, (err, results) => {
    if (err) {
      res.send({
        code: 500,
        msg: "服务器内部错误",
      });
    } else {
      res.send({
        code: 200,
        msg: "删除成功",
      });
    }
  });
});
  • 新增英雄
app.post("/hero/add", upload.single("heroIcon"), (req, res) => {
  // a.接收用户新增的英雄名，英雄技能，英雄头像
  // console.log(req.file.filename); // 头像名字 6de1b3081be76b6d084845d8dc6733ec
  // console.log(req.body); // 非文件参数 { heroName: '波波', heroSkill: '骚的一批' }
  let { heroName, heroSkill } = req.body;
  let heroIcon = "http://127.0.0.1:4399/" + req.file.filename;
  // b.插入到数据库中
  heroModel.insert(
    {
      heroName,
      heroSkill,
      heroIcon,
      isDelete: "false",
    },
    (err, results) => {
      if (err) {
        res.send({
          code: 500,
          msg: "服务器内部错误",
        });
      } else {
        res.send({
          code: 200,
          msg: "新增成功！",
        });
      }
    }
  );
});
  • 验证码
app.get("/captcha", (req, res) => {
  // 创建一个验证码
  var captcha = svgCaptcha.create();
  // req.session.captcha = captcha.text;

  // 返回验证码
  res.type("svg");
  res.status(200).send(captcha.data);
});
  • 用户注册
app.post("/user/register", (req, res) => {
  // a.
  /*
  username: 接收的前端用户输入的用户名
  password: 接收的前端用户输入的密码密文
  code: 接收的前端用户输入的验证码
  */
  let { username, password, code } = req.body;
  // console.log(username, password, code);
  // b. 验证 验证码输入的是否正确
  if (code.toLowerCase() != captchaText.toLowerCase()) {
    // 进到这里来了，说明用户输入的验证码不对
    res.send({
      code: 402,
      msg: "验证码错误",
    });
  } else {
    // 进到这里来了，说明验证码是对的，那就要开始注册了
    // 要去数据库中判断一下爱以前这个用户名是否已经被注册了
    userModel.find(`username="${username}"`, (err, results) => {
      if (err) {
        res.send({
          code: 500,
          msg: "服务器内部错误-查询用户名是否存在",
        });
      } else {
        // 说明可以查询成功，但是还要看看查出来有没有结果
        if (results.length > 0) {
          console.log(results);
          res.send({
            code: 401,
            msg: "用户名已存在",
          });
        } else {
          // 该用户名不存在，不存在就注册呀（增加/插入操作）
          userModel.insert(
            {
              username,
              password,
            },
            (err, results) => {
              if (err) {
                res.send({
                  code: 500,
                  msg: "服务器内部错误-注册时错误",
                });
              } else {
                res.send({
                  code: 200,
                  msg: "注册成功",
                });
              }
            }
          );
        }
      }
    });
  }
});
  • 用户登录
app.post("/user/login", (req, res) => {
  // a. 先获取用户登录时候，传递过来的用户名和加密后的密码
  let { username, password } = req.body;
  // b. 去数据库中判断有没有这样的账号和密码
  userModel.find(
    `username="${username}" and password="${password}"`,
    (err, results) => {
      if (err) {
        res.send({
          code: 500,
          msg: "服务器内部错误",
        });
      } else {
        // 判断查成功的结果，有没有数据
        if (results.length > 0) {
          // 账号和密码没有问题，就登录成功，那现在就应该响应回去一个cookie
          // 我们这里发的session的键是user,值是一个对象，对象里面包含账号密码
          // req.session.user的值可以随便给，只要有值就能用
          req.session.user = { username, password };
          // req.session.user = "sb"
          res.send({
            code: 200,
            msg: "登录成功",
          });
        } else {
          res.send({
            code: 401,
            msg: "用户名或密码错误",
          });
        }
      }
    }
  );
});
  • 退出登录
app.get("/logout", (req, res) => {
  // 清除cookie
  req.session = null;
  // 重定向到登录页
  res.writeHead(302, {
    Location: "./login.html",
  });
  res.end();
});

前端页面

  • 首页 index.html
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>英雄列表</title>
  <!-- 导入jquery -->
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 导入bootstrap -->
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  <!-- 导入art-template -->
  <script src="./libs/template-web.js"></script>
  <!-- 发送ajax请求，往那个是否登录成功那个接口那里发请求 -->
  <script>
    (function(){
      $.ajax({
        type:"get",
        url:"http://127.0.0.1:4399/isLogin",
        success:function(backData){
          console.log(backData);
          if(backData == ""){
            // 没有登录
            alert("没有登录，请登录！")
            window.location.href = "./login.html"
          }
        }
      })
    })();
  </script>
</head>

<body>
  <!-- bootstrap的容器  带版心的-->
  <div class="container">
    <!-- 导航 -->
    <nav class="navbar navbar-default">
      <div class=".container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">欢迎进入CQ后台管理</a>
        </div>
        <!-- 用户登录信息 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="username">张三</a></li>
            <li><button class="btn btn-danger btn-exit" id="logout"
                onclick="location.href='http://127.0.0.1:4399/logout'">退出</button></li>
            <li><button class="btn btn-success" id="login" onclick="location.href='./login.html'">请登录</button></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 底部的内容 -->
    <div class="row">
      <!-- 栅格布局 -->
      <div class=".col-md-9">
        <div class="panel panel-default">
          <!-- 标题 -->
          <div class="panel-heading">
            <h3 class="panel-title">
              <!-- 面包屑导航 -->
              <ol class="breadcrumb">
                <li><a href="index.html">首页</a></li>
                <li class="active">英雄列表</li>
              </ol>
            </h3>
          </div>
          <!-- 标题 -->
          <div class="panel-heading">
            <!-- 表单 -->
            <form class="form-inline">
              <div class="form-group">
                <label class="sr-only" for="search">Amount (in dollars)</label>
                <div class="input-group">
                  <div class="input-group-addon">英雄姓名</div>
                  <input type="text" class="form-control" id="search" placeholder="请输入查询内容" />
                </div>
              </div>
              <button type="button" class="btn btn-success btn-search" id="searchBtn">查找</button>
              <button type="button" class="btn btn-warning" onclick="location.href='./insert.html'">新增</button>
            </form>
          </div>
          <!-- 内容 -->
          <div class="panel-body" id="content">
            <table class="table table-bordered">
              <!-- 头部 -->
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>技能</th>
                  <th>头像</th>
                  <th>操作</th>
                </tr>
              </thead>
              <!-- 表格body -->
              <tbody id="heroListBody">
                <td> 提姆 </td>
                <td> 顺风浪逆风投 </td>
                <td><img src="./images/111.png" width="72px" height="72px"></td>
                <td class="manager">
                  <button class="btn btn-success" onclick="location.href='./update.html'">编辑🐷</button>
                  <button class="btn btn-danger">删除👍</button>
                </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="libs/template-web.js"></script>
  <!-- 英雄列表模板 -->
  <script id="hero_list" type="text/html">
    {{each heros v}}
    <tr>
      <td> {{v.heroName}} </td>
      <td> {{v.heroSkill}} </td>
      <td><img src="{{v.heroIcon}}" width="72px" height="72px"></td>
      <td class="manager">
        <button class="btn btn-success" data-id="{{v.id}}" onclick="location.href='./update.html?id={{v.id}}'">编辑🐷</button>
        <button class="btn btn-danger btn-del" data-id="{{v.id}}">删除👍</button>
      </td>
    </tr>
    {{/each}}
  </script>
  <script>
    // 入口函数
    $(function () {
      // 1.查找按钮点击事件
      $('#searchBtn').on("click",function (e) {
        // 1.1 阻止默认跳转(表单中的按钮需要阻止默认跳转)
        e.preventDefault();
        // 1.2 获取输入框数据
        // 1.3 ajax发送请求
        $.ajax({
          url: 'http://127.0.0.1:4399/hero/list',
          type: 'get',
          dataType: 'json',
          data: {
            search: $('#search').val().trim()
          },
          success: function (backData) {
            console.log(backData);
              if(backData.heros.length == 0){
                $("tbody").html("没有数据");
                return;
              }
              // 模板引擎渲染页面
              if(backData.code == 200){
                $('#heroListBody').html(template('hero_list', backData));
              }
            
            
            // 根据用户是否登录来渲染页面
            if (backData.user) {// 表示有登录过
              // a标签的内容用text
              $('#username').text(backData.user.username);
              // 显示退出按钮
              $('#logout').show();
              // 隐藏登录按钮
              $('#login').hide();
              $('.manager').show();
            } else {// 表示没有登录
              // 隐藏用户名
              $('#username').hide();
              // 隐藏退出按钮
              $('#logout').hide();
              // 显示登录按钮
              $('#login').show();
              $('.manager').hide();
            }
          }
        });
      });
      // 2.页面一加载，默认请求所有数据
      $('#searchBtn').click();
      // 3.删除按钮的点击事件
      // 注意点：删除按钮是动态添加的，需要添加委托事件
      $('#heroListBody').on('click', '.btn-del', function () {
        if(confirm("你确定要删除吗？")){
          $.ajax({
          url: 'http://127.0.0.1:4399/hero/delete',
          type: 'post',
          dataType: 'json',
          data: { id: $(this).attr('data-id') },
          success: function (backData) {
            console.log(backData);
            if (backData.code == 200) {
              alert('删除成功');
              // 刷新页面
              window.location.reload();
            }
          }
        });
        }
      })
    })
  </script>
</body>

</html>
  • 新增英雄页 insert.html
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>添加英雄</title>

    <!-- 导入jquery -->
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 导入bootstrap -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- 导入art-template -->
    <script src="./libs/template-web.js"></script>
    <!-- 发送ajax请求，往那个是否登录成功那个接口那里发请求 -->
    <script>
      (function () {
        $.ajax({
          type: "get",
          url: "http://127.0.0.1:4399/isLogin",
          success: function (backData) {
            console.log(backData);
            if (backData == "") {
              // 没有登录
              alert("没有登录，请登录！");
              window.location.href = "./login.html";
            }
          },
        });
      })();
    </script>
  </head>

  <body>
    <!-- bootstrap的容器  带版心的-->
    <div class="container">
      <!-- 导航 -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span> <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">欢迎进入CQ后台管理</a>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
      <!-- 底部的内容 -->
      <div class="row">
        <div class="col-xs-9">
          <div class="panel panel-default">
            <!-- 标题 -->
            <div class="panel-heading">
              <h3 class="panel-title">
                <!-- 面包屑导航 -->
                <ol class="breadcrumb">
                  <li><a href="#">首页</a></li>
                  <li><a href="#">英雄管理</a></li>
                </ol>
              </h3>
            </div>

            <!-- 内容 -->
            <div class="panel-body">
              <form class="form-horizontal" id="form">
                <div class="form-group">
                  <label for="name" class="col-sm-2 control-label">姓名</label>
                  <div class="col-sm-10">
                    <input
                      type="text"
                      name="heroName"
                      class="form-control"
                      id="heroName"
                      placeholder="姓名"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="skill" class="col-sm-2 control-label">技能</label>
                  <div class="col-sm-10">
                    <input
                      type="text"
                      name="heroSkill"
                      class="form-control"
                      id="skill"
                      placeholder="技能"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="icon" class="col-sm-2 control-label">头像</label>
                  <div class="col-sm-10">
                    <input
                      type="file"
                      name="heroIcon"
                      class="form-control"
                      id="icon"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <img src="" alt="" id="iconImg" width="72px" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default btn-insert">
                      新增
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      // 入口函数
      $(function () {
        // 1.文件预览
        // 1.1 给file表单注册onchange事件
        $("#icon").change(function () {
          // 1.2 获取选择的文件
          let file = this.files[0];
          // 1.3 生成文件url
          let url = URL.createObjectURL(file);
          // 1.4 将url赋值给img的src
          $("#iconImg").attr("src", url);
        });

        // 2.文件上传
        $(".btn-insert").on("click", function (e) {
          //禁用表单默认提交事件
          e.preventDefault();
          //创建FormData对象：参数是表单dom对象
          var fd = new FormData($("#form")[0]);
          $.ajax({
            url: "http://127.0.0.1:4399/hero/add",
            type: "post",
            dataType: "json",
            data: fd,
            contentType: false,
            processData: false,
            success: function (backData) {
              console.log(backData);
              if (backData.code == 200) {
                alert("新增成功");
                // 跳转首页
                window.location.href = "./index.html";
              }
            },
          });
        });
      });
    </script>
  </body>
</html>
  • 编辑页 update.html
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>编辑</title>
  <!-- 导入jquery -->
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 导入bootstrap -->
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  <!-- 导入art-template -->
  <script src="./libs/template-web.js"></script>
  <style>
    .btn-exit {
      margin-top: 8px;
    }
  </style>
  <!-- 发送ajax请求，往那个是否登录成功那个接口那里发请求 -->
  <script>
    (function(){
      $.ajax({
        type:"get",
        url:"http://127.0.0.1:4399/isLogin",
        success:function(backData){
          console.log(backData);
          if(backData == ""){
            // 没有登录
            alert("没有登录，请登录！")
            window.location.href = "./login.html"
          }
        }
      })
    })();
  </script>
</head>

<body>
  <!-- bootstrap的容器  带版心的-->
  <div class="container">
    <!-- 导航 -->
    <nav class="navbar navbar-default">
      <div class=".container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="#">欢迎进入CQ后台管理</a>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
    <!-- 底部的内容 -->
    <div class="row">
      <!-- 编辑内容 -->
      <div class="col-xs-9">
        <div class="panel panel-default">
          <!-- 标题 -->
          <div class="panel-heading">
            <h3 class="panel-title">
              <!-- 面包屑导航 -->
              <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">英雄管理</a></li>
                <li class="active">英雄列表</li>
              </ol>
            </h3>
          </div>

          <!-- 内容 -->
          <div class="panel-body">
            <form class="form-horizontal ajax-form" id="form">
              <!-- 隐藏域  偷偷的 保存一些数据 不给正常用户看 -->
              <input type="hidden" id="id" name="id">
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" name="heroName" class="form-control" id="name" placeholder="姓名">
                </div>
              </div>
              <div class="form-group">
                <label for="skill" class="col-sm-2 control-label">技能</label>
                <div class="col-sm-10">
                  <input type="text" name="heroSkill" class="form-control" id="skill" placeholder="技能">
                </div>
              </div>
              <div class="form-group">
                <label for="icon" class="col-sm-2 control-label">头像</label>
                <div class="col-sm-10">
                  <input type="file" name="heroIcon" class="form-control" id="icon" placeholder="技能">
                  <img class="pre-img" src="" id="iconImg" alt="" width="72px" height="72px">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-success btn-save">保存</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  </script>
  <script>
    // 入口函数
    $(function () {
      // 1.获取从index.html传递过来的id
      let id = window.location.href.split('=')[1];
        
      // 判断url上是否有id
      /*
      如果已经登录，并且url上没有id，则直接跳转到首页
      */
      if(id == undefined){
        window.location.href = "./index.html"
      }
      // 2.加载英雄详情
      $.ajax({
        url: 'http://127.0.0.1:4399/hero/info',
        type: 'get',
        dataType: 'json',
        data: { id },
        success: function (backData) {
          console.log(backData);
          // 渲染页面
          $("#id").val(id);
          $('#name').val(backData.data.heroName);
          $('#skill').val(backData.data.heroSkill);
          $('#iconImg').attr('src', backData.data.heroIcon);
          // 给隐藏域id赋值
          $('#id').val(id);
        }
      });
      // 3.文件预览
      // 3.1 给file表单注册onchange事件
      $('#icon').change(function () {
        // 3.2 获取选择的文件(原生的方法)
        let file = this.files[0];
        // 3.3 生成文件的url
        let url = URL.createObjectURL(file);
        // 3.4 将url赋值给img的src
        $('#iconImg').attr('src', url);
      })
      // 4.文件上传
      $('.btn-save').click(function (e) {
        // 4.1 阻止表单的默认跳转
        e.preventDefault();
        // 4.2 创建formdata(原生的方法)
        /*
          注意点：接口文档参数>表单参数
          解决方案：
            1.使用input隐藏域
            2.使用fd的append手动追加参数
        */
        let fd = new FormData($('#form')[0]);
        // 4.3 ajax提交文件
        $.ajax({
          url: 'http://127.0.0.1:4399/hero/update',
          type: 'post',
          dataType: 'json',
          data: fd,
          contentType: false,
          processData: false,
          success: function (backData) {
            console.log(backData);
            if (backData.code == 200) {
              alert('编辑成功');
              // 跳转首页
              window.location.href = './index.html';
            }
          }
        });
      })
    })
  </script>
</body>

</html>
  • 注册页 register.html
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>注册</title>
    <!-- 导入jquery -->
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 导入bootstrap -->
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <!-- 导入art-template -->
    <script src="./libs/template-web.js"></script>
    <!-- 导入md5 -->
    <script src="./libs/md5.min.js"></script>
    <style>
      /* 把登录框往下压 */
      .my-panel {
        margin-top: 200px;
      }
    </style>
  </head>

  <body>
    <!-- bootstrap的容器  带版心的-->
    <div class="container">
      <!-- 栅格的行 -->
      <div class="row">
        <!-- 栅格的列 offset 列偏移 -->
        <div class="col-xs-6 col-xs-offset-3">
          <!-- 面板 -->
          <div class="panel panel-default panel-primary my-panel">
            <!-- 面板的标题 -->
            <div class="panel-heading">
              <h3 class="panel-title">登录CQ管理系统</h3>
            </div>
            <!-- 面板的内容 -->
            <div class="panel-body">
              <!-- 表单 -->
              <form class="form-horizontal" id="form">
                <div class="form-group">
                  <label for="userName" class="col-sm-2 control-label"
                    >用户名</label
                  >
                  <div class="col-sm-10">
                    <input
                      type="text"
                      name="username"
                      class="form-control"
                      id="username"
                      placeholder="王**"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="passWord" class="col-sm-2 control-label"
                    >密&nbsp;&nbsp;&nbsp;&nbsp;码</label
                  >
                  <div class="col-sm-10">
                    <input
                      type="password"
                      name="password"
                      class="form-control"
                      id="password"
                      placeholder="密码"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="code" class="col-sm-2 control-label"
                    >验证码</label
                  >
                  <div class="col-sm-6">
                    <input
                      type="text"
                      name="code"
                      class="form-control"
                      id="code"
                      placeholder="验证码"
                    />
                  </div>
                  <div class="col-sm-4">
                    <!--
                       显示验证码的是一个img图片
                       让这个img的src指向那个验证码的接口地址
                       这样就会发请求，请求回来一个验证码，放在这个img的src这里
                    -->
                    <img
                      class="code"
                      src="http://127.0.0.1:4399/captcha"
                      alt=""
                    />
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <input
                      type="submit"
                      class="btn btn-danger"
                      id="register"
                      value="注册"
                    />
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      // 入口函数
      $(function () {
        // 1.点击验证码图片刷新验证码
        $(".code").click(function () {
          /*
          a.验证码不能使用ajax发送请求
            原因：验证码服务器返回的不是字符串，而是图片二进制数据
          b.验证码只需重设img标签的src属性即可
          问题：img标签自带缓存功能，如果src一致，则只发一次请求
          解决方案：添加随机参数
        */
          $(".code").attr(
            // 修改img的src属性，为验证码的接口
            "src",
            `http://127.0.0.1:4399/captcha?t=${Math.random() * 999}`
          );
        });

        // 2.注册按钮的点击事件
        $("#register").click(function (e) {
          // 2.1 阻止表单的默认跳转
          e.preventDefault();
          // 2.2 获取表单数据
          let username = $("#username").val().trim();
          let code = $("#code").val().trim();
          // md5加密 md5();
          // 第一个参数：要加密的明文
          // 第二个参数：加盐（作用：增加密码的复杂度；特点：同样的明文，盐不同，得到的密文不同）
          // 细节：尽量不在控制台打印用户的明文和密码
          // let password = $('#password').val().trim();
          // let miwen = md5(password,'jane');
          // 取出表单数据，加密完之后，重新赋值给表单
          let password = $("#password").val(
            md5($("#password").val().trim(), "maxiaoyu")
          );
          // 2.3 ajax发送请求
          /*
          FormData:(1)自动获取每个表单的name和value拼接成参数 (2)上传文件
          $('#form').serialize()：(1)自动获取每个表单的name和value拼接成参数
        */
          $.ajax({
            url: "http://127.0.0.1:4399/user/register",
            type: "post",
            dataType: "json",
            // data: {
            //   username,
            //   password,
            //   code,
            // },
            data: $("#form").serialize(),
            success: function (backData) {
              if (backData.code == 200) {
                alert("注册成功");
                // 跳转到登录页
                window.location.href = "./login.html";
              } else {
                alert(backData.msg);
              }
            },
          });
        });
      });
    </script>
  </body>
</html>
  • 登录页 login.html
<!--
 * @Author: 码小余
 * @Date: 2020-07-07 08:52:19
 * @LastEditTime: 2020-07-08 10:47:20
 * @FilePath: \nodejs code\cqmanager\www\login.html
--> 
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登录</title>

  <!-- 导入jquery -->
  <script src="./libs/jquery-1.12.4.min.js"></script>
  <!-- 导入bootstrap -->
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
  <!-- 导入art-template -->
  <script src="./libs/template-web.js"></script>
  <!-- 导入md5 -->
  <script src="./libs/md5.min.js"></script>
  <style>
    /* 登陆框上margin */
    .my-panel {
      margin-top: 200px;
    }

    .btn-width {
      width: 200px;
    }
  </style>
</head>

<body>
  <!-- bootstrap的容器  带版心的-->
  <div class="container">
    <!-- 栅格的行 -->
    <div class="row">
      <!-- 栅格的列 offset 列偏移 -->
      <div class="col-xs-6 col-xs-offset-3">
        <!-- 面板 -->
        <div class="panel panel-default panel-primary my-panel">
          <!-- 面板的标题 -->
          <div class="panel-heading">
            <h3 class="panel-title">登录CQ管理系统</h3>
          </div>
          <!-- 面板的内容 -->
          <div class="panel-body">
            <!-- 表单 -->
            <form class="form-horizontal" id="form">
              <div class="form-group">
                <label for="userName" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input type="text" name="username" class="form-control" id="username" placeholder="王**">
                </div>
              </div>
              <div class="form-group">
                <label for="passWord" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="col-sm-10">
                  <input type="password" name="password" class="form-control" id="password" placeholder="密码">
                </div>
              </div>
              <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" class="btn btn-success btn-width btn-login" value="登录">
                <a href="./register.html"><button type="button" class="btn btn-danger btn-width">注册</button></a>
              </div>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script>
    // 入口函数
    $(function () {
      // 1.登录按钮的点击事件
      $('.btn-login').click(function (e) {
        // 1.1 阻止表单的默认跳转
        e.preventDefault();
        // 1.2 密码md5加密
        $('#password').val(md5($('#password').val().trim(),'maxiaoyu'));
        // 1.3 ajax发送请求
        $.ajax({
          url:'http://127.0.0.1:4399/user/login',
          type:'post',
          dataType:'json',
          data:$('#form').serialize(),
          success: function(backData){
            if (backData.code==200) {
              alert('登录成功');
              // 跳转首页
              window.location.href='./index.html';
            } else {
              alert(backData.msg);
            }
          }
        });
      })
    });
  </script>
</body>

</html>

关于数据库操作，推荐以下两篇文章

https://blog.csdn.net/Cool_breeze_/article/details/107166954

https://blog.csdn.net/Cool_breeze_/article/details/103512437

码小余の博客
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Nodejs项目的创建
weixin_44492705的博客
06-29 1983
准备工作（一） 在命令提示符当中输入以下命令 node init -y 以此创建package.json文件，如下图（此处在文件夹中打开命令提示符，除了创建了文件，还安装了jquery的第三方模块） npm i -save xxx:安装到node_modules目录下并且安装到依赖（package.json中的"dependencies"），简写npm i xxx -S（生产环境安装） npm i --save-dev xxx:安装到node_modules目录下并且安装到依赖（package.j
使用nodejs开发cli项目实例
10-24
主要介绍了使用nodejs开发cli项目实例,本文讲解使用generator-cli-starter实现cli项目的开发,需要的朋友可以参考下
九、英雄管理（cqmanager）系统
小康博客
07-06 459
查看源代码 准备 mysql-ithm的使用 安装npm i mysql-ithm 使用 参照文档即可。 简单示例 // 导入模块 const hm = require("mysql-ithm"); //2.连接数据库 //如果数据库存在则连接，不存在则会自动创建数据库 hm.connect({ host: "localhost", //数据库地址 port: "3306", user: "root", //用户名，没有可不填 password: "root", //密码，.
nodejs版本管理工具：Node Version Manager
weixin_33737134的博客
02-13 182
2019独角兽企业重金招聘Python工程师标准>>> ...
掌握Node Version Manager（nvm）：跨平台Node.js版本管理
最新发布
interest_ing_的博客
04-18 1339
Node.js是一个流行的JavaScript运行环境，用于构建各种类型的应用程序，从简单的Web应用到复杂的企业级后端服务。Node Version Manager（nvm）是一个命令行工具，它允许开发者在同一台机器上安装和切换不同版本的Node.js。本文将详细介绍nvm的作用、在不同操作系统下的安装方法，以及如何使用nvm来管理Node.js版本。
Node Version Manager（nvm）：轻松管理 Node.js 版本的利器
Huahua_1223的博客
04-17 1998
Node.js 是现代 Web 开发中不可或缺的一部分，然而，随着时间的推移，Node.js 的不断更新和发展，我们往往需要在同一台机器上安装和管理多个 Node.js 版本，以适应不同项目的需求。而在这个问题上，成为了解决方案。本文将介绍如何安装和使用 nvm，让你轻松管理 Node.js 版本。Node Version Manager（nvm）是一个强大的工具，可以帮助你轻松管理 Node.js 版本，让你的开发工作更加流畅。
nodeJS项目建立流程
TERMINUSL的博客
05-04 4262
1、在项目文件夹中启动cmd命令窗口 2、初始化一个packsge.json包，使用命令： npm init -y 或者 cnpm init -y 3、下载express模块： npm install express --save 注意：--save表示是将模块下载到工作模式 4、建立一个服务器： let express=require("express"); let app=new express(); app.listen(3000,()=>{//3000是端口号，
Nodejs项目包发布
天天向上
05-26 1973
选择authenticator application方式，可以下载Google Authenticator，扫码输入app里的验证码。登录npm账号（需要在Google Authenticator中接收验证码并最后输入）配置package.json，项目名称要避免重复，也避免不正式，否则可能被检测为垃圾。将npm的bin下的nrm等命令，加到环境变量。nrm是npm源管理器，可以切换不同源。查看node和npm版本。下载nodejs压缩包。解压nodejs压缩包。查看npm的bin目录。
nodejs 后端项目文件打包
通然物联官方账号
10-17 4149
nodejs 后端项目文件打包 （koa2 的打包可以看这里） 应用场景 使用 webpack，像打包前端代码一样打包后端代码，以便在创建 docker 镜像时过滤 node_modules，使镜像变小，加快 push 速度。 安装 npm install 非打包运行 npm start 访问 http://localhost:3000 打包 npm run buil...
宝塔部署nodejs项目
热门推荐
sunddy_x的博客
06-14 2万+
宝塔部署nodejs项目
nodejs构建项目
xiejunna的博客
03-15 1361
在构建nodejs项目时，先确定已经安装了nodejs，npm。这里记录安装好nodejs，npm之后构建项目的过程： 1.安装express开发框架，命令：sudo npm install -g express-generator2.创建项目，命令：express -t ejs newProjectName3.添加nodejs依赖库，命令：//1.进入到创建的项目目录里： cd newProje
NodeJS入门项目案例（Express+Mysql）
11-11
NodeJS入门项目案例（Express+Mysql）是一个适合初学者的教程，旨在引导你进入Node.js服务端开发的世界。在这个项目中，我们将使用Express框架，一个简洁且强大的Web应用开发框架，以及Mysql，一个流行的开源关系型...
express搭建nodejs项目源代码
07-17
nodejs基于express框架搭建项目的代码，直接通过127.0.0.1:3000就可以直接访问
nodejs:NodeJS示例项目
05-10
节点js NodeJS示例项目
nodejs更改项目端口号的方法
10-18
今天小编就为大家分享一篇nodejs更改项目端口号的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Nodejs 操作数据库
码小余の博客
07-06 1万+
Nodejs 操作数据库 nodejs操作数据库-增 // 导包 const express = require("express"); var mysql = require("mysql"); // 创建一个和数据库的连接 var connection = mysql.createConnection({ host: "localhost", // 数据库服务器的地址 user: "root", // 账号 password: "lijiazhao123", // 密码 databas
Node项目实战开发-博客系统
码小余の博客
08-12 1万+
Nodejs项目实战开发-博客系统（已完结） 个人博客系统 前言： 开发技术 技术 版本 Node ^14.3.0 ejs ^3.1.3 express ^4.17.1 cookie-session ^1.4.0 mysql ^2.18.1 开发工具 技术 版本 VSCode ^1.47.3.0 MySql ^8.0.12 PhpStudy ^8.1.0.7 第一阶段 博客前台 第二阶段 博客后台 博客前台 项目环境搭建 首先初始化项目 在
当博客系统遇上live2d后
码小余の博客
07-12 1万+
想要实现这个效果其实非常难~~hhh 首先需要改我们已经写好的 view 文件夹下的layout.jade 文件 – 就是引用一大堆库，这些库都存放在 public 文件夹下，供其引用 doctype html html(lang='en') head meta(charset='UTF-8') meta(name='viewport', content='width=device-width') title= title blo.
HTTP消息
码小余の博客
08-14 1万+
HTTP消息 请求头 响应头 成功响应 重定向 客户端响应 服务端响应 0850875)] 服务端响应
nodejs创建项目
04-03
当使用Node.js创建项目时，可以按照以下步骤进行操作： 1. 首先，确保你已经在计算机上安装了Node.js。你可以在Node.js官方网站上下载并安装最新版本的Node.js。 2. 打开命令行终端或者命令提示符窗口，进入你想要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码小余の博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值