node+express项目案例(三)

node+express项目案例(一):https://blog.csdn.net/Chris__wang/article/details/90738551

node+express项目案例(二):https://blog.csdn.net/Chris__wang/article/details/90738794

node+express项目案例(三):https://blog.csdn.net/Chris__wang/article/details/90744140
项目地址:https://github.com/wangyeky3419/node-app

数据库用的是mysql数据库,表内数据会放在代码中

本项目虽然页面不多,但是包含了基本的数据库建立,查询,修改,删除,插入,路由管理以及artTemplate模板应用,页面登录,cookie登录用户信息存储,md5密码加密等

下面是用户部分

template/user/user.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/bootstrapValidator.css">
    <link rel="stylesheet" href="/css/alert.css">
    <title>用户信息</title>
    <style>
        .alert-btn-box {
            height:35px;
        }
    </style>
</head>
<body>
    <div class="py-3">
        {{include './userAdd.art'}}
        {{include './userEdit.art'}}
        <button type="button" class="btn btn-primary editBtn" id="refresh">刷新</button>
    </div>
    <div>
        <table  class="table table-primary" id="table"></table>
    </div>
</body>
</html>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap-table.min.js"></script>
<script src="/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/bootstrapValidator.min.js"></script>
<script src="/js/alert.js"></script>
<script>
    $('#table').bootstrapTable({
        url:'user/get_users',
        toolbar: "#toolbar",
        sidePagination: "true",
        striped: true, // 是否显示行间隔色
        // search : "true",
        uniqueId: "ID",
        pageSize: "10",
        pagination: true, // 是否分页
        sortable: false, // 是否启用排序
        clickToSelect: true,
        uniqueId: "id",
        columns: [
            {checkbox: true},
            {
                field: 'name',
                title: '姓名'
            },
            {
                field: 'code',
                title: '编码'
            },
            {
                field: 'industry',
                title: '所属行业'
            },
            {
                field: 'job',
                title: '职位'
            },
             {
                field: 'city',
                title: '城市'
            },
            {
                field: '',
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                formatter:function(value, row, index){
                    return '<button type="button" class="btn btn-primary del"  onclick=del('+row.id+')>删除</button>'
                }
            },

        ]
    });
    $('#userAddForm').bootstrapValidator({
    message: 'This value is not valid',
       feedbackIcons: {
       valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
    },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '名称不能为空'
                    }
                }
            },
            code: {
                validators: {
                    notEmpty: {
                        message: '编码不能为空'
                    }
                }
            }
        }
    });
    //新增保存
    $('#add').on('click',function(){
        var bootstrapValidator = $("#userAddForm").data('bootstrapValidator');
        bootstrapValidator.validate();
        if(bootstrapValidator.isValid()){
            $.ajax({
                url:'user/userAdd',
                type:'POST',
                data:$('#userAddForm').serialize(),
                success:function(result){
                    if(result.msg='success'){
                        $('#table').bootstrapTable('refresh');
                        jqueryAlert({
                            'icon'    : 'img/right.png',
                            'content' : '新增成功',
                            'closeTime' : 2000,
                        })
                    }else{
                        jqueryAlert({
                            'icon'    : 'img/error.png',
                            'content' : '新增失败',
                            'closeTime' : 2000,
                        })
                    }
                },
                error:function(err){
                    jqueryAlert({
                        'icon'    : 'img/warning.png',
                        'content' : '新增异常',
                        'closeTime' : 2000,
                    })
                }
            })
        }
    })
    //修改前判断是否选中数据
    $('#editBtn').on('click',function(){
        var rows = $('#table').bootstrapTable('getAllSelections');
        if(rows.length==1){
            $('#userEditForm #id').val(rows[0].id);
            $('#userEditForm #name').val(rows[0].name);
            $('#userEditForm #code').val(rows[0].code);
            $('#userEditForm #job').val(rows[0].job);
            $('#userEditForm #city').val(rows[0].city);
            $('#userEditForm #industry').val(rows[0].industry);
        }else{
            jqueryAlert({
                'icon'    : 'img/warning.png',
                'content' : '请选择一行数据',
                'closeTime' : 2000,
            });
            return false;
        }
    });
    //修改保存
    $('#edit').on('click',function(){
        $.ajax({
            url:'user/userEdit',
            type:'POST',
            data:$('#userEditForm').serialize(),
            success:function(result){
                if(result.msg='success'){
                    $('#table').bootstrapTable('refresh');
                    jqueryAlert({
                        'icon'    : 'img/right.png',
                        'content' : '修改成功',
                        'closeTime' : 2000,
                    })
                }else{
                    jqueryAlert({
                        'icon'    : 'img/error.png',
                        'content' : '修改失败',
                        'closeTime' : 2000,
                    })
                }
            },
            error:function(err){
                jqueryAlert({
                    'icon'    : 'img/warning.png',
                    'content' : '修改异常',
                    'closeTime' : 2000,
                })
            }
        })
    })
    //删除
    function del(id){
        var dialog = jqueryAlert({
			'title'   : '是否删除?',
			'content' : '删除后不能恢复......',
			'modal'   : true,
			'buttons' :{
				'确定' : function(){
					dialog.close();
                    $.ajax({
                        url:'user/userDel',
                        type:'POST',
                        data:{id:id},
                        success:function(result){
                            if(result.msg='success'){
                                $('#table').bootstrapTable('refresh');
                                jqueryAlert({
                                    'icon'    : 'img/right.png',
                                    'content' : '删除成功',
                                    'closeTime' : 2000,
                                })
                            }else{
                                jqueryAlert({
                                    'icon'    : 'img/error.png',
                                    'content' : '删除失败',
                                    'closeTime' : 2000,
                                })
                            }
                        },
                        error:function(err){
                            jqueryAlert({
                                'icon'    : 'img/warning.png',
                                'content' : '删除异常',
                                'closeTime' : 2000,
                            })
                        }
                    })
				},
				'取消' : function(){
					dialog.close()
				}
			}
		})
       
    }
    //刷新
    $('#refresh').on('click',function(){
        $('#table').bootstrapTable('refresh');
    })
