ui界面 搜索框按钮 栅格 接口文档 分页

1.1.2 UI页面

用法: 显示当前页面的路径，快速返回之前的任意页面。

API代码展现、

	<!-- 1.定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

1.2.2 官网API说明

项目中的使用

1.3 搜索框和按钮

1.3.1 页面效果展现

1.3.2 官网API

1.3.2.1 栅格

<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

1.3.2.2 input框

2. 用户信息获取实现
2.1 前端页面说明
2.1.1 页面Ajax

2.1.2 接口文档说明

2.2 后端代码实现

2.2.1 封装PageResult对象

@Data
@Accessors(chain = true)    //参数太多不写构造方法
public class PageResult {
    private String query;       //用户查询条件
    private Integer pageNum;    //分页页数
    private Integer pageSize;   //分页条数
    private Long total;         //数据总数
    private Object rows;        //分页结果

}

2.2.2 编辑UserController

 /**
     * 1.业务需求: 根据条件进行分页查询
     *  请求路径: /user/list
     *  请求类型: GET
     *  请求参数: 后台使用PageResult对象接收
     *  返回值:  SysResult(pageResult对象)
     * 分析:
     *      1.用户参数3个   2.要求返回值5个
     */
    @GetMapping("/list")
    public SysResult getUserList(PageResult pageResult){

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

2.2.3 编辑UserService

 /**
     * 1.业务需求: 根据条件进行分页查询
     *  请求路径: /user/list
     *  请求类型: GET
     *  请求参数: 后台使用PageResult对象接收
     *  返回值:  SysResult(pageResult对象)
     * 分析:
     *      1.用户参数3个   2.要求返回值5个
     */
    @GetMapping("/list")
    public SysResult getUserList(PageResult pageResult){

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

2.2.4 编辑MP 拦截器

public class MybatisPlusConfig {

    //编辑实例化对象 将MP分页拦截器交给Spring容器管理
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
        return interceptor;
    }
}
2.3 前端表格数据展现
## 2.3.1 页面API

```java
 <!-- :data 就是v-for  获取user对象  prop: 与对象中的属性绑定
        label: 页面中展现的数据名称
       -->
       <el-table :data="userList" style="width: 100%">
             <el-table-column
               prop="username"
               label="用户名"
               width="180">
             </el-table-column>
             <el-table-column
               prop="phone"
               label="电话"
               width="180">
             </el-table-column>
       </el-table>

2.3.2 项目表格代码

2.4 分页效果展现

2.4.1 官网API

2.4.2 官网页面标识

2.4.3 项目中的分页使用

js分析：

2.5 用户状态修改
2.5.1 开关用法
说明: v-model=“value” 其中的value中绑定的数据 要求是boolean类型的数据.

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

2.5.2 作用域插槽

说明: 有时在遍历数据时,可能需要获取当前对象的全部数据. 但是由于该位置在局部.不能直接获取主要的对象. 则使用作用域插槽获取数据. 一般多用在表格数据的遍历中.

2.5.3 业务接口

2.5.5 编辑UserController

/**
* URL地址: /user/status/{id}/{status}
* 参数: 1.id 2.status
* 返回值: SysResult对象
*
*/
@PutMapping("/status/{id}/{status}")
public SysResult updateStatus(User user){
userService.updateStatus(user);
return SysResult.success();
}
2.5.6 编辑UserService
//user:{id:xxx,status:true/false}
@Override
public void updateStatus(User user) {

    userMapper.updateById(user);
}

2.5.7 状态修改效果

2.6 用户删除操作实现

2.6.1 页面JS分析
1).页面HTML分析

2).页面JS分析
async deleteUser(user){
//1.消息确认框
const result = await this.$confirm(‘此操作将永久删除 ‘+user.username+’, 是否继续?’, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
}).catch(error => error)

     //如果确认  confirm  如果取消 cancel
     if(result !== 'confirm'){
        return this.$message.info("删除取消")
     }
     const {data: result2} = await this.$http.delete(`/user/${user.id}`)
     if(result2.status !== 200) return this.$message.error("删除失败")
     this.$message.success("删除成功")
     //重新加载 数据
     this.getUserList()
  }

2.6.2 消息确认框 API

2.6.3 删除接口文档

2.6.4 编辑UserController

  /**
     * URL地址: /user/{id}
     * 参数: id
     * 返回值: SysResult对象
     */
    @DeleteMapping("/{id}")
    public SysResult deleteUserById(@PathVariable Integer id){

        userService.deleteUserById(id);
        return SysResult.success();
    }

2.6.5 编辑UserService

 @Overrid e
    public void deleteUserById(Integer id) {

        userMapper.deleteById(id);
    }

2.6.6 修改页面JS

添加return 结束程序