英雄管理系统

CSS内容

add.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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--
        HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
      -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }

        .navbar-brand {
            padding: 10px 15px;
        }

        .page-title {
            font-size: 16px;
            font-weight: bold;
        }

        .file-input {
            outline: none;
            display: inline-block;
            margin-top: 5px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-horizontal {
            margin-top: 10px;
        }

        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }

        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }

        .preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
<div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                    <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="#"><img src="images/logo.png"></a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <div class="row">
                            <div class="col-md-6 page-title">新增英雄</div>
                            <div class="col-md-6 text-right">当前位置：首页 &gt; 新增英雄</div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form action="#" method="" class="form-horizontal">
                            <div class="form-group">
                                <label for="heroName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="skillName" class="col-sm-2 control-label">技能</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                                <div class="col-sm-10">
                                    <input type="file" class="file-input" id="heroIcon" name="icon" />
                                    <img src="" class="preview" alt="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-success btn-add">
                                        新 增
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!--
  Include all compiled plugins (below), or include individual files as needed
-->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $('#heroIcon').on('change', function () {
            var dataFile=URL.createObjectURL(this.files[0]);
            $('.preview').attr('src',dataFile);
            // console.log(dataFile)
        });
        $('.btn-add').on('click', function (e) {
            e.preventDefault();
            var fromData = new FormData($('form')[0]);
            $.ajax({
                type: 'post',
                url: 'http://localhost:4399/hero/add',
                data: fromData,
                contentType:false,
                processData:false,
                success: function (res) {
                    // console.log(r)
                    console.log(res)
                    if(res.code==201){
                        alert(res.msg);
                        window.location.href='./index.html';
                        return;
                    }
                    alert(res.msg)
                }
            })
        })


    })


</script>

edit.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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!--
        HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries
      -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }

        .navbar-brand {
            padding: 10px 15px;
        }

        .page-title {
            font-size: 16px;
            font-weight: bold;
        }

        .file-input {
            outline: none;
            display: inline-block;
            margin-top: 5px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-horizontal {
            margin-top: 10px;
        }

        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }

        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }

        .preview {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
<div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                    <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="#"><img src="images/logo.png"></a>
            </div>
        </div>
    </nav>


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <div class="row">
                            <div class="col-md-6 page-title">英雄信息修改</div>
                            <div class="col-md-6 text-right">当前位置：首页 &gt; 英雄信息修改</div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form action="#" method="" class="form-horizontal">
                            <!-- 隐藏一个input -->
                            <input type="hidden" name="id" id="id" />
                            <div class="form-group">
                                <label for="heroName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input required type="text" class="form-control" id="heroName" name="name" placeholder="请输入姓名"
                                           value="盖伦" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="skillName" class="col-sm-2 control-label">技能</label>
                                <div class="col-sm-10">
                                    <input required type="text" class="form-control" id="skillName" name="skill" placeholder="请输入技能"
                                           value="躲草丛" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="heroIcon" class="col-sm-2 control-label">头像</label>
                                <div class="col-sm-10">
                                    <!-- <img src="lib/img/盖伦.png" alt=""> -->
                                    <input required type="file" class="file-input" id="heroIcon" name="icon" />
                                    <!-- 预览的标签 -->
                                    <img src="" class="preview" alt="" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-primary btn-save">
                                        保存
                                    </button>
                                    <button type="submit" class="btn btn-cancel">取消</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!--
  Include all compiled plugins (below), or include individual files as needed
-->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>


<script>
    $(function () {
        var id = window.location.search.split('=')[1];
        console.log(id)
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:4399/getHeroById',
            data: {
                id: id
            },
            success: function (res) {
                // console.log(res)
                if (res.code == 200) {
                    $('#heroName').val(res.data.name)

                    $('#skillName').val(res.data.skill);
                    $('.preview').attr('src', res.data.icon);
                    $('#id').val(id)
                }
            }
        })

        $('#heroIcon').on('change', function () {
            // console.log()
            var fileName = URL.createObjectURL(this.files[0]);
            $('.preview').attr('src', fileName)
        })

        //保存数据
        $('.btn-save').on('click', function (e) {
            e.preventDefault();
            var formData = new FormData($('form')[0]);

            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1:4399/edit',
                data: formData,
                contentType: false,
                processData: false,
                success: function (res) {
                    //   console.log(res)

                    if (res.code == 200) {
                        alert(res.msg);
                        window.location.href = './index.html';

                    } else {
                        alert(res.msg)
                    }
                }
            })
        })
    })

