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</