完整项目学习-3

1. 利用子查询实现左侧菜单列表

1.1 编辑映射文件

1.1.1 子查询Sql语句写法

	/*查询一级菜单信息*/
SELECT * FROM rights WHERE parent_id = 0
/* 查询从表数据 */
SELECT * FROM rights WHERE parent_id = 3

1.1.2 xml映射文件写法

	 <!--利用子查询的方式实现数据获取
        1.查询主表信息
     -->
    <select id="getRightsList" resultMap="rightsRM">
        select * from rights where parent_id = 0
    </select>
    <resultMap id="rightsRM" type="Rights" autoMapping="true">
        <!--主键信息-->
        <id property="id" column="id"></id>
        <collection property="children" ofType="Rights"
                    select="findChildren" column="id"/>
    </resultMap>
    <select id="findChildren" resultType="Rights">
        select * from rights where parent_id = #{id}
    </select>

2. 用户模块管理

2.1 分页查询补充

2.1.1 用户需求说明

说明: 用户的文本输入框,可能有值,也可能没有数据. 则在后端服务器中应该使用动态Sql的方式实现数据的查询.

2.1.2 编辑UserController

 /**
     * 业务说明:
     *  1. /user/list
     *  2.请求类型: GET
     *  3.参数接收: 后台使用PageResult对象接收
     *  3.返回值: SysResult<PageResult>
     */
     @GetMapping("/list")
     public SysResult getUserList(PageResult pageResult){
    
    //参数3
         //业务查询总数.分页条数.
         pageResult = userService.getUserList(pageResult);
        return SysResult.success(pageResult);//参数5个
     }

2.1.3 编辑UserService

 @Override
    public PageResult getUserList(PageResult pageResult) {
    
    
        //1.记录总数 total
        long total = userMapper.getTotal();
        //2.分页后的数据
        //2.1获取每页条数
        int size = pageResult.getPageSize();
        //2.2获取起始位置
        int start = (pageResult.getPageNum() - 1) * size;
        //2.3 获取用户查询的数据
        String query = pageResult.getQuery();
        List<User> rows = userMapper.findUserListByPage(start,size,query);
        return pageResult.setTotal(total).setRows(rows);
    }

2.1.4 编辑UserMapper

1. 编辑Mapper接口

List<User> findUserListByPage(@Param("start") int start,
                                  @Param("size") int size,
                                  @Param("query") String query);

2. 编辑UserMapper.xml 映射文件

<mapper namespace="com.jt.mapper.UserMapper">
    <!--
        resultType: 适合单表查询
        resultMap:  1.多表关联查询  2.字段名称和属性不一致的时候使用
        if 判断条件
               test="query !=null and query !='' 表示同时不满足时条件成立
    -->
    <select id="findUserListByPage" resultType="User">
        select * from user
            <where>
                <if test="query !=null and query !='' ">username like "%"#{query}"%"</if>
            </where>
        limit #{start},#{size}
    </select>
</mapper>

2.2 完成状态修改

2.2.1 业务说明

说明: 通过开关 控制数据库中的 status=true/false 数据库中显示1/0 1/0 与 true/false 对象映射可以互相转化.
根据用户的ID 实现状态的修改.

2.2.2 前端JS分析

1. 知识点
   作用域插槽: 一般在表格数据展现时,可以动态获取当前行对象.
   用法:
   2. emplate
   3. slot-scope属性=“变量”
2. 页面JS分析

 		   <el-table-column prop="status" label="状态">
              <!-- <template slot-scope="scope">
                  {
    
    {
    
    scope.row.status}}
              </template> -->
             <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>

