前后端分离之Vue（二）前后端结合

前后端的结合

前言：前后端分离趋势越来越明显，分离的好处在于前后端可独立进行开发进行，前端写前端的代码，后端写后端的代码，后端提供相应的数据接口提供给前端。本文采用的是Vue+springboot的结合，做了一个登陆的demo，主要是理解前后端如何结合在一起，这里演示的为前后端在各自的服务器上运行，可参考前后端分离之Vue（一）Vue环境搭建，建立Vue项目 

一、后端服务器的开发

后端采用的是SSM的框架结构进行改造，将前端部分交由Vue看来完成，只负责请求处理。这里只列举变化的部分，不变的部分springboot搭建的SSM结构即可，具体后端代码可参看https://github.com/dgyuanjun/SpringBoot-Vue.git

1.跨域的处理

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @author Administrator
 * @create 2018/3/12-15:17
 * @DESCRIPTION 跨域系统配置
 */
@Configuration
public class CorsConfig {
    /**
     允许任何域名使用
     允许任何头
     允许任何方法（post、get等）
     */
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // // addAllowedOrigin 不能设置为* 因为与 allowCredential 冲突,需要设置为具体前端开发地址
        corsConfiguration.addAllowedOrigin("http://localhost:8000");//前端的开发地址
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        // allowCredential 需设置为true
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

2.统一API响应结果封装

import com.alibaba.fastjson.JSON;
/**
 * @author Administrator
 * @create 2018/3/12-14:31
 * @DESCRIPTION 统一API响应结果封装
 */
public class RestResult {
    private int code;//状态码

    private String message;//消息

    private Object data;//数据
    get.set方法
}

3.响应码的枚举

/**
 * @author Administrator
 * @create 2018/3/12-14:33
 * @DESCRIPTION 响应码枚举，参考HTTP状态码的语义
 */
public enum ResultCode {
    SUCCESS(200),//成功
    FAIL(400),//失败
    UNAUTHORIZED(401),//未认证（签名错误）
    NOT_FOUND(404),//接口不存在
    INTERNAL_SERVER_ERROR(500);//服务器内部错误

    private final int code;

    ResultCode(int code) {
        this.code = code;
    }

    public int code() {
        return code;
    }
}

4.接口响应信息生成

import org.springframework.stereotype.Component;

/**
 * 工厂模式
 * 接口信息生成工具
 * 。@Component 添加到Spring组件中
 * Created by bekey on 2017/12/10.
 */
@Component
public class ResultGenerator {

    private static final String SUCCESS = "success";
    //成功
    public RestResult getSuccessResult() {
        return new RestResult()
                .setCode(ResultCode.SUCCESS)
                .setMessage(SUCCESS);
    }
    //成功，附带额外数据
    public  RestResult getSuccessResult(Object data) {
        return new RestResult()
                .setCode(ResultCode.SUCCESS)
                .setMessage(SUCCESS)
                .setData(data);
    }
    //成功，自定义消息及数据
    public  RestResult getSuccessResult(String message,Object data) {
        return new RestResult()
                .setCode(ResultCode.SUCCESS)
                .setMessage(message)
                .setData(data);
    }
    //失败，附带消息
    public  RestResult getFailResult(String message) {
        return new RestResult()
                .setCode(ResultCode.FAIL)
                .setMessage(message);
    }
    //失败，自定义消息及数据
    public RestResult getFailResult(String message, Object data) {
        return new RestResult()
                .setCode(ResultCode.FAIL)
                .setMessage(message)
                .setData(data);
    }
    //自定义创建
    public RestResult getFreeResult(ResultCode code, String message, Object data) {
        return new RestResult()
                .setCode(code)
                .setMessage(message)
                .setData(data);
    }
}

具体代码可参考：https://github.com/dgyuanjun/SpringBoot-Vue.git

二、Vue前端的开发

1.新建登陆页面，在components里，新建Login.vue

<template>
  <div class="login">
    {{ message }}
    <input v-model="username" placeholder="用户名">
    <input v-model="password" placeholder="密码">
    <button v-on:click="login">登陆 </button>
  </div>
</template>

<script>
    export default {
      name: "login",
      data() {
        return {
          message: 'Hello Vue!',
          username: '',
          password: ''
        }
      },
      http: {
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
      },
      methods: {
        login: function () {
          var _this = this;
          console.log(_this.username+_this.password);
          _this.$http.post('http://localhost:8080/person/login', {
                username: _this.username,
                password: _this.password
          },{emulateJSON:true}
          )
            .then(function (response) {
              var errorcode = response.data.code;
              console.log(response.data.data)
              if (errorcode == "200") {
                _this.$router.push(
                  { path: '/HelloWorld',
                    query: {
                      user: response.data.data,
                    }
                  });
              } else {
                _this.$router.push({ path: '/Test' });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      }

    }
</script>

<style scoped>

</style>

2.新建登陆失败的提示页面Fail.vue，成功的页面可采用原有的HelloWorld.vue

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '登陆失败'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

3.将组件添加到路由表中，在router下的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'//组件的位置
import Login from '@/components/Login'
import Fail from '@/components/Fail'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',//系统的首页面url
      name: 'Login',
      component: Login//对应上文的import
    },{
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/Fail',
      name: 'Fail',
      component: Fail
    }
  ]
})

4.main.js文件添加vue-resource，支持http请求,如果未安装依赖包，先npm安装依赖

$ npm install vue-resource

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import  VueResource  from 'vue-resource'

Vue.use(VueResource);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

三、测试效果

1.登陆页面

2.成功后显示后台数据信息

3.登陆失败

四 源码地址

Vue源代码地址：https://github.com/dgyuanjun/Vue-SpringBoot.git

SpringBoot源码地址：https://github.com/dgyuanjun/SpringBoot-Vue.git

相关链接

前后端分离之Vue（一）Vue环境搭建 http://blog.csdn.net/shenbug/article/details/79541218

前后端分离之Vue(三) Vue爬过的那些坑 http://blog.csdn.net/shenbug/article/details/79547171