Vue+springmvc+mybatis前后端分离学习---(三)前端系统搭建与跨域问题解决记录

前两章分别总结了Spring与Mybatis的分别搭建与整合的思路步骤，今天记录一下vue+ssm的前后端分析搭建过程。

第一章传送—>Spring与Mybatis单独配置运行记录
第二章传送—>Spring与Mybatis整合思路记录

---

前两章是IDEA+SSM搭建的后端系统，通过Tomcat单独运行，占用的是8081端口，那么现在我们再使用VSCode+Node.js+Vue来做一个只负责显示的前端，使其能够单独运作在8080端口，本章记录如何搭建前端环境以及解决跨域来获取后端数据。

一、前端软件下载(软件如何下载以及安装参考其他资料)

1.下载Visual Studio Code软件。

2.下载Node.js

3.在本地创建一个文件夹，打开VSCode，使用ctrl+k+o组合键来找到并打开刚刚创建的文件夹，并点击左上角的Terminal来在项目中打开命令行。

4.查找资料，分别通过命令行指令来配置淘宝镜像(加快下载速度，类似Maven改为阿里镜像)、Webpack(模板)、Vue以及Vue-cli(脚手架)。

5.以上软件下载安装完成后，通过 vue init webpack 项目名 指令来创建前端模板项目。

---

二、环境设置(四大天王)

1.查看项目结构如下图，我们需要进行配置的就是他们四个：

2.一开始我感觉跟初学vue太不一样，怎么项目一出来就这么多文件，但是细细查看后发现原来只不过是把学vue时的模板给拆分开了。首先我们打开App.vue:

此时我们发现跟学Vue时有些相似了(一个div有个id，下面的js里new一个vue对象并且绑定el与那个div的id)，但是我们发现它里面最大的标记并不是html而是templete，那么可以猜到这只是最终页面的一小部分。这个时候我们把注意力放到div里的router-view，而刚好项目里有一个叫router的文件夹。

3.打开路由文件夹我们可以发现一个index.js，在他的import里有我们刚刚发现的vue-router，到这首先能意识到App.vue里显示了路由所指向的页面内容，那这个页面内容具体是什么呢？这时候发现import里的HelloWorld在component组件文件夹里似乎有相关的什么东西。。。答案应该就在那个components组件文件夹里。

4.打开components文件夹，果然发现了HelloWorld.vue文件，里面终于变成了熟悉的页面标记如图，看来所要显示的内容就是这个component文件夹里的各个前端页面了，不过这里的页面不再是一个个html，而是一个个被封装起来的“组件”。

5.到这里先总结一下，App.vue中的div想显示router-view标记，而这个路由根据我们输入的路径来找到该路径所指的组件。那么问题来了，怎么没有见到var vue = new Vue()这个灵魂语句呢？别急，打开main.js

6.打开main.js，发现有一系列的导入，里面也包括了App、路由等部分，而最下方也终于有了那句new Vue，看来这个main.js就是最终html里最大的那个script域了，如图。

7.到这里可以大胆的猜想，App.vue与main.js加上其他信息就像是组成了最终的那个html文件，而App.vue里面又根据路径显示不同的内容，接下来我们创建自己的文件，进行跨域请求。

---

三、创建文件获取后端内容

1.在components文件夹中创建test.vue文件，里面只绑定一个mes值，在dom加载完成前读取后端mes值来显示在页面上。

<template>
  <div>
      <font>{{mes}}</font>
  </div>
</template>

<script>
import Router from "vue-router";
export default {
  name: "test",
  data() {
    return {
      mes:"..."
    };
  },
  beforeMount:function(){
    this.index1load();
  }
  ,
  methods: {
    index1load(){
      console.log("请求后端");
          this.$axios.post('/api/CCLX_war_exploded/getCourseMes', {
						username: this.inputUsername,
						password: this.inpytPassword
					}).then(
						response => {
							this.mes = response.data.courseMes;
							console.log(this.mes)
						}
					);
    }
  },
};
</script>

<style>

</style>

2.有了Componenet，就该让路由能找到它，进入router下的index.js进行注册。

3.到这里我们试试发送请求来获取数据，当然没解决跨域是不行的。

这里因为我只是把自己配置代理的代码注释了，所以报的404，但是大家第一次的话应该会是400或者不被允许的访问一类的信息，毕竟跨域就是因为对于JavaScript来说浏览器是不允许脚本语言访问本站点之外的东西的，所以我们需要通过配置代理，让前端化身为一个假的服务器去访问后端服务器。

4.现在记录我的解决办法，先打开config下的index.js，找到proxyTable，加入以下代码。

  '/api': {
      target: 'http://localhost:8081',
     changeOrigin: true, 
     pathRewrite: {
       '^/api': '/'
     }
   }

这里我们再看上面的404错误，看到找不到路径api/xxx，那个api就是我想在这里让这三个字母转换为后端的端口。

5.配置之后我们再来访问试试(beforeMount是dom加载前，欲知详情请百度vue生命周期)

可以看到虽然浏览器查看网络还是访问的8080端口的api/xxx，直接输入这个url肯定是404的，但其实是已经被替换为了这个，如图。

---

总结：

1.原来的html变成了现在的组件，通过路由来让最终的html确定需要显示什么。

2.通过模板创建的项目，虽然看着分散了但不同的位置组合起来就好比是我们自己写的html文件。

3.跨域的解决。本章采用了从前端解决，让前端代理服务器替我们获取后端数据。也可以从后端解决，如何配置可以阅读完本文之后继续查阅其他资料进行了解。

4.后端系统是一直在单独运转的，前端只要注释掉请求后台的代码也是可以自己运作的，用的不同的IDE，不同的端口号，自然就可以分开开发，互不干扰，如此就初步地对于分离有了一些认识。

---

“没什么难的，不要忘记呼吸”