</script>

这里面使用了bootstrapTable插件进行了表格渲染

并且在此页面引入的新增,修改部分组件,至于表单验证样式问题前面已经提过,是由于bootstrap4里面没有该样式,具体解决办法请看   项目案例(一)部分 https://mp.csdn.net/postedit/90738551

新增、修改、删除、刷新等,利用的是jquery 的ajax发送请求

后台代码如下routes/user.js

const express = require('express');
const mysql = require('mysql');
var db = mysql.createPool({
    host:'localhost',
    user:'root',
    password:'9527',
    database:'learn'
});
module.exports = function(){
    var router = express.Router();
    router.get('/get_users',(req,res)=>{
        db.query(`SELECT * FROM user_table`,(err,data)=>{
            if(err){
                res.status(500).send('database error').end()
            }else{
                res.send(data).end()
            }
        })
    });
    router.get('/',(req,res)=>{
        res.render('index.art',{
            path:'./user/user.art'
        })
    })
    //新增
    router.post('/userAdd',(req,res)=>{
        var b = req.body;
        db.query(`INSERT INTO user_table (name,code,industry,job,city) VALUES ('${b.name}','${b.code}','${b.industry}','${b.job}','${b.city}')`,(err,data)=>{
            if(err){
                res.status(500).send('数据库错误').end()
            }else{
                res.status(200).send({msg:'success'}).end()
            }
        })
    })
    //修改
    router.post('/userEdit',(req,res)=>{
        var b = req.body;
        db.query(`UPDATE user_table SET name='${b.name}',code='${b.code}',industry='${b.industry}',job='${b.job}',city='${b.city}' WHERE id='${b.id}'`,(err,data)=>{
            if(err){
                res.status(500).send('数据库错误').end();
            }else{
                res.status(200).send({msg:'success'}).end()
            }
        })
    })
    //删除
    router.post('/userDel',(req,res)=>{
        db.query(`DELETE FROM user_table WHERE id='${req.body.id}'`,(err,data)=>{
            if(err){
                res.status(500).send('数据库错误').end();
            }else{
                res.status(200).send({msg:'success'}).end()
            }
        })
    })
    return router;
}

新闻列表new部分使用的是分页加载,每次加载5条新闻   template/news/news.art

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新闻页</title>
<style>
    html,body {
        height: 100%;
    }
</style>
</head>
<body>
<div class="container w-100 h-100">
    <div class="w-100 h-100 bg-light">
        <div class="p-5" id="newsContent">
            <!--$data['data']获取index.art页面传递过来的data数据-->
            {{each $data['data'] as value index}}
                <div class="item">
                    <h5>{{value.title}} <small class="float-right">{{value.time}}</small></h5>
                    <span>{{value.content}}</span>
                    <hr>
                </div>
            {{/each}}
        </div>
        <p class="text-center" id="loadMore" style="cursor:pointer">加载更多</p >
    </div>
</div>
</body>
</html>
<script src="/js/jquery.min.js"></script>
<script>
    //每次显示两条
    $('#loadMore').on('click',function(){
        // $('#newsContent').append()
        var itemsLen = $('.item').length
        var html = ''
        $.ajax({
            url:'/news/more',
            type:'POST',
            data:{number:itemsLen},
            success:function(result){
                var data = result.data;
                if(data.length == 0){
                    $('#loadMore').html('已无更多数据。。。')
                }
                for(var i = 0; i < data.length; i++){
                    html+= `<div style="display:none" class="insert item">
                                <h5>${data[i].title} <small class="float-right">${data[i].time}</small></h5>
                                <span>${data[i].content}</span>
                                <hr>
                            </div>`
                }
                $('#newsContent').append(html) 
                $('.insert').show('slow');
            }
        })
    })
</script>

点击加载更多,调用接口查询更多数据,利用ajax发起数据请求,当返回数据为空的时候,证明没有更多数据

routes/news.js

const express = require('express');
const mysql = require('mysql');
var db = mysql.createPool({
    host:'localhost',
    user:'root',
    password:'9527',
    database:'learn'
});
module.exports = function(){
    var router = express.Router();
    router.get('/',(req,res)=>{
        db.query(`SELECT * FROM news_table LIMIT 0,5`,(err,result)=>{
            if(err){
                res.status(500).send('database error').end()
            }else{
                console.log('data',result)
                res.render('index.art',{
                    path:'./news/news.art',
                    data:result
                })
            }
        })
       
    });
    router.post('/more',(req,res)=>{
        console.log(11111111111,req.body.number)
        db.query(`SELECT * FROM news_table LIMIT ${+req.body.number},5`,(err,result)=>{
            if(err){
                res.status(500).send('database error').end()
            }else{
                res.status(200).send({msg:'success',data:result})
            }
        })
       
    });
    return router;
}

由于代码里面写的很清楚,注释也很清晰,而且项目并不复杂,很容易理解,故而文章中没有太多介绍,将代码下载一看便懂

至此,node+express项目完毕 

后期如有时间,会更新文件上传下载部分以及注册功能的完善,谢谢

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值