Spring-jt-Day13-用户页面

已于 2022-08-05 11:33:30 修改
阅读量129 收藏
点赞数
分类专栏： spring 文章标签： spring java 前端
于 2021-05-17 22:28:18 首次发布
原文链接：https://blog.csdn.net/qq_16804847/article/details/116916359
版权

版权声明：本文为闪耀太阳原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_16804847/article/details/116916359

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 定义一行元素 -->
        <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对象
在这里插入图片描述

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配置类

@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属性来定义列宽。

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </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

在这里插入图片描述

1.7.2 设定清空input框

1).页面API
在这里插入图片描述
2).input 事件
在这里插入图片描述

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}
        //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);
    }
LXC5952
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CGB2110-Day12-项目实战-用户模块管理
m0_54866636的博客
02-22 229
文章目录 1. 配置路由 1.1 路由规则 2. 用户模块管理 2.1 用户列表展现 2.1.1 接口文档说明 2.1.2 分页语法结构 2.1.3 编辑UserController 2.1.4 编辑UserService 2.1.5 编辑UserMapper 2.1.6 页面效果展现 2.2 用户状态修改 2.2.1 接口文档 2.2.2 编辑UserController 2.2.3 编辑UserService 2.2.4 编辑UserMapper 2.3 用户删除操作
day13-用户管理实现
weixin_58678891的博客
08-06 399
1. 用户管理实现 1.1 用户管理后台搭建 -1 表设计 -2.User的POJO设计 package com.jt.pojo; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplu
Spring学习笔记（七）
sonpam的博客
11-25 80
JdbcTemplate 作用：用于和数据库交互，实现对表的CRUD操作。 Account.java package com.how2java.domain; import java.io.Serializable; /** * 账户的实体类 */ public class Account implements Serializable{ private Integer id; ...
HTML实现分页功能
热门推荐
weixin_45607635的博客
12-07 3万+
思路 主要是通过display: block和display: none来实现页面的切换。 将每个页面用一个div包起来，默认第一个页面的样式是display: block，其他页面的样式是display: none，然后通过JavaScript获取鼠标点击事件来隐藏其他页面，显示当前页面，达到页面切换的目的。 效果 具体实现 创建项目 首先创建一个项目，我的项目的目录结构大致如下图所示。 .html文件 篇幅问题，这里就只详细放page部分的第一个页面的两个条目的代码作为例子了。 <!DOCTY
html分页功能实现原理无美化，代码中有详细的注释
wlb1012768230的博客
08-24 948
【代码】html分页功能实现原理无美化，代码中有详细的注释。
基于springboot和ajax的简单项目 04.html文件的js用来分页功能，有专门的分页页面html文件（下）
qq_38757863的博客
04-17 282
因为是使用的data（）方法来保存要返回的pageCurrent值，所以，是要修改申请后台数据的函数的内容（pageCurrent是一个要传入后台的参数），不会再去写死pageCurrent的值是1，而是去接受由page.html文件doJumpToPage 函数传递过来的pageCurrent。也就是说，这个两个函数应该写在一起（并且page.html文件是不完整的html文件，所以，这个文件的函数是可以运行在加载的html文件上的）02.由于是不完整的html文件，所以，可以使用加载页面的标签。
Spring 2.5中JdbcTemplate类query方法的三种回调接口
iteye_13986的博客
11-02 98
/** 使用三种Callback接口作为参数的query方法的返回值不同: 以ResultSetExtra[color=red][/color]ctor作为方法参数的query方法返回Object型结果，要使用查询结果，我们需要对其进行强制转型； 以RowMapper接口作为方法参数的query方法直接返回List型的结果； 以RowCallbackHandler...
SpringBoot-jt-day01
05-28
在本课程"SpringBoot-jt-day01"中，我们将深入学习Spring Boot的基础知识和核心概念，这是一门针对初学者和进阶开发者的重要课程。Spring Boot是Java生态系统中的一个热门框架，它简化了创建独立的、生产级别的基于...
Spring学习04----JDBCTemplate和事务控制
LLturn的博客
07-27 280
文章目录1.Spring中的事务控制 1.Spring中的事务控制
day01-基础框架+分类查询业务.zip_海淘
09-24
在“day01-基础框架+分类查询业务.zip_海淘”这个压缩包中，我们看到的是一个关于海淘项目的初期构建，它涉及到用户在购物过程中的一些核心功能，包括商品选择、购物车操作以及订单结算。这个项目可能采用了一种基础...
html+css实现简单分页页码效果
04-19
html+css实现简单分页页码效果源码，尚且没有复杂的后台，给前端新手学习之用
一篇文章带你了解CSS 分页实例
pdcfighting的博客
10-30 450
生活中分页的效果到处可见，今天教大家详细的分析一下分页效果。 如何使用 HTML 和 CSS 来创建分页? 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航 一、分页类型 1. 简单分页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目</title&gt
利用html,js,css实现分页功能详细教程
qq_45429152的博客
12-27 2142
该案例用到了html,js,css,bootstrap
前端 利用html实现分页切换效果
qq_51114151的博客
02-08 8573
本篇文章主要要实现的功能效果如下： 包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能 整体思想：先定位一个中心页 上一页、下一页就是根据定位中心页然后加减就可以实现 首页就是要根据一次要展示几页，然后分别展示要展示的页数 尾页就是根据总共有的页数进行定位，然后分别展示要展示的页数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit..
（三）spring Security 从数据库中检索用户名和密码
young-youth的博客
03-20 5122
security 自定义校验，密码加密
html中的分页条怎么写,html如何制作分页
weixin_39797780的博客
05-30 2803
一般的制作页面都会使用到分页，那么你知道分页功能是怎么实现的吗？让我们一起来学习一下html如何制作分页吧。新建html页面。如图：在html页面找到body标签，在body标签里新建一个div标签，然后在div标签中新建a标签，并在a标签中输入页数。如图：保存html页面，使用浏览器打开查看分页效果。如图：新建style标签回到html代码页面，找到title标签，在title标签下新建一个。如...
html分页功能如何实现原理,前端 JS 分页功能的实现
weixin_35709851的博客
06-03 1079
page.js文件内容function buildPagination(pageNo, pageSize, total){if(total <= 0){return;}var maxPage = parseInt(total / pageSize);if((total % pageSize) > 0){maxPage ++;}var firstHtml = "«";var lastHt...
HTML分页技术
weixin_39482360的博客
09-13 7487
1、通过Jquery插件技术 2、后端传回数据为JSON 进行分页（转自https://blog.csdn.net/LDSWAN0/article/details/78554313） 这是一篇我在初学习过程中，遇到的动态数据分页显示的问题，前台采用Ajax传给后台，后台在访问数据库取出分页数据再转换为json格式传递给前台，前台再解析显示到表格中。在此写出我在做的过程中遇到的问题，可以让其他人...
html中div分页操作
xiaot1214的博客
03-12 9619
//栏目分页操作，js代码 var allPages; var cnt; var indexs; var boxes; $(function() { var $div = $("#rdjggs"); var $pages = $("#pages1"); var pgindex = 1;//当前页 ...
spring-boot-starter-jt808
最新发布
12-11
spring-boot-starter-jt808是一个基于Spring Boot的JT808协议服务端框架，它可以通过注解的方式自动配置Mina服务端相关的代码，使得开发者可以更加方便地开发JT808协议的服务端应用。该框架的实现依赖于jt-framework...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值