基於mint-ui的移動應用開發案例五（我的中心）

本節主要包含如下內容

1. 數據mock和axios的使用
2. 用戶圓形頭像的顯示樣式

1.數據mock

首先咱們先在mock文件夾中定義一個標準的json數據文件data.json

{
  "my": {
    "name": "週一",
    "age": 39,
    "gender": "男",
    "job": "開發工程師",
    "level": "T4",
    "address": "安徽省合肥市蜀山區",
    "tel": "13698712233",
    "joinDate": "2016-09-12",
    "dept": "TECH·移動一組"
  }
}

而後在webpack.dev.conf.js中加入以下代碼：

const express = require('express')
const app = express()
var appData = require('../mock/data.json')
var my = appData.my;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

能夠看到這裏是使用express做爲服務端，而且添加了路由轉發。接下來在下面的devServer對象中加入：

before(app){
        app.get('/api/my', (req, res) => {
          res.json({
            // 這裏是你的json內容
            errno: 0,
            data: my
          })
        })
    }

這樣咱們就能夠用axios來調用這個接口了。

2.我的中心主界面

<template>
  <div id="my">
    <mt-header fixed title="我的中心"></mt-header>
    <div class="content">
      <div class="user-head">
        <div class="user-img" @click="goMyInfo">
        </div>
        <div class="right-arrow" @click="goMyInfo">
          <img src="../assets/my/right.png" height="10" width="10"/>
        </div>
      </div>
      <div class="user-option">
        <mt-cell is-link>
          <span slot="title">設置</span>
          <img slot="icon" src="../assets/my/setting.png" width="20" height="20">
        </mt-cell>
        <mt-cell>
          <span slot="title">關於</span>
          <span>當前版本V1.0</span>
          <img slot="icon" src="../assets/my/info.png" width="20" height="20">
        </mt-cell>
      </div>

    </div>
  </div>
</template>
<style scoped>


  .content {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
  }

  .user-head {
    height: 100px;
    width: 100%;
    background-color: #73ccff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .user-img {
    background-image: url("../assets/my/user.jpg");
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: solid #ffffff 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .user-option {
    background-color: #dbdbdb;
  }

  .mint-cell {
    min-height: 40px;
  }

  .right-arrow {
    margin-left: 10px;
  }

  .user-option span {
    font-size: 13px;
  }

  .mint-cell:last-child {
    background-position-x: 10px;
  }


</style>
<script>
  export default {
    methods: {
      goMyInfo(){
        this.$router.push('/my/myinfo');
      }
    },
    created(){
      let _footer = this.$store.state.footerVisible;
      if (!_footer) {
        this.$store.commit('TOGGLE_FOOTER');
      }
      this.$store.commit('SELECT_TAB', 'my')
    }
  }
</script>

1. mt-cell實現的item項，包含icon圖標，標題title和其餘信息，是用具名slot來實現的：

<mt-cell>
          <span slot="title">關於</span>
          <span>當前版本V1.0</span>
          <img slot="icon" src="../assets/my/info.png" width="20" height="20">
        </mt-cell>

2.圓形用戶頭像的實現css

.user-img {
    background-image: url("../assets/my/user.jpg");
    /**正方形區域**/
    width: 60px;
    height: 60px;
    /**border半徑要是邊長的一半，這樣就能畫出一個圓**/
    border-radius: 30px;
    /**設置邊框**/
    border: solid #ffffff 2px;
    /**設置爲flex佈局，而且內部項目都居中顯示**/
    display: flex;
    justify-content: center;
    align-items: center;
  }

3.用戶頭像的div塊添加了點擊事件，點擊後進入用戶詳情頁

3.用戶詳情頁和axios的使用

該頁面在mounted時發送網絡請求獲取用戶數據，而後展現到界面上。

axios的使用很是簡單，官網文檔：https://www.kancloud.cn/yunye/axios/234845

這裏使用就是簡單的發送一個get請求，

axios.get('/api/my').then((res) => {
  that.my = res.data.data
});

頁面代碼：

<template>
  <div class="my-info">
    <mt-header fixed title="個人我的信息">
      <router-link to="/my" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>

    <div class="content">
      <mt-cell title="姓名">
        <span>{{my.name}}</span>
      </mt-cell>
      <mt-cell title="性別">
        <span>{{my.gender}}</span>
      </mt-cell>
      <mt-cell title="年齡">
        <span>{{my.age}}</span>
      </mt-cell>
      <mt-cell title="部門">
        <span>{{my.dept}}</span>
      </mt-cell>
      <mt-cell title="職位">
        <span>{{my.job}}</span>
      </mt-cell>
      <mt-cell title="級別">
        <span>{{my.level}}</span>
      </mt-cell>
      <mt-cell title="入職日期">
        <span>{{my.joinDate}}</span>
      </mt-cell>
      <mt-cell title="聯繫方式">
        <span>{{my.tel}}</span>
      </mt-cell>
    </div>

  </div>
</template>
<style scoped>
  .content {
    margin-top: 40px;
  }

  .mint-cell {
    min-height: 40px;
  }
  span{
    font-size: 13px;
  }
</style>
<script>
  import axios from 'axios';

  export default {
    data(){
      return {
        my: {
          name: 'aa'
        }
      }
    },
    methods: {
      getUser(){
        let that = this;
        axios.get('/api/my').then((res) => {
          that.my = res.data.data
        });
      }
    },
    mounted(){
      this.getUser();
    },
    created(){
      let _footer = this.$store.state.footerVisible;
      if (_footer) {
        this.$store.commit('TOGGLE_FOOTER');
      }
    }
  }
</script>

OK，以上即是這個基於mint-ui的vue實例項目的所有內容。我也是本身一我的邊看文檔邊看博客慢慢學，因此筆記中有不正確或者待改進的地方歡迎指正。

2018-07-12更新：因爲後續增長和改進的東西比較多，強烈建議參考github上最新的項目：

https://github.com/JerryYuanJ/a-vue-app-template

    若是你項目搭建中遇到問題，請提交issue或者及時與我聯繫，謝謝。