初接觸vue的時(shí)候覺(jué)得vue好難，因?yàn)轫?xiàng)目中要用到，就硬著頭皮上，慢慢的發(fā)現(xiàn)也不難，無(wú)外乎畫(huà)個(gè)布局，然后通過(guò)樣式調(diào)整界面。在通過(guò)屬性和方法跟js交互。js就和我們寫(xiě)的java代碼差不多了，復(fù)雜一點(diǎn)的就是引用這種那種庫(kù)，然后就能做出來(lái)一個(gè)界面了。如果你的項(xiàng)目就是和服務(wù)器交互，感覺(jué)用vue來(lái)做確實(shí)也蠻合適的。

在上手之前，我先說(shuō)下我們要實(shí)現(xiàn)的場(chǎng)景。我們需要做一個(gè)注冊(cè)登陸的功能，相關(guān)字段只有用戶(hù)名密碼昵稱(chēng)，注冊(cè)之后就能登陸，相關(guān)的后端邏輯，我會(huì)在另外一篇文章提到，這里只需要關(guān)心前端邏輯，我們需要實(shí)現(xiàn)的功能有：

• 注冊(cè)頁(yè)面
• 登陸頁(yè)面
• 注冊(cè)后保存用戶(hù)名密碼到本地
• 登陸頁(yè)面取本地用戶(hù)名密碼填充
• 點(diǎn)擊按鈕登錄并根據(jù)返回跳轉(zhuǎn)
• 國(guó)際化

Get Start

使用HbuildX創(chuàng)建一個(gè)Vue2的項(xiàng)目，什么模板都不選，就最基礎(chǔ)的那種。創(chuàng)建完之后，參考一下我的目錄結(jié)果，吧缺失的文件補(bǔ)一下：

本來(lái)要新創(chuàng)建一個(gè)vue頁(yè)面的，我為了省事直接修改了index.vue，在里面添加了登陸界面，注冊(cè)界面通過(guò)登陸界面的注冊(cè)按鈕打開(kāi)。

我們先在pages.json把頁(yè)面名自定義一下，默認(rèn)是uni-app，我們改成用戶(hù)登錄。同時(shí)我添加了用戶(hù)注冊(cè)的頁(yè)面，并在對(duì)應(yīng)的位置創(chuàng)建了Vue文件。

{"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "用戶(hù)登錄"//修改標(biāo)題為用戶(hù)登錄，標(biāo)題顏色也可以像下面一樣配置}},{"path": "pages/register/register","style": {"navigationBarTitleText": "用戶(hù)注冊(cè)"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "登錄Demo",// 通用標(biāo)題"navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"uniIdRouter": {}
}

引入網(wǎng)絡(luò)請(qǐng)求庫(kù)luch-request。這個(gè)類(lèi)比較長(zhǎng)這里就不貼出來(lái)了，大家可以去這里下載：
也可以按照她開(kāi)發(fā)者文檔上說(shuō)的去配置，我是下過(guò)來(lái)使用的。我們來(lái)實(shí)現(xiàn)登陸界面：

