CGB2102-京淘项目day13

最新推荐文章于 2025-03-09 17:00:33 发布

我思我茶

最新推荐文章于 2025-03-09 17:00:33 发布

阅读量183

点赞数

分类专栏：正课文章标签： java vue ajax

本文链接：https://blog.youkuaiyun.com/weixin_44761365/article/details/116946334

版权

正课专栏收录该内容

7 篇文章

订阅专栏

本教程详细介绍了如何使用Vue.js与Spring Boot搭建用户管理系统，包括前端页面布局、面包屑导航、卡片组件的使用，以及用户输入框、分页查询等功能的实现。同时，还介绍了如何利用MyBatis Plus进行数据分页查询，以及前后端数据交互的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

spring课程目录

1 用戶页面布局

1.1 面包屑导航

1.1.1官网API

在这里插入图片描述

1.1.2 编辑页面VUE

	  <!-- 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.1.3 页面效果展现

在这里插入图片描述

1.2 Card 卡片

1.2.1 官网API

在这里插入图片描述

1.2.2 vue中使用卡片

	  <!-- 2.定义卡片标签 -->
      <el-card class="box-card">
        这是一个卡片视图
      </el-card>

1.2.2 按需导入样式

1).导入标签
在这里插入图片描述
2).设置全局可用

1.3 编辑用户输入框

1.3.1 官方API

在这里插入图片描述

1.3.2 栅格API

在这里插入图片描述

1.3.3 编辑页面VUE

        <!-- 2.1 定义一行元素 -->
        <!-- 定义分栏间隔   20px-->
        <el-row :gutter="20">
          <el-col :span="9">
            <!-- 2.1定义用户的输入框 -->
             <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="4">
            <!-- 2.2 定义新增用户按钮-->
            <el-button type="primary">添加用户</el-button>
          </el-col>
        </el-row>

1.3.4 页面效果

在这里插入图片描述

1.4 获取后端用户数据

1.4.1 前端业务接口

在这里插入图片描述

1.4.2 PageResult对象接口说明

在这里插入图片描述

1.4.3 编辑PageResult VO对象

说明: 在jt-manage中的com.jt.vo 中定义 VO对象

package com.jt.vo;
import lombok.Data;
import lombok.experimental.Accessors;

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

1.4.4 编辑UserController

     /**
     * 需求: 进行分页查询
     * URL地址:  /user/list
     * 请求参数: 使用PageResult对象接收
     * 请求返回值: SysResult对象
     * 请求类型: get请求
     */
    @GetMapping("/list")
    public SysResult findUserByPage(PageResult pageResult){//只有3个参数
        //携带所有的数据返回
        pageResult = userService.findUserByPage(pageResult);
        return SysResult.success(pageResult);
    }

1.4.5 编辑UserService

   /**
   * 业务说明: 将后台数据实现分页查询
   * 分页Sql:
   *      select * from user limit 起始位置,查询记录数
   * 查询第一页 每页20条
   *      select * from user limit 0,20
   * @param pageResult
   * @return
   *
   * MP实现分页查询
   *  MP通过分页对象进行查询,获取所有的分页相关的数据.
   *
   * 参数说明:
   *  page: 定义当前的分页对象 页面/每页的条数
   *  queryWrapper: 条件构造器 只有query属性不为null 才会拼接where条件.
   */

  @Override
  public PageResult findUserByPage(PageResult pageResult) {
      //1.定义分页对象  2个参数
      IPage<User> page =
              new Page<>(pageResult.getPageNum(),
                            pageResult.getPageSize());
      //2.定义查询条件
      QueryWrapper<User> queryWrapper = new QueryWrapper<>();
      //3.判断用户是否有参数
      boolean flag = StringUtils.hasLength(pageResult.getQuery());
      queryWrapper.like(flag,"username", pageResult.getQuery());

      //page 参数4个
      page = userMapper.selectPage(page,queryWrapper);
      //4.获取总记录数
      long total = page.getTotal();
      //5.获取分页后的结果
      List<User> userList = page.getRecords();
      return pageResult.setTotal(total).setRows(userList);
  }

