(node六)+mysql数据库写一个增删改查

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;">密 &nbsp;&nbsp;码:</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


<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;">密 &nbsp;&nbsp;码:</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>修改人 :&nbsp;&nbsp;<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;

到此整个增删改查项目已完成,逻辑层肯定还有许多不严谨的地方(继续努力学习)

在这里插入图片描述
在这里插入图片描述
功能基本完成

猜你喜欢

转载自blog.csdn.net/qq_45256777/article/details/121439432