node+mongodb+express+ejs的后台系统

//登录注册页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="stylesheets/login.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.1-beta1/jquery.min.js"></script>
</head>
<body>
<form action="" class="login">
<h3>后台管理系统</h3>
<input type="text" id="logname" placeholder="用户名"/><br />
<input type="password" id="logword" placeholder="密码"/><br />
<button id="logbtn">登录</button><br />
<a href="" class="zc">去注册</a>
</form>

<form action="" class="reg">
<h3>后台管理系统</h3>
<input type="text" id="regname" placeholder="用户名"/><br />
<input type="password" id="regword" placeholder="密码" /><br />
<button id="regbtn">注册</button><br />
<a href="" class="dl">去登录</a>
</form>

<script>
$(function(){
$(".zc").click(function(e){
e.preventDefault();
$(this).parent().fadeOut();
$(".reg").fadeIn();
})
$(".dl").click(function(e){
e.preventDefault();
$(this).parent().fadeOut();
$(".login").fadeIn();
})
//注册
$("#regbtn").click(function(e){
e.preventDefault();
$.post("/users/reg",{name:$("#regname").val(),password:$("#regword").val()},function(data){

if(data==1){
alert("注册成功")
location.reload();
}else{
alert("用户名已存在")
}
})
})

//登录
$("#logbtn").click(function(e){
e.preventDefault();
$.post("/users/login",{name:$("#logname").val(),password:$("#logword").val()},function(data){
console.log(data)
if(data==1){
alert("登录成功")
location.href="/"
}else{
alert("账号或密码 错误")
}
})
})


})
</script>
</body>

</html>


//首页

<!DOCTYPE html>
<html>
  <head>
    <title>首页</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://cdn.bootcss.com/jquery/1.11.1-beta1/jquery.min.js"></script>
  </head>
  <body>
    <header>
    <div class="header">
    <!--左边的头部信息-->
    <div class="header_left">
    <h3>后台布局</h3>
    <div>
    <a href="">用户列表</a>
    <a href="">会员列表</a>
    </div>
   
    </div>
    <!--右边个人信息和退出-->
    <div class="header_right">
    <div class="pep"></div>
    <% if(name){ %>
    <span>您好,<%- name %></span><span class="tuichu">退出登录</span>
    <% }else{ %>
    <span><a href="/login">登录</a></span>
    <span><a href="/login">注册</a</span>
<% } %>
    </div>
    </div>
    </header>
    <!--侧边栏-->
    <div id="asd">
    <div class="aside">
    <ul class="list">
    <li>控制台</li>
    <li>用户管理
    <ul class="banlist">
    <li class="tz">人员管理</li>
    <li>人事管理</li>
    <li>行政管理</li>
    </ul>
    </li>
    <li>系统公告
    <ul class="banlist">
    <li>公告类别</li>
    <li>公告信息</li>
    <li>公告时间</li>
    <li>公告统计</li>
    </ul>
    </li>
    <li>知识管理
    <ul class="banlist">
    <li>项目心得</li>
    <li>项目实训</li>
    <li>项目管理</li>
   
    </ul>
    </li>
    <li>任务管理
    <ul class="banlist">
    <li>近期任务</li>
    <li>任务主旨</li>
    <li>任务简介</li>
    </ul>
    </li>
    <li>销售管理
    <ul class="banlist">
    <li>销售目标</li>
    <li>销售人员</li>
    <li>销售主旨</li>
    </ul>
    </li>
    <li>项目管理
    <ul class="banlist">
    <li>项目要领</li>
    <li>项目分类</li>
    <li>项目实施</li>
    <li>项目计划</li>
    </ul>
    </li>
    <li>统计分析
    <ul class="banlist">
    <li>人员统计</li>
    <li>人员流动</li>
    <li>未来计划</li>
    <li>实施目标</li>
    </ul>
    </li>
    <li>客户反馈
    <ul class="banlist">
    <li>人事电话</li>
    <li>客服电话</li>
    <li>投诉电话</li>
    </ul>
    </li>
    <li>系统设置
    <ul class="banlist">
    <li>部门角色</li>
    <li>部门简介</li>
    <li>权限管理</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    $(function(){
    $(".list>li").mouseenter(function(){
    $(this).children().show()
    })
   
    $(".list>li").mouseleave(function(){
    $(this).children().hide()
    })
    $(".tuichu").click(function(){
    location.href="/relogin"
    })
    $(".tz").click(function(){
    location.href="content"
    })
   
    })
   
    </script>
  </body>