1.4.6 编辑MybatisPlus配置类

package com.jt.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration  //标识配置类
public class MybatisPlusConfig {

    //MybatisPlus~~动态添加执行器~~Mybatis~~~~JDBC
    //照着官方文档实现即可
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));
        return interceptor;
    }
}

1.4.7 获取返回值结果

URL地址: http://localhost:8091/user/list?query=&pageNum=3&pageSize=1   
查询的第三页的数据 每页一条
JSON结构:
{"status":200,"msg":"服务器运行成功","data":{"query":"","pageNum":3,"pageSize":1,"total":4,
"rows":
 [{"created":"2021-02-18T11:17:23.000+00:00","updated":
    "2021-03-13T08:50:25.000+00:00","id":3,"username":"zhangsan",
    "password":"a66abb5684c45962d887564f08346e8d",
    "phone":"13111112223","email":"1235678@qq.com","status":true,"role":null}]}}

1.5 编辑用户列表前端

1.5.1 表格数据API

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

        <!-- 定义表格数据
           :data: 表格的数据来源
           prop:  从userList中获取的属性值
           label: 字段名称
           stripe: 斑马纹效果
           border: 列
        -->

  <el-table :data="tableData"  style="width: 100%" stripe  border>
         <!-- 定义表格的序号 -->
     <el-table-column type="index" label="序号"></el-table-column>
     <el-table-column prop="username" label="用户名"></el-table-column>
  </el-table>

1.5.2 编辑页面JS

<script>
  export default {
    data(){
      return {
        //定义分页查询对象
        queryInfo: {
          query: '',    //用户查询的数据
          pageNum: 1,   //默认第一页
          pageSize: 5   //每页5条
        },
        userList: [],   //获取分页后的结果
        total: 0
      }
    },
    methods: {
      //1.动态获取userList数据
      async getUserList(){
       const {data: result} = await this.$http.get("/user/list",{params: this.queryInfo})
       if(result.status !== 200) return this.$message.error("获取列表失败")
       //为total属性赋值
       this.total = result.data.total
       this.userList = result.data.rows
      }
    },
    //当页面加载完成之后 调用该函数
    mounted(){
      //获取userList列表数据
      this.getUserList()
    }
  }
</script>

1.5.3 编辑表格页面

      <!-- 定义表格数据
           :data: 表格的数据来源
           prop:  从userList中获取的属性值
           label: 字段名称
           stripe: 斑马纹效果
           border: 首列字段
        -->
         <el-table :data="userList" style="width: 100%" stripe border>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column label="操作"></el-table-column>
         </el-table>

1.5.4 Vue语法作用域插槽

说明: 一般在循环遍历的表格中,需要获取当前行的元素.但是由于很多的UI工具将循环遍历的方式进行了封装.不方便直接获取对象.则可以使用***作用域插槽***的形式动态获取.

 <template slot-scope="scope">
              <!-- scope封装的对象 获取行级元素 row属性实现 -->
              {{scope.row.status}}
  </template>

1.5.5 展现开关

     <el-table :data="userList" style="width: 100%" stripe border>
            <el-table-column prop="username" label="用户名"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                  <!-- scope封装的对象 获取行级元素 row属性实行 -->
                  <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="small"></el-button>
            </el-table-column>
         </el-table>

1.5.6 效果展现

在这里插入图片描述

1.6 表格分页实现

1.6.1 官网API

在这里插入图片描述

1.6.2 实现分页

     <!-- 3.定义分页功能
           1.@size-change  当页面的条数变化时触发
           2.@current-change  当页数改变时触发
           3.current-page  显示当前的页数 ??
           4.:page-sizes   显示页数的数组
           5.page-size     初始条件下每页的条数
           6.layout        显示分页的样式种类 全部显示
           7.total         数据的总数  ???
         -->
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pageNum"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
        </el-pagination>

