新建Vue3前端项目

先删除之前的vue2版本

npm uninstall -g vue-cli

安装新的vue cli 包

npm install -g @vue/cli

安装完成后使用命令：vue -V 检查是否安装成功

构建项目

这里我们使用 vue3 提供的图形化界面操作：

打开 cmder，输入 vue ui

默认操作即可了

安装依赖

yarn

单页面spa应用

启动项目

yarn run serve

单独运行成功，可以在 /src/views/ 自己再编写一个 Book.vue 页面，然后在 /src/router/index.js 中进行注册，使用即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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 boot 代码

新建一个spring boot 工程

按照下图所示完成工程的创建

配置 application.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
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

注意这里采用这张表的数据

编写实体类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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个演示即可

}

编写接口

1
2
3
4
5
6
7
8
9
10
11
12
13
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 上右键：

这样就新建了一个测试类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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());

	}
}

运行测试即可

编写控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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();
	}
}

运行findAll 控制方法

打通 springboot 和 vue

先在 前端项目中安装 axios 模块

vue add axios

安装成功后，会自动显示在 /src/plugins/axios.js

改造 Book.vue

在 vue 的生命周期中，created 的初始化先于 data() 函数，因此我们就在 created 中实现数据的请求

跨域配置

我们选择在spring boot 后端进行配置

运行截图