[toc]
# 7.1 登錄注冊頁面開發
## 7.1.1 實現登錄注冊頁面
```
<template>
<view>
<view class="flex flex-column align-center justify-center" style="height:350rpx;">
<text style="font-size:50rpx; ">YOU-LOGIN</text>
</view>
<view class="px-3">
<input type="text" v-model="form.username" class="bg-light px-3 mb-3 font" placeholder="請輸入用戶名" style="height:100rpx;" />
<input type="password" v-model="form.password" class="bg-light px-3 mb-3 font" placeholder="請輸入密碼" style="height:100rpx;" />
<input v-if="type !== 'login'" type="password" v-model="form.repassword" class="bg-light px-3 mb-3 font" placeholder="請輸入確認密碼" style="height:100rpx;" />
</view>
<view class="p-3 flex justify-center align-center">
<view hover-class="bg-main-hover" class=" bg-main rounded p-3 flex align-center justify-center flex-1">
<text class="text-white font-md">{{type === "login" ? "登 錄" : "注 冊"}}</text>
</view>
</view>
<view class="flex justify-center align-center">
<text class="text-light-muted font p-2" @click="changeType">
{{type === "login" ? "注冊賬號" : "去登錄"}}
</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
type : "login",
form : {
username : "",
password : "",
repassword : ""
}
};
},
methods : {
changeType(){
this.type = this.type == "login" ? "reg" : "login"
}
}
}
</script>
<style lang="scss">
</style>
```
## 7.1.2 實現request.js文件的封裝
- config.js
```
export default {
/*
注意:以下接口改成你自己部署的后端
*/
baseUrl:"http://liveapi2.dishait.cn",
socketUrl:"http://liveapi2.dishait.cn",
imageUrl:"http://liveapi2.dishait.cn",
// 拉流前綴
livePlayBaseUrl:"http://liveapi2.dishait.cn:23481",
// 推流前綴
livePushBaseUrl:"rtmp://liveapi2.dishait.cn:23480",
}
```
- request.js
```
// import $store from '@/store/index.js';
import $C from './config.js';
export default {
// 全局配置
common:{
baseUrl:$C.baseUrl +"/api",
header:{
'Content-Type':'application/json;charset=UTF-8',
},
data:{},
method:'GET',
dataType:'json',
token:false
},
// 請求 返回promise
request(options = {}){
// 組織參數
options.url = this.common.baseUrl + options.url
options.header = options.header || this.common.header
options.data = options.data || this.common.data
options.method = options.method || this.common.method
options.dataType = options.dataType || this.common.dataType
options.token = options.token === true ? true : this.common.token
// 請求
return new Promise((res,rej)=>{
// 請求之前驗證...
// token驗證
if (options.token) {
let token = uni.getStorageSync('token')
// 二次驗證
if (!token && options.noJump !== true) {
uni.showToast({ title: '請先登錄', icon: 'none' });
// token不存在時跳轉
uni.navigateTo({
url: '/pages/login/login',
});
return rej("請先登錄")
}
// 往header頭中添加token
options.header.token = token
}
// 請求中...
uni.request({
...options,
success: (result) => {
// 返回原始數據
if(options.native){
return res(result)
}
// 服務端失敗
if(result.statusCode !== 200){
if (options.toast !== false) {
uni.showToast({
title: result.data.data || '服務端失敗',
icon: 'none'
});
}
// token不合法,直接退出登錄
if(result.data.data === 'Token 令牌不合法!'){
// 退出登錄操作
// $store.dispatch('logout')
}
return rej(result.data)
}
// 其他驗證...
// 成功
let data = result.data.data
res(data)
},
fail: (error) => {
uni.showToast({ title: error.errMsg || '請求失敗', icon: 'none' });
return rej(error)
}
});
})
},
// get請求
get(url,options = {}){
options.url = url
options.data = {}
options.method = 'GET'
return this.request(options)
},
// post請求
post(url,data = {},options = {}){
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
},
// delete請求
del(url,data = {},options = {}){
options.url = url
options.data = data
options.method = 'DELETE'
return this.request(options)
},
// 上傳文件
upload(url,data,onProgress = false){
return new Promise((result,reject)=>{
// 上傳
let token = uni.getStorageSync('token')
if (!token) {
uni.showToast({ title: '請先登錄', icon: 'none' });
// token不存在時跳轉
return uni.reLaunch({
url: '/pages/login/login',
});
}
const uploadTask = uni.uploadFile({
url:this.common.baseUrl + url,
filePath:data.filePath,
name:data.name || "files",
header:{ token },
formData:data.formData || {},
success: (res) => {
if(res.statusCode !== 200){
result(false)
return uni.showToast({
title: '上傳失敗',
icon: 'none'
});
}
let message = JSON.parse(res.data)
result(message.data);
},
fail: (err) => {
console.log(err);
reject(err)
}
})
uploadTask.onProgressUpdate((res) => {
if(typeof onProgress === 'function'){
onProgress(res.progress)
}
});
})
}
}
```
## 7.1.3 在項目集成vuex
1. 創建store文件夾
2. 在store文件夾內創建index.js文件
3. 實例化vuex以及核心方法
- 第一章 項目介紹和準備
- 1.1 課程介紹
- 1.2 環境搭建和項目創建
- 1.3 引入全局樣式
- 1.4 引入圖標庫
- 1.5 底部導航和凸起按鈕配置
- 第二章 首頁開發
- 2.1 首頁開發(一)
- 2.2 首頁開發(二)
- 第三章 直播間(用戶端)開發
- 3.1 基礎布局開發(一)
- 3.2 基礎布局開發(二)
- 3.3 個人信息和觀看情況
- 3.4 接收禮物組件(一) - 布局
- 3.5 接收禮物組件(二) - 自動滾動
- 3.6 接收禮物組件(三) - 自動消失
- 3.7 底部操作條
- 3.8 彈幕組件開發(一) - 輸入框彈出層
- 3.9 彈幕組件開發(二) - 置于底部功能
- 3.10 彈幕組件開發(三) - 發送彈幕
- 3.11 送禮物彈框組件(一) - 布局
- 3.12 送禮物彈框組件(二) - 功能
- 第四章 充值金幣頁開發
- 4.1 充值金幣頁開發(一)
- 4.2 充值金幣頁開發(二)
- 第五章 直播間(主播端)開發
- 5.1 創建直播頁 - 推流組件
- 5.2 創建直播頁 - 布局(一)
- 5.3 創建直播頁 - 布局(二)
- 5.4 創建直播頁 - 鏡頭反轉
- 5.5 創建直播頁 - 切換畫質
- 5.6 創建直播頁 - 美顏和美白
- 5.7 關于退出創建直播頁黑邊問題
- 5.8 主播直播間(一)
- 5.9 主播直播間(二)
- 第六章 個人中心頁面開發
- 6.1 個人中心頁
- 第七章 egg.js基礎
- 第八章 后臺管理系統開發
- 8.1 創建項目和基礎配置
- 第九章 交互和部署上線
- 9.1 登錄注冊交互實現
- 9.2 個人中心交互實現
- 9.3 退出登錄以及初始化用戶信息
- 9.5 權限驗證
- 9.6 首頁交互 - 上拉加載與下拉刷新
- 9.7 創建訂單和微信支付(一)
- 9.8 創建訂單和微信支付(二)
- 9.9 微信支付調試和充值頁交互
- 9.10 直播間交互
- 9.11 socket.io安裝與通訊(一)
- 9.12 socket.io安裝和通訊(二)
- 9.13 加入直播間(一)
- 9.14 加入直播間(二)
- 9.15 加入直播間(三)
- 9.16 離開直播間
- 9.17 直播間實時在線用戶列表
- 9.18 直播間實時彈幕功能
- 9.19 直播間送禮物功能
- 9.20 創建直播功能交互(一)
- 9.21 創建直播功能交互(二)
- 9.22 優化前端部分問題(一)
- 9.23 優化前端部分問題(二)
- 第七章 登錄注冊頁面開發