Vue +Springboot + MySQL制作搜索引擎（二）前端Vue的搭建及axios接口设计

Vue +Springboot + MySQL制作搜索引擎（二）前端Vue的搭建及axios接口设计

1. 新建一个Vue项目：

前端我用的Visual Studio Code。

使用vue-cli脚手架创建模板项目：

npm install -g vue-cli ---- 全局安装脚手架，安装完后cmd中输入vue可以查是否安装成功
vue init webpack baidu_search_final ---- 指定模板名称（叫webpack），指定项目名称（baidu_search_final），执行后就下载模板项目
cd baidu_search_final ---- baidu_search_final即上面创建的用到模板的项目名称文件夹
npm install ---- 手动安装

1.第一次全局安装脚手架后，以后创建项目就不用重复安装了。
2.第二步下载好模板项目后手动配置。按照下图配置即可，注意要在 Install vue-router这一项上勾选yes

3.第三步意思是进入刚才创建好的文件夹，第四步手动安装npm。
4.如果上面这几步有问题的朋友建议去看看b站Vue教程的前面几节哦。

创建好的Vue项目长这样：

项目的重点文件都存在src目录下，main.js是入口。

创建好后系统会给一个模板文件 HelloWorld，在命令行终端运行 npm run dev 即可查看。
-命令行打开方法：

-点VS Code左下角这个×和叹号这一块，再选择终端

-按住Ctrl，同时点击 http://localhost:8080，运行结果：

以后所有的项目写完了都输入 npm run dev 运行起来。如果报错没有安装axios，看下面的解决办法。

2. 前端Vue参考代码

链接：https://pan.baidu.com/s/17C9BmvE7qKwAmifpwk7G2g
提取码：5syb

这里着重说说axios写的与后端通信的接口。

首先安装axios。上面说运行程序后会报错，那是因为我们还没有安装axios。
直接按照报错提示做就行了。

（安装前要Ctrl + C终止程序再回到命令行终端安装）

axios使用流程

（1）. 在main.js文件里设置前端数据发送至后端的默认端口

// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

通俗来讲就是前端向后端发送的数据都发送到8443这个端口去。
同时将axios全局化，在别的组件中使用axios很方便。

（2）. 在方法中使用axios向后端发送信息：

baiduSearch () {
      this.$axios
        .post('/result', {
          // 把 search 页面的 input 内容映射到 searchContent 变量中并发送给后端
          searchContent: this.searchForm.searchContent // 通过 v-model 把 input 框输入的内容存进 searchContent 中
        })
        // .then意思是指定回调函数
        .then((successResponse) => {
          // successResponse.data[0].title：就是符合条件的搜索结果的标题。其他以此类推
          // console.log(successResponse.data[0].title)
          console.log(successResponse.data[0].imgURL) // 数组，所有符合条件的结果数组
          // console.log(successResponse.data[0])  // 数组第一个，里面包含id title abstracts
          let list = successResponse.data
          this.searchResults = list
          if(successResponse.data.length === 0) {
            alert('error')
          }
        })
        // 指定发生错误时的回调函数
        .catch((failResponse) => {})
    }

这是个js方法，逻辑是当 input 中输入关键词并点击“百度一下”按钮或回车时触发该方法。该方法调用 axios 把输入的关键字发送给后端。

重点 .post 下的 searchContent ，这个名字要记住，因为后端通过这个名字接收前端传过来的数据。

另一个重点 .post 里的目录 /result 也与后端处理post请求的相关代码相关，后面讲后端的时候会呼应这里，它不仅代表前端页面所在的url，同时后端也通过这个特征接收信息

（3）. 使用axios接收后端传回来的数据

后端从数据库取了数据后交给前端，前端要把数据显示在网页上。这个怎么处理呢？

axios也给我们提供了办法。注意到上述方法中的.then，单独拿出来讲解一下。

.then((successResponse) => {
          // successResponse.data[0].title：就是符合条件的搜索结果的标题。其他以此类推
          // console.log(successResponse.data[0].title)
          console.log(successResponse.data[0].imgURL) // 数组，所有符合条件的结果数组
          // console.log(successResponse.data[0])  // 数组第一个，里面包含id title abstracts
          let list = successResponse.data
          this.searchResults = list
          if(successResponse.data.length === 0) {
            alert('error')
          }
        })

注释里面写了我测试用的代码，有兴趣的朋友可以取消注释在控制台看一下输出什么。

successResponse 也可以是别的名字，他只是个代号，里面存后端传回来的“东西”，这个“东西”里面有很多项，data 是对我们有用的，除此之外还有状态码（404是我们最熟知的）等等。这个项目里后端传回来的东西存在 successResponse.data 里，是个数组。满足的词条有几条，数组就有多大。每个数组包括 title，imgURL，abstracts 等数据库里存的东西。

我们在前端 data 里预设一个数组 searchResults 专门用来存返回数据。

data () {
    return {
      searchForm: {
        searchContent: ''
      },
      searchResults: []
    }
  },

这样我们就可以用js取数组中的内容并显示在网页上了。

（4）前端显示搜索结果：

<!-- 搜索结果 -->
      <ul class="results">
        <li
          class="result-content"
          v-for="searchResult in searchResults"
          :key="searchResult.id"
        >
          <h3>
            <a href="javascript:;">{{ searchResult.title }}</a>
          </h3>
          <!-- 如果返回的图片地址不为空，有图片盒子，文字盒子样式为des-text1 -->
          <div class="description" v-if="searchResult.imgURL !== null">
            <div class="image">
              <a href="javascript:;">
                <!-- 给img的src绑定数据要用v-bind -->
                <img :src='searchResult.imgURL' />
              </a>
            </div>
            <div class="des-text1">
              {{ searchResult.abstracts }}
            </div>
          </div>
          <!-- 如果返回的图片地址为空，没有图片盒子，文字盒子样式为des-text2 -->
          <div class="description" v-else>
            <div class="des-text2">
              {{ searchResult.abstracts }}
            </div>
          </div>
        </li>
      </ul>

用 v-for 循环遍历返回数组 searchResults ，依次显示即可。

这里面有个要注意的，就是词条中有的有图片，有的没有。分别写两个词条结构，用 v-if 和 v-else 分离不同情况下词条的css结构。如果有图片，即返回的imgURL不为空（null，这个null与数据库列的默认值相关，即不填任何东西默认为null）时，执行有图片的html和css，以及他们的 style ，否则执行另一种，结构里没有 img 的结构。

上图为运行起来的前端页面，第一个 li 有 class 为 image 的结构和文字结构，第二个 li 没有，只有文字结构。

压缩包打开 npm run dev 运行后，在 url 最后填上 result ，这是根据路由指引的。成功后的页面如图所示。


在百度搜索框中填入想搜索的内容，按回车或点击 “百度一下” 就可以搜索啦。咦没有反应是为什么？那当然咯，因为前端的作用是把数据发送给了后端，但是后端和数据库都没做呢，怎么能有反应。

下一节讲讲后端怎么做，后端与前端、后端与数据库的接口怎么写。