[JavaScript知识库] 电商后台管理系统day02

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 电商后台管理系统day02 -> 正文阅读

[JavaScript知识库]电商后台管理系统day02

1.ElementUI表格数据展现

1.1表格数据

1.1.1编辑ui表格

<template>
  <div>
      <!-- 标签使用原则:
          规则: 先定义,后使用
          语法: el-breadcrumb 找到名称为Breadcrumb组件进行展现
          定义elementUI的组件: 按需导入组件
             从elementUI中导入特定的组件
             1.import {Breadcrumb} from 'element-ui'
             2.Vue.use(Breadcrumb)  声明为全局组件.子组件可以直接调用


      -->
      <!-- 1.添加面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 2.定义卡片视图  -->
      <el-card class="box-card">
        <div class="text item">
          <!-- 4.栅格: 每行24格,可以动态的缩放 -->
          <el-row :gutter="20">
            <el-col :span="8">
              <!-- 3.定义文本输入框-->
              <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                 <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <el-col :span="3">
                <el-button type="primary">主要按钮</el-button>
            </el-col>
          </el-row>
        </div>
        <hr>
        <!-- 定义表格
          :data 一般采用数组的方式 定义表格数据!!!
          label="ID" 列字段名称
          stripe: 默认为false   启用为true  斑马纹
          border: 默认为false   启用为true  边框线
        -->
        <h1>定义表格</h1>
         <el-table :data="tableData" style="width: 100%"  stripe border>
              <el-table-column
                label="编号" prop="id">
              </el-table-column>
              <el-table-column
                label="名称" prop="name">
              </el-table-column>
              <el-table-column
                label="年龄" prop="age">
              </el-table-column>
              <el-table-column
                label="性别" prop="sex">
              </el-table-column>
         </el-table>
      </el-card>
  </div>
</template>

<script>
    //对外声明组件属性/方法等参数.要被根组件调用
    export default {
      data(){
        return {

          tableData: [
            {id:100, name:"黑熊精", age: 3000, sex:"男"},
            {id:100, name:"黑旋风", age: 50, sex:"男"},
            {id:100, name:"黑寡妇", age: 40, sex:"女"},
            {id:100, name:"黑瞎子", age: 38, sex:"男"}
          ]
        }
      }
    }
</script>

<style lang="less" scoped>
</style>

1.1.2表格数据展现

1.2分页插件说明

1.2.1分页页面JS

 <!-- 分页工具
            :page-sizes 每页展现的条数信息
            :total="400" 设定总记录数
            layout 展现的数据有哪些
            :page-size  初始化时页面的条数 当作参数传递给后端
            :current-page 当前看到的页数
            @size-change: 当每页的条数发生变化时,触发事件
            @current-change:当前展现的页数发生变化时,触发事件
          -->
         <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="100"
             :page-sizes="[10, 20, 30, 40]"
             :page-size="10"
             layout="total, sizes, prev, pager, next, jumper"
             :total="1000">
         </el-pagination>

 <script>
    //对外声明组件属性/方法等参数.要被根组件调用
    export default {
      data(){
        return {
          tableData: [
            {id:100, name:"黑熊精", age: 3000, sex:"男"},
            {id:100, name:"黑旋风", age: 50, sex:"男"},
            {id:100, name:"黑寡妇", age: 40, sex:"女"},
            {id:100, name:"黑瞎子", age: 38, sex:"男"}
          ]
        }
      },
      methods: {
        handleSizeChange(size){
          alert("当前条数:"+size)
        },
        handleCurrentChange(current){
          alert("当前页数:"+current)
        }
      }
    }
</script>

2.用户业务实现

2.1用户列表展现

2.1.1页面JS分析

? ? ? ? 1.生命周期函数

 //利用钩子函数实现数据查询
    mounted(){
      this.getUserList()
    }

? ? ? ? 2.获取用户列表数据

	async getUserList(){
        const {data: result} = await this.$http.get('/user/list',{
           params: this.queryInfo
        })
        if(result.status !== 200) return this.$message.error("用户列表查询失败")
        this.userList = result.data.rows
        this.total = result.data.total
        console.log("总记录数:"+this.total)
      },

2.1.2 业务接口文档

请求路径：/user/list
请求类型:? ?GET
请求参数:? 后台使用PageResult对象接收
请求案例:? http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10

