电商全端学习笔记(2)

用户管理模块

用户管理静态页面

  • 表格组件

  • 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);

二级分类模块

准备静态页面

跟一级基本类似

 

分页渲染

跟一级基本类似

 

添加分类

  • 准备添加分类的模态框

文件上传(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成功后

    • 关闭模态框

    • 重新渲染第一页

    • 重置模态框

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

vx-Yang_Gaige

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值