</script>

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>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }

        .navbar-brand {
            padding: 10px 15px;
        }

        .logout {
            font-weight: 900;
            font-size: 20px;
            color: #ff0000;
            text-decoration: none;
        }

        .logout:hover {
            text-decoration: none;
            color: yellowgreen;
        }

        #my-table th {
            text-align: center;
        }

        #my-table td {
            text-align: center;
            line-height: 80px;
            padding: 0;
            padding: 10px;
        }

        td img {
            width: 80px;
            height: 80px;
        }

        .username {
            font-weight: 900;
            color: hotpink;
            background-color: yellowgreen;
        }

        .pagination {
            margin: 0px;
            padding: 0px;
            font-size: 0;
            line-height: 1;
        }

        .pagination li {
            display: inline-block;
            font-size: 14px;
        }

        .mp15 {
            margin-top: 15px;
        }

        .table {
            margin-bottom: 0;
        }

        .table-bordered>thead>tr>td,
        .table-bordered>thead>tr>th {
            border-bottom-width: 1px;
        }

        .page-title {
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>
<div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                    <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="#"><img src="images/logo.png"></a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading clearfix">
                        <div class="row">
                            <div class="col-md-6 page-title">英雄列表</div>
                            <div class="col-md-6 text-right">当前位置：首页</div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <!-- action 不写 就是当前页面 method 不写 就是 get -->
                        <div class="row">
                            <div class="col-md-9">
                                <!--<form class="form-inline">
                                    <div class="form-group">
                                      <label class="sr-only" for="exampleInputAmount"
                                        >Amount (in dollars)</label
                                      >
                                      <div class="input-group">
                                        <div class="input-group-addon">英雄姓名</div>
                                        <input
                                          type="text"
                                          value=""
                                          class="form-control"
                                          name="search"
                                          placeholder="请输入查询内容"
                                        />
                                      </div>
                                    </div>
                                    <button type="submit" class="btn btn-default">查找</button>

                                  </form>-->
                            </div>
                            <div class="col-md-3">
                                <a href="./add.html" class="btn btn-success pull-right">新增</a>
                            </div>

                        </div>

                        <table id="my-table" class="table table-bordered mp15">
                            <thead>
                            <tr>
                                <th width="25%">头像</th>
                                <th width="25%">姓名</th>
                                <th width="25%">技能</th>
                                <th width="25%">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><img src="./lib/img/盖伦.png" alt="" /></td>
                                <td>盖伦</td>
                                <td>躲草丛</td>
                                <td>
                                    <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                                    <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><img src="./lib/img/盖伦.png" alt="" /></td>
                                <td>盖伦</td>
                                <td>躲草丛</td>
                                <td>
                                    <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                                    <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<!--引入模板引擎js文件-->
<script src="./lib/js/template-web.js"></script>
<!--准备一个模板-->
<script type="text/html" id="heroList_temp">
    {{each data v}}
    <tr>
        <td><img src="{{v.icon}}"></td>
        <td>{{v.name}}</td>
        <td>{{v.skill}}</td>
        <td>
            <button onclick="location.href='./edit.html?id={{v.id}}'" class="btn btn-primary">编辑</button>
            <button  data-id='{{v.id}}' class="btn btn-danger delete">删除</button>
        </td>
    </tr>
    {{/each}}
</script>

<SCript>
    //入口函数
    $(function () {
        //一:进到首页，就要发送ajax请求， 获职所有的英雄数据.
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:4399/hero/list',
            success: function (backData) {
                // console.log(backData)
                // console.log(backData.user)
                if(backData.user == undefined){
                    //说明没有登录
                    alert('没有登录，请登录')
                    window.location.href = './login.html'
                }
                if(backData.code.length == 0){
                    $('tbody').html('没有数据')
                    return
                }
                if (backData.code == 200) {
                    //通过模板引擎渲染
                    //调用模板引擎核心方法
                    var resHtml = template('heroList_temp', backData)
                    console.log(resHtml)
                    $('tbody').html(resHtml)
                }
            }
        })
    })
    getData()

    //出巡符合条件的所有英雄
    //1. 给查询按钮设置一个点击事件
    $('#searchBtn').on('click',function(e){
        //2. 去掉默认的提交行为
        e.preventDefault()
        //3.获取用户输入内容，查询关键词
        let search = $('#search').val().trim()
        //4. 发送ajax请求，获取数据
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:4399/getAllHero',
            data:{
                search
            },
            success: function (backData) {
                // console.log(backData)
                if(backData.heros.length == 0){
                    $('tbody').html('没有数据')
                    return
                }
                if (backData.code == 200) {
                    //调用模板引擎核心方法
                    var resHtml = template('heroList_temp', backData)
                    console.log(resHtml)
                    $('tbody').html(resHtml)
                }
            }
        })
    })

    //删除：给所有的删除按钮设置点击事件（委托注册）
    //1.注册点击事件
    $('tbody').on('click', '.btn-delete', function () {
        //2.获取当前点击的这个删除按钮自定义属性保存的英雄id
        var id = $(this).attr('data-id')
        // console.log(id)
        //3.发送ajax请求，把id传过去
        $.ajax({
            type:'post',
            url:'http://127.0.0.1:4399/hero/delete',
            data:{
                id
            },
            success:function(backData){
                if(backData.code == 200){
                    //4。删除成功，就重新加载一下数据，或者刷新页面
                    alert('删除成功')
                    getData()
                }
            }
        })
    })
    


