layui模块化开发

---

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.分类列表页渲染

//1.cates.ejs页面布局
//2.routes文件夹下cate.js传输数据
router.get('/cateList', (req,res)=>{
    cateModel.find().then(re=>{
        res.render("cateList",{
            cates:re
        })
    })
})
//3.渲染cates.ejs中的tr，这里以分类名，分类描述，分类图标，分类状态，操作
<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)

//1.引入所需要的模块，form模块在tbody中需要
    /*⭐⭐①注意:分页的使用需要创建<div id="page"></div> 分页的容器
    分页参数网址:https://www.layui.com/doc/modules/laypage.html*/
	<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;
//2.执行一个laypage实例
     laypage.render({
        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
        , count: <%= count %> //数据总数，从服务端得到
        , limit: 2   //每页条数 limit/pagesize
        , curr: <%= current %> //当前页码
        , jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          console.log(obj.limit); //得到每页显示的条数
          
          //首次不执行
          if (!first) {
            //do something
            window.location.href=`/cateList?current=${obj.curr}&pageSize=${obj.limit}`
          }
        }
      });
     })
	</script>
//3.routes文件夹下cate.js设置分页
      router.get('/cateList',async (req,res)=>{
        //解构，并默认第一页，每页2条，否则需要让前端来传
        let { current=1,pageSize=2 } = req.query;
        //get请求之后是字符串，需要转数字
      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
      })
    })
//4.cateList.ejs中请求数据后数据渲染页面
<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实例
      laypage.render({
        elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
        , count: <%= count %> //数据总条数，从服务端得到
        , limit: 2
        , curr: <%= current %>
        , jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          console.log(obj.limit); //得到每页显示的条数
          
          //首次不执行,并且在切换页码时请求刷新页面，重新导入数据，并执行上面.
          if (!first) {
            window.location.href=`/cateList?current=${obj.curr}&pageSize=${obj.limit}`
          }
        }
      });
     })
</script>

11.分类页增加效果

 //1. routes下cate.js添加分类router,点击添加可以获取分类页面
router.get('/cateAdd',async (req,res)=>{
  const cates = await cateModel.find();
  res.render('cateAdd', {
    cates
  })
})
//2. 创建 cateAdd.ejs
//3. cate.ejs中增加的a标签 href添加地址/cateAdd(实现跳转)
//4. 面包屑处理
	//artAdd.ejs
	<div style="margin: 10px;">
        <span class="layui-breadcrumb">
          <a href="/dashboard">首页</a>
          <a href="/cateList">分类列表</a>
          <a><cite>添加分类</cite></a>
        </span>
    </div>
	//cateList.ejs
	<div style="margin: 10px;">
        <span class="layui-breadcrumb">
          <a href="/dashboard">首页</a>
          <a><cite>分类列表</cite></a>
        </span>
    </div>

12.分类页搭建结构

13.routes文件夹下创建上传文件upload.js

//1.创建文件
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
//2.cateAdd.ejs下监听提交，绑定事件
// 创建容器
<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">&#xe67c;</i>上传图片
        </button>
        <img src="" width="150" class="img" alt="">
	</div>
</div>
//监听提交
      form.on('submit(formDemo)', function(data){
        // 处理data 分类 是否可用状态
        let field = data.field;
        if(field.cateState === 'on'){
          field.cateState = 1
        }else{
          field.cateState = 0
        }
        field.cateIcon = cateIcon
          //删除无效属性file
        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.分类列表页提交数据

//分类提交数据，cate.js下router.post
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.解决父集分类

//cateAdd.ejs下渲染父集分类数据
<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>
//lay-submit会变成提交按钮

16.编辑和删除

//1.router下cate.js写入
// 分类编辑
router.get('/cateEdit',async (req,res)=>{
  // 获取 get 传id 根据id 获取分类数据
  const { cateId } = req.query;
  const cate = await cateModel.findById(cateId);
 
  const cates = await cateModel.find();
  res.render('cateEdit',{
    cates,
    cate
  })
})
// 分类编辑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:'更新失败',
    })
  })
  
})

// 删除分类
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">&#xe67c;</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.删除按钮

// cateList.ejs 下点击删除按钮
      $(".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("取消删除了")
          }
        })
      })
//cate.js 下

// 删除分类
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:'删除失败'
    })
  })