项目集成3（路由配置与列表操作）

• 子级路由跳转
  语法：

<!-- 跳转关键字 -->
 <router-link id="/user">用户管理</router-link>
 <!-- 路由填充位 -->
 <router-view></router-view>

  {path:'/home',component:Home,children:[
    {path:'/user',component:User}
  ]},

路由占位符：

<el-main>
	<!-- 定义路由展现页面-->
	<router-view></router-view>
</el-main>

• 列表展现
  pageResult：

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

userController：

@GetMapping("/list")
public SysResult getlist(PageResult pageResult){
    pageResult = userService.getList(pageResult);
    return SysResult.success(pageResult);
}

userServiceImpl：

@Override
    public PageResult getList(PageResult pageResult) {
        long total = userMapper.findTotal();
        int size = pageResult.getPageSize();
        int start = (pageResult.getPageNum()-1)*size;
        String query = pageResult.getQuery();
        List<User> userList = userMapper.getList(start,size,query);
        return pageResult.setTotal(total).setRows(userList);
    }

sql：

<select id="getList" resultType="User">
    select * from user 
    <where>
        <if test="query != null and query !=''">username like "%"#{query}"%" </if>
    </where>
    limit #{start},#{size}
</select>

• Vuejs作用域插槽
  说明：一般在表格中展现的数据并不全，若需要获取全部信息，则需要使用作用域插槽<template slot-scope="scope">scope.row</template>,其中scope.row表示当前行所有数据

@PutMapping("status/{id}/{status}")
public SysResult changStatus(User user){
   userService.changStatus(user);
   return SysResult.success();
}

• 新增用户
  对象转Json：@ResponseBody；
  json转对象：@RequestBody

@Override
public void insertUser(User user) {
    String password = user.getPassword();
    String md5pwd = DigestUtils.md5DigestAsHex(password.getBytes());
    Date date = new Date();
    user.setPassword(md5pwd).setStatus(true).setCreated(date).setUpdated(date);
    userMapper.insertUser(user);
}