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项目完毕
后期如有时间,会更新文件上传下载部分以及注册功能的完善,谢谢