</html>

//添加

<%- include("index")%>
<link rel="stylesheet" type="text/css" href="/stylesheets/add.css"/>
 <script src="https://cdn.bootcss.com/jquery/1.11.1-beta1/jquery.min.js"></script>
<div class="add">
<h3>人员信息</h3>
工号:
<input type="text" id="num" value="" />
姓名:
<input type="text" id="names" value="" />
性别:
<select id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
年龄:
<input type="text" id="ages"/>
电子邮箱:
<input type="text" id="email"/>
电话:
<input type="text" id="phone"/>
部门:
<select id="part">
<option>人事部</option>
<option>财务部</option>
<option>经营部</option>
</select>
<div class="an">
<input type="button" class="add_tj" value="确定提交"/>
<input type="button" class="add_qx" value="返回"/>
</div>
</div>


<script type="text/javascript">
$(function(){
$(".add_tj").click(function(e){
e.preventDefault();
console.log("aaa")
$.post("/users/add",{gh:$("#num").val(),name:$("#names").val(),sex:$("#sex").val(),ages:$("#ages").val(),email:$("#email").val(),phone:$("#phone").val(),part:$("#part").val()},function(data){


if(data==1){
alert("添加成功")
location.href="content"
}else{
alert("添加失败")
}
})
})
})
</script>



//分页  搜索 排序 



<%- include("index") %>
<link rel="stylesheet" type="text/css" href="/stylesheets/content.css"/>
<div id="content">
<div class="con_top">
<input type="button" name="" id="add" value="添加" />
<input type="text" id="valu" />
<input type="button" value="搜索" id="seac"/>
排序:<select id="px">
<option>-类别-</option>
<option>工号</option>
<option>年龄</option>
</select>
<input type="button"  value="确定" id="sorte"/>
</div>
<table class="con">
<thead>
<tr>
<th>工号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电子邮箱</th>
<th>电话</th>
<th>部门</th>
<th>操作</th>
</tr>
</thead>




<tbody>
<% list.map(function(item){ %>
<tr>
<td><%- item.gh %></td>
<td><%- item.name %></td>
<td><%- item.sex %></td>
<td><%- item.ages %></td>
<td><%- item.email %></td>
<td><%- item.phone %></td>
<td><%- item.part %></td>

<td>
<a href="/replace?id=<%- item._id %>">编辑</a>
<span class="rem">删除</span>
</td>
</tr>
<% }) %>
</tbody>
</table>
<div class="btnm">
<ul>
<li><a href="/content?pagenum=<%- pagenum<=1?1:parseInt(pagenum)-1 %>">上一页</a></li>
<% if(page>4){%>
<li><a href="/content?pagenum=1">1</a></li>
<li><a href="/content?pagenum=2">2</a></li>
<li><a href="">...</a></li>
<li><a href="/content?pagenum=<%- page-1 %>"><%- page-1 %></a></li>
<li><a href="/content?pagenum=<%- page %>"><%- page %></a></li>
<% }else{ %>
<% for(let i =0;i<page;i++){ %>
<li><a href="/content?pagenum=<%- i+1 %>"><%- i+1 %></a></li>
<% } %>
<% } %>
<li><a href="/content?pagenum=<%- pagenum>page?page:parseInt(pagenum)+1 %>">下一页</a></li>
</ul>
</div>




</div>
<script type="text/javascript">




