需要的依赖:
<dependencies> <!-- 启动类 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 修改成我们所需要的mysql版本 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.6</version> </dependency> <!-- lombok --> <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> <!-- 实体类的注解: 可以检查实体类的语法错误和SQL输出 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </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>
(2).初始化项目
1.实体类
package com.jsxs.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import javax.persistence.Entity; import javax.persistence.Id; /** * @Author Jsxs * @Date 2023/5/14 14:54 * @PackageName:com.jsxs.pojo * @ClassName: Book * @Description: TODO * @Version 1.0 */ @Data @NoArgsConstructor @AllArgsConstructor @Entity //这个注意一定要添加: 这个是和数据库的表进行匹对，假如出现书写错误会立刻报错... public class Book { @Id private Integer id; private String name; private String author; private String publish; private Integer pages; private float price; private Integer bookcaseid; private Integer abled; }
2.编写接口利用SpringJPA框架类似于Mybatis-plus
package com.jsxs.repository; import com.jsxs.pojo.Book; import org.springframework.data.jpa.repository.JpaRepository; /** * @Author Jsxs * @Date 2023/5/14 15:14 * @PackageName:com.jsxs.repository * @ClassName: BookRepository * @Description: TODO * @Version 1.0 */ public interface BookRepository extends JpaRepository<Book,Integer> { }
3.创建SpringJPA测试类:
会给我们生成一个在test/目录下对应的测试类
4.测试成功后添加:controller
package com.jsxs.controller; import com.jsxs.pojo.Book; import com.jsxs.repository.BookRepository; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; /** * @Author Jsxs * @Date 2023/5/14 15:23 * @PackageName:com.jsxs.controller * @ClassName: BookHandler * @Description: TODO * @Version 1.0 */ @RestController public class BookHandler { @Resource private BookRepository bookRepository; @GetMapping("/findAll") public List<Book> findAll(){ return bookRepository.findAll(); } }
(3).测试SpringBoot的控制层
http://localhost:8181/findAll
3.通过路由跳转访问组件 ⭐⭐
- 创建想要展示的组件 *.vue。
- 在路由中配置组件: path:‘/xxx’。
- 在App.vue组件中输入路由跳转的位置: < router-view>
(1).创建Book.vue组件
编写Book.vue这个组件
<template> <div> <table> <tr> <th>编号</th> <th>图书名称</th> <th>作者</th> </tr> <tr v-for="item in books" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.author}}</td> </tr> </table> </div> </template> <script> export default { name: "Book", data() { return { books: [ { id: "001", name: "活着1", author: "余华1" }, { id: "002", name: "活着2", author: "余华2" }, { id: "003", name: "活着3", author: "余华3" }, ], }; }, }; </script> <style scoped> </style>
(2).配置路由router/index.js
这里我们配置Book.vue的组件的路径为: /book
import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' import Book from '../views/Book.vue' const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') }, { path: '/book', name:'book', components:Book } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
(3).展示在App.vue之下
这里我们必须要有 <router-view/>
<template> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view/> </template> <style> #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; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; } </style>
http://localhost:8080/book
4.SpringBoot+Vue交互-全部书籍
(1).安装axios插件
1.这个下载的axios，一定要使用这个
npm install axios
(2).组件中引入axios插件
Book.vue
引入我们的axios插件 import axios from 'axios' 进行请求 mounted(){ // 在这个页面创建的时候，就初始化上去 const _this=this; axios.get('http://localhost:8181/findAll/').then(function(resp){ _this.books=resp.data; // 这里的this指向的是这个函数的this。所以我们用_this来指向vm console.log(resp.data) }) }
<template> <div> <table> <tr> <th>编号</th> <th>图书名称</th> <th>作者</th> <th>出版社</th> <th>页数</th> <th>书籍编号</th> <th>作者</th> </tr> <tr v-for="item in books" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.author}}</td> <td>{{item.publish}}</td> <td>{{item.pages}}</td> <td>{{item.price}}</td> <td>{{item.bookcaseid}}</td> <td>{{item.abled}}</td> </tr> </table> </div> </template> <script> import axios from 'axios' export default { name: "Book", data() { return { books: [], }; }, mounted(){ // 在这个页面创建的时候，就初始化上去 const _this=this; axios.get('http://localhost:8181/findAll/').then(function(resp){ _this.books=resp.data; console.log(resp.data) }) } }; </script> <style scoped> </style>
运行代码后发现:
(3).通过Java解决跨域问题
package com.jsxs.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /** * @Author Jsxs * @Date 2023/5/14 18:51 * @PackageName:com.jsxs.config * @ClassName: CrosConfig * @Description: TODO * @Version 1.0 */ @Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS") .allowCredentials(false) .maxAge(3600) .allowedHeaders("*"); } }
