从零开始上线网站的日常（一）— 前后端分离网站本地调通

Yarnyogay

2019-11-18

关注关注

本章目标：从零开始完成前后端分离网站（Vue2.5+SpringBoot2）的本地联调成功
首发时间：2019.05.08
运行环境：Mac

零. 步骤

完成 Vue 项目初始化运行 & 完成基本配置
完成 SpringBoot2 项目初始化运行 & 编写第一个 Helloworld 接口
在 Vue 项目中基于 axios 编写请求实现联调效果

一. Vue 项目初始化

1. 环境搭建

安装 Node 环境:
- 方法：官网直接下载安装（我选 LTS 版本）
- 确认：终端输入 node -v , 回车后显示版本则安装成功
安装 Vue CLI
- 简介：Vue 框架的脚手架，方便开发者创建工程及对工程进行操作
- 安装前置：科学上网
- 安装方式：运行npm i -g yarn安装 yarn，然后运行yarn global add @vue/cli安装 Vue CLI

2. 创建项目

终端cd到目标目录，运行vue create 项目名，选择 default并回车（出现 yarn 和 npm 的选择则选中 yarn 并回车），等待项目自动生成及依赖
完成项目安装之后，跟随提示进入项目目录(cd 项目名)并运行(yarn serve)
运行成功后复制终端提示的链接在浏览器打开
展示效果如图所示（同时打开 VueCLI文档为下一步做准备）

3. 基础配置

对于有一定规模的 Vue 项目来说，Vue Router和 Vuex 是必备的，而 VueCLI 已经为Vue工程提供了开箱即用的支持，详细可查看VueCLI插件. 现在先 Ctrl+c 停止项目运行，然后运行以下命令：
```
vue add router
vue add vuex
```
安装完成之后顶部多出了 HOME|ABOUT（效果如下图所示），实现了简单的单页路由跳转，至此前端 Vue 项目初始化完成

二. SpringBoot 项目初始化

已有大佬珠玉在前就不赘述了，建议参考Spring Boot 2.x基础教程：快速入门 -- 程序猿 DD完成项目初始化搭建.

三. 联调

1. 目标

本环节目标是运行前端项目，请求后端 hello 接口，获取到结果并渲染在页面上。

2. 基于 axios 编写请求

2.1. Vue 项目添加 axios

安装：Ctrl+c 停止Vue项目运行，运行yarn add axios

编写（修改 main.js & HelloWorld.vue，完成代码如下所示）：

配置 axios：引入 axios 并使其成为 Vue 的属性

# main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios';

Vue.config.productionTip = false
Vue.prototype.$http = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

请求编写：编写test方法存储接口处理，在生命周期 mounted 中调用，并将结果展示在页面上

# HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Backend Echo: {{ result }} </h2>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      result: ''
    }
  },
  methods: {
    test() {
      this.$http({
        method: 'get',
        url: 'http://localhost:你的端口号/hello'
      }).then(data => {
        window.console.log('data:', data)
        this.result = data? data.data: '无'
      })
    }
  },
  mounted () {
    this.test()
  }
}
</script>

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

2.2 联调

运行前端：终端运行yarn serve启动项目
运行后端：IDEA 直接执行
在浏览器查看前端运行结果，发现返回无显示，打开控制台查看发现存在跨域错误

2.3 跨域问题处理

跨域是一种安全手段，相关知识点暂且按下不表，先把问题简单处理一下。根据控制台的提示信息可知，我们想要请求的资源没有'Access-Control-Allow-Origi'头，这导致我们的请求获取被拦截。这里需要编写一个配置来处理请求的跨域拦截（新增 AppConfiguration.class）：

配置代码

package com.nodreame.pokemon.config;   // 根据自己想买修改包名

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class AppConfiguration {

    @Bean
    public WebMvcConfigurer corsConfiguration () {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {

                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowCredentials(true)
                        .allowedMethods("GET", "POST", "DELETE", "PUT")
                        .maxAge(3600);
            }
        };
    };
}