$(function(){
$("#add").click(function(){
location.href="/add"
})
//删除
$(".rem").click(function(){
var ct = $(this).parent().parent().find("td").eq(0).html();
$.post("/users/rem",{gh:ct},function(data){
if(data==1){
alert("删除成功")
location.reload();
}else{
alert("删除失败")
}
})
})


//搜索
$("#seac").click(function(){
var val =$("#valu").val();
$.post("/users/search",{val:val},function(data){
console.log(data)
if(data==0){
alert("没有此人")

}else{
var str = "";
for(var i=0;i<data.length;i++){
str+=`
<tr>
<td>${data[i].gh}</td>
<td>${data[i].name}</td>
<td>${data[i].sex}</td>
<td>${data[i].ages}</td>
<td>${data[i].email}</td>
<td>${data[i].phone}</td>
<td>${data[i].part}</td>
<td>
<a href="/add?id=${data._id}">编辑</a>
<span class="rem data-id=data.gh">删除</span>
</td>
</tr>`
}
$("tbody").html(str);

$(".rem").click(function(){
var ct = $(this).attr("data-id")
$.post("/users/rem",{gh:ct},function(data){
if(data==1){
alert("删除成功")
location.reload();
}else{
alert("删除失败")
}
})
})


}
})
});

$("#sorte").click(function(){
var gh = $("#px").val();
$.get("/content",{gh:gh},function(data){
// console.log(data)
location.href='/content?gh='+gh
})



})

})
</script>

//修改

<%- include("index")%>
<link rel="stylesheet" type="text/css" href="/stylesheets/replace.css"/>
 <script src="https://cdn.bootcss.com/jquery/1.11.1-beta1/jquery.min.js"></script>
<div class="add">
<h3>人员信息</h3>
工号:
<input type="text" id="num" value="<%- list.gh %>" />
姓名:
<input type="text" id="names" value="<%- list.name %>" />
性别:
<select id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
年龄:
<input type="text" id="ages" value="<%- list.ages %>"/>
电子邮箱:
<input type="text" id="email" value="<%- list.email %>"/>
电话:
<input type="text" id="phone" value="<%- list.phone %>"/>
部门:
<select id="part">
<option>人事部</option>
<option>财务部</option>
<option>经营部</option>
</select>
<div class="an">
<input type="button" class="add_tj" value="确定修改" data-id="<%- list._id %>"/>
<input type="button" class="add_qx" value="返回"/>

</div>
</div>
<script type="text/javascript">
$(".add_tj").click(function(){
var proId = $(this).attr("data-id")
$.post("/users/replace",{gh:$("#num").val(),name:$("#names").val(),sex:$("#sex").val(),ages:$("#ages").val(),email:$("#email").val(),phone:$("#phone").val(),part:$("#part").val(),proId:proId},function(data){
if(data==1){
alert("更改成功")
location.href="content"
}else{
alert("更改失败,用户已经存在")
}
})
})


</script>


//index.js

var express = require('express');
var router = express.Router();
var mongodb=require('mongodb').MongoClient;
var url="mongodb://localhost:27017/project";
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('/relogin',function(req,res){
req.session.destroy(function(){
res.redirect('/')
})


})


//内容
router.get('/content', function(req, res) {
var gh = req.query.gh;
console.log(gh)
//总条数
var count = 0;
//每页展现的数量
var size = 5;
//总页数
var page = 0;
//页码
var pagenum = req.query.pagenum;
pagenum=pagenum?pagenum:1;
mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("content",(err,coll)=>{
async.series([
function(callback){
mydb.collection("content").find({}).toArray((err,data)=>{
count = data.length;
page = Math.ceil(count/size);
pagenum = pagenum<1?1:pagenum;
pagenum = pagenum>page?page:pagenum;
})
callback(null,"");
},
function(callback){

if(gh=="工号"){
mydb.collection("content").find({}).sort({gh:1}).limit(size).skip((pagenum-1)*size).toArray((err,data)=>{
callback(null,data);
})
}else if(gh=="年龄"){
mydb.collection("content").find({}).sort({ages:-1}).limit(size).skip((pagenum-1)*size).toArray((err,data)=>{
callback(null,data);
})
}else{
mydb.collection("content").find({}).limit(size).skip((pagenum-1)*size).toArray((err,data)=>{
callback(null,data);
})
}
}
],function(err, data){
res.render('content',{list:data[1],page:page,count:count,pagenum:pagenum,size:size,name:req.session.name})
db.close();

})


})
})
});
//修改
router.get("/replace",function(req,res){
var id =ObjectId(req.query.id);
mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("content").find({_id:id}).toArray((err,data)=>{
res.render('replace',{list:data[0],name:req.session.name});
db.close();
})
})
})


