开始

创建SpringBoot项目时选择jdbc加Mybatis和Mysql Driver

点击创建项目

创建一下必要的软件包

controller:  控制层

mapper:   mybatis文件

pojo:     实现类

service:  逻辑层

impl:     逻辑实现层

在resources下的mapper为Mybatis实现的.xml文件

将application.properties改成application.yml

.yml文件可以更好的让我们编写SpringBoot的配置

编写数据库，有数据库的同学可以直接使用自己的

编写JDBS的连接配置

server:
  port: 8081
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/mysqljava?serverTimeZone=UTC&useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456

server:port:8081为配置运行的端口号，一般尽量避开使用默认的8080端口

driver-callss-name: 为jdbc的位置

url:  要连接的数据库和一些配置

username: 数据库的用户名

password： 数据库的密码

在pojo文件下创建实体类User

import lombok.Data;
import java.util.Date;
@Data
public class User {
    private String name;
    private String Gender;
    private String address;
    private String Telephone;
    private Date time;
}

在service文件里编写一个接口UserService

@Repository
public interface UserService {
    List findAllUser();
}

添加一个impl的文件用于实现定义的接口

创建UserServiceImpl类继承UserService这个接口然后实现它的方法

在mapper文件中创建Mybatis实现接口

@Mapper
public interface UserMapper {
    List findAllUser();
}

这里的小鸟是MybatisX插件,它可以帮助我们更快的找到我们的文件,点击小鸟就可以在xml和实现接口来回切换

然后就可以在resources中的mapper创建我们的xml文件了

头是固定格式的

写完头就可以写关于sql的部分啦

    
        select * from name;
    

这里也有一个青色的小鸟的帮助我们跳转到实现接口的，写一个映射器（Mapper)还要给它绑定一下你的青色小鸟的位置(namespace)，就是实现接口的位置。

然后就可以写查询语句了,要说一下的是这里要绑定一下id这里的id为接口的方法

resultType为实体类对象

在application.yml配置Mybatis的配置项

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.myappdeom.pojo
  configuration:
    map-underscore-to-camel-case: true

mapper-locations: 配置Mybatis的xml文件位置，它会自动查询

type-aliases-package:  配置它要去查找的实体类位置

map-underscore-to-camel-case: true   配置允许驼峰命名

完善一下UserServiceImpl类

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public List findAllUser() {
        List allUser = userMapper.findAllUser();
        return allUser;
    }
}

编辑controller控制层

@RestController
@CrossOrigin
public class UserController {
    @Autowired
    private UserService userService;
    @GetMapping("/user")
    public List  getAllUser(){
        List allUser = userService.findAllUser();
        return allUser;
    }
}

@RestController  方法为一个可以返回数据的方法

@CrossOrigin   方法为设置允许跨域访问

启动SpringBoot访问localhost:8081/user就可以看到数据啦

前端访问数据

这里我们在vue项目中去发axios请求

创建vue项目 

确保已安装node.js  可以通过node -v去查看

安装vue脚手架  npm install -g @vue/cli  可以通过vue -V查看是否已安装

可以在一个空的文件夹下创建vue项目  vue create myapp

选择自定义创建

选择导入的库，如果想要简单一点的vue项目选择第一个就好了

Babel : 它是一个js的解析库

Router: 配置页面跳转路由

Vuex:  可以配置一些全局数据、函数方法

CSS Pre : 方便我们写css样式

一些选择：

创建完项目就可以启动啦 npm run serve

安装axios

npm install axios

进行全局配置

在main.js中写入

import axios from 'axios'

Vue.prototype.$axios = axios

配置一下请求地址和请求超时的时间

建立一个repuest文件，在里面创建index.js

写入配置的代码

import axios from "axios";
let service = axios.create({
    baseURL:"http://localhost:8081/",
    timeout:3000
})
export default service;

新建一个api文件在里面创建一个index.js开始写请求接口

导入刚刚写的配置文件service 写一个向外暴getUser

import service from "@/repuest/index";
export function getUser(){
    return service({
        method:"get",
        url:"/user"
    })
}

method:  为请求的方式

url:   接口的名字

同这里的/user

在一个vue文件下去发起请求

这里使用到created生命周期，它会在创建之前触发

打开控制台

定义一个UserList来装数据

使用v-for循环数组进行数据绑定

如果觉得时间格式不好看，可以定义一个处理方法

渲染的结果

完整代码

这里也可以使用Element ui来写 效果会更好看

安装 Element ui

npm i element-ui -S

在main.js中添加配置

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css'；

Vue.use(ElementUI);

el: '#app'；

然后我们就可以在页面使用啦

使用Elementui的Table 表格

效果如下

完整代码

到这里关于SpringBoot整合Mybatis查询数据库数据返回前端渲染介绍就结束啦

希望能对大家有所帮助，比心比心比心