Vue笔记02 Spring Boot+Vue前后端分离开发基本流程

https://www.bilibili.com/video/av85793766?p=1

---

Vue工程

创建

vue ui创建工程，导入Idea
(js版本太低可能有语法报错，配置中改为6即可)

启动：npm run serve
停止：ctrl+C

引入页面&配置路径

router/index.js中引入.vue
App.vue中配置router

Book.vue

template就是html，script就是js，style就是css
template中只允许有一个根节点
前端可以先用假数据，写在script里面

<template>
    <div id="showcase">
        <table>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "Book",
        data(){
            return{
                msg:'2019999999999999',
                books:[
                    {
                        id: 20200001,
                        name: '病毒星球',
                        author: '卡尔·齐默'
                    },
                    {
                        id:20200002,
                        name: '洛基启示录',
                        author: '乔安妮·M·哈里斯'
                    },
                    {
                        id:20200003,
                        name: '增强人类',
                        author: '海伦·帕帕扬尼斯'
                    }
                ]
            }
        }
    }
</script>

<style scoped>

</style>

vue可以动态加载，改完代码不需要重启，直接访问即可
试了下可以正常访问～

Spring工程

创建

Idea中Spring Initializr默认模版创建
依赖勾上：Lombok、Spring Web、Spring Data JPA、MySQL Driver

配置文件

这里没有用application.properties，删掉
新建application.yml，存放连接数据库的信息

数据库建表

用提供的book.sql建book表

Book

和book表对应，加@Entity后，根据类名和表名对应绑定
再加一个@Data，是lombok的注解，自动生成get/set
属性名和变量名对应，自动绑定
id要加一个@Id，它是主键

@Entity
@Data
public class Book {
    @Id
    private Integer id;
    private String name;
    private String author;
}

BookRepository

继承JpaRepository，<>中第一个是实体类，第二个是主键类型
接口中findAll等方法都有，直接用就行

public interface BookRepository extends JpaRepository<Book,Integer> {
}

测试BookRepository

然后测试一下
建立的Spring工程自带一个测试类BookstoreServerApplicationTests
或者自己创建，在接口名上右键->Go To->Test->Create New Test
给生成的测试类加一个@SpringBootTest，要测试的类@Autowired自动注入，写的方法加一个@Test，就可以运行了

@SpringBootTest
class BookRepositoryTest {

    @Autowired
    private BookRepository bookRepository;

    @Test
    void findAll(){
        System.out.println(bookRepository.findAll());
    }

}

试一下

成功
且打印了sql语句，因为yml里面配了jpa: show-sql: true和格式化

每写一个repository先测一下，保证没问题再继续写controller

BookHandler

配上对应的注解和mapping

@RestController
@RequestMapping("/book")
public class BookHandler {

    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll")
    public List<Book> findAll(){
        return bookRepository.findAll();
    }

}

测试

运行BookstoreServerApplication启动类
注意此时端口是8181

没有问题，后端就搞定了
接下来前后端对接就行

对接

vue中ajax请求用axios组件
（先在命令行把服务停掉，安装，vue add axios）
装好之后自动有了src/plugins/axios.js

刷新页面时读取数据，可以写到初始化函数中，比如这样：

<script>
    export default {
		created() {
            alert(123)
            axios.get('http://localhost:8181/book/findAll/').then(function (resp){
                console.log(resp)
            })
        }
    }
</script>

刷新，看浏览器的控制台
有个跨域问题（8181访问8080），前端后端都可以解决
这里在SpringBoot中解决
只需添加一个配置类，重写addCorsMappings方法即可（不用记，固定的，要用的时候复制就行）

@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }

}

重启，再访问就好了

然后再回调函数中把data拿到就行
注意：不能直接用this，回调函数中this指的是回调，而不是外面，要先在外面拿到this

<template>
    <div id="showcase">
        <table>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Book",
        data(){
            return{
                books:[]
            }
        },
        created() {
            const _this = this
            axios.get('http://localhost:8181/book/findAll').then(function (resp){
                _this.books = resp.data
            })
        }
    }
</script>

<style scoped>

</style>

这样前后端就连上了

总结

1. 写前端，用加数据测试
2. 写后端，保证接口能访问
3. 调后端（后端解决跨域问题）