用户管理模块

用户管理静态页面

• 表格组件

• table-bordered 添加表格边框

• table-hover 添加hover效果

  <table class="table table-bordered table-hover">
    ...
  </table>
  

• 禁用按钮

<button class="btn btn-danger">禁用</button>

• 表格里面设置水平垂直居中

.table.table-bordered td {
  text-align: center;
  vertical-align: middle;
}

• 渲染用户列表

思路：

//发送ajax请求，获取到用户的数据
//结合模板引擎，把数据渲染到页面

  var currentPage = 1;//记录当前页
  var pageSize = 10;//记录每页的数量

  $.ajax({
    type:"get",
    url:"/user/queryUser",
    data:{
      page : currentPage,
      pageSize:pageSize
    },
    success:function (data) {
      console.log(data);
      var html = template("tpl", data);
      $("tbody").html(html);
    }
  })

页面渲染

<script type="text/html" id="tpl">
  {{each rows v i}}
  <tr>
    <td>{{i+1}}</td>
    <td>{{v.username}}</td>
    <td>{{v.mobile}}</td>
    <td>{{v.isDelete===1?‘正常‘:‘禁用‘}}</td>
    <td>
      {{if v.isDelete === 1}}
      <button class="btn btn-danger btn-sm">禁用</button>
      {{/if}}
      {{if v.isDelete === 0}}
      <button class="btn btn-success btn-sm">启用</button>
      {{/if}}
    </td>
  </tr>
  {{/each}}
</script>

分页插件bootstrap-paginator的使用

• 引包

<script src="lib/bootstrap-paginator/bootstrap-paginator.js"></script>

• 页面结构

<!--boostrap分页插件如果是3.0版本，要求这个盒子必须是ul-->
<div class="text-right">
  <ul id="paginator"></ul>
</div>

• 初始化分页插件

//渲染分页
$("#paginator").bootstrapPaginator({
  bootstrapMajorVersion:3,//指定bootstrap的版本，如果是3，必须指定
  currentPage:currentPage,//指定当前页
  totalPages:Math.ceil(data.total/pageSize),//指定总页数
  onPageClicked:function (a,b,c, page) {
    //page指的是点击的页码,修改了当前页
    currentPage = page;
    //重新渲染
    render();
  }
});

• 修复序号的bug

因为 i 每次渲染都是从0开始

<td> {{ (page-1) * size + (i+1) }} </td>

用户启用禁用功能

• 列表渲染时，需要把用户的id存起来

<td data-id="{{v.id}}">
  {{if v.isDelete === 1}}
  	<button class="btn btn-danger btn-sm">禁用</button>
  {{/if}}
  {{if v.isDelete === 0}}
  	<button class="btn btn-success btn-sm">启用</button>
  {{/if}}
</td>

• 准备弹出模态框
• 点击禁用或者启用时
  • 弹出模态框
  • 获取到自定义属性id
  • 获取到禁用还是启用的状态（根据btn的类名）
• 点击确定按钮时，需要发送ajax请求

  • 成功的时候，关闭模态框，重新渲染页面。

    ?

一级分类模块

分页渲染功能

• 准备一级分类的静态页面
  • 修改了表格
• 发送ajax，获取一级分类的数据
  • 通过模版引擎渲染到页面中
• 分页功能

  • 准备分页的盒子

  • 引入分页的文件

  • 初始化分页控件bootstrapPaginator

    ?

添加功能

• 准备添加的模态框

  • 准备form组件
  • 问题：表单提交不了，type=submit, 按钮没有在form表单中，所以提交不了。

• 给表单增加校验功能

  • 引入文件
  • 初始化表单校验$form.bootstrapValidator({ feedbackIcons:{}, fields:{} })

  $form.bootstrapValidator({
    //小图标
    feedbackIcons: {
      valid: ‘glyphicon glyphicon-ok‘,
      invalid: ‘glyphicon glyphicon-remove‘,
      validating: ‘glyphicon glyphicon-refresh‘
    },
    //校验规则
    fields:{
      categoryName:{
  
        validators:{
          //非空
          notEmpty:{
            message:"请输入一级分类"
          }
        }
  
      }
    }
  });
  

  • 给表单注册一个校验成功事件

  $form.on("success.form.bv", function (e) {
    //阻止默认提交
    e.preventDefault();
  
    //使用ajax进行提交
  })
  

  • 发送ajax请求，添加一级分类

    • 关闭模态框
    • 重新渲染第一页（因为添加的数据在第一页）
    • 重置表单的数据和样式

    $form.data("bootstrapValidator").resetForm(true);
    

    ?

二级分类模块

准备静态页面

跟一级基本类似

分页渲染

跟一级基本类似

添加分类

• 准备添加分类的模态框

  • 下拉菜单：http://v3.bootcss.com/components/#dropdowns

  • 使用ajax获取到所有的一级分类的数据，渲染到下拉框菜单

  • 点击下拉菜单，需要修改按钮的内容

    ?

文件上传（jquery fileupload插件）

• 引包

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery-fileupload/jquery.ui.widget.js"></script>
<script src="lib/jquery-fileupload/jquery.fileupload.js"></script>

• html结构

<!--
1. type:file
2. 必须指定name属性，因为后台通过这个name属性去获取图片
3. 必须data-url：指定图片上传的地址
-->
<input type="file" id="fileupload" name="pic1" data-url="/category/addSecondCategoryPic">

• 使用js初始化文件上传

//初始化文件上传
$("#fileupload").fileupload({
  dataType:"json",
  //文件上传完成时，会执行的回调函数，通过这个函数就能获取到图片的地址
  //第二个参数就有上传的结果 data.result
  done:function (e, data) {
    //console.log("图片上传完成拉");
    //console.log(data);
    //console.log(data.result.picAddr);
    $(".img_box img").attr("src", data.result.picAddr);
  }
});

如果有上传报错的问题：

在public文件夹下面创建一个upload文件夹， 在upload文件夹下面创建一个brand文件夹，用于存放上传的品牌的图片的

在public文件夹下面创建一个upload文件夹， 在upload文件夹下面创建一个product文件夹，用于存放上传的商品的图片的

隐藏域

<input type="hidden" id="categoryId" name="categoryId">
<input type="hidden" name="brandLogo" id="brandLogo">

js代码

• 选择下拉框时，把选中a的id存到categoryId中的value值
• 图片上传时，把img的地址存到brandLogo中的value值

点击上传时，能够把数据传送服务端。

表单校验

• 初始化表单校验-跟前面的一样
• 问题1：隐藏的表单没有做校验excluded:[],
• 问题2：隐藏域在选择的时候，并没有变成校验成功
  • 需要在下拉选择器的时候，通过js动态的改成校验成功

$form.data("bootstrapValidator").updateStatus("categoryId", "VALID");
$form.data("bootstrapValidator").updateStatus("brandLogo", "VALID");

商品添加功能

• 注册校验成功事件
• 阻止默认提交，使用ajax提交
• ajax成功后
  • 关闭模态框
  • 重新渲染第一页
  • 重置模态框

电商全端（二）

原文：https://www.cnblogs.com/f2ehe/p/12571948.html