express脚手架安装命令
1/全局安装环境 npm install express –g
2/测试安装成功与否 express –h
3/安装npm install express-generator –g
4/脚手架创建项目 express -e myproject（项目名字）
5/进入目录 cd + myproject，安装依赖npm i 安装package.json中的依赖，
6/启动npm start 浏览器输入localhost:3000 查看
1、 前端页面代码
<body class="layui-layout-body">
<!-- 添加弹出层 -->
<div class="modal fade" id="myModal" 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">
<label for="recipient-name" class="control-label">真实姓名</label>
<input type="text" class="form-control" id="name">
<label for="recipient-name" class="control-label">添加昵称</label>
<input type="text" class="form-control" id="nicheng">
<label for="recipient-name" class="control-label">添加个性签名</label>
<input type="text" class="form-control" id="sign">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="tijiao">确认提交</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<!-- 修改弹出层 -->
<div class="modal fade" id="myModal2" 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">
<label for="recipient-name" class="control-label">修改姓名</label>
<input type="text" class="form-control" id="name2">
<label for="recipient-name" class="control-label">修改昵称</label>
<input type="text" class="form-control" id="nicheng2">
<label for="recipient-name" class="control-label">修改个性签名</label>
<input type="text" class="form-control" id="sign2">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="xiugai">确认修改</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">宇宙大开发无限责任公司</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="admin">用户列表</a></li>
<li class="layui-nav-item"><a href="member">会员列表</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
欢迎：<%- name %>
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<!-- 退出登录-路由跳转 -->
<li class="layui-nav-item" id="destroy" style="margin-left:20px;cursor: pointer">退出登录</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item"><a href="index.html">控制台</a></li>
<li class="layui-nav-item">
<a class="" href="javascript:;">系统设置</a>
<dl class="layui-nav-child">
<dd><a href="sysConfig">系统变量</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">用户管理</a>
<dl class="layui-nav-child">
<dd><a class="layui-this" href="admin">用户列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">权限管理</a>
<dl class="layui-nav-child">
<dd><a href="rule.html">规则列表</a></dd>
<dd><a href="role.html">角色列表</a></dd>
<dd><a href="adminRole.html">用户角色</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">会员管理</a>
<dl class="layui-nav-child">
<dd><a href="member">会员列表</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">开发者工具</a>
<dl class="layui-nav-child">
<dd><a href="control.html">一键生成</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">集成Demo</a>
<dl class="layui-nav-child">
<dd><a href="upload.html">文件上传</a></dd>
<dd><a href="upload.html">Execel导出</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<fieldset class="layui-elem-field">
<legend>用户管理 - 用户列表</legend>
<div class="layui-field-box">
<form class="layui-form" action="">
<div class="layui-form-item" style="text-align:center;">
<div class="layui-inline">
<div class="layui-input-inline">
<input autocomplete="off" class="layui-input" id="findval" placeholder="请输入名称" type="text" name="name" value="">
</div>
</div>
<div class="layui-inline" style="text-align:left;">
<div class="layui-input-inline">
<button class="layui-btn" id="find"><i class="layui-icon"></i>查询</button>
</div>
</div>
</div>
</form>
<hr>
<div class="layui-btn-group">
<button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" dw-url="create.html" dw-title="新增用户" dw-width="100%" dw-height="100%">
<i class="layui-icon" ></i>新增
</button>
<button class="btn btn-danger btn-xs dw-batch-delete " dw-url="./delete.json">
<i class="layui-icon"></i>删除
</button>
<button class="btn btn-success btn-xs dw-refresh">
<i class="layui-icon">ဂ</i>刷新
</button>
</div>
<hr>
<table class="layui-table">
<colgroup>
<col width="30">
<col width="90">
<col width="90">
<col width="110">
<col width="200">
<col width="100">
</colgroup>
<thead>
<tr style="font-weight:bold">
<!-- <th class="selectAll"><input type="checkbox"></th> -->
<th>序号</th>
<th>姓名</th>
<th>昵称</th>
<th>加入/修改时间</th>
<th>签名</th>
<th style="text-align:center;">操作</th>
</tr>
</thead>
<tbody id="tbody">
<% list.map(function(item,i){ %>
<tr>
<td><%- i+1 %></td>
<td><%- item.name %></td>
<td><%- item.nicheng %></td>
<td><%- item.time %></td>
<td><%- item.pass %></td>
<td class="text-center">
<div class="layui-btn-group">
<button class="btn btn-primary btn-xs change" data-toggle="modal" data-target="#myModal2" dw-url="create.html?id=1" dw-title="编辑用户">
<i class="layui-icon"></i>编辑
</button>
<button class="btn btn-danger btn-xs dw-delete delate" >
<i class="layui-icon"></i>删除
</button>
</div>
</td>
</tr>
<tr>
<% }) %>
</tbody>
</table>
<!-- 分页处理 -->
<div class="am-cf">
<li class="am-active" style="margin-top: 20px">
<span style="font-size:20px">第 <%-pagenum%> 页</span>
</li>
<div aria-label="Page navigation" style="margin-left:600px">
<ul class="pagination">
<li class="am-disabled">
<a href="/admin?pagenum=<%-pagenum<1?1:parseInt(pagenum)-1 %>">«</a>
</li>
<% if(page>5){%>
<li class="am-active">
<a href="/admin?pagenum=1">1</a>
</li>
<li class="am-active">
<a href="/admin?pagenum=2">2</a>
</li>
<li class="am-active">
<a href="#">...</a>
</li>
<li class="am-active">
<a href="/admin?pagenum=<%-page-1 %>"><%-page-1 %></a>
</li>
<li class="am-active">
<a href="/admin?pagenum=<%-page %>"><%-page %></a>
</li>
<% }else{%>
<% for(let i = 0;i<page;i++){ %>
<li class="am-active">
<a href="/admin?pagenum=<%-i+1 %>"><%-i+1 %></a>
</li>
<% } %>
<% } %>
<li>
<a href="/admin?pagenum=<%-pagenum>page?page:parseInt(pagenum)+1%>">»</a>
</li>
</ul>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script>
//添加数据
$("#tijiao").click(function(e){
e.preventDefault();
var today = new Date()
//console.log(today.toLocaleString())
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var hours = today.getHours();
var minute = today.getMinutes();
var time = year+"年"+month+"月"+day+"日"+hours+":"+minute
console.log(time)
console.log("222")
$.ajax({
type:"post",
url:"users/add",
data:{name:$("#name").val(),nicheng:$("#nicheng").val(),pass:$("#sign").val(),time:time},
success:function(data){
console.log(data)
if(data=="已存在"){
alert("用户名已存在")
}else if(data=="添加成功"){
alert("添加成功")
location.href="/admin"
}
}
})
$("#name").val()="";
$("#nicheng").val()="";
$("#sign").val()="";
})
//删除
$(".delate").on("click",function(e){
e.preventDefault();
console.log("000")
$.ajax({
type:"post",
url:"users/delate",
data:{name:$(this).parents("tr").find("td").eq(1).html()},
success:function(data){
if(data=="1"){
alert("删除成功")
location.href='/admin'
}else{
alert("删除失败")
}
}
})
})
//点击把需要修改的内容放在文本框
$(".change").on("click",function(e){
e.preventDefault();
var name1 = $(this).parents("tr").find("td").eq(1).html()
var nicheng1 = $(this).parents("tr").find("td").eq(2).html()
var sign = $(this).parents("tr").find("td").eq(4).html()
console.log(name1,nicheng1,sign)
$("#name2").val(name1)
$("#nicheng2").val(nicheng1)
$("#sign2").val(sign)
//修改的数据提交后台数据库
$("#xiugai").click(function(){
var today = new Date()
//console.log(today.toLocaleString())
var year = today.getFullYear();
var month = today.getMonth()+1;
var day = today.getDate();
var hours = today.getHours();
var minute = today.getMinutes();
var time = year+"年"+month+"月"+day+"日"+hours+":"+minute
var xiu1 = $("#name2").val()
var xiu2= $("#nicheng2").val()
var xiu3= $("#sign2").val()
console.log(xiu1,xiu2,xiu3)
$.ajax({
type:"post",
url:"users/change",
data:{name:name1,nicheng:nicheng1,sign:sign,namex:xiu1,nichengx:xiu2,signx:xiu3,time:time},
success:function(data){
if(data=="修改成功"){
alert("修改成功")
location.href='/admin'
}else{
alert("修改失败")
}
}
})
})
})
//查找
$("#find").click(function(e){
e.preventDefault();
var findval = $("#findval").val()
$.ajax({
type:"post",
url:"users/find",
data:{findval:findval},
success:function(data){
if(data=="没找到"){
alert("亲，没找到")
}else{
console.log(data)
var str = "";
for(var i=0;i<data.length;i++){
str+=
`<tr>
<td>${i+1}</td>
<td>${data[i].name}</td>
<td>${data[i].nicheng}</td>
<td>${data[i].time}</td>
<td>${data[i].pass}</td>
<td class="text-center">
<div class="layui-btn-group">
<button class="btn btn-primary btn-xs change" data-toggle="modal" data-target="#myModal2" dw-url="create.html?id=1" dw-title="编辑用户">
<i class="layui-icon"></i>编辑
</button>
<button class="btn btn-danger btn-xs dw-delete delate" >
<i class="layui-icon"></i>删除
</button>
</div>
</td>
</tr>
<tr>`
$("#tbody").html(str)
}
}
}
})
})
$("#destroy").click(function(){
location.href="/destroy"
})
</script>
2、index.js代码
var express = require('express');
var router = express.Router();
var mongo = require("mongodb").MongoClient;
var url1 = "mongodb://localhost:27017/mydb"
var async = require("async")
/* GET home page. */
//get 请求数据
//路由
router.get('/', function(req, res, next) {
res.render('index', { name:req.session.name });//ejs页面渲染数据
});
// router.get('/houtai', function(req, res, next) {
// res.render('houtai', { });//ejs页面渲染数据
// });
router.get('/qiantai', function(req, res, next) {
res.render('qiantai', { });//ejs页面渲染数据
});
router.get('/regist', function(req, res, next) {
res.render('regist', { });//ejs页面渲染数据
});
router.get('/login', function(req, res, next) {
res.render('login', { });//ejs页面渲染数据
});
router.get('/error', function(req, res, next) {
res.render('error', { });//ejs页面渲染数据
});
router.get('/houtai', function(req, res, next) {
res.render('houtai', { });//ejs页面渲染数据
});
//数据列表传前台+分页的实现
router.get('/admin', function(req, res, next) {
var count = 0;
var page = 0;
var size = 5;
//页码
var pagenum = req.query.pagenum;
var pagenum = pagenum?pagenum:1;
mongo.connect(url1,function(err,database){
database.collection("list",function(err,coll){
//异步处理
async.series([
function(callback){
coll.find({}).toArray(function(err,data){
count = data.length;//数据条数
//page = page<1? 1:page;
page = Math.ceil(count/size);//总共的页数
pagenum = pagenum<1?1:pagenum;//页码小于1；显示1
pagenum = pagenum>page?page:pagenum;//页码大于总页数；显示总页数
callback(null,'')
})
},function(callback){
coll.find().sort({_id:-1}).limit(size).skip((pagenum-1)*size).toArray(function(err,data){
callback(null,data)
})
}
],function(err,data){
res.render('admin',{list:data[1],page:page,count:count,pagenum:pagenum,size:size,name:req.session.name})
database.close()
})
// coll.find({}).toArray(function(err,data){
// res.render('admin', {list:data});//前端admin页面可用直接list
// database.close()
// })
})
})
});
router.get('/create', function(req, res, next) {
res.render('create', { });//ejs页面渲染数据
});
router.get('/member', function(req, res, next) {
res.render('member', { });//ejs页面渲染数据
});
router.get('/sysConfig', function(req, res, next) {
res.render('sysconfig', { });//ejs页面渲染数据
});
//销毁session
router.get('/destroy', function(req, res, next) {
req.session.destroy(function(err){
if(err){
console.log(err)
}else{
res.redirect("/regist")
}
})
});
module.exports = router;
3、users.js
var express = require('express');
var router = express.Router();
var mongo = require("mongodb").MongoClient;
var url1 = "mongodb://localhost:27017/mydb"
var ObjectId=require('mongodb').ObjectId;
/* GET users listing. */
//post页面的接收
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
//前端首页注册
router.post('/regist', function(req, res){
console.log(req.body)
mongo.connect(url1,function(err,database){
database.collection("users",function(err,coll){
coll.find({name:req.body.name}).toArray(function(err,data){
if(data.length>0){
res.send("已存在")
database.close()
}else{
coll.insert(req.body,function(){
coll.insert(req.body,function(){
res.send("插入成功")
database.close()
})
})
}
})
})
})
});
//前端首页登录
router.post('/login', function(req, res){
console.log(req.body)
mongo.connect(url1,function(err,database){
database.collection("users",function(err,coll){
coll.find({name:req.body.name,pass:req.body.pass}).toArray(function(err,data){
if(data.length>0){
req.session.name=data[0].user;
res.send("已存在")
database.close()
}else{
coll.insert(req.body,function(){
res.send("不存在")
database.close()
})
}
})
})
})
});
//添加
router.post('/add', function(req, res){
console.log(req.body)
mongo.connect(url1,function(err,database){
database.collection("list",function(err,coll){
coll.insert(req.body,function(err,data){
res.send("添加成功")
database.close()
})
})
})
});
//删除
router.post('/delate', function(req, res){
console.log(req.body)
mongo.connect(url1,function(err,database){
database.collection("list",function(err,coll){
coll.deleteOne({name:req.body.name},function(err,data){
if (err) throw err;
res.send("1");
database.close();
})
})
})
});
//修改
router.post('/change', function(req, res){
console.log(req.body)
mongo.connect(url1,function(err,database){
database.collection("list",function(err,coll){
coll.updateOne({name:req.body.name},{name:req.body.namex,nicheng:req.body.nichengx,pass:req.body.signx,time:req.body.time},function(err,data){
if (err) throw err;
res.send("修改成功");
database.close();
})
})
})
});
//查找
router.post('/find', function(req, res){
console.log(req.body)
var findval = req.body.findval;
mongo.connect(url1,function(err,database){
database.collection("list",function(err,coll){
coll.find({$or:[{name:findval},{nicheng:findval},{pass:findval}]}).toArray(function(err,data){
if(data.length){
res.send(data);
}else{
res.send("没找到");
}
database.close();
})
})
})
});
module.exports = router;
扫一扫
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
