电商后台管理系统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);
    }