SpringBoot+vue3实现一个查询的实例

前后端分离项目Demo

一、所需的依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.83</version> 
</dependency>
<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.6</version>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.2</version>
</dependency>

二、后端项目

后端项目中，类和接口中package com.ql.buy.，import com.ql.buy.,可以删掉，按照自己java项目实际情况（alt + insert 键）导入

1、实体类User

package com.ql.buy.entity;
import lombok.Data;

@Data
public class User {
    private String id;
    private String userName;
    private String phone;
}

package com.example.demo.entity;

import lombok.Data;

@Data
public class ResultData {

    private Object data;
    private String code;
    private String msg;

}

2、访问数据库接口Dao

package com.ql.buy.dao;
import com.ql.buy.entity.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;

@Mapper
public interface UserDao {

    List<User> getUser();

}

3、service层接口

package com.ql.buy.service;
import com.ql.buy.entity.User;
import com.ql.buy.util.ResultData;
import java.util.List;

public interface UserService {
    ResultData getData();

}

4、service的实现

package com.ql.buy.service;

import com.ql.buy.dao.UserDao;
import com.ql.buy.util.ResultData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;


import java.util.List;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    UserDao userDao;

    @Override
    public ResultData getData() {
        ResultData resultData = new ResultData();
        resultData.setData(userDao.getUser());
        resultData.setCode("100");
        resultData.setMsg("查询数据");
        return resultData;
    }
}

5、Controller代码

package com.ql.buy.controller;
import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.ql.buy.service.UserService;
import com.ql.buy.util.ResultData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin
public class UserController {
    @Autowired
    UserService userService;

    /**
     * 获取用户的信息
     * @return
     */
    @GetMapping("/getData")
    @ResponseBody
    public String getUserInfo() throws JsonProcessingException {
        ResultData data = userService.getData();
        String json =JSONObject.toJSONString(data.getData());
        return json;
    }


}

6、userMapper.xml文件

<?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.ql.buy.dao.UserDao">
  
    <select id="getUser" resultType="user">
        select * from user limit 5;
    </select>
</mapper>

7、application.properties文件

server.port=8088
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/数据库名称?useUnicode=true&characterEncoding=utf8&useSSL=false
#数据库密码改成自己本地的
spring.datasource.username=账号
spring.datasource.password=密码
#mybatis,com.ql.buy.entity改成自己的实际实体类路径
mybatis.type-aliases-package=,com.ql.buy.entity
mybatis.mapper-locations=classpath:mapper/*.xml

8、ResultData类

package com.ql.buy.util;

import lombok.Data;

@Data
public class ResultData {

    private String code;
    private String msg;
    private Object data;
    
}

9、目录结构

三、前端项目Vue3

使用的点击事件，默认不显示，当点击的时候显示，请看【4、效果】

1、ListCompent.vue

<template>
  <table>
    <tr v-for="(item,index) in items" :key="index">
      <td >{{item.userName}}</td>
    </tr>
  </table>
  <div>
    <button @click="iniData">点击</button>
  </div>
</template>
<script>
import axios from 'axios';
  export default {
    data(){
      return{
        items:[],
      }
    },
    methods:{
      iniData(){
        axios.get('/getData').then(response =>{
          this.items = response.data;
        }).catch(error =>{
          console.log(error);
        })
      }
    },
  }

</script>

2、App.vue

<template>
  <div id="app">
    <ListCompent/>
  </div>

</template>

<script>
import ListCompent from './components/ListCompent.vue'; // 引入自定义的组件


export default {
  components: {
    ListCompent// 在父组件中注册自定义的组件
  },
};
</script>

3、vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  productionSourceMap: false,
  configureWebpack: {
    devServer:{
      proxy:{
        '/getData':{
          target: 'http://localhost:8088/',
          changeOrigin: true,
        }
      }
    }
  },
  lintOnSave: false
})

4、效果