<template><view class="container"><view class="left-bottom-sign"></view><view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view><view class="right-top-sign"></view><!-- 設(shè)置白色背景防止軟鍵盤(pán)把下部絕對(duì)定位元素頂上來(lái)蓋住輸入框等 --><view class="wrapper"><view class="left-top-sign">{{$t('vue.public.login')}}</view><view class="welcome">{{$t('vue.public.welcomeback')}}</view><view class="input-content"><view class="input-item"><text class="tit">{{$t('vue.public.username')}}</text><input type="text" v-model="username"  maxlength="11"/></view><view class="input-item"><text class="tit">{{$t('vue.public.pwd')}}</text><input type="text" v-model="password"  placeholder-class="input-empty" maxlength="20"password @confirm="toLogin" /></view></view><button class="confirm-btn" @click="toLogin" :disabled="logining">{{$t('vue.public.tologin')}}</button><view class="forget-section" @click="toRegist">{{$t('vue.public.forgetpwd')}}</view></view><view class="register-section">{{$t('vue.public.notaccount')}}<text @click="toRegist">{{$t('vue.public.registernow')}}</text></view></view>
</template><script>import {mapMutations} from 'vuex';import {memberLogin,memberInfo} from '@/api/member.js';export default {data() {return {username: '',password: '',logining: false}},onLoad() {this.username = uni.getStorageSync('username') || '';this.password = uni.getStorageSync('password') || '';},methods: {...mapMutations(['login']),navBack() {uni.navigateBack();},toRegist() {uni.navigateTo({url:'/pages/public/register'});},async toLogin() {this.logining = true;memberLogin({username: this.username,password: this.password}).then(response => {let token = response.data.tokenHead+response.data.token;uni.setStorageSync('token',token);uni.setStorageSync('username',this.username);uni.setStorageSync('password',this.password);memberInfo().then(response=>{this.login(response.data);uni.navigateTo({url:'/pages/user/user'});});}).catch(() => {this.logining = false;});},},}
</script><style lang='scss'>page {background: #fff;}.container {padding-top: 115px;position: relative;width: 100vw;height: 100vh;overflow: hidden;background: #fff;}.wrapper {position: relative;z-index: 90;background: #fff;padding-bottom: 40upx;}.back-btn {position: absolute;left: 40upx;z-index: 9999;padding-top: var(--status-bar-height);top: 40upx;font-size: 40upx;color: $font-color-dark;}.left-top-sign {font-size: 120upx;color: $page-color-base;position: relative;left: -16upx;}.right-top-sign {position: absolute;top: 80upx;right: -30upx;z-index: 95;&:before,&:after {display: block;content: "";width: 400upx;height: 80upx;background: #b4f3e2;}&:before {transform: rotate(50deg);border-radius: 0 50px 0 0;}&:after {position: absolute;right: -198upx;top: 0;transform: rotate(-50deg);border-radius: 50px 0 0 0;/* background: pink; */}}.left-bottom-sign {position: absolute;left: -270upx;bottom: -320upx;border: 100upx solid #d0d1fd;border-radius: 50%;padding: 180upx;}.welcome {position: relative;left: 50upx;top: -90upx;font-size: 46upx;color: #555;text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);}.input-content {padding: 0 60upx;}.input-item {display: flex;flex-direction: column;align-items: flex-start;justify-content: center;padding: 0 30upx;background: $page-color-light;height: 120upx;border-radius: 4px;margin-bottom: 50upx;&:last-child {margin-bottom: 0;}.tit {height: 50upx;line-height: 56upx;font-size: $font-sm+2upx;color: $font-color-base;}input {height: 60upx;font-size: $font-base + 2upx;color: $font-color-dark;width: 100%;}}.confirm-btn {width: 630upx;height: 76upx;line-height: 76upx;border-radius: 50px;margin-top: 70upx;background: $uni-color-primary;color: #fff;font-size: $font-lg;&:after {border-radius: 100px;}}.confirm-btn2 {width: 630upx;height: 76upx;line-height: 76upx;border-radius: 50px;margin-top: 40upx;background: $uni-color-primary;color: #fff;font-size: $font-lg;&:after {border-radius: 100px;}}.forget-section {font-size: $font-sm+2upx;color: $font-color-spec;text-align: center;margin-top: 40upx;}.register-section {position: absolute;left: 0;bottom: 50upx;width: 100%;font-size: $font-sm+2upx;color: $font-color-base;text-align: center;text {color: $font-color-spec;margin-left: 10upx;}}
</style>

接著我們?cè)谥鱦s中引入我們添加的依賴(lài)，以便于全局生效。
main.js:

