layui模块化开发
1.安装express生成器 自动生成mvs代码
安装
npm i express-generator -g
在项目目录中打开命令窗口
执行
express -e (-e生成ejs模板引擎)
2.在目录中 npm i 下载项目依赖,并在package.json中修改nodemon
3.在www中设置端口
4.routes中设置路由,并在app.js中删除引入的路由,创建自己的路由
5.模板要传入public中,
6.数据库的连接需要创建models
1.下载mongoose cnpm i mongoose -S
2.命令行运行 mongod
3.复制connect.js,并将其输出给表(集合)
4.在app.js中导入整个文件'require("./models/connect.js")'
5.每次重新运行命令行就会连接数据库
7.moudles文件夹下创建cate.js引入connect,创建cate.js定义schema (集合) 结构,并导出给routes文件夹下的cate.js
8.routes文件夹下的cate.js导入定义好的schema,以便我们在router.get下增删改查
const cateModel = require('../models/cate');
9.分类列表页渲染
router.get('/cateList', (req,res)=>{
cateModel.find().then(re=>{
res.render("cateList",{
cates:re
})
})
})
<tbody>
<% for(var i=0;i<cates.length;i++){ %>
<tr>
<td><%= cates[i].cateName %></td>
<td><%= cates[i].cateDesc?cates[i].cateDesc:'暂无描述' %></td>
<td>
<img
src="<%= cates[i].cateIcon?cates[i].cateIcon:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3865588184,3342697262&fm=26&gp=0.jpg' %>"
alt="">
</td>
<td>
<input type="checkbox" <%= cates[i].cateState? 'checked':'' %> disabled name="switch" lay-skin="switch">
</td>
<td>
<button class="layui-btn layui-btn-primay layui-btn-xs">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs">删除</button>
</td>
</tr>
<%}%>
</tbody>
10.分类列表页进行分页处理(使用layui中laypage)
<script type="text/javascript" src="/lib//layui/layui.js" ></script>
<script type="text/javascript">
layui.use(['element', 'jquery', 'form', 'laypage'], function () {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
var laypage = layui.laypage;
laypage.render({
elem: 'page'
, count: <%= count %>
, limit: 2
, curr: <%= current %>
, jump: function (obj, first) {
console.log(obj.curr);
console.log(obj.limit);
if (!first) {
window.location.href=`/cateList?current=${obj.curr}&pageSize=${obj.limit}`
}
}
});
})
</script>
router.get('/cateList',async (req,res)=>{
let { current=1,pageSize=2 } = req.query;
current = parseInt(current);
pageSize = parseInt(pageSize);
let cates = await cateModel.find().skip((current-1)*pageSize).limit(pageSize)
let count = await cateModel.count();
res.render('cateList',{
cates,
count,
current
})
})
<script type="text/javascript" src="/lib//layui/layui.js" ></script>
<script type="text/javascript">
layui.use(['element', 'jquery', 'form', 'laypage'], function () {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
var laypage = layui.laypage;
laypage.render({
elem: 'page'
, count: <%= count %>
, limit: 2
, curr: <%= current %>
, jump: function (obj, first) {
console.log(obj.curr);
console.log(obj.limit);
if (!first) {
window.location.href=`/cateList?current=${obj.curr}&pageSize=${obj.limit}`
}
}
});
})
</script>
11.分类页增加效果
router.get('/cateAdd',async (req,res)=>{
const cates = await cateModel.find();
res.render('cateAdd', {
cates
})
})
<div style="margin: 10px;">
<span class="layui-breadcrumb">
<a href="/dashboard">首页</a>
<a href="/cateList">分类列表</a>
<a><cite>添加分类</cite></a>
</span>
</div>
<div style="margin: 10px;">
<span class="layui-breadcrumb">
<a href="/dashboard">首页</a>
<a><cite>分类列表</cite></a>
</span>
</div>
12.分类页搭建结构
13.routes文件夹下创建上传文件upload.js
const router = require('express').Router();
const upload = require('../utils/upload')
router.post('/upload', upload.single('file'), (req,res)=>{
let filePath = '/uploads/'+req.file.filename
res.send({
code:0,
data:{
filePath
},
msg:"上传成功"
})
})
module.exports = router
app.js下导入router,并use
<div class="layui-form-item">
<label class="layui-form-label">分类图标</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload">
<i class="layui-icon"></i>上传图片
</button>
<img src="" width="150" class="img" alt="">
</div>
</div>
form.on('submit(formDemo)', function(data){
let field = data.field;
if(field.cateState === 'on'){
field.cateState = 1
}else{
field.cateState = 0
}
field.cateIcon = cateIcon
delete field.file;
console.log(field);
$.ajax({
url:"/cateAdd",
type:'POST',
dataType:'json',
data:field,
success:function(res){
if(res.code === 0){
layer.msg(res.msg,{icon:1},function(){
history.go(0)
})
}else{
layer.msg(res.msg,{icon:2},function(){
history.go(0)
})
}
}
})
return false;
});
var uploadInst = upload.render({
elem: '#upload'
,url: '/upload'
,field:'file'
,done: function(res){
console.log(res)
cateIcon = res.data.filePath;
$('.img').attr('src',res.data.filePath)
}
,error: function(err){
console.log(err)
}
});
})
14.分类列表页提交数据
router.post('/cateAdd', (req,res)=>{
console.log(req.body)
cateModel.insertMany(req.body).then(re=>{
res.send({
code:0,
msg:'添加成功'
})
}).catch(err=>{
res.send({
code:-1,
msg:'添加失败'
})
})
})
app.js下导入router,并use
15.解决父集分类
<div class="layui-form-item">
<label class="layui-form-label">父级分类</label>
<div class="layui-input-block">
<select name="pid" lay-verify="required">
<option value=""></option>
<option value="0">顶级分类</option>
<% for(var i=0;i<cates.length;i++){ %>
<option value="<%= cates[i].id %>">
<%= cates[i].cateName %>
</option>
<%}%>
</select>
</div>
</div>
16.编辑和删除
router.get('/cateEdit',async (req,res)=>{
const { cateId } = req.query;
const cate = await cateModel.findById(cateId);
const cates = await cateModel.find();
res.render('cateEdit',{
cates,
cate
})
})
router.post('/cateEdit', (req,res)=>{
cateModel.update({
_id: req.body._id
},{
...req.body
}).then(re=>{
res.send({
code:0,
msg:'更新成功',
})
}).catch(()=>{
res.send({
code:-1,
msg:'更新失败',
})
})
})
router.post('/delCate', (req,res)=>{
const {cateId} = req.body;
cateModel.remove({
_id:cateId
}).then(re=>{
res.send({
code:0,
msg:'删除成功'
})
}).catch(er=>{
res.send({
code:-1,
msg:'删除失败'
})
})
17.创建cateEdit.ejs,编辑页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/lib/layui/css/layui.css">
</head>
<body>
<div style="margin: 10px;">
<span class="layui-breadcrumb">
<a href="/dashboard">首页</a>
<a href="/cateList">分类列表</a>
<a><cite>添加分类</cite></a>
</span>
<div style="max-width:600px;margin-top:20px">
<form class="layui-form" action="">
<input type="hidden" name="_id" value="<%= cate._id %>"/>
<div class="layui-form-item">
<label class="layui-form-label">分类名称</label>
<div class="layui-input-block">
<input type="text" name="cateName"
value="<%= cate.cateName %>"
required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">父级分类</label>
<div class="layui-input-block">
<select name="pid" lay-verify="required">
<option value=""></option>
<option value="0" <%= cate.pid == 0 ? 'selected': '' %>>顶级分类</option>
<% for(var i=0;i<cates.length;i++){ %>
<option <%= cate.pid == cates[i]._id ? 'selected' :'' %> value="<%= cates[i]._id %>">
<%= cates[i].cateName %>
</option>
<%}%>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">是否可用</label>
<div class="layui-input-block">
<input type="checkbox" <%= cate.cateState == 1 ? 'checked': '' %> name="cateState" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类图标</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload">
<i class="layui-icon"></i>上传图片
</button>
<img src="<%= cate.cateIcon?cate.cateIcon:'' %>" width="150" class="img" alt="">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">分类描述</label>
<div class="layui-input-block">
<textarea name="cateDesc"
placeholder="请输入内容"
class="layui-textarea">
<%= cate.cateDesc %>
</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<script src="/lib/layui/layui.js"></script>
<script>
layui.use(['element', 'jquery', 'form', 'upload','layer'], function () {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var layer = layui.layer;
var cateIcon="";
form.on('submit(formDemo)', function(data){
let field = data.field;
if(field.cateState === 'on'){
field.cateState = 1
}else{
field.cateState = 0
}
field.cateIcon = cateIcon
delete field.file;
console.log(field);
$.ajax({
url:"/cateEdit",
type:'POST',
dataType:'json',
data:field,
success:function(res){
if(res.code === 0){
layer.msg(res.msg,{icon:1},function(){
location.href="/cateList";
})
}else{
layer.msg(res.msg,{icon:2},function(){
history.go(0)
})
}
}
})
return false;
});
var uploadInst = upload.render({
elem: '#upload'
,url: '/upload'
,field:'file'
,done: function(res){
console.log(res)
cateIcon = res.data.filePath;
$('.img').attr('src',res.data.filePath)
}
,error: function(err){
console.log(err)
}
});
})
</script>
</body>
</html>
//cate.js下
// 分类编辑post
router.post('/cateEdit', (req,res)=>{
// 根据_id更新
cateModel.update({
_id: req.body._id
},{
...req.body
}).then(re=>{
res.send({
code:0,
msg:'更新成功',
})
}).catch(()=>{
res.send({
code:-1,
msg:'更新失败',
})
})
})
隐藏域
<input type="hidden" name="xxx" value="xxx"/>
隐藏域 表单控件类型
作用:
提交数据(form)时,有一些数据 希望不被用户看见(提交订单时成本价,编辑时id)
就可以使用隐藏域携带这个数据
18.删除按钮
$(".del").click(function(){
var id = this.dataset.id;
var index = -1;
index = layer.open({
type:1,
title:"删除分类?",
content:"您确认删除吗?",
skin:"layui-layer-molv",
btn:['确认','取消'],
yes:function(){
$.ajax({
url:'/delCate',
type:"POST",
dataType:"json",
data:{
cateId: id
},
success:function(res){
if(res.code == 0){
layer.msg(res.msg,{icon:1},function(){
history.go(0)
})
}else{
layer.msg(res.msg,{icon:2},function(){
layer.close(index)
})
}
}
})
},
btn2:function(){
layer.msg("取消删除了")
}
})
})
router.post('/delCate', (req,res)=>{
const {cateId} = req.body;
cateModel.remove({
_id:cateId
}).then(re=>{
res.send({
code:0,
msg:'删除成功'
})
}).catch(er=>{
res.send({
code:-1,
msg:'删除失败'
})
})