SpringBoot +Vue 前后端分离实例

今天下了Vue，想试一试前后端分离的实现，没想到坑还不少，这里就记录一下我遇到的坑和我的代码：

一、Vue的下载安装：从网上找就好了，没什么问题，除了下载以后，要把镜像库改成淘宝的，要不然太慢了。

二、推荐一个很好用的软件 HBuilder X，可以在上面写前端的项目，直接就能打开浏览器看到效果，还可以自动下载依赖。

三、前端代码：

首先，先创建一个Vue项目，新建以后项目自带的程序结构如图：

　　　　　　　　　　

因为我也是刚刚接触vue，对里面的东西也不是很了解，只是从网上找了一些项目，边看边学，感觉里面重要的就是main.js、router还有components这三个，当然config里应该是配置文件，也很重要，但在这个初学的项目里，并没有涉及太多里面的东西。

首先，先看一下main.js里面的东西：

　　　　　　

里面的东西不多，可以看到大多数都是添加依赖,使用Vue.use()指定全局使用的包之类的功能。

这里一定要注意，比如这个程序添加了ElementUI这样的外部依赖，那么一定要在这里用Vue.use()使用起来，表示全局都载入了这个库，否则的话，在页面显示的时候，没有内容，使用F12查看网页代码，会出现：

　　Unknown custom element: <xxx> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

这样的提示，这时候就要检查一下自己是否只是Import但是忘了use了。

接着看一下App.vue，这是项目的根组件：

　　　　　　

在这里，我为了做测试，在上面加了一个啊咧，就会发现，不管跳转到哪个页面，页面上都会有“啊咧”这两个字，而另一方面，如果去掉下面的<router-view>的话，不管用什么访问路径，都只有这一个页面，无法获得其他页面，也就是说其实这个App.vue，是程序的入口，在此基础上，通过<router-view>来找到对应路径的页面，给予显示。这有点像SpringBoot里面的Application，程序都是从那里开始启动的。

最后，是Index.js，这里面规定了各个路径对应的页面,在这里，我已经写好了两个组件，一个是登录的组件，一个是初始页面：

　　　　

这里，path就是配置的路径名，而component对应着每一个组件，组件就可以表示一个页面。

下面，就看一看登录的页面代码：

这里主要参考了https://www.jianshu.com/p/4eecd628782a

import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import VueResource from 'vue-resource'
Vue.use(Element)

<template>
  <div>
  <el-form :model="login" status-icon :rules="rule" ref="login">
    <b>用户名</b>
    <el-form-item prop="username" >
      <el-input prefix-icon="el-icon-ump-yonghu" v-model="login.username" auto-complete="off" />
    </el-form-item>
    <b>密码</b>
    <el-form-item prop="password">
      <el-input prefix-icon="el-icon-ump-mima" type="password" v-model="login.password" auto-complete="off" />
    </el-form-item>

    <el-form-item>
      <el-button class="btn" type="primary" @click="submitForm('login')">登录</el-button>
    </el-form-item>
  </el-form>

    <p><a href="#" class="tips">还没有账号？点我去注册</a></p>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data() {
      var checkUsername = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };
      var checkPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        checked: false,
        token: '',
        login: {
          username: '',
          password: ''
        },
        rule: {
          username: [{
              validator: checkUsername,
              trigger: 'blur'
          }
        ],
        password: [{
          validator: checkPassword,
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    submitForm(login){
      this.$refs[login].validate((valid)=>{
        if(valid){
          this.$http.post('http://127.0.0.1:8080/login',{
            username: this.login.username,
            password:this.login.password
          },{emulateJSON:true}).then(result =>{
            console.log(result);
            if(result.bodyText ==='index'){
              this.$router.push({path:'home'});
            }else{
              console.log("登录失败");
              return false;
            }
          });
        }else{
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
 }
</script>

<style>
</style>

这个程序里面，有一些点需要说明：

①上面的<el-form>这样的标签，是在ElementUI里面的，所以一定要在main.js中使用Vue.use()来导入依赖

②对于 :model,他相当于v-bind和v-on的集合，它负责监听用户的输入事件，从而更新数据，具体的解释和实例可以参考:https://www.jianshu.com/p/20e485cb65d9

③:rules：用来添加对表单字段的检验，通常使用语法是：{validator:验证方式，trigger:验证触发}，如果是自己定义的验证方式，应该传入函数名，而不加参数。

④下面的methods里，要注意的就是post的地址不要出错，不要写localhost,写127.0.0.1进行测试，端口号写自己服务器端部署的端口号。

这样子，前端就算完成了，可以运行了，但是我们看vue项目config下面的index.js(或者运行的时候，看命令行也可以)，我们可以看到这样的内容，项目运行的端口地址是8080，而这个又是服务器默认运行的端口，这两个不可以在同一个端口上运行，所以必须修改一个端口，不妨把前端的端口改为8081:

　　　　

其中，home的代码，随便写一写就好了：

<template>
<div>
  <h2>这是主页</h2>
</div>
</template>

<script>
  export default{
    name:"name"
  }
</script>

<style>
</style>

四、后端代码：

新建SpringBoot项目：在Controller层直接写平常写的代码即可：

@RestController
public class TestController {

    @CrossOrigin(origins = "*")
    @RequestMapping("/login")
    public String login(
            @RequestParam(value = "username", required = false) String username,
            @RequestParam(value = "password",required = false) String password,
            Model model
    ){
        System.out.println("用户名为"+username);
        System.out.println("密码为"+password);
        if (username.equals("11")){
            return "index";
        }else{
            return "login";
        }
    }
}

只不过要注意的就是 最上面的注解变成了@RestController:这个注解就是@Controller和在方法上加@ResponseBody的结合，这样使得返回值自动写入返回响应中，方便了前端读取。

在部署的时候，第一个问题就是：

①：Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package

　　这个是因为启动的程序Application放的位置不对，应该把它放到，包含所有java文件的包下，而不能在java包下，比如这样子放才是正确的姿势

　　　　　　　　

②：运行了以后，发现可以使用postMan传送数据，但是却接收不到来自前段的数据：这是因为前段的数据格式不是JSON的，要转成JSON才可以接收到：

需要在传送数据的时候，加上这样一行：

　　　　

③上面的写完以后，后端接收到了数据，但是前端没有反应：这时候，是因为跨域问题：详细可以参见https://blog.csdn.net/xcbeyond/article/details/84453832

　　而SpringBoot的解决方案十分简单：直接在方法上加@CrossOrigin()注解即可：