基于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实例项目的全部内容。我也是自己一个人边看文档边看博客慢慢学，所以笔记中有不正确或者待改进的地方欢迎指正。
项目git地址：https://github.com/JerryYuanJ/a-vue-app-template