this is a springboot-vue's demo
npm uninstall -g vue-cli
npm install -g @vue/cli
安装完成后使用命令：vue -V 检查是否安装成功
这里我们使用 vue3 提供的图形化界面操作：
打开 cmder，输入 vue ui
默认操作即可了
yarn
yarn run serve
单独运行成功，可以在 /src/views/ 自己再编写一个 Book.vue 页面，然后在 /src/router/index.js 中进行注册，使用即可
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>封面url</td>
<td>书名</td>
<td>作者</td>
<td>出版日期</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.cover}}</td>
<td>{{item.title}}</td>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Book",
data(){ // data是一个函数对象
return{
books: [
{
id: 1,
cover: 'https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg',
title: '红楼梦',
author: '清婉儿',
date: '2020-06-14'
},
{
id: 2,
cover: 'https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg',
title: '那一夜',
author: '卓文君',
date: '2020-06-14'
},
{
id: 3,
cover: 'https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg',
title: '飞上你的床',
author: '上官飞燕',
date: '2020-06-14'
}
]
}
}
}
</script>
<style scoped>
</style>
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 引入 Book.vue
import Book from '../views/Book'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// 下面这是 vue3 的写法，这里我们还用vue2的写法注册组件
// 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/About.vue')
},
{
path: '/book',
component: Book
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
spring:
datasource:
url: jdbc:mysql://localhost:3306/virgin show?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8181注意这里采用这张表的数据
package com.springboot.demo.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;
/**
* @author: latinos-bub
* @date: 2020/6/14 20:51
* @description:
* @className: Book
*/
@Entity // 采用jpa依赖后，使用该注解，会自动将该类与数据库中的相同名字的表进行映射(注意：类与表名必须一样，首字母除外)
@Data // lomback 自动提供getter/setter
public class Book {
@Id // 标注 数据库表中的主键字段
private Integer id;
String cover;
String title;
String author;
String date;
// ... 这里的字段属性最多可以等于 表的字段，这里我们只取5个演示即可
}package com.springboot.demo.repository;
import com.springboot.demo.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
/**
* @author: latinos-bub
* @date: 2020/6/14 20:55
* @description:
* @className: BookRepository
*/
public interface BookRepository extends JpaRepository<Book, Integer> {
}在接口中，我们这里只需要继承 JpaRepository<T, id> 接口即可，同时也不需要注解该接口是 @Repository，以为继承的接口中已经说明了
我们打开 JpaRepository 会发现有好多方法，这里我们只测试一下 findAll 方法
首先我们在 BookRepository 上右键：
这样就新建了一个测试类
package com.springboot.demo.repository;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
@SpringBootTest
class BookRepositoryTest {
@Autowired // 一定要将接口注入
private BookRepository book;
@Test
void findAll(){
System.out.println(book.findAll());
}
}
package com.springboot.demo.controller;
import com.springboot.demo.entity.Book;
import com.springboot.demo.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
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;
/**
* @author: latinos-bub
* @date: 2020/6/14 21:53
* @description:
* @className: BookHandler
*/
@RestController // restful 风格的 controller
@RequestMapping("/book")
public class BookHandler {
@Autowired // 一定要自动注入这个 接口
private BookRepository bookRepository;
@GetMapping("/findAll") // spring boot 独有的
public List<Book> findAll(){
return bookRepository.findAll();
}
}
vue add axios
安装成功后，会自动显示在 /src/plugins/axios.js
在 vue 的生命周期中，created 的初始化先于 data() 函数，因此我们就在 created 中实现数据的请求
我们选择在spring boot 后端进行配置
