- App封装
- 搭建项目
- 登陆
- 注册
App封装
通常就是去封装一些项目的时候常常出现的,必须一些布局、功能,这样能够帮助咱们优化代码,提升效率,后期更好维护
javascript
搭建项目
基于webpack,建立vue脚手架,进行项目的开发。写项目,首页要去进行总体页面的排版,以及路由的跳转。通常咱们搭建项目,一些插件是必需要用的,好比axios,vuex,router等
html
"dependencies": { "axios": "^0.21.0", "core-js": "^3.6.5", "vant": "^2.10.11", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" },
登陆
写一个form表单验证,里面是判断登陆的条件,好比用户名和密码的长度,是否为空,手机号码是否正确,而后再点击登陆的函数中,判断,并调用接口,传入用户名和密码的参数,判断是否获取到数据,没有就报错,获取到就保存token值和用户信息的值
vue
注册
先写一个from表单手机号注册,并设置密码,点击获取信息验证码,绑定一个点击事件,在点击的时候,调用接口并传入手机号(和图形验证码),而后在点击注册的时候,去调用获取注册接口,并传入手机号、密码及验证码,完成注册
java
<!-- html代码 --> <!-- 手机号 --> <div class="int_num"> <input type="number" placeholder="请输入手机号" maxlength="11" v-model="mobile" /> <div class="getC" @click="isSendCode">{ { codeTxt}}</div> </div> <!-- 找回密码 --> <div class="other"> <span class="forget">*未注册得手机号将自动注册</span> <span class="login_cap" @click="$router.push('/login')"> 使用密码登陆</span> </div> </div> <!-- 登陆按钮 --> <div class="login"> <span @click="submitLogin">登陆</span> </div>
// 验证手机号正则 let phone = /^1[3456789]\d{9}$/; if (phone.test(this.mobile)) { let { data } = await smCodeAjax({ mobile: this.mobile, sms_type: "login" }); console.log(data); // console.log(res); if (data.code == 200) { this.isSendCode = true; //验证码发送状态为真 this.time(); this.$toast(data.msg); } } else { this.$toast("请输入正确得手机号"); }