[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以及核心方法