1.6.3 编辑页面JS

<script>
  export default {
    data(){
      return {
        //定义分页查询对象
        queryInfo: {
          query: '',    //用户查询的数据
          pageNum: 1,   //默认第一页
          pageSize: 5   //每页5条
        },
        userList: [],   //获取分页后的结果
        total: 0
      }
    },
    methods: {
      //1.动态获取userList数据
      async getUserList(){
       const {data: result} = await this.$http.get("/user/list",{params: this.queryInfo})
       if(result.status !== 200) return this.$message.error("获取列表失败")
       //为total属性赋值
       this.total = result.data.total
       this.userList = result.data.rows
      },
      handleSizeChange(pageSize){
        //查询的条件需要变化
        this.queryInfo.pageSize = pageSize
        //重新查询数据
        this.getUserList()
      },
      handleCurrentChange(pageNum){
        this.queryInfo.pageNum = pageNum
        this.getUserList()
      }


    },
    //当页面加载完成之后 调用该函数
    mounted(){
      //获取userList列表数据
      this.getUserList()
    }
  }
</script>

在这里插入图片描述

1.7 用户搜索的实现

1.7.1 编辑页面HTML

     <el-col :span="9">
          <!-- 2.1定义用户的输入框 -->
            <el-input placeholder="请输入内容"
              v-model="queryInfo.query" class="input-with-select" >
              <el-button slot="append" icon="el-icon-search"  @click="getUserList"></el-button>
            </el-input>
        </el-col>

1.7.2 设定清空input框

1).页面API
在这里插入图片描述
2).input 事件(事件是方法，用v-click / @)

1.7.3 编辑页面HTML

在这里插入图片描述

1.8 实现用户状态修改

1.8.1 官网API

在这里插入图片描述

1.8.2 业务接口

在这里插入图片描述

1.8.3 编辑页面JS

   async updateStatus(user){
        //获取用户的Id号/状态信息 发起restFul请求.
        //this.$http.put("/user/status/"+user.id+"/"+user.status)
        //模板字符串写法 `` 可以编辑多行,可以直接对象取值${key} (jquery写法)
        //es6的高端写法
        const {data: result} =
          await this.$http.put(`/user/status/${user.id}/${user.status}`)
        if(result.status !== 200) return this.$message.error("更新操作失败")
        this.$message.success("更新操作成功!")
      }

1.8.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();
    }

1.8.5 编辑UserService

@Override
    public void updateStatus(User user) {   //id/status

        userMapper.updateById(user);
    }

CGB2102-京淘项目day13

1 用戶页面布局

1.1 面包屑导航

1.1.1官网API

1.1.2 编辑页面VUE

1.1.3 页面效果展现

1.2 Card 卡片

1.2.1 官网API

1.2.2 vue中使用卡片

1.2.2 按需导入样式

1.3 编辑用户输入框

1.3.1 官方API

1.3.2 栅格API

1.3.3 编辑页面VUE

1.3.4 页面效果

1.4 获取后端用户数据

1.4.1 前端业务接口

1.4.2 PageResult对象 接口说明

1.4.3 编辑PageResult VO对象

1.4.4 编辑UserController

1.4.5 编辑UserService

1.4.6 编辑MybatisPlus配置类

1.4.7 获取返回值结果

1.5 编辑用户列表前端

1.5.1 表格数据API

1.5.2 编辑页面JS

1.5.3 编辑表格页面

1.5.4 Vue语法作用域插槽

1.5.5 展现开关

1.5.6 效果展现

1.6 表格分页实现

1.6.1 官网API

1.6.2 实现分页

1.6.3 编辑页面JS

1.7 用户搜索的实现

1.7.1 编辑页面HTML

1.7.2 设定清空input框

1.7.3 编辑页面HTML

1.8 实现用户状态修改

1.8.1 官网API

1.8.2 业务接口

1.8.3 编辑页面JS

1.8.4 编辑UserController

1.8.5 编辑UserService

1.4.2 PageResult对象接口说明