uni-app登陸與注冊功能實現 · uni-app與php服務端商城實戰項目

uni這里使用的是插件市場下載的商城模板。先在main.js里定義一下服務器路徑，其他頁面可以跟方便引用。 main.js代碼： import Vue from 'vue' import App from './App' Vue.config.productionTip = false App.mpType = 'app' Vue.prototype.imageServer = 'http://192.168.43.238/tpshop/public'; Vue.prototype.staticServer = 'http://192.168.43.238/tpshop/public/index.php/'; // Vue.prototype.imageServer = 'http://192.168.50.214/tpshop/public'; // Vue.prototype.staticServer = 'http://192.168.50.214/tpshop/public/index.php/'; const app = new Vue({ ...App }) app.$mount() 對于這個vue.prototype網上是這樣解釋的：當你在main.js里聲明了Vue.prototype.a = 1后，因為你的每一個vue組件都是一個Vue對象的實例，所以即使你沒有在組件內部使用data(){return{……}}聲明a，你依然可以在組件中通過this.a來訪問。當然，你也可以在組件中添加一個變量a，這時你訪問的就是你在組件中添加的a，而不再是之前在原型中添加的a了，當然你對組件的a繼續修改即不會影響原型中的a和其他組建中的a，就類似于下面這段代碼（Form是一個自定義對象類型，Vue也可以看作一個自定義對象類型，而每個.vue文件就是一個對象的實例）好了，main.js這里已經完成了接下來我們看一下模板里的登陸與注冊功能，uni這個框架使用了vue.js為基礎開發的，所以使用上可能與之前的js與html這些不太一樣，不夠會js的話還是可以很好看懂理解和使用的，大概三天時間就能搞懂了。有vue.js知識的話就更容易了。看一下register.vue的代碼： <template> <view> <view class="logo"> <view class="img"> <image mode="widthFix" src="data:image/png;base64,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"></image> </view> </view> <view class="form re"> <view class="username"> <view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()"></view> <input placeholder="請輸入手機號" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);"/> </view> <view class="password"> <input placeholder="請輸入密碼" v-model="passwd" password=true placeholder-style="color: rgba(255,255,255,0.8);"/> </view> <view class="password"> <input placeholder="請確認密碼" v-model="aspasswd" password=true placeholder-style="color: rgba(255,255,255,0.8);"/> </view> <view class="btn" @tap="doReg">立即注冊</view> <view class="res"> <view @tap="toLogin">已有賬號立即登錄</view> </view> </view> </view> </template> <script> import md5 from "@/common/SDK/md5.min.js"; export default { data() { return { phoneNumber:"", code:'', passwd:"", aspasswd:"", getCodeBtnColor:"#ffffff", getCodeisWaiting:false } }, onLoad() { }, methods: { Timer(){}, doReg(){ // 隱藏軟鍵盤api uni.hideKeyboard() //模板示例部分驗證規則 if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ uni.showToast({title: '請填寫正確手機號碼',icon:"none"}); return false; } if(this.passwd == ''){ uni.showToast({title: '未輸入密碼',icon:"none"}); return false; } if(this.passwd != this.aspasswd){ uni.showToast({title: '兩次密碼不一致',icon:"none"}); return false; } // setTimeout(function(){ // uni.hideLoading() // },2000) uni.request({ // key: 'UserList', url:this.staticServer+'index/register/register', method: 'POST', dataType:'json', data:{ username:this.phoneNumber, password:this.passwd }, header:{ 'content-type':'application/x-www-form-urlencoded' }, success:(res)=>{ if(res.data == 'jsfl45sfdsfd'){ console.log(res.data); uni.showToast({title:'用戶名已存在',icon:"success"}); }else{ uni.setStorage({ key: 'UserList', data: [{username:this.phoneNumber,passwd:md5(this.passwd)}], success: function () { uni.showToast({title:'注冊成功',icon:"success"}); // 設定一個定時器。在定時到期以后執行注冊的回調函數 setTimeout(function(){ uni.switchTab({url:'../tabBar/user/user'}); },500) } }); } }, fail:(e)=>{ uni.showToast({title:'錯誤',icon:"success"}); console.log('error'); //新建UserList // 將數據存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個異步接口。 } }); }, toLogin(){ uni.hideKeyboard() uni.redirectTo({url:'login'}); uni.navigateBack(); } } } </script> <style lang="scss"> @import "../../static/css/login.scss"; </style> 看起來和js并沒有很大區別，只不過可以直接在標簽上執行循環與事件了，用起來比較簡潔，發起請求用的是uni.request方法，使用方法與ajax并沒有太大差別，不過多了一個請求頭：header:{ 'content-type':'application/x-www-form-urlencoded' }, 之前用jquery來實現ajax倒是沒有注意到這個東西，而且php接收端那邊還要做一個跨域處理，不然就會有報錯了。對了php端我用的是thinkphp的框架，方便快捷，而且安全性的方面不用過多考慮，當然框架有問題也會牽連到自己的項目。 register.php代碼： ~~~ <?php namespace app\index\controller; // 制定允許其他域名訪問 header("Access-Control-Allow-Origin:*"); // 響應類型 header('Access-Control-Allow-Methods:POST'); // 響應頭設置 header('Access-Control-Allow-Headers:x-requested-with, content-type'); use think\Controller; use think\Db; use think\Session; class Register extends Controller{ public function register(){ $username = $_POST['username']; $passwords = $_POST['password']; $info = Db::name('name'); $user = $info->where('username','=',$username)->select(); if (!empty($user)){ $list = 'jsfl45sfdsfd'; }else{ $password = md5($passwords); $info->insert(['username'=>$username,'password'=>$password]); $userId = $info->getLastInsID(); session::set('user_id',$userId); session::set('susername',$username); session::set('spassword',$password); $list = 'klajsfl2515'; } echo json_encode($list); } } ~~~