建立SpringBoot项目
- 在spring.io中创建项目
- 之后用IDEA打开,记得修改自己的Maven路径
- 重命名
application.properties
改为application.yml
可以修改默认端口
在数据库中创建books
表
链接数据库,用MyBatisX-Generator
生成相应文件
在pom.xml
中导入在这里插入代码片
的依赖
<!--MyBatis-Plus依赖-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.0.1</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.3.1</version>
</dependency>
- 输入
User
与Password
,然后链接
- 用
MyBatisX-Generator
生成相应文件
点击Finish
后生成bean
、mapper
、service
以及resources
中的mapper
- 运行结果如下
配置application.yml
文件
配置该文件从而实现mapper能够链接数据库进行操作,
复制以下代码后需要注意格式问题
server:
port: 8000
spring:
datasource:
url: jdbc:mysql://localhost:3306/16ban?useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
password: 123456
mybatis:
# type-aliases-package需要改成自己的路径
type-aliases-package: cn.edu.guet.shopoingexample.bean
mapper-locations: classpath:mapper/*Mapper.xml
#showSql
logging:
#level需要改成自己的路径
level:
cn.edu.guet.shopoingexample.mapper: DEBUG
导入MySql驱动
<!-- MySQL驱动 -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
创建controller
查询数据库中的数据
BookController
package cn.edu.guet.shopoingexample.controller;
import cn.edu.guet.shopoingexample.bean.Books;
import cn.edu.guet.shopoingexample.service.BooksService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class BookController {
@Autowired
private BooksService booksService;
/**
* 查询全部数据
*/
@PostMapping("selectBooks")
public List<Books> selectBooks(){
/**
* return ResponseData.ok(booksService.list(null));
* 使用这个语句则不用进行后续的操作,这一语句已经可以拿到
* books的数据
*/
return booksService.selectBooks();
}
}
- 在
BooksService
中定义selectBooks()
方法并在BooksServiceImpl
中实现该方法。
BooksServiceImpl
package cn.edu.guet.shopoingexample.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import cn.edu.guet.shopoingexample.bean.Books;
import cn.edu.guet.shopoingexample.service.BooksService;
import cn.edu.guet.shopoingexample.mapper.BooksMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* @author 20901
* @description 针对表【books】的数据库操作Service实现
* @createDate 2023-07-12 13:01:32
*/
@Service
public class BooksServiceImpl extends ServiceImpl<BooksMapper, Books>
implements BooksService{
@Autowired
private BooksMapper booksMapper;
@Override
public List<Books> selectBooks() {
return booksMapper.selectAll();
}
}
- 在
BooksMapper
中定义selectAll()
并用@Select()
进行注解
package cn.edu.guet.shopoingexample.mapper;
import cn.edu.guet.shopoingexample.bean.Books;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
/**
* @author 20901
* @description 针对表【books】的数据库操作Mapper
* @createDate 2023-07-12 13:01:32
* @Entity cn.edu.guet.shopoingexample.bean.Books
*/
@Mapper
public interface BooksMapper extends BaseMapper<Books> {
@Select("select * from books")
List<Books> selectAll();
}
- 测试
统一返回结果处理
前端拿到books
的数据
- 安装
Axios
,Axios官网链接
npm install axios
- 在
App.vue
中
import axios from 'axios';
export default {
//组件一启动,函数自动执行
mounted(){
axios.post('http://localhost:8000/selectBooks')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
},
}
- 运行后出现跨越问题
后端解决跨域问题
解决后,前端成功拿到数据
前端将数据映射到表格
data
中的book
数据置空
- 在
axios.post
中对book
进行赋值