今天把功能部分说完，七夕还在写技术博客也是没谁了
项目整体的目录
实现所有效果的代码
前端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" />
<link rel="stylesheet" href="stylesheets/Site.css" />
<link rel="stylesheet" href="stylesheets/zy.all.css" />
<link rel="stylesheet" href="stylesheets/font-awesome.min.css" />
<link rel="stylesheet" href="stylesheets/amazeui.min.css" />
<link rel="stylesheet" href="stylesheets/admin.css" />
<link rel="stylesheet" href="stylesheets/bootstrap.min.css" />
<style>
.btn{
margin: 0 auto;
}
h1{
margin-left: 300px;
text-align: center;
}
.btn{
margin-left:360px;
}
table{text-align: center;margin: 0 auto;}
.row{
text-align: center;
/*width: 485px;*/
}
.row td{
display: block;
width:100px;
border:1px red solid;
text-align: center;
margin: 0 auto;
}
.tui{
position: absolute;
top: 50px;
left: 780px;
}
</style>
<body>
<div class="container"></div>
<%- include('head.ejs') %>
<% if(name){ %>
<div class="dvcontent">
<button class="btn btn-info btn-flat tui" οnclick="location.href='/relogin'" style="margin-right: 489px;">
退出系统
</button>
<div>
<!--tab start-->
<div class="tabs">
<div class="hd">
<ul style="">
<li style="box-sizing: initial;-webkit-box-sizing: initial;" class="on">查看分类</li>
<li class="" style="box-sizing: initial;-webkit-box-sizing: initial;">添加分类</li>
</ul>
</div>
<div class="bd">
<ul style="display: block;padding: 20px;">
<li>
<!--分页显示角色信息 start-->
<div id="dv1">
<table class="table" id="tbRecord">
<!--查询功能开始-->
<tr>
查询内容：<input type="text" class="sousuo" style="margin:10px;font-size: 15px;"/>
<button class="in_sub" id="cha" style="margin:10px;padding-left:5px;padding-right:5px;font-size: 15px;">搜索</button>
</tr>
<!--查询功能结束-->
<tbody class="tablebody">
<!--<tr>
<td>1</td>
<td>牛肉</td>
<td class="edit"><button οnclick="btn_edit(1)"><i class="icon-edit bigger-120"></i>编辑</button></td>
<td class="delete"><button οnclick="btn_delete(1)"><i class="icon-trash bigger-120"></i>删除</button></td>
</tr>
</tbody> -->
<thead>
<tr>
<th>分类编号</th>
<th>分类名称</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<%data.map(function(item){ %>
<!--id="first"-->
<tr class="row">
<td class="col-xs-2" >
<%-item.clname %>
</td>
<td class="col-xs-2" >
<%-item.tit %>
</td>
<td class="col-xs-2">
<span class="edit"><button class="xiugai btn btn-success btn-xs" data-toggle="modal" data-target="#gai" id='<%-item._id %>'><i class="icon-edit bigger-120 "></i>编辑</button></span>
</td>
<td class="col-xs-2">
<span class="delete"><button class="twoboo" id='<%-item._id %>'><i class="icon-trash bigger-120 "></i>删除</button></span>
</td>
</tr>
<%}) %>
</tbody>
</table>
</div>
<!-- bootstrap分页功能 -->
<!--底部分页样式-->
<nav aria-label="Page navigation" style="margin-left: 460px;">
<ul class="pagination">
<li>
<a href="/flgl?pageNum=<%-pageNum<1?1:parseInt(pageNum)-1 %>" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!--模板
<li><a href="/liuyan?pageNum=1">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>-->
<% if(page>4){ %>
<li><a href="/flgl?pageNum=1">1</a></li>
<li><a href="/flgl?pageNum=2">2</a></li>
<li><a href="#">..</a></li>
<li><a href="/flgl?pageNum=<%-page-1 %>"><%-page-1 %></a></li>
<li><a href="/flgl?pageNum=<%-page %>"><%-page %></a></li>
<% }else{ %>
<% for(let i =0;i<page;i++){ %>
<li><a href="/flgl?pageNum=<%-i+1 %>"><%-i+1 %></a></li>
<% } %>
<% } %>
<li>
<a href="/flgl?pageNum=<%-pageNum>page?page:parseInt(pageNum)+1 %>" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!--底部分页样式end-->
<!--报错问题，分页的渲染问题，不知道是不是跟数据还没有过来有关系,等数据过来了最后再写-->
<!--底部分页结束-->
<!--修改模态窗-->
<div class="modal fade" id="gai" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">分类管理浮窗</h4>
</div>
<div class="modal-body">
<p><span style="color: black;">分类编号：</span><input type="text" class="clname" style="color: black;"></p>
<p><span style="color: black;">分类名称：</span><input type="text" class="tit" style="color: black;"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary gai">保存</button>
</div>
</div>
</div>
</div>
<!--修改模态窗end-->
<!--分页显示角色信息 end-->
</li>
</ul>
<ul class="theme-popbod dform" style="display: none;">
<div class="am-cf admin-main" style="padding-top: 0px;">
<!-- content start -->
<div class="am-cf admin-main" style="padding-top: 0px;">
<!-- content start -->
<div class="admin-content">
<div class="admin-content-body">
<div class="am-g">
<div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">
</div>
<div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4"
style="padding-top: 30px;">
<form class="am-form am-form-horizontal">
<!--添加的数据前端来源-->
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">
分类编号</label>
<div class="am-u-sm-9">
<input type="text" class="clnam" id="user-name" required
placeholder="分类编号" name="name" >
</div>
</div>
<div class="am-form-group">
<label for="user-intro" class="am-u-sm-3 am-form-label">
分类名称</label>
<div class="am-u-sm-9">
<input type="text" class="ti" id="user-intro" name="remark"
placeholder="分类名称"></input>
</div>
</div>
<div class="am-form-group">
<div class="am-u-sm-9 am-u-sm-push-3">
<input type="button" class="am-btn am-btn-success" value="添加分类" id="baocun"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- content end -->
</div>
<!-- end-->
</ul>
</div>
</div>
<!--tab end-->
</div>
<script src="/javascripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="/javascripts/Jqueryplugs.js" type="text/javascript"></script>
<script src="/javascripts/_layout.js" type="text/javascript"></script>
<script src="/javascripts/jquery.SuperSlide.source.js" type="text/javascript"></script>
<script src="javascripts/bootstrap.min.js"></script>
<script type="text/javascript">
var num = 1;
$(function() {
$(".tabs").slide({ trigger: "click" });
});
//添加
$('#baocun').click(function(){
$.ajax({
type:"post",
url:"/users/tianjia",
data:{clname:$('.clnam').val(),tit:$('.ti').val()},
success:function(data){
// console.log('9999999');
if(data == "1"){
alert('数据已存在');
console.log("1");
}else{
alert('添加成功');
location.href='/flgl';
console.log("2");
}
}
});
})
//删除
$(".twoboo").click(function(){
var ss=$(this).attr("id");
$.ajax({
type:"post",
url:"/users/deletemess",
data:{id:ss},//错误的地方。定义的是id
success:function(data){
console.log('删除事件');
location.href='/flgl';
}
});
})
//修改
$(".xiugai").click(function(){
var ss=$(this).attr('id');
$('.gai').click(function(){
$.ajax({
type:"post",
url:"/users/xiugai",
data:{id:ss,clname:$('.clname').val(),tit:$('.tit').val()},
success:function(data){
console.log(data);
location.reload();
}
});
})
})
//查找
$('.in_sub').click(function(){
console.log($('.sousuo').val());
$.ajax({
type:"post",
url:"/users/chaxun",
data:{dd:$('.sousuo').val()},
success:function(data){
console.log(data);
$('.tablebody').empty();
$('.row').empty();
// <!-- var ojbk = "";-->
$.map(data,function(item,i){
var ojbk=`
<tr class="row">
<td class="col-xs-2">
${item.clname}
</td>
<td class="col-xs-2" >
${item.tit}
</td>
<td class="col-xs-2">
<span class="edit"><button class="xiugai btn btn-success btn-xs" data-toggle="modal" data-target="#gai" id='${item._id}'><i class="icon-edit bigger-120 "></i>编辑</button></span>
</td>
<td class="col-xs-2">
<span class="delete"><button class="twoboo" id='${item._id}'><i class="icon-trash bigger-120 "></i>删除</button></span>
</td>
</tr>
`
$('.tablebody').append(ojbk);
})
}
});
})
</script>
</div>
<% }else{ %>
<button class="btn btn-success" οnclick="location.href='/login'">登陆</button>
<button class="btn btn-primary" οnclick="location.href='/register'">注册</button>
<% } %>
</body>
</html>
后台index.js
var express = require('express');
var router = express.Router();
var MongodbClient = require('mongodb').MongoClient;
var db_str = "mongodb://localhost:27017/mydb";
var async = require("async");
var ObjectId = require('mongodb').ObjectId;
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {name:req.session.name });
});
//注册
router.get('/register',(req,res)=>{
res.render('register',{})
})
//登陆
router.get('/login',(req,res)=>{
res.render('login',{})
})
//注销
router.get('/relogin',(req,res)=>{
req.session.destroy((err)=>{
if(err){
comsole.log(err)
}else{
res.redirect('/')
}
})
})
//分类管理
//分页的 数据获取在一起
router.get('/flgl',(req,res)=>{
//页码
let pageNum = req.query.pageNum
pageNum=pageNum?pageNum:1;
//总页数
let page = 0;
//每页数量
let size = 3;
//总条数
let count=0;
MongodbClient.connect(db_str,(err,database)=>{
database.collection('list',(err,coll)=>{
//留言数据实现分页效果 需要使用async异步数据处理
async.series([
function(callback) {
coll.find({}).toArray((err, data) => {
count = data.length;
page = Math.ceil(count / size)
// 上一页／下一页
pageNum = pageNum < 1 ? 1 : pageNum;
pageNum = pageNum > page ? page : pageNum;
//因为声明的变量都是全局变量，并且此处不需要传递数据，所以callback的返回值写空就可以
callback(null, '')
})
},
function(callback) {
coll.find({}).sort({ _id: -1 }).limit(size).skip((pageNum - 1) * size).toArray((err, data) => {
callback(null, data)
})
}
], function(err, data) {
//因为data是数组，第一个值从callback中获取的是空，第二个才是需要的数据，所以获取时，从data[1]开始
// data == ['',data]
res.render('flgl', {data:data[1],name:req.session.name,pageNum: pageNum, page: page, size: size, count: count })
database.close()
})
//留言数据实现分页效果 end
// coll.find({}).sort({_id:-1}).toArray((err,data)=>{
// res.render('flgl',{data:data,name:req.session.name})
// database.close();
// })
})
})
})
//库存管理
router.get('/kcgl',(req,res)=>{
res.render('kcgl',{name:req.session.name})
})
module.exports = router;
后台 usersjs
var express = require('express');
var router = express.Router();
var session = require("express-session");
var MongodbClient = require('mongodb').MongoClient; //命令行输入npm i mongodb@2 -D
var db_str = "mongodb://localhost:27017/mydb";
var ObjectId = require('mongodb').ObjectId;
/* GET users listing. */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//注册
router.post('/register', function(req, res) {
console.log(typeof(req.body),"**")
MongodbClient.connect(db_str,function(err,database){ //连接数据库
// console.log("connect db")
if (err) throw err;
database.collection("users",(err,coll)=>{ //找到集合
if (err) throw err;
// console.log("connect collection")
coll.find({name:req.body.name}).toArray((err,fd)=>{ //查询集合中是否有数据（是否已注册）
//如果不使用toArray方法，就算没有注册过，查找后参数fd返回的也是一个对象，只不过其中许多参数为0
if (err) throw err;
console.log(req.body.name)
console.log(fd.length)
// res.send("11")
if(fd.length){
console.log("The data has already existed")
res.send("0")
}else{
coll.insertOne(req.body,(err,co)=>{ //没有查到数据，插入数据
res.send("1")
console.log("inserted the data")
})
}
database.close();
})
})
})
});
//登录
router.post("/login",function(req,res){
console.log("**pass**",req.body.pass)
MongodbClient.connect(db_str,function(err,db){
db.collection("users",function(err,coll){
coll.find({name:req.body.name}).toArray(function(err,fd){
// console.log("**fd.pass**",fd[0].pass)
// console.log(fd)
if(fd.length){
if(req.body.pass == fd[0].pass){
req.session.name = fd[0].name
console.log("login success")
res.send("1")
}else{
console.log("password error")
res.send("2")
}
}else{
res.send("0")
console.log("unregister")
}
})
db.close();
})
})
})
//增加数据//控制策略
router.post('/tianjia',function(req,res){
console.log(req.body)
MongodbClient.connect(db_str,function(err,database){
database.collection('list',function(err,coll){
//判断是否和数据库里的重复
coll.find({clname:req.body.clname}).toArray(function(err,data){
if(data.length>0){
//已有数据,不保存
// console.log(data);
res.send('1')
}else{
//没有此数据，保存到数据库
coll.save(req.body,function(err,data){
// console.log(data[0]);
res.send('2');
})
}
database.close();
})
})
})
})
//删除数据
router.post('/deletemess',function(req,res){
var id = ObjectId(req.body.id);//老师上课讲的
console.log(req.body,"****");
// res.send("1")
MongodbClient.connect(db_str,function(err,database){
database.collection('list',function(err,coll){
//数据库"_id" id 97行获取的id 整体是删除数据库的语法
coll.remove({"_id":id},function(err){
res.send('1');
database.close()
})
})
})
})
//修改数据
router.post('/xiugai',function(req,res){
// res.send(req.body);
MongodbClient.connect(db_str,function(err,database){
database.collection('list',function(err,coll){
// console.log("********");
var id = ObjectId(req.body.id);
console.log(id);
coll.update({_id:id},
{$set:{clname:req.body.clname,tit:req.body.tit}},function(err,data){
console.log(data);
res.send("1");
database.close()
})
//coll.find({_id:id}).toArray(function(err,data){
// res.send(data);
// console.log(data);
// database.close();
//})
})
})
})
//查询数据
router.post('/chaxun',function(req,res){
MongodbClient.connect(db_str,function(err,database){
database.collection('list',function(err,coll){
var aa=new RegExp(req.body.dd);
console.log(aa);
coll.find({$or:[{clname:aa},{tit:aa}]}).toArray(function(err,data){
res.send(data);
database.close()
})
})
})
})
module.exports = router;
再见
7958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
