2.登录功能前端实现
2.1在HBuilderX中创建uni-app类型的项目，选择默认模板即可然后建目录结构，如图所示：
- commons目录放置一些全局配置函数
- components目录放置封装的组件
- pages目录放置页面文件
- static目录放置图片资源
-
style目录放置全局样式文件
image.png
2.2 pages目录的各个子目录里分别放相应的vue文件
image.png
2.3 tab图片
default.png
nav1.png
nav1-a.png
nav2.png
nav2-a.png
nav3.png
nav3-a.png
2.4配置pages.json文件如下：
{
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "文章",
//允许下拉刷新
"enablePullDownRefresh": true
}
},
{
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "消息"
}
},
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/signin/signin",
"style": {}
},
{
"path": "pages/write/write",
"style": {}
},
{
"path": "pages/info/info",
"style": {}
},
{
"path": "pages/setting/setting",
"style": {}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
// "navigationBarTitleText" : "简阅",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#707070",
"selectedColor": "#DE533A",
"list": [{
"pagePath": "pages/index/index",
"text": "文章",
"iconPath": "static/nav1.png",
"selectedIconPath": "static/nav1-a.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "static/nav2.png",
"selectedIconPath": "static/nav2-a.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/nav3.png",
"selectedIconPath": "static/nav3-a.png"
}
]
}
}
2.5style目录新建style.css全局样式表
* {
font-size: 14pt;
}
.container {
width: 95%;
margin: 0 auto;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
.list {
display: flex;
flex-direction: column;
}
.list-item {
width: 100%;
height: 50px;
background-color: #fff;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
}
.green-btn {
background-color: rgb(26, 173, 25);
color: #fff;
}
2.6App.vue文件中引入全局样式表
<style>
@import 'style/style.css';
</style>
2.7 my.vue
<template>
<view class="container">
<!-- 顶部头像和昵称区域，纵向排列 -->
<view class="top">
<view class="avatar-box">
<image
src="../../static/default.png"
mode="scaleToFill"
class="avatar"
v-if="!storageData.login">
</image>
<image
:src="storageData.avatar"
mode="scaleToFill"
class="avatar"
v-if="storageData.login"
></image>
</view>
<view class="info-box">
<navigator url="../signin/signin" v-if="!storageData.login">点击登录</navigator>
<text v-if="storageData.login">{{ storageData.nickname }}</text>
<navigator url="../setting/setting" v-if="storageData.login">
<text class="setting-txt">个人设置</text>
</navigator>
</view>
</view>
<!-- 中间文章数量、好友数量、消息数量等统计区域，横向排列 -->
<view class="center" v-if="storageData.login">
<view class="info">
<text class="title">{{articleCount}}</text>
<text>文章</text>
</view>
<view class="info">
<text class="title">{{followCount}}</text>
<text>关注</text>
</view>
<view class="info">
<text class="title">{{messageCount}}</text>
<text>消息</text>
</view>
<view class="info">
<text class="title">{{integral}}</text>
<text>积分</text>
</view>
</view>
<view class="content" v-if="storageData.login">
<view class="list">
<view class="list-item" v-for="(article, index) in articles" :key="index">
<text>{{article.title}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
var loginRes, _self;
export default {
data() {
return {
storageData: {},
articleCount:10,
followCount:5,
messageCount:66,
integral:100,
articles:[
{
id:1,
title:'第一篇文章',
},
{
id:2,
title:'第二篇文章',
},
{
id:3,
title:'第三篇文章',
},
{
id:4,
title:'第四篇文章',
}
]
};
},
onLoad: function() {},
onShow: function() {
const loginKey = uni.getStorageSync('login_key');
console.log("my-vue page show");
if (loginKey) {
console.log(loginKey);
this.storageData = {
login: loginKey.login,
nickname: loginKey.nickname,
avatar: loginKey.avatar
};
}else{
this.storageData ={
login: false
}
}
},
methods: {
}
};
</script>
<style scoped>
.top {
display: flex;
flex-direction: column;
text-align: center;
height: 100px;
margin-top: 5px;
}
.avatar-box{
flex: 1 1 30%;
}
.info-box{
flex: 1 1 70%;
display: flex;
align-items: center;
justify-content: center;
}
.setting-txt{
color: #00B26A;
margin-left: 15px;
}
.center{
display: flex;
justify-content: center;
}
.info{
flex: 1 1 25%;
display: flex;
flex-direction: column;
text-align: center;
border-right: 1px solid #eee;
}
.title{
font-size: 14pt;
}
.content{
margin-top: 20px;
}
</style>
2.8 signin.vue
<template>
<view class="uni-flex uni-column container">
<input
class="uni-input"
type="number"
placeholder="输入手机号"
v-model="userDTO.mobile"
required="required"
/>
<input
class="uni-input"
password
type="text"
placeholder="输入密码"
v-model="userDTO.password"
required="required"
/>
<button class="green-btn" @tap="signIn(userDTO)">登录</button>
</view>
</template>
<script>
export default {
data() {
return {
userDTO: {
mobile: '',
password: ''
}
};
},
onLoad() {
uni.setNavigationBarTitle({
title: '登录'
});
},
methods: {
signIn: function(userDTO) {
var _this = this;
// console.log(userDTO.mobile + ',' + userDTO.password);
uni.request({
url: 'http://39.96.182.225:8080/api/user/sign_in',
// url: 'http://172.20.10.4:8080/api/user/sign_in',
method: 'POST',
data: {
mobile: userDTO.mobile,
password: userDTO.password
},
header: {
'content-type': 'application/json'
},
success: res => {
// console.log(res.data.data);
if (res.data.code == 0) {
//将用户数据记录在本地存储
uni.setStorageSync('login_key', {
userId: res.data.data.id,
nickname: res.data.data.nickname,
avatar: res.data.data.avatar,
token: res.data.data.token,
login: true
});
uni.showToast({
title: '登录成功'
});
uni.navigateBack();
}
//登录失败，弹出各种原因
else {
uni.showModal({
title: '提示',
content: res.data.msg
});
}
}
});
}
}
};
</script>
<style scoped>
input {
height: 50px;
border-bottom: 1px solid #eee;
margin-bottom: 5px;
}
</style>
2.9 setting.vue
<template>
<view class="container">
<view class="list">
<view class="list-item"><text>文章推送</text></view>
<view class="list-item"><text>新消息推送</text></view>
<view class="list-item"><text>个人资料修改</text></view>
</view>
<button @tap="logout" class="green-btn">退出当前账号</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
onLoad() {
uni.setNavigationBarTitle({
title: '设置'
});
},
methods: {
logout: function() {
console.log('log out');
uni.removeStorageSync('login_key');
uni.showToast({
title: '已经退出当前账号'
});
uni.navigateBack();
}
}
};
</script>
<style>
</style>
网友评论