投票H5的Vue实现

投票H5的Vue实现

最近一段时间明显感觉到业务在投票这一类的H5上聚集，每次都是业务部门提需求，设计出设计稿，然后到技术这边实现页面效果及投票逻辑。每次都在做这类机械的重复性工作，所以就想能不能进行一些抽象，用技术的手段将这些形成流水线（其实就是想把自己从中解放出来O(∩_∩)O哈哈~）。说干就干，跟后端的同学讨论了下，他也觉得有必要将这个独立开来，交到他们业务部门去。
在这里我只说前端H5用vue实现展示页面，因为后端管理系统这个很常规。

剥离页面配置属性

首先将一些可以公用的配置抽取出来，统一请求。这样在其他页面就可以不必浪费这个资源了。基本确定的要抽取出来的内容如下：

config: {
    header: '', //头图
    footer: '', //底部logo
    share: '', //微信分享图片
    bg_color: '', //背景色
    title_color: '', //页面标题底色
    button_color: '', //按钮颜色
    progress_color: '' //进度条颜色
},

初步商定的公共资源也就这么多，准备是将这些配置统一请求用vuex状态管理。但是存在一个问题，当用户将子页面分享出去，其他人从分享页进入就造成拿不到配置。所以我将请求放在最外层的App.vue页面，如下：

<template>
  <div :style="{backgroundColor: $store.state.config.bg_color}">
    <router-view/>
  </div>
</template>

<script>
import { ajax } from 'jquery'

export default {
  name: 'App',
  created() {
    let that = this;

        //路由配置
        that.$store.dispatch('checkHost', process.env.NODE_ENV);

    //请求配置数据
        ajax({
            type: 'get',
            url: that.$store.state.Host+'/v/votes/'&#