@GetMapping 的使用方法(从MySQL数据库中读取数据）

我运气真好！

于 2022-04-03 05:37:06 发布

阅读量2.7k

点赞数

文章标签： vue.js spring boot

本文链接：https://blog.youkuaiyun.com/weixin_44260108/article/details/123932145

版权

本文介绍如何通过使用Navicat创建MySQL的userinfo表，然后利用Spring Boot编写接口，创建实体类、Mapper和Controller来实现数据操作。最后，通过Vue.js调用这些接口，读取并展示数据库中的数据。

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

使用Navicat创建MySQL表

userinfo表(包括id,address,date,name,tag, id为主键且自动递增):
在这里插入图片描述

Springboot编写接口

编写 UserInfo 实体类(entity):

package com.example.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.sql.Date;

@TableName("userinfo")
@Data
public class UserInfo {
    @TableId(type= IdType.AUTO)
    private Integer id;
    private String address;
    private Date date;
    private String name;
    private String tag;
}

编写 UserInfoMapper (mapper):

package com.example.demo.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.UserInfo;

public interface UserInfoMapper extends BaseMapper<UserInfo> {
}

编写 UserInfoController (controller):

package com.example.demo.controller;

import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.common.Result;
import com.example.demo.entity.UserInfo;
import com.example.demo.mapper.UserInfoMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;

@RestController
@RequestMapping("/userinfo") //在Vue中引用时需要声明
public class UserInfoController {
    @Resource
    UserInfoMapper userInfoMapper;
    //后台分页模糊查询
    @GetMapping
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize,
                              @RequestParam(defaultValue = "") String search){
        Page<UserInfo> userInfoPage = userInfoMapper.selectPage(new Page<>(pageNum,pageSize), Wrappers.<UserInfo>lambdaQuery().like(UserInfo::getId,search));
        return Result.success(userInfoPage);
    }
}

Vue调用接口，读取数据

<template>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
</template>

<script>
    import request from '@/utils/request'
    export default{
        data(){
            return{
                tableData:[]
            }
        },
        created(){
          this.load()
        },
        methods:{
          load(){
            request.get("/userinfo",{
              pageNum:1,
              pageSize:10,
              search:''
            }).then(res=>{
              console.log(res)
              this.tableData = res.data.records
            })
          }
        }
    }
</script>