//添加
router.get('/add', function(req, res) {
res.render('add', {name:req.session.name});
});


//登陆
router.get("/login",function(req,res){
res.render("login",{name:req.session.name})
})


module.exports = router;


//users.js

var express = require('express');
var router = express.Router();
var mongodb = require("mongodb").MongoClient();
var url = "mongodb://localhost:27017/object";
var ObjectId=require('mongodb').ObjectId;


/* GET users listing. */
router.get('/', function(req, res, next) {
});






//注册
router.post("/reg",function(req,res){
mongodb.connect(url,(err,db)=>{
var mydb=db.db("project");

mydb.collection("people").find({name:req.body.name}).toArray((err,data)=>{
if(data.length){
res.send("0");
}else{
res.write("1");
mydb.collection("people").insert(req.body);
res.end();
}
db.close();
});
})
});
//登录
router.post("/login",function(req,res){
mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("people").find({name:req.body.name,password:req.body.password}).toArray((err,data)=>{
if(data.length>0){
req.session.name = data[0].name;
res.send("1");
}else{
res.send("0");
}
db.close();
})
})
})


//退出登录


router.get('/relogin',function(req,res){
req.session.destory(function(){
res.redirect('/')
})


})


router.get('/content', function(req, res, next) {
  res.send('respond with a resource');
});
//添加人员信息
router.post('/add', function(req, res, next) {
// console.log(req.body);
var gh = parseInt(req.body.gh);
var name = req.body.name;
var ages = parseInt(req.body.ages);
var sex = req.body.sex;
var phone = req.body.phone;
var email = req.body.email;
var part = req.body.part;
mongodb.connect(url,(err,db)=>{

var mydb = db.db("project");
mydb.collection("content").find({gh:req.body.gh}).toArray((err,data)=>{
if(data.length){
res.send("2")
}else{
mydb.collection("content").insert({"gh":gh,"name":name,"ages":ages,"sex":sex,"phone":phone,"email":email,"part":part});
res.send("1")
}
db.close();
})
})
});
//更改
router.post("/replace",function(req,res){
var id = ObjectId(req.body.proId)


mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("content").update({_id:id},{$set:{"gh":req.body.gh,"name":req.body.name,"sex":req.body.sex,"ages":req.body.ages,"email":req.body.email,"phone":req.body.phone,"part":req.body.part}},(err,data)=>{
res.send("1");
db.close();
})
})
})


//删除信息
router.post("/rem",function(req,res){
mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("content").remove({gh:req.body.gh});
res.send("1")
db.close();
})

})


//搜索
router.post("/search",function(req,res){
mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("content").find({$or:[{email:req.body.val},{name:req.body.val},{gh:req.body.val},{ages:req.body.val},{sex:req.body.val},{phone:req.body.val},{part:req.body.val}]}).toArray((err,data)=>{
console.log(data)
if(data.length){
res.send(data);
db.close();
}else{
res.send("0");
db.close();
}

})
})
})


//工号排序


router.post("/paixu",function(req,res){
var numbe = req.body.gh;
numbe = numbe?numbe:1;
var sl =5;
mongodb.connect(url,(err,db)=>{
var mydb = db.db("project");
mydb.collection("content").find({}).sort({"gh":1}).limit(sl).skip((numbe-1)*sl).toArray((err,data1)=>{
console.log(data1)
res.send(data1);
})
db.close();
})
})


module.exports = router;


//app里面增加了几个模块

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var session=require('express-session')


var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');


app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use(session({
secret:'recommend 128 bytes random string',
cookie:{maxAge:20*60*100},
resave:true,
saveUnintialized:true
}))


app.use('/', indexRouter);
app.use('/users', usersRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});


// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};


  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


module.exports = app;







猜你喜欢

转载自blog.csdn.net/xy19950125/article/details/81050592