后端创建Springboot项目
创建数据库表结构及表信息
添加依赖（pom.xml）
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.6</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>springboot-vue</artifactId><version>0.0.1-SNAPSHOT</version><name>springboot-vue</name><description>springboot-vue</description><properties><java.version>21</java.version></properties><dependencies><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.1.4</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter-test</artifactId><version>3.0.0</version><scope>test</scope></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build></project>
entity层（Book）
package com.example.springbootvue.entity;public class Book {private int bookID;private String bookName;private int bookCounts;private String detail;public int getBookID() {return bookID;}public void setBookID(int bookID) {this.bookID = bookID;}public String getBookName() {return bookName;}public void setBookName(String bookName) {this.bookName = bookName;}public int getBookCounts() {return bookCounts;}public void setBookCounts(int bookCounts) {this.bookCounts = bookCounts;}public String getDetail() {return detail;}public void setDetail(String detail) {this.detail = detail;}@Overridepublic String toString() {return "Book{" +"bookID=" + bookID +", bookName='" + bookName + '\'' +", bookCounts=" + bookCounts +", detail='" + detail + '\'' +'}';}
}
mapper层（BookMapper）
package com.example.springbootvue.mapper;import com.example.springbootvue.entity.Book;
import org.apache.ibatis.annotations.Mapper;import java.util.List;
@Mapper
public interface BookMapper {List <Book> findAll();
}
sevice层（BookService)
package com.example.springbootvue.service;import com.example.springbootvue.entity.Book;import java.util.List;public interface BookService {List <Book> findAll();
}
service接口层（BookServiceImpl)
package com.example.springbootvue.service.impl;import com.example.springbootvue.entity.Book;
import com.example.springbootvue.mapper.BookMapper;
import com.example.springbootvue.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class BookServiceImpl implements BookService {@Autowiredprivate BookMapper bookMapper;@Overridepublic List <Book> findAll(){return bookMapper.findAll();}}
controller层（BookController）
package com.example.springbootvue.controller;import com.example.springbootvue.entity.Book;
import com.example.springbootvue.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
@RequestMapping("book")
@CrossOrigin//允许跨域
public class BookController {@Autowiredprivate BookService bookService;@GetMapping("findAll")public List<Book> findAll(){return bookService.findAll();}
}
配置properties（Application.properties）
spring.application.name=springboot-vue
server.port=8081
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useSSL=false&userUnicode=true&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#??entity?*mapper.xml
mybatis.type-aliases-package=com.example.springbootvue.entity
mybatis.mapper-locations=classpath:mapper/*.xmlmybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
启动类（springbootvueApplication）
package com.example.springbootvue;import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
@MapperScan("com.example.springbootvue.mapper")
public class SpringbootVueApplication {public static void main(String[] args) {SpringApplication.run(SpringbootVueApplication.class, args);}}
后端测试——成功获得数据
前端创建Vue项目
vue create book-vue安装组件
npm i element-ui -S
npm install axios参考链接：Element - The world's most popular Vue UI framework
axios中文网|axios API 中文文档 | axios
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueRouter from 'vue-router'
//ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vuex from 'vuex';
Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(Vuex);Vue.prototype.axios = axios;
Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Book from '../views/Book.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'book',component: Book},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {}
})
App.vue
<template><div id="app"><router-view /></div>
</template><style lang="scss">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;a {font-weight: bold;color: #2c3e50;&.router-link-exact-active {color: #42b983;}}
}
</style>
Book.vue
<template><div><table><tr><td>编号</td><td>书名</td><td>数量</td><td>鸡汤</td></tr><tr v-for="item in books" :key="item.id"><td>{{ item.bookID }}</td><td>{{ item.bookName }}</td><td>{{ item.bookCounts }}</td><td>{{ item.detail }}</td></tr></table></div>
</template>
<script>
export default {name: "Book",data() {return {msg: "Hello,Vue!",books: [{bookID: 1,bookName: "开发部",bookCounts: 23,detail: "从入门到放弃",},],};},created() {var _this = this;this.axios.get("http://localhost:8081/book/findAll").then((res) => {_this.books = res.data;console.log(_this.books);});},
};
</script>
前端测试——成功获得数据