</SCript>

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" />
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .login-panel {
            margin-top: 100px;
        }

        .vCode {
            height: 36px;
            cursor: pointer;
        }

        .wrap {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url('images/bg03.jpg') center bottom no-repeat;
            overflow: auto;
        }

        .navbar-brand {
            padding: 10px 15px;
        }

        .form-horizontal {
            margin-top: 10px;
        }

        .form-horizontal .form-group {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                    <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="#"><img src="images/logo.png"></a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-default login-panel">
                    <div class="panel-heading">
                        <h3 class="panel-title"><b>用户登录</b></h3>
                    </div>
                    <div class="panel-body">
                        <form action="#" method="post" class="form-horizontal">
                            <div class="form-group">
                                <label for="userName" class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-10">
                                    <input type="text" name="username" value="叶良辰" class="form-control" id="username"
                                           placeholder="请输入用户名" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="userPass" class="col-sm-2 control-label">密码</label>
                                <div class="col-sm-10">
                                    <input type="password" name="password" value="1234" class="form-control" id="password"
                                           placeholder="请输入密码" />
                                </div>
                            </div>
                            <!-- <div class="form-group">
                              <label for="vCode" class="col-sm-2 control-label">验证码</label>
                              <div class="col-sm-6">
                                <input type="text" name="vcode" class="form-control" id="vcode" placeholder="请输入验证码" />
                              </div>
                              <div class="col-sm-4">

                            <img class="vCode" src="/captcha" alt="" />
                        </div>
                      </div> -->
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-success login">
                                        登陆
                                    </button>
                                    <a href="./register.html" class="btn btn-default">注册</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script>
    //入口函数
    $(function () {
        //一:登录功能
        //1. 给登录按钮设置一个点击事件
        $('.login').on('click', function (e) {
            //2.去挥默认的提交行为
            e.preventDefault()
            //3.获取用户输入的账号和密码（要和注册的时候一样的加密规则的加密后的密码）
            let username = $('#username').val().trim()//账号
            //把用户输入的面膜用md5加盐的方式加密后，重新赋值给密码输入框
            $('#password').val(md5($('#password').val().trim(),'linge'))
            let password = $('#password').val().trim()//密码
            //4.发送ajax请求，获取返回的数据
            $.ajax({
                type: 'post',
                url: 'http://127.0.0.1:4399/login',
                data: {
                    username,
                    password
                },
                success: function (backData) {
                    if (backData.code == 200) {
                        //4.如果成功，就跳转到首页
                        alert('登录成功')
                        window.location.href = 'index.html'
                    } else {
                        alert(backData.msg)
                    }
                }
            })
        })
    })

</script>

js部分

需要的包

const express = require('express')
const hm = require('mysql-ithm')
const cors = require('cors')
var multer = require('multer')
var bodyParser = require('body-parser')
var svgCaptcha = require('svg-captcha')
var cookieSession = require('cookie-session')

如果数据库存在则连接，不存在则自动创建数据库

hm.connect({
    host:'localhost',
    post:'3306',
    user:'root',
    password:'root',
    database:'cqmanager503'
})

创建Model(表格模型：负责增删改查)

如果table表格存在则连接，不存在则自动创建

let studentModel = hm.model('student',{
    heroName:String,
    heroSkill:String,
    heroIcon:String,
    isDelete:String
})

配置中间件

可用cookie配置中间件

app.use(cors())
app.use(bodyParser.urlencoded({extended:false}))
//设置cookie的中间件
app.use(coolieSession({
    name:'session',
    keys:['222'], //加密用的加盐

    maxAge:7 * 24 * 60 * 60 * 1000 //表示这个cookie7天后过期
}))

写接口

查询英雄列表（查询没有删除的所有英雄）

app.get('/hero/list',(req,res)=>{
    //查询当前的cookie
    //如果没有登录，直接来访问这个list接口，那这个cookie就是undefined
    //如果登录了，来访问这个list页面，那这个cookie就是有值的
    //那现在我们就可以判断这个有没有值，从而判断你有没有登录
    //console.log(req.session.user)



    //a.有可能传一个要查询的英雄名字参数过来，也有可能什么参数都没
    let {search} = req.query
    //console.log(search) //查询参数就是有值，没有查询参数就是undefined
    //b.判断
    if(!search){
        //如果进到这里，说明没有查询参数，就要查询出所有的英雄
        heroModel.find('isDelete="false"',(err,results)=>{
            if(err){
                res.send({
                    code:300,
                    msg:'服务器内部错误'
                })
            }else{
                res.send({
                    code:400,
                    heros:results,
                    user:req.session.user
                })
            }
        })

    }else{
        //如果进到这里，说明有查询参数
        //模糊查询的语法

        heroModel.find(`heroName like "%${search}" and isDelete="false"`,(err,results)=>{
            if(err){
                res.send({
                    code:300,
                    msg:'服务器内部错误'
                })
            }else{
                res.send({
                    code:400,
                    heros:results
                })
            }
        })
    }
})

查询英雄详情（根据id来查询显示到编辑页）

app.get('/hero/info',(req,res)=>{
    //a.接收传递过来的英雄id
    let {id} = req.query
    //console.log(id)
    //b.根据id查询英雄详细信息
    heroModel.find(`id=${id}`,(err,results)=>{
        if(err){
            res.send({
                code:300,
                msg:'服务器内部错误'
            })
        }else{
            res.send({
                code:200,
                //以为是根据id查询得到的英雄数据，肯定是唯一的，因为id也是唯一的
                //所以这里results这个数组可以取值返回
                data:results[0]
            })
        }
    })
    res.send('sb')
})

编辑英雄

app.post('/hero/upldata',upload.single("heroIcon"),(req,res)=>{
    //如果不改头像，只改名字和技能，我们希望这种请求也是可以的
    //console.log(req.file)
    //console.log(req.body)
    //赋值
    let {id,heroName,heroSkill} = req.body
    let obj = {
        id,
        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:300,
                msg:'服务器内部错误'
            })
        }else{
            res.send({
                code:400,
                msg:'修改成功'
            })
        }
    })
})

