Vue旅行小账本（一）

2018-09-25

Vue旅行小账本

闲来无事，学习了一段时间的Vue，顺带着把axios vuex vue-router也整体走了一遍，但是一直苦于没有合适的练手项目，直到最近看到微信小程序版的旅行小账本，才发现这个项目才是我一直寻找的。话不多说，直接进入主题。

前期准备，首先大体上看了一遍小程序版的旅行小账本的页面和基本交互，大致确定了技术方案
因为页面结构简单，所以没有使用vue的ui库，选取了vue-cli进行开发，vue-cli进行rem适配和其他的一些细节，这里我就不再多讲了，大家有兴趣可以看我另一篇博文。Vue将px转化为rem
在数据获取方面，选取了很火的axios，因为没有后台程序，所以数据接口暂时用easy-mock来进行模拟，
数据的存储，没有后台接口可用，暂时使用vuex进行存储。

easy-mock进行数据模拟

模拟数据的接口
easy-mock可用很简单地模拟和管理接口非常方便，就拿我们的启动页来说吧
我这里的大致方案是，在路由里进行配置，当项目初始化时，进入启动页面，再由启动页面设置定时器，到时间跳转到首页，下面是具体方案和优化

页面路由的配置

import Vue from 'vue'
import Router from 'vue-router'
const Index = resolve => require(['view/index/index'], resolve)
const startUp = resolve => require(['view/start-up/start-up'], resolve)
const addTravelInfo = resolve => require(['view/add-travel-info/add-travel-info'], resolve)
const chioceTravelBg = resolve => require(['view/chioce-travel-bg/chioce-travel-bg'], resolve)
const travelInfo = resolve => require(['view/travel-info/travel-info'], resolve)
const travelPayInfo = resolve => require(['view/travel-pay-info/travel-pay-info'], resolve)
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/startUp'
    },
    {
      path: '/startUp', // 启动页面只显示5秒
      name: 'startUp',
      component: startUp
    },
    {
      path: '/Index', // 首页入口
      name: 'Index',
      component: Index
    },
    {
      path: '/addTravelInfo', // 添加旅行账单页面
      name: 'addTravelInfo',
      component: addTravelInfo
    },
    {
      path: '/chioceTravelBg', // 选择背景图片
      name:'chioceTravelBg',
      component: chioceTravelBg
    },
    {
      path:'/travelInfo/:id',  //详情页面
      name:'travelInfo',
      component:travelInfo
    },
    {
      path:'/travelPayInfo',   //新增开支页面
      name:'travelPayInfo',
      component:travelPayInfo
    }
  ]
})

在进入页面时我们需要进行数据的获取，使用axios进行了简单的封装，获取easy mock的接口数据，这里只是一个简单的数据获取与展示，easy mock的本质就是随机的数据，刚好页面启动页每次需要获取的数据都是随机的，所以使用起来很方便。
下面这里是easy mock数据格式的写法，模拟随机返回一个对象

{
  "data": {
    'status': 200,
    'image|1': [{
        'imgUrl': 'static/start-up-1.jpg',
        'imgAlt': '悬崖大海',
        'imgAuthor': '学涯'
      },
      {
        'imgUrl': 'static/start-up-2.jpg',
        'imgAlt': '远方的旅行',
        'imgAuthor': '桃花'
      },
      {
        'imgUrl': 'static/start-up-3.jpg',
        'imgAlt': '朦胧乡村',
        'imgAuthor': '季青'
      },
      {
        'imgUrl': 'static/start-up-4.jpg',
        'imgAlt': '心中的旅行',
        'imgAuthor': '薛慧'
      },
      {
        'imgUrl': 'static/start-up-5.jpg',
        'imgAlt': '心中的孤岛',
        'imgAuthor': '忘记'
      },
      {
        'imgUrl': 'static/start-up-6.jpg',
        'imgAlt': '宁静的古堡',
        'imgAuthor': '凌燕'
      }
    ]
  }
}

###优化
接口数据渲染方面进行了基本的优化，easy mock的数据请求速度比较慢，很容易由于页面在渲染时图片链接暂时没有，导致图片盒子在页面上有一条边框，不是很美观，所以这里进行了判断，如果链接请求不回来的话，不让img标签显示。

启动页面跳转到首页，前期也是由于，考虑到请求接口时，网络状况不太好，如果一进入页面就执行定时器，那么很有可能，页面上的图片还没加载出来，就直接跳转到了首页，所以我们这里进行了优化处理，当数据请求成功以后，再执行定时器。

最终显示的页面效果