Vue 结合 SpringBoot 查询数据库信息这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战前言吃饱

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

前言

吃饱饭才有力气写代码~

在昨天的文章SpringBoot 读取本地txt文件并写入数据库中，我们主要写了后端的处理逻辑，成果就是实现了从本地读取 txt 文件，并把内容写入数据库。今天来实现用 Vue 调用后端接口从数据库中查询图书信息！

一.建Vue项目

打开cmd 在你想要存放Vue项目的文件夹的地址栏中输入cmd

vue create 项目名就可以在上个文件夹里创建vue项目，选择相应的配置即可。

或者使用 vue ui (可视化工具帮助创建Vue项目)

二.写页面

2.1 APP.vue

在创建好的 Vue 项目中找到 App.vue ，这是一个入口组件，pages里的组件会被插入此组件中，此组件再此插入 index.html 文件里，形成单页面应用。因为这个小作业比较简单，所以单页面完全可以实现功能！

2.2 页面分析

我们要输入一个值进行查询，所以需要一个可以传值的标签；查询结果需要用表格展示，所以需要一个 table;其它就看个人喜好！
为了显得正式一点，我定义了一个大的 div 作为大盒子，习惯性内容居中，

text-align：center;

盒子最上面用了一个 div，里面装一个

<h1>图书信息查询</h1>

接下来用了一个 div ，里面装一个输入框

<input v-model="str" placeholder="请输入图书名称、图书编号、图书作者、图书出版社进行查询"/>

和一个按钮

<button @click="getBook">查询</button>

接着写了一个分割线（设置成虚线会好看一些）

<hr>

然后在下面写了一个 div ，里面放了一个表格

<table>
    <tr>
        <th>
            书名
        </th>
        <th>
            ISBN
        </th>
        <th>
            作者
        </th>
        <th>
            出版社
        </th>
    </tr>
    <tr>
        <td>
            {{name}}
        </td>
        <td>
            {{ISBN}}
        </td>
        <td>
            {{writer}}
        </td>
        <td>
            {{cbs}}
        </td>
    </tr>
</table>

2.3 Script

从上面的页面可以看到我们需要的数据如下：

str//接收输入的值，同时是接口传的参数用来查询数据库
name//图书名称，同时是数据库里对应的字段名
isbn//图书编号，同时是数据库里对应的字段名
writer//图书作者，同时是数据库里对应的字段名
cbs//图书出版社，同时是数据库里对应的字段名

有一个方法 getBook():
首先要理一理这个方法的逻辑，这是页面上按钮绑定的方法，点击按钮意味着查询；查询需要调用接口，接口里需要传递一个参数；
怎么调用接口呢？我用的是 axios.get(url) ，在它的response 里接收相应数据；

axios.get("http://localhost:9999/api/v1/book/"+this.str)
.then((response)=>{
    var status=response.status
    if(status===200){
        this.name=response.data.name
        this.isbn=response.data.isbn
        this.writer=response.data.writer
        this.cbs=response.data.cbs
    }
})
.catch((error)=>{
    console.log(error)
})

三.注意的点

3.1 No 'Access-Control-Allow-Origin' header is present on the requested resource.

浏览器上报如上错误，这好像是跨域的问题。我的解决方法是在后端代码的Controller 上加了

 @CrossOrigin

就解决了！（这等我研究明白再好好解读一下）

3.2 axios.then 里要用箭头函数

因为要接收后台的 response 里的数据，并赋值给前台页面，所以需要用this.XXX 去接收！如果不是箭头函数，会报错说 XXX is not defined! (这里也是一个理解的不太透彻的地方，等我先研究研究)

Vue 结合 SpringBoot 查询数据库信息

前言