3. 页面函数说明

	async updateStatus(user){
    
    
         //实现用户状态修改  注意使用模版字符串  ES6中提出的新用法 ${key}
        //const {data: result} = await this.$http.put('/user/status/'+user.id+'/'+user.status)
        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.2.3 业务接口文档说明

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

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

• 返回值结果: SysResult对象

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

2.2.4 编辑UserController

/**
     * 业务: 实现用户状态的修改
     * 参数: /user/status/{id}/{status}
     * 返回值: SysResult对象
     * 类型:   put 类型
     */
    @PutMapping("/status/{id}/{status}")
    public SysResult updateStatus(User user){
    
    

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

2.2.5 编辑UserService

 //更新操作时修改 status/updated 更新时间
    @Override
    public void updateStatus(User user) {
    
    
        user.setUpdated(new Date());
        userMapper.updateStatus(user);
    }

2.3 用户新增操作

2.3.1 页面JS分析

1. 编辑新增页面
   
2. 新增页面JS分析
   

2.3.2 新增业务接口说明

• 请求路径 /user/addUser
• 请求类型 POST
• 请求参数: 整个form表单数据封装为js对象进行参数传递

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

• 返回值结果: SysResult对象

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

2.3.3 编辑UserController

/**
     * 业务: 实现用户新增操作
     * url:  /user/addUser   post类型
     * 参数: 使用User对象接收
     * 返回值: SysResult对象
     */
    @PostMapping("/addUser")
    public SysResult addUser(@RequestBody User user){
    
    

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

2.3.4 编辑UserService

 /**
     * 1.密码进行加密
     * 2.添加状态码信息
     * 3.添加创建时间/修改时间
     * 4.完成入库操作 xml方式
     * @param user
     */
    @Override
    public void addUser(User user) {
    
    
        //1.密码加密处理
        Date date = new Date();
        String md5Pass = DigestUtils.md5DigestAsHex(user.getPassword().getBytes());
        user.setPassword(md5Pass)
                .setStatus(true)
                .setCreated(date)
                .setUpdated(date); //最好保证时间唯一性.
        userMapper.addUser(user);
    }

2.3.5 编辑UserMapper/xml映射文件

1. 编辑mapper接口

 	void addUser(User user);

2. 编辑xml映射文件

 <!--完成用户新增操作-->
    <insert id="addUser">
        insert into user(id,username,password,phone,email,status,created,updated)
                value
                        (null,#{username},#{password},#{phone},#{email},#{status},#{created},#{updated})
    </insert>

2.4 修改操作数据回显

2.4.1 页面JS分析

1. 按钮点击事件

<el-button type="primary" icon="el-icon-edit" size="small" @click="updateUserBtn(scope.row)"></el-button>

2. 数据回显JS

	async updateUserBtn(user){
    
    
        this.updateDialogVisible = true
        const {
    
    data: result} = await this.$http.get("/user/"+user.id)
        if(result.status !== 200) return this.$message.error("用户查询失败")
        this.updateUserModel = result.data
      },

2.4.2 页面接口文档

• 请求路径: /user/{id}
• 请求类型: GET
• 返回值: SysResult对象

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

• JSON格式如下:

{
    
    
 "status":200,
 "msg":"服务器调用成功!",
 "data":{
    
    
	 "created":"2021-02-18T11:17:23.000+00:00",
	 "updated":"2021-05-17T11:33:46.000+00:00",
	 "id":1,
	 "username":"admin",
	 "password":"a66abb5684c45962d887564f08346e8d",
	 "phone":"13111112222",
	 "email":"[email protected]",
	 "status":true,
	 "role":null
	 }
 }

2.4.3 编辑UserController

 /**
     * 根据ID查询数据库
     * URL:/user/{id}
     * 参数: id
     * 返回值: SysResult(user对象)
     */
    @GetMapping("/{id}")
    public SysResult findUserById(@PathVariable Integer id){
    
    

        User user = userService.findUserById(id);
        return SysResult.success(user);
    }

2.4.4 编辑UserService

 @Override
    public User findUserById(Integer id) {
    
    

        return userMapper.findUserById(id);
    }

2.4.5 编辑UserMapper

	//原理: mybatis在进行单值传递时(int等基本类型/string) 取值时名称任意
    //     底层通过下标[0]获取的数据和名称无关.
    @Select("select * from user where id=#{id}")
    User findUserById(Integer id);

2.4.6 页面效果展现

2.5 实现用户的更新操作

2.5.1 页面JS分析

1. 页面JS
   
2. 发起Ajax请求
   

2.5.2 修改的业务接口

• 请求路径: /user/updateUser
• 请求类型: PUT
• 请求参数: User对象结构

参数名称	参数说明	备注
ID	用户ID号	不能为null
phone	手机信息	不能为null
email	邮箱地址	不能为null

• 返回值: SysResult对象

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

• JSON格式如下:

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

2.5.3 编辑UserController

/**
     * 业务说明: 实现数据的修改操作
     * URL:  /user/updateUser
     * 参数:  user对象
     * 返回值: SysResult对象
     * 请求类型: PUT
     */
    @PutMapping("/updateUser")
    public SysResult updateUser(@RequestBody User user){
    
    

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

2.5.4 编辑UserService

//id/phone/email
    @Override
    public void updateUser(User user) {
    
    

        userMapper.updateUser(user);
    }

2.5.5 编辑UserMapper

 @Update("update user set phone=#{phone},email=#{email} where id=#{id}")
    void updateUser(User user);

2.6 用户删除操作

2.6.1 页面JS修改

3. 知识串

1.1 node.js和vue脚手架的关系

1. node.js 作用Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。
2. VUE脚手架 是前端开发模拟后端设计的一种开发框架体系 xxx.vue
3. VUE.js 是将javascript封装的高级渐进式的JS的框架

1.2 页面简单效果

1.2.1 ElementUI 组件声明

由于elementUI中的组件很多,如果直接导入会导致JS文件特别的庞大. 最好的方式应该是按需导入. 控制JS文件的大小.

1.2.2 导入步骤

1. 导入组件

import {
    
    
  Button
} from 'element-ui'

2. 对外声明组件

Vue.use(Button)