基于mint-ui的移动应用开发案例五（个人中心）

本节主要包含以下内容

数据mock和axios的使用
用户圆形头像的显示样式

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或者及时与我联系，谢谢。

基于mint-ui的移动应用开发案例五（个人中心）

1.数据mock

2.个人中心主界面

3.用户详情页和axios的使用

猜你喜欢