参数名称	参数说明	备注信息
query	用户查询的数据	可以为null
pageNum	分页查询的页数	必须赋值不能为null
pageSize	分页查询的条数	必须赋值不能为null

响应参数：SysResult对象需要携带分页对象PageResult

参数名称	参数说明	备注信息
status	状态信息	200表示服务器请求成功 201表示服务器异常
msg	服务器返回的提示信息	可以为null
data	服务器返回的业务数据	返回值PageResult

PageResult对象介绍

参数名称	参数类型	参数说明	备注信息
query	String	用户查询的数据	可以为null
pageNum	Integer	查询页数	不能为null
pageSize	Integer	查询条数	不能为null
total	Long	查询总记录数	不能为null
rows	Object	分页查询的结果	不能为null

返回值效果

{"status":200,
  "msg":"服务器调用成功!",
  "data":
	{"query":"",
	"pageNum":1,
	"pageSize":2,
	"total":4,
	"rows":[
		{"created":"2021-02-18T11:17:23.000+00:00",
		 "updated":"2021-03-26T06:47:20.000+00:00",
		 "id":1,
		 "username":"admin",
		 "password":"a66abb5684c45962d887564f08346e8d",
		 "phone":"13111112222",
		 "email":"1235678@qq.com",
		 "status":true,
		 "role":null
		 },
		{"created":"2021-02-18T11:17:23.000+00:00",
		"updated":"2021-03-13T08:50:30.000+00:00",
		"id":2,
		"username":"admin123",
		"password":"a66abb5684c45962d887564f08346e8d",
		"phone":"13111112223",
		"email":"1235678@qq.com",
		"status":false,
		"role":null
		}
		]
	}
}

2.1.3 编辑PageResult对象

@Data
@Accessors(chain = true)
public class PageResult implements Serializable {
    private String query;
    private Integer pageNum;
    private Integer pageSize;
    private Long total;
    private Object rows;
}

2.1.4 编辑UserController

  /**
     * 业务说明: 实现用户列表的分页查询
     * URL地址: http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
     * 参数: pageResult接收
     * 返回值: SysResult对象(pageResult)
     */
    @GetMapping("/list")
    public SysResult getUserList(PageResult pageResult){//3

        pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//5
    }

2.1.5 编辑UserServiceImpl

/**
     * 分页Sql:
     *   语法: select * from user limit 起始位置,每页条数
     *   规则: 数组 含头不含尾
     *   查询第一页:
     *         select * from user limit 0,10
     *   查询第二页:
     *         select * from user limit 10,10
     *   查询第三页:
     *         select * from user limit 20,10
     *   查询第N页:
     *         select * from user limit (页数-1)条数,条数
     * @param pageResult
     *   方式1:  手写Sql
     *   方式2:  MP的方式实现
     * @return
     */
    @Override
    public PageResult getUserList(PageResult pageResult) {
        //1.获取总记录数  Integer--long 自动转化
        long total = userMapper.selectCount(null);
        //2.获取分页结果
        int size = pageResult.getPageSize();
        int start = (pageResult.getPageNum() - 1) * size;
        List<User> userList = userMapper.findListByPage(start,size);
        pageResult.setTotal(total)
                  .setRows(userList);
        return pageResult;
    }

2.1.6 编辑UserMapper

说明：利用注解实现SQL查询，映射文件和注解标签二选一不能同时使用

?2.1.7 页面效果展现

?2.2 MP实现用户分页

2.2.1 UserController方法

/**
     * 业务说明: 实现用户列表的分页查询
     * URL地址: http://localhost:8091/user/list?query=查询关键字&pageNum=1&pageSize=10
     * 参数: pageResult接收
     * 返回值: SysResult对象(pageResult)
     */
    @GetMapping("/list")
    public SysResult getUserList(PageResult pageResult){//3

        pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//5
    }

2.2.2 编辑UserService方法

 /*
    * 业务说明: 利用MP方式查询数据库.
    * 步骤梳理:
    *       1.构建MP的分页对象
    *       2.根据分页对象查询数据.
    *       3.从分页对象中获取数据
    *       4.封装PageResult对象
    *       5.编辑配置类 封装分页拦截器
    * */
    @Override
    public PageResult getUserList(PageResult pageResult) {
        //1.定义分页对象
        IPage<User> page = new Page<>(pageResult.getPageNum(),
                                      pageResult.getPageSize());
        //2.定义条件构造器 指定动态查询Sql
        boolean flag = StringUtils.hasLength(pageResult.getQuery());
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.like(flag, "username",pageResult.getQuery());

        //3.进行分页查询
        page = userMapper.selectPage(page,queryWrapper);
        //4.从封装后的分页对象中获取数据
        pageResult.setTotal(page.getTotal())
                  .setRows(page.getRecords());
        return pageResult;
    }