import Vue from 'vue'
import store from './store'
import App from './App'
import i18n from './locale'const msg = (title, duration=1500, mask=false, icon='none')=>{//統(tǒng)一提示方便全局修改if(Boolean(title) === false){return;}uni.showToast({title,duration,mask,icon});
}const prePage = ()=>{let pages = getCurrentPages();let prePage = pages[pages.length - 2];// #ifdef H5return prePage;// #endifreturn prePage.$vm;
}Vue.config.productionTip = false
Vue.prototype.$fire = new Vue();
Vue.prototype.$store = store;
Vue.prototype.$api = {msg, prePage};App.mpType = 'app'const app = new Vue({i18n,...App
})
app.$mount()

我們可以看到main.js引入了vuw的腳本，本地化的腳本(store/index.js)以及國(guó)際化腳本(locale/index.js)。Vue的腳本這里你可以要可以不要，我就寫(xiě)了一個(gè)界面的日志跟蹤:

<script>export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script><style>/*每個(gè)頁(yè)面公共css */
</style>

然后再store這里，通過(guò)mutations定義了兩個(gè)常量方法，一個(gè)是登錄，一個(gè)是登出，這兩個(gè)方法通過(guò)調(diào)用vue的store管理方法來(lái)存儲(chǔ)登陸狀態(tài)和登錄信息。mutations表示常量，類(lèi)似java中的static。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {hasLogin: false,userInfo: {},},mutations: {login(state, provider) {state.hasLogin = true;state.userInfo = provider;uni.setStorage({//緩存用戶(hù)登陸狀態(tài)key: 'userInfo',  data: provider  }) console.log(state.userInfo);},logout(state) {state.hasLogin = false;state.userInfo = {};uni.removeStorage({  key: 'userInfo'  });uni.removeStorage({key: 'token'  })}},actions: {}
})export default store

然后我們把locale的內(nèi)容也補(bǔ)充一下，因?yàn)樵賚ogin.vue中引用到了國(guó)際化的字符串。當(dāng)然了我們也可以再page中也進(jìn)行國(guó)際化。vue官方支持國(guó)家話方案，可以參考這里。

locale/index.js：

import Vue from "vue";
import VueI18n from 'vue-i18n'
import en from './en.json'
import zh from './zh.json'
Vue.use(VueI18n);   // 全局注冊(cè)國(guó)際化包// 準(zhǔn)備翻譯的語(yǔ)言環(huán)境信息
const i18n = new VueI18n({locale: "zn",   // 初始化中文messages: {"zn":zh,"en":en}
});
export default i18n

國(guó)際化的文案分別放在各個(gè)國(guó)家的json中，比如zh.json：

{"vue.public.login": "LOGIN","vue.public.welcomeback": "歡迎回來(lái)！","vue.public.welcomeregister": "歡迎注冊(cè)！","vue.public.username": "用戶(hù)名","vue.public.nickname": "昵稱(chēng)","vue.public.inputusername": "請(qǐng)輸入用戶(hù)名","vue.public.inputnickname": "請(qǐng)輸入昵稱(chēng)","vue.public.pwd": "密碼","vue.public.inputpwdhint": "8-18位不含特殊字符的數(shù)字、字母組合","vue.public.tologin": "登錄","vue.public.alreadyRegister": "已有賬號(hào)?","vue.public.loginnow": "前往登錄","vue.public.toregister": "注冊(cè)","vue.public.testlogin": "獲取體驗(yàn)賬號(hào)","vue.public.forgetpwd": "忘記密碼?","vue.public.notaccount": "還沒(méi)有賬號(hào)?","vue.public.registernow": "馬上注冊(cè)"
}

英文的國(guó)家化和其他的國(guó)際化都是使用上述json格式，只不過(guò)冒號(hào)后面的值不一樣而已。到這里界面已經(jīng)寫(xiě)好了，雖然還不能做網(wǎng)絡(luò)請(qǐng)求，至少我們可以看看效果了。再看效果之前，我們需要再項(xiàng)目的根目錄打開(kāi)終端，輸入npm install ，也可以加上-t查看安裝進(jìn)度。然后可以使用npm run dev或者使用HbuildX提供的運(yùn)行按鈕來(lái)運(yùn)行到內(nèi)置瀏覽器或Chrome：

注冊(cè)界面也寫(xiě)一下：

<template><view class="container"><view class="left-bottom-sign"></view><view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view><view class="right-top-sign"></view><!-- 設(shè)置白色背景防止軟鍵盤(pán)把下部絕對(duì)定位元素頂上來(lái)蓋住輸入框等 --><view class="wrapper"><view class="left-top-sign">{{$t('vue.public.login')}}</view><view class="welcome">{{$t('vue.public.welcomeregister')}}</view><view class="input-content"><view class="input-item"><text class="tit">{{$t('vue.public.username')}}</text><input type="text" v-model="username" :placeholder="$t('vue.public.inputusername')" maxlength="11"/></view><view class="input-item"><text class="tit">{{$t('vue.public.nickname')}}</text><input type="text" v-model="nickname" :placeholder="$t('vue.public.inputnickname')" maxlength="11"/></view><view class="input-item"><text class="tit">{{$t('vue.public.pwd')}}</text><input type="text" v-model="password" :placeholder="$t('vue.public.inputpwdhint')" placeholder-class="input-empty" maxlength="20"password /></view></view><button class="confirm-btn" @click="toRegister" >{{$t('vue.public.toregister')}}</button></view><view class="register-section">{{$t('vue.public.alreadyRegister')}}<text @click="toLogin">{{$t('vue.public.loginnow')}}</text></view></view>
</template><script>import {mapMutations} from 'vuex';import {memberLogin,memberInfo, memberRegister} from '@/api/member.js';export default {data() {return {username: '',nickname: '',password: '',}},methods: {...mapMutations(['login']),navBack() {uni.navigateBack();},toLogin() {uni.navigateTo({url:'/pages/public/login'});},async toRegister() {memberRegister({username: this.username,nickname: this.nickname,password: this.password}).then(response => {//this.toLogin();console.log(response);if(response.code == 200){uni.showToast({title:'Register Success.',duration:1500});setTimeout(this.toLogin, 2000);}}).catch(() => {});},},}
</script><style lang='scss'>page {background: #fff;}.container {padding-top: 115px;position: relative;width: 100vw;height: 100vh;overflow: hidden;background: #fff;}.wrapper {position: relative;z-index: 90;background: #fff;padding-bottom: 40upx;}.back-btn {position: absolute;left: 40upx;z-index: 9999;padding-top: var(--status-bar-height);top: 40upx;font-size: 40upx;color: $font-color-dark;}.left-top-sign {font-size: 120upx;color: $page-color-base;position: relative;left: -16upx;}.right-top-sign {position: absolute;top: 80upx;right: -30upx;z-index: 95;&:before,&:after {display: block;content: "";width: 400upx;height: 80upx;background: #b4f3e2;}&:before {transform: rotate(50deg);border-radius: 0 50px 0 0;}&:after {position: absolute;right: -198upx;top: 0;transform: rotate(-50deg);border-radius: 50px 0 0 0;/* background: pink; */}}.left-bottom-sign {position: absolute;left: -270upx;bottom: -320upx;border: 100upx solid #d0d1fd;border-radius: 50%;padding: 180upx;}.welcome {position: relative;left: 50upx;top: -90upx;font-size: 46upx;color: #555;text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);}.input-content {padding: 0 60upx;}.input-item {display: flex;flex-direction: column;align-items: flex-start;justify-content: center;padding: 0 30upx;background: $page-color-light;height: 120upx;border-radius: 4px;margin-bottom: 50upx;&:last-child {margin-bottom: 0;}.tit {height: 50upx;line-height: 56upx;font-size: $font-sm+2upx;color: $font-color-base;}input {height: 60upx;font-size: $font-base + 2upx;color: $font-color-dark;width: 100%;}}.confirm-btn {width: 630upx;height: 76upx;line-height: 76upx;border-radius: 50px;margin-top: 70upx;background: $uni-color-primary;color: #fff;font-size: $font-lg;&:after {border-radius: 100px;}}.confirm-btn2 {width: 630upx;height: 76upx;line-height: 76upx;border-radius: 50px;margin-top: 40upx;background: $uni-color-primary;color: #fff;font-size: $font-lg;&:after {border-radius: 100px;}}.forget-section {font-size: $font-sm+2upx;color: $font-color-spec;text-align: center;margin-top: 40upx;}.register-section {position: absolute;left: 0;bottom: 50upx;width: 100%;font-size: $font-sm+2upx;color: $font-color-base;text-align: center;text {color: $font-color-spec;margin-left: 10upx;}}
</style>

登陸頁(yè)面和注冊(cè)頁(yè)面寫(xiě)好了，我們要來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求，在請(qǐng)求之前先做一個(gè)配置，主要是服務(wù)器和攔截器的設(shè)置，攔截器有利于我們跟蹤代碼運(yùn)行，requestUtil.js：

import Request from '@/js_sdk/luch-request/request.js'
import i18n from "../locale";const http = new Request()http.setConfig((config) => { /* 設(shè)置全局配置 */config.baseUrl = 'http://127.0.0.1:8902' /* 根域名不同 */config.header = {...config.header}return config
})/*** 自定義驗(yàn)證器，如果返回true 則進(jìn)入響應(yīng)攔截器的響應(yīng)成功函數(shù)(resolve)，否則進(jìn)入響應(yīng)攔截器的響應(yīng)錯(cuò)誤函數(shù)(reject)* @param { Number } statusCode - 請(qǐng)求響應(yīng)體statusCode（只讀）* @return { Boolean } 如果為true,則 resolve, 否則 reject*/
http.validateStatus = (statusCode) => {return statusCode === 200
}http.interceptor.request((config, cancel) => { /* 請(qǐng)求之前攔截器 */const token = uni.getStorageSync('token');if(token){config.header = {'Authorization':token,...config.header}}else{config.header = {...config.header}}/*if (!token) { // 如果token不存在，調(diào)用cancel 會(huì)取消本次請(qǐng)求，但是該函數(shù)的catch() 仍會(huì)執(zhí)行cancel('token 不存在') // 接收一個(gè)參數(shù)，會(huì)傳給catch((err) => {}) err.errMsg === 'token 不存在'}*/return config
})http.interceptor.response((response) => { /* 請(qǐng)求之后攔截器 */const res = response.data;if (res.code !== 200) {//提示錯(cuò)誤信息uni.showToast({title:res.message,duration:1500})//401未登錄處理if (res.code === 401) {uni.showModal({title: i18n.t('vue.request.permit'),  //'提示'content:i18n.t('vue.request.permithint'),  //'你已被登出，可以取消繼續(xù)留在該頁(yè)面，或者重新登錄',confirmText:i18n.t('vue.request.relogin'),  //'重新登錄',cancelText:i18n.t('vue.request.cancel'),  //'取消',success: function(res) {if (res.confirm) {uni.navigateTo({url: '/pages/public/login'})} else if (res.cancel) {console.log('用戶(hù)點(diǎn)擊取消');}}});}return Promise.reject(response);} else {return response.data;}
}, (response) => {//提示錯(cuò)誤信息console.log('response error', JSON.stringify(response));uni.showToast({title:response.errMsg,duration:1500})return Promise.reject(response);
})export function request (options = {}) {return http.request(options);
}export default request

上面的vue頁(yè)面，我們?cè)僮?cè)調(diào)用了注冊(cè)方法memberRegister,再登錄調(diào)用了memberLogin登陸方法。我們把這個(gè)功能實(shí)現(xiàn)下（api/member.js）：

import request from '@/utils/requestUtil'export function memberLogin(data) {return request({method: 'POST',url: '/sso/login',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8'},data: data})
}export function memberRegister(data) {return request({method: 'POST',url: '/sso/register',header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8'},data: data})
}export function memberInfo() {return request({method: 'GET',url: '/sso/info'})
}

到這里我們前端頁(yè)面的注冊(cè)登陸就寫(xiě)好了，你可以配合服務(wù)端來(lái)測(cè)試。