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">当前位置:首页 > 新增英雄</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">当前位置:首页 > 英雄信息修改</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:'服务器内部错误'
})
}
}
})
})
逻辑思维图