1.npm下下面的几个插件
2.连接数据库
DB.js
// 连接数据库
const { Sequelize } = require('sequelize');
const sequelize = new Sequelize('huotai','root','root',{ //数据库名字,账号,密码
host:'localhost', //主机名
dialect:'mysql' //什么数据库
});
module.exports = sequelize;
3.建表
公司表
gongsi.js
const sequelize = require("./DBjk.js")
const { DataTypes } = require('sequelize');
const zhengongsi = sequelize.define('zhengongsi', {
gongsi : {
type : DataTypes.STRING, //数据类型
allowNull : false //是否可以为空
},
bumeng : {
type : DataTypes.STRING,
allowNull : false
},
sjian : {
type : DataTypes.STRING,
allowNull : false
},
xiugair : {
type : DataTypes.STRING,
allowNull : false
},
shuid : {
type : DataTypes.STRING,
allowNull : false
}
}, {
freezeTableName: true,//强制生成表明不加s
createdAt : false,//数据创建时间 模型希望你有该字段
updatedAt : false,//数据更新时间
paranoid : true,
});
module.exports = zhengongsi;
管理员表
guanliyuan.js
const sequelize = require("./DBjk.js")
const { DataTypes } = require('sequelize');
const guanliyuan= sequelize.define('guanliyuan', {
name : {
type : DataTypes.STRING,
allowNull : false
},
pass : {
type : DataTypes.STRING,
allowNull : false
}
}, {
freezeTableName: true,//强制生成表明不加s
createdAt : false,//数据创建时间 模型希望你有该字段
updatedAt : false,//数据更新时间
paranoid : true,
});
module.exports = guanliyuan;
建表建关系
aync.js
require('./gongsi.js');
require('./guanliyuan.js');
const sequelize = require('./DBjk.js');
(async function(){
await sequelize.sync({alter:true});
console.log("用户模型表刚刚(重新)创建");
})()
4.前端页面
注册页面index.html
<body>
<div class="box">
<h1 class="lean">注册页面</h1>
<div class="div">
<span>用户名:</span>
<input type="text" class="username">
</div>
<div class="div">
<span style="margin-right: 40px;">密 码:</span>
<input type="text" class="userpwd">
</div>
<span class="ts"></span>
<div class="zc">注册</div>
<a href="./html/login.html">已有账号,前往登录!</a>
</div>
<script src="./js/index.js"></script>
</body>
登录页面login
扫描二维码关注公众号,回复:
15241857 查看本文章
<body>
<div class="box">
<h1 class="lean">登录页面</h1>
<div class="div">
<span>用户名:</span>
<input type="text" class="username">
</div>
<div class="div">
<span style="margin-right: 40px;">密 码:</span>
<input type="text" class="userpwd">
</div>
<span class="ts"></span>
<div class="dl">登录</div>
<a href="../index.html">没有账号,前往注册!</a>
</div>
<script src="../js/login.js"></script>
</body>
主页zeng
<div class="obj">
<ul>
<i>基础管理</i>
<li style="color: yellow;">商品管理</li>
<!-- </ul>
<ul> -->
<i class="aaa">订单管理</i>
<li>交易订单</li>
<!-- </ul>
<ul> -->
<i>系统管理</i>
<li>用户管理</li>
<li>菜单管理</li>
<li>角色管理</li>
<li>公司管理</li>
<li>系统环境管理</li>
<li>权限管理</li>
<!-- </ul>
<ul> -->
<i>支付管理</i>
<li>支付配置信息</li>
<li>支付配置</li>
</ul>
</div>
<div class="bbj"><a href=""></a></div>
<input type="text" placeholder="输入公司名称" style="position: absolute;top: 180px;left: 600px;">
<input type="text" placeholder="请输入部门代码" style="position: absolute;top: 180px;left: 800px;">
<input type="text" placeholder="请输入你的姓名" style="position: absolute;top: 180px;left: 1000px;">
<button
style="background-color: rgb(64, 158, 255);border-radius: 5px; color: #fff;position: absolute;top: 175px;left: 1280px;">查询</button>
<button
style="background-color: rgb(64, 158, 255);border-radius: 5px; color: #fff;position: absolute;top: 175px;left: 1190px;">增加</button>
<div class="thead">
<ul>
<li>
<input type="checkbox" id="checkAll">
</li>
<li>
公司名称
</li>
<li>
公司代码
</li>
<li>
修改时间
</li>
<li>
修改人
</li>
<li>
操作
</li>
</ul>
</div>
<div class="tbody">
</div>
<div class="span">
</div>
<div class="tt"><img src="../img/jh.png" alt="" style="width: 22px;height: 22px;position: absolute;top: 8px;"></div>
css页面就不展示了
js部分
index
let ts = document.getElementsByClassName("ts")[0]
$('.zc').click(function(){
let uname = document.getElementsByClassName("username")[0].value;
let pwd = document.getElementsByClassName("userpwd")[0].value;
// 发送ajax请求
let a = /\w{6,17}$/; //密码正则
let b = /^[a-zA-Z]\w{2,17}$/; //账号正则
if(a.test(pwd) && b.test(uname)){
$.ajax({
type: "post",
url: "http://localhost:3000/register",
data: {'username':uname,'userpwd':pwd},
dataType: 'json',
success: function (data) {
fun(data)
}
})
}else{
alert('注册失败,请输入正确格式');
}
})
function fun(num){
if(num == 0){
ts.innerHTML = "用户名已占用,请更换";
ts.style.color = "red"
}else if(num == 1){
ts.innerHTML = "注册成功";
ts.style.color = "green"
}else if(num == 2){
ts.innerHTML = "垃圾前端,正则都不做";
ts.style.color = "red"
}else{
ts.innerHTML = "情联系客服"
ts.style.color = "red"
}
}
注册页面
let ts = document.getElementsByClassName("ts")[0]
let uname = document.getElementsByClassName("username")[0];
let pwd = document.getElementsByClassName("userpwd")[0];
$('.dl').click(function(){
$.ajax({
type: 'post',
url: "http://localhost:3000/login",
data:{'username':uname.value,'userpwd':pwd.value},
dataType: 'json',
success: function (data) {
console.log(data);
fun(data);
}
})
})
function fun(num){
if(num == 0){
ts.innerHTML = "用户名不存在";
ts.style.color = "red";
window.location.href = "http://localhost:3000/index.html"
}else if(num == 1){
ts.innerHTML = "登录成功";
ts.style.color = "green";
window.location.href = "http://localhost:3000/html/zeng.html?username=" + uname.value
}else if(num == 2){
ts.innerHTML = "密码错误";
ts.style.color = "red"
}else{
ts.innerHTML = "情联系客服"
ts.style.color = "red"
}
}
主页
<script>
var ming = window.location.href.split('?')[1].split('=')[1];
$('.bbj a').html(ming);
let username = window.location.href.split("?")[1].split("=")[1];
function ajax(qing, di, shu, backcall) {
$.ajax({
type: qing,
url: di,
data: shu,
dataType: 'json',
success: function (data) {
backcall(data);
}
})
}
ajax('post', 'http://localhost:3000/xq_getdata', ming, (data)=>{
let arr1 = data.rows;
let mm = Math.ceil(data.count/5);
for(var i = 1;i<=mm;i++){
$('.span').append(`
<span>${i}</span>
`)
}
$('.span span:eq(0)').addClass('xuan')
$('.tbody').html('');
for (let i = 0; i < arr1.length; i++) {
let time = arr1[i].sjian.slice(0,10)
$('.tbody').append(`<ul data-id=${arr1[i].id}>
<li>
<input type="checkbox" id="checkAll">
</li>
<li>
${arr1[i].gongsi}
</li>
<li>
${arr1[i].bumeng}
</li>
<li>
${arr1[i].sjian}
</li>
<li>
${arr1[i].xiugair}
</li>
<li>
<button>删除</button><button>修改</button>
</li>
</ul>
`);
}
});
// 分页
$('.span').click(function (e) {
if (e.target.nodeName == 'SPAN') {
$('.span span').removeClass('xuan');
$(e.target).addClass('xuan');
let ye = $(e.target).html();
ajax('post','http://localhost:3000/xq',`${ming}=${ye}`,(data) =>{
let arr1 = data.rows;
$('.tbody').html('');
for (let i = 0; i < arr1.length; i++) {
$('.tbody').append(`<ul data-id=${arr1[i].id}>
<li>
<input type="checkbox" id="checkAll">
</li>
<li>
${arr1[i].gongsi}
</li>
<li>
${arr1[i].bumeng}
</li>
<li>
${arr1[i].sjian}
</li>
<li>
${arr1[i].xiugair}
</li>
<li>
<button>删除</button><button>修改</button>
</li>
</ul>
`);
}
})
}
})
// 增
$('button').eq(1).on('click', function () {
let vau1 = $('input').eq(0).val();
let vau2 = +$('input').eq(1).val();
let vau3 = $('input').eq(2).val();
if (vau1 !== '' && vau2 !== '' && vau3 !== '' && (typeof vau2 == 'number')) {
ajax('post','http://localhost:3000/zengde',{'gongsi':`${vau1}`,'bumeng':`${vau2}`,'xiugair':`${vau3}`,'ks':`${ming}`},(data)=>{
console.log(data);
if (data == 0) {
alert('公司名字或者代码重复,请重新输入');
} if (data == 2) {
alert('添加失败')
}
else {
alert('添加成功');
window.location = "http://localhost:3000/html/zeng.html?username=" + ming
}
})
} else {
alert('请输入正确信息')
}
})
// 查
$('button').eq(0).on('click', function () {
let vau1 = $('input').eq(0).val();
let vau2 = $('input').eq(1).val();
let vau3 = $('input').eq(2).val();
if (vau1 !== '' || vau2 !== '' || vau3 !== '') {
ajax('post','http://localhost:3000/cha', {'gongsi':`${vau1}`,'bumeng':`${vau2}`,'xiugair':`${vau3}`,'ks':`${ming}`},(data)=>{
if (data == 0) {
alert('没有查找到你要的公司');
} else if (data == 2) {
alert('查找失败')
}
else {
$('.tbody').html('');
data.forEach((index, item) => {
$('.tbody').append(`<ul data-id=${index.id}>
<li>
<input type="checkbox" id="checkAll">
</li>
<li>
${index.gongsi}
</li>
<li>
${index.bumeng}
</li>
<li>
${index.sjian}
</li>
<li>
${index.xiugair}
</li>
<li>
<button>删除</button><button>修改</button>
</li>
</ul>
`);
})
$('.tbody').append(`<a>查询完成</a>`);
$('.tbody a').click(function (e) {
window.location = "http://localhost:3000/html/zeng.html?username=" + ming
})
}
})
} else {
alert('请输入信息')
}
})
// 删
$('.tbody').click(function (e) {
if (e.target.innerHTML == '删除') {
let k = e.target.parentElement.parentElement;
let m = e.target.parentElement.parentElement.dataset.id;
ajax('post','http://localhost:3000/shan',`${m}+${ming}`,(data)=>{
if (data == 1) {
k.remove()
} else {
alert('删除失败');
}
})
}
})
// 改
$('.tbody').click(function (e) {
if (e.target.innerHTML == '修改') {
var vau4 = e.target.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling;
var vau5 = e.target.parentElement.previousElementSibling.previousElementSibling.previousElementSibling;
var vau6 = e.target.parentElement.previousElementSibling;
var vau7 = e.target.parentElement.previousElementSibling.previousElementSibling;
let m = e.target.parentElement.parentElement.dataset.id;
let myDate = new Date();
let time = myDate.toLocaleDateString();
$('.dd').remove();
$('.tbody').append(`<div class = 'dd'>
<span>公司名称:<input></input></span>
<span>公司代码:<input></input></span>
<span>修改人 : <input></input></span>
<button>确定</button><button>取消</button>
</div>`)
$('.dd button').eq(0).click(function (e) {
let vau1 = $('.dd input').eq(0).val();
let vau2 = +$('.dd input').eq(1).val();
let vau3 = $('.dd input').eq(2).val();
if (vau1 !== '' && vau2 !== '' && vau3 !== '' && (typeof vau2 == 'number')) {
ajax('post','http://localhost:3000/gai', {'gongsi':`${vau1}`,'bumeng':`${vau2}`,'xiugair':`${vau3}`,'id':`${m}`,'ks':`${ming}`},(data)=>{
if (data == 1) {
vau4.innerText = vau1;
vau5.innerText = vau2;
vau6.innerText = vau3;
vau7.innerText = time;
alert('修改成功');
} else {
alert('修改失败')
}
})
} else {
alert('修改信息有误')
}
$('.dd').remove();
})
$('.dd button').eq(1).click(function (e) {
$('.dd').remove();
})
}
})
// 排序
var n = 1;
$('.tt').click(function (e) {
n++;
ajax('get','http://localhost:3000/pai',`${n}=${ming}`,(data)=>{
$('.tbody').html('')
let arr1 = data.rows;
for (let i = 0; i < arr1.length; i++) {
$('.tbody').append(`<ul data-id=${arr1[i].id}>
<li>
<input type="checkbox" id="checkAll">
</li>
<li>
${arr1[i].gongsi}
</li>
<li>
${arr1[i].bumeng}
</li>
<li>
${arr1[i].sjian}
</li>
<li>
${arr1[i].xiugair}
</li>
<li>
<button>删除</button><button>修改</button>
</li>
</ul>
`);
}
})
})
// 手风琴
$('.obj ul i').click(function (e) {
$(e.target).prevAll().filter('li').css('display', 'none');
$('.obj ul i').not(e.target).nextUntil('i').css('display', 'none');
$(e.target).nextUntil('i').toggle();
})
$('ul').css('background', '#008c8c');
$('ul:eq(0)').css('background', '#E54646');
// 单选多选
$('input[type = checkbox]:eq(0)').click(function (e) {
for (var i = 0; i < $('input[type = checkbox]').length; i++) {
$('input[type = checkbox]').eq(i).prop('checked', $('input[type = checkbox]:eq(0)').prop('checked'));
}
})
// 子按钮不选,全选也不选,子全选中,全选也选中
setTimeout(() => {
for (var j = 1; j < $('input[type = checkbox]').length; j++) {
$('input[type = checkbox]').eq(j).click(function (e) {
if (!$(this).prop('checked')) {
$('input[type = checkbox]:eq(0)').prop('checked', false)
} else {
var uncheck = $('.tbody ul li:first-child input:not(:checked)');
if (uncheck.length == 0) {
$('input[type = checkbox]').eq(0).prop('checked', true);
} else {
$('input[type = checkbox]').eq(0).prop('checked', false);
}
}
})
}
}, 0)
</script>
5.根据前台操作对数据库操作
登录注册
const guanli = require('./guanliyuan.js');
// 登录
async function denglu(ming,paw){
const connection = await guanli.findAll({
where:{
name:ming,
pass:paw
},
raw:true
});
for(let i = 0 ; i<connection.length ;i++) {
if(connection[i].name == ming && connection[i].pass == paw){
return 1;
}else{
return 0;
}
}
}
// 注册
async function zhuce(zhang,mi,query){
const con = await guanli.findAll({
where:{
name:zhang,
pass:mi
}
});
if(con[0]){
return 0;
}else{
const guan = await guanli.create(query);
return 1;
}
}
exports.denglu = denglu;
exports.zhuce = zhuce;
主页增删改查
const con = require("./gongsi.js");
const guanli = require('./guanliyuan.js');
const sequelize = require('sequelize');
// 首页数据接口
async function sye(ming){
const cc = await guanli.findAll({
where:{
name:ming
}
})
const mm =cc[0].dataValues.id;
const bb = await con.findAndCountAll({
where:{
shuid:mm
},
offset : 0,
limit : 5
})
return bb;
}
// 增
async function zeng(objzeng,ming){
const cc = await guanli.findAll({
where:{
name:ming
}
})
const mm =cc[0].dataValues.id;
const bb = await con.findAll({
where:{
shuid:mm
},
raw:true
})
bb.forEach((index,item)=>{
if(index.gongsi == objzeng.gongsi || index.bumeng == objzeng.bumeng){
return 0
}
})
objzeng.shuid = mm;
console.log(objzeng);
const zeng = await con.create(objzeng);
return zeng;
}
// 查
async function cha(objcha,ming){
const cc = await guanli.findAll({
where:{
name:ming
}
})
const mm =cc[0].dataValues.id;
const bb = await con.findAll({
where:{
shuid:mm
},
raw:true
})
let arr = [];
bb.forEach((index,item)=>{
if(index.gongsi == objcha.gongsi || index.bumeng == objcha.bumeng || index.xiugair == objcha.xiugair){
arr.push(index);
}
})
return arr;
}
// 删
async function shan(id){
const mm = await con.destroy({
where:{
id:id
}
})
return mm;
}
// 改
async function gai(objgai,id){
const cc = await con.findAll({
where:{
id:id
}
,raw:true
})
const mm = cc[0].shuid;
objgai.shuid = mm
const bb = await con.update(objgai,{
where:{
id:id
},
raw:true
})
return bb
}
// 排序
async function paixu(ming,mm){
const cc = await guanli.findAll({
where:{
name:ming
},
raw:true
})
const jj = cc[0].id;
if(mm %2 == 0){
const dd = await con.findAndCountAll({
where:{
shuid:jj
},
offset:0,
limit:5,
'order':[
['bumeng','DESC']
],
raw:true
})
return dd
}else{
const dd = await con.findAndCountAll({
where:{
shuid:jj
},
'order':[
['bumeng','ASC']
],
offset:0,
limit:5,
raw:true
})
return dd
}
}
// 分页
async function fenye(ming,ye){
console.log(ming,ye);
const cc = await guanli.findAll({
where:{
name:ming
},
raw:true
})
const id = cc[0].id;
const results = await con.findAndCountAll({
where:{
shuid:id
},
offset : (ye - 1) * 5,
limit : 5
})
return JSON.parse(JSON.stringify(results))
}
exports.sye = sye;
exports.zeng = zeng;
exports.cha = cha;
exports.shan = shan;
exports.gai = gai;
exports.paixu = paixu;
exports.fenye = fenye;
6.路由层
静态私服
const path = require("path")
const express = require("express")
const app = express();
app.get("*",(req,res,next)=>{
console.log("记录日志")
next()
})
app.use(express.json())
app.use(express.urlencoded({extended:true}))
const staticRoot = path.resolve(__dirname,"../public");
app.use(express.static(staticRoot,{
index : "index.html" //配置默认路径
}))
// 注册
app.use('/',require('./api/zhuce.js'));
// 登录
app.use('/',require('./api/denglu.js'));
// 增删改查
app.use('/',require('./api/sye.js'));
// app.use('/',require('./api/fenye.js'));
app.use(require('./errorMiddleware'));
const port = 3000;
app.listen(port,()=>{
console.log(`server listen ${port}`);
})
处理错误中间键
// 处理中间键错误
const getMsg = require('./getSendResult');
module.exports = (err,req,res,next)=>{
if(err){
const errObj = err instanceof Error ? err.message : err;
res.status(500).send(getMsg.getErr(errObj));
}else{
next()
}
}
接口
①登录
const { denglu } = require("../../do/myguanli");
const express = require("express");
const app = express();
const studentRouter = express.Router()
studentRouter.post('/login',((req,res,next)=>{
denglu(req.body.username,req.body.userpwd).then(data=>{
res.send(`${data}`)
})
}))
module.exports = studentRouter;
②注册
const { zhuce } = require("../../do/myguanli");
const express = require("express");
const app = express();
const studentRouter = express.Router()
studentRouter.post('/register',((req,res,next)=>{
zhuce(req.body.username,req.body.userpwd,{name:req.body.username,pass:req.body.userpwd}).then(data=>{
res.send(`${data}`)
})
}))
module.exports = studentRouter;
③增删改查排序
const { sye,zeng,cha,shan,gai,paixu,fenye } = require("../../do/mysql.js");
const express = require("express");
const { asyncHandler } = require("../getSendResult");
const app = express();
const studentRouter = express.Router()
var myDate = new Date();
var time = myDate.toLocaleDateString();
// 首页数据
studentRouter.post('/xq_getdata',((req,res,next)=>{
const mm = Object.keys(req.body);
sye(mm).then(data=>{
res.send(data)
})
}))
// 分页
studentRouter.post('/xq',((req,res,next)=>{
const mm = Object.keys(req.body)[0];
const kk = +req.body.jack;
fenye(mm,kk).then(data=>{
res.send(data)
})
}))
// 增
studentRouter.post('/zengde',((req,res,next)=>{
const ming = req.body.ks
delete req.body.ks;
const mm = req.body;
delete req.body.ks;
req.body.sjian = time;
zeng(req.body,ming).then(data=>{
res.send(data)
})
}))
// 查
studentRouter.post('/cha',((req,res,next)=>{
const mm = req.body.ks;
cha(req.body,mm).then(data=>{
res.send(data)
})
}))
// 删
studentRouter.post('/shan',((req,res,next)=>{
const mm = Object.keys(req.body)[0].split(' ')[0];
shan(mm).then(data=>{
res.send(`${data}`)
})
}))
// 改
studentRouter.post('/gai',((req,res,next)=>{
const mm = req.body.id;
const obj = {gongsi:req.body.gongsi,bumeng:req.body.bumeng,sjian:time,xiugair:req.body.xiugair}
gai(obj,mm).then(data=>{
res.send(`${data}`);
})
}))
// 排序
studentRouter.get('/pai',((req,res,next)=>{
const mm = Object.keys(req.query)[0];
const kk = req.query[mm];
paixu(kk,mm).then(data=>{
res.send(data)
})
}))
module.exports = studentRouter;
到此整个增删改查项目已完成,逻辑层肯定还有许多不严谨的地方(继续努力学习)
功能基本完成