element+vue+springboot数据显示和条件查询(是和小白的简单易懂)(无分页)

自己写的例子,用的人记得自己敲代码修改
这里表现的是数据展示和条件查询(先会简单的查询,然后再学分页)

一、数据展示

在这里插入图片描述

二、条件,可以单个或多个

在这里插入图片描述

1.2后端实体类
在这里插入图片描述
1.3.serviceimpl
在这里插入图片描述
1.4.dao
在这里插入图片描述

1.5.controller(get或post自己随意)
在这里插入图片描述
1.6,前端在这里插入图片描述
请求方法
created:当需要将数据库数据显示到页面时,就可以将获取表数据的方法在created()进行调用,在页面渲染之前就将数据获取在这里插入图片描述

2.

二:多条件或但条件查询。这里写的比较简单字节(先不进行分页,需要一步一步进行)
这里注意注解的使用
2.1这里的dao层和service无非就是再原本的括号里面添加了(Admin admin)的数据,照葫芦画瓢就行
@responseBody 将 Controller 的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到 response 对象的 body 区,通常用来返回 JSON 数据或者 XML 数据。
@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);而最常用的使用请求体传参的无疑是POST请求了,所以使用@RequestBody接收数据时,一般都用POST方式进行提交。
在这里插入图片描述

2.2 mybatis,这里是多条件查询所编辑查询语句
在这里插入图片描述
2.3前端
在这里插入图片描述
2.4请求 在这里插入图片描述
mybatis层

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.dao.AdminDao">
<resultMap id="BaseResultMap"  type="com.example.demo.entity.Admin" autoMapping="true">
    <result property="username" column="username" jdbcType="VARCHAR"></result>
    <result property="password" column="password" jdbcType="VARCHAR"></result>
    <result property="datat" column="datat" jdbcType="VARCHAR"></result>
    <result property="dataw" column="dataw" jdbcType="VARCHAR"></result>
    <result property="shuju" column="shuju" jdbcType="VARCHAR"></result>
    <result property="sf" column="sf" jdbcType="VARCHAR"></result>

</resultMap>



//数据展示
    <select id="getAll" resultMap="BaseResultMap">
        select * from admin
    </select>
//条件查询
    <select id="tiaoJian" resultMap="BaseResultMap">
        select * from admin
            <where>
                <if test="username!= null and username!= ''">
                    and username like concat(concat('%',#{username}),'%')
                </if>
                <if test="sf!= null and sf!= ''">
                    and sf=#{sf}
                </if>
            </where>

    </select>

</mapper>
  • 10
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端代码(使用Vue3和Element Plus): ``` <template> <div> <el-table :data="tableData" stripe> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </div> </template> <script> import { ref } from 'vue'; import { getTableData } from '@/api/example'; export default { setup() { const currentPage = ref(1); const pageSize = ref(10); const total = ref(0); const tableData = ref([]); async function getData() { const params = { currentPage: currentPage.value, pageSize: pageSize.value, }; const res = await getTableData(params); if (res.code === 200) { tableData.value = res.data.list; total.value = res.data.total; } } function handleCurrentChange(page) { currentPage.value = page; getData(); } getData(); return { currentPage, pageSize, total, tableData, handleCurrentChange, }; }, }; </script> ``` 后端代码(使用Spring Boot 2): ``` @GetMapping("/tableData") public CommonResult<PageResult<TableData>> getTableData(@RequestParam(required = false, defaultValue = "1") Integer currentPage, @RequestParam(required = false, defaultValue = "10") Integer pageSize) { PageResult<TableData> pageResult = tableDataService.getTableData(currentPage, pageSize); return CommonResult.success(pageResult); } ``` 其中,`TableData`为实体类,`PageResult`为分页结果类。`tableDataService`为对应的Service类,用于查询数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值