2.2.3 编辑配置类

@Configuration
public class MybatisPlusConfig {

    // MybatisPlus在执行分页操作时,会被该拦截器拦截
    // 拦截器的作用 动态拼接where条件!!!
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
        return interceptor;
    }
}

2.3 用户状态修改

2.3.1 业务说明

说明：通过开关可以控制数据类型的 true/false

参数说明：1.传递userId主键

? ? ? ? ? ? ? ? ? 2.传递当前状态信息 true/false

2.3.2 页面JS

? ? ? ? 1.作用域插槽

? ? ? ? 作用：可以在表格中的任意单元格，获取当前行的元素信息

? ? ? ? 关键语法：scope.row获取行元素

	 <el-table-column prop="status" label="状态">
             <!-- 定义作用域插槽-->
             <template slot-scope="scope">
                <el-switch v-model="scope.row.status" @change="updateStatus(scope.row)"
                  active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
             </template>
           </el-table-column>

? ? ? ? 2.Ajax业务调用

 	async updateStatus(user){
       //实现用户状态修改  注意使用模版字符串  ES6中提出的新用法 ${key}
        const {data: result} = await this.$http.put(`/user/status/${user.id}/${user.status}`)
        if(result.status !== 200) return this.$message.error("用户状态修改失败!")
        this.$message.success("用户状态修改成功!")
      },

2.3.3 业务接口文档

请求路径 /user/status/{id}/{status}
请求类型 PUT
请求参数:用户ID/状态值数据

参数名称	参数类型	参数说明	备注信息
id	Integer	用户ID号	不能为null
status	boolean	参数状态信息	不能为null

返回值结果:SysResult对象

{"status":200,"msg":"服务器调用成功!","data":null}

2.3.4 编辑UserController

/**
     * 业务说明: 修改状态信息
     * URL:  /user/status/{id}/{status}
     * 参数:  id/status
     * 返回值: SysResult
     */
    @PutMapping("/status/{id}/{status}")
    public SysResult updateStatus(User user){

        userService.updateStatus(user);
        return SysResult.success();
    }

2.3.4 编辑UserService

 //规则: 根据对象中不为null的元素当作set条件,
    //      Id当作唯一where条件
    //update user set status=true where id=xxx
    @Override
    public void updateStatus(User user) {//id/status

        userMapper.updateById(user);
    }

2.4 用户新增操作

2.4.1 对话框

说明:通过属性dialogVisible控制对话框是否可见

<!--
        :visible.sync 控制对话框是否可见  true/false
      -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

2.4.2 页面JS分析

?2.4.3 用户新增业务接口

请求路径 /user/addUser
请求类型 POST
请求参数:整个form表单数据

参数名称	参数类型	参数说明	备注信息
username	String	用户名	不能为null
password	String	密码	不能为null
phone	String	电话号码	不能为null
email	String	密码	不能为null

返回值结果:SysResult

{"status":200,"msg":"服务器调用成功!","data":null}

2.4.4 编辑UserController

/**
     * 业务: 实现用户新增
     * url:  /user/addUser
     * 参数:  整个form表单  对象  json
     * 返回值: SysResult对象
     */
    @PostMapping("/addUser")
    public SysResult addUser(@RequestBody User user){

        userService.addUser(user);
        return SysResult.success();
    }

2.4.5 编辑UserServiceImpl

 /**
     * 说明:
     *      1.用户入库操作需要手动补齐的数据有
     *        创建时间/修改时间 保证一致.
     *        status=true 手动填充.
     *      2.密码加密处理  新增和登录加密算法必须一致
     * @param user
     */
    @Override
    public void addUser(User user) {
        String password = user.getPassword();
        //加密处理
        password = DigestUtils.md5DigestAsHex(password.getBytes());
        user.setPassword(password)
            .setStatus(true)
            .setCreated(new Date())
            .setUpdated(user.getCreated());
        userMapper.insert(user);
    }