删除英雄(软删除)

app.post('/hero/delete',(req,res)=>{
    //a.接收前端传递过来的要删除的英雄id
    let {id} = req.body
    //console.log(id)
    //b.调用mysql-ithm模块中的方法
    heroModel.update(`id=${id}`,{isDelete:"true"},(err,results)=>{
        if(err){
            res.send({
                code:300,
                msg:'服务器内部错误'
            })
        }else{
            res.send({
                code:400,
                msg:'删除成功'
            })
        }
    })
})

新增英雄

app.post('/hero/add',upload.single('heroIcon'),(req,res)=>{
    //console.log(req.file.filename)
    //console.log(req.body)
    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:300,
                msg:'服务器内部错误'
            })
        }else{
            res.send({
                code:400,
                msg:'新增成功'
            })
        }
    }
})

验证码

app.get('/captcha',(req,res)=>{
    //创建一个验证码
    var captcha = svgCaptcha.create({
        size:4,
        ignoreChars:'0o1il',
        noise:1,
        color:'red',
        background:'blue'
    })
    console.log(captcha.text)
    //返回验证码
    res.type('svg')
    res.status(200).send(captcha.data)
})

用户注册

app.post('/user/register',(req,res)=>{
    //a.获取前端传递过来的用户名/加密的密码/验证码
    let {username,password,code} = req.body
    //console.log(username,password,code)
    //b.验证 验证码输入是否正确
    if(code.toLocaleLowerCase() != captchaText.toLocaleLowerCase()){
        //进入到这里，说明用户输入的验证码不对
        res.send({
            code:402,
            msg:'验证码错误'
        })
    }else{
        //进入这里，说明验证码正确，可以开始注册了
        //还需要判断用户是否已经被注册了
        heroModel.find(['username'],(err,results)=>{
            if(err){
                res.send({
                    code:402,
                    msg:'服务器错误',
                })
            }else{
                //说明查询成功，但是还要看出来有没有结果
                if(results.length > 0){
                    res.send({
                        code:402,
                        msg:'用户名存在'
                    })
                }else{
                    //该用户不存在，可以注册
                    userModel.insert({
                        username,
                        password
                    },(err,results)=>{
                        console.log(err)
                        console.log(results)
                        if(!err) console.log('新增成功')
                    })
                }
            }
        })
    }
})

用户登录

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 = {username,password}
                res.send({
                    code:500,
                    msg:'登陆成功'
                })
            }else{
                res.send({
                    code:500,
                    msg:'服务器内部错误'
                })
            }
        }
    })
})