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

本章目标：从零开始完成前后端分离网站（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);
                }
            };
        };
    }

• 在 IDEA 重新运行后端代码（目前工程尚未配置热重启，故先手动重新运行项目）
  
• 在浏览器刷新页面，成功获取到后台接口数据
  

至此，初始的前后端分离网站已经在本地调通，可以基于此编写简单功能了。

To be continue...

系列文章

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

从零开始上线网站的日常（二）— 第一次上线

版权信息

作者：Nodreame

链接：https://segmentfault.com/a/1190000019109253

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。