2023-7-12

建立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进行赋值