Vue can be used as a mobile APP interface with vant components (vant is one of the mainstream mobile component libraries in the industry)
We can use vue and the component vant to implement simple login and registration. Here is what I made (this is the interface tested on a mobile phone). Many of the components are
used directly on the vant official website.
Among them, mobile phone adaptation is the content of my last blog. If you don’t understand, you can refer to my previous blog
https://blog.csdn.net/weixin_45667289/article/details/115002765
Among them I made some small tips:
1. After successful login, there will be a "Login successful" prompt.
2. If the user name and password are not entered, the prompt will be "Please enter your account number or password."
3. If the user name or password is incorrect, the "Account or password error" will be prompted.
4. In the registration interface, incomplete input will be displayed. The information will prompt "Registration failed! The information is not complete"
5. After successful registration, there will be a prompt "Registration successful", and then it will prompt "Registration successful, return to login after 3 seconds", and return to the login page
Below is our code
APP.vue
<template>
<div id="app">
<div >
<router-view></router-view>
</div>
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
<script>
/*import Login from "./views/Login";*/
export default {
name: "APP"
}
</script>
Login.vue
<template>
<div>
<p class="title">登录</p>
<van-image
round
width="6rem"
height="6rem"
src="https://img01.yzcdn.cn/vant/cat.jpeg"
/>
<van-form>
<van-field
v-model="username"
name="用户名"
label="用户名"
placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="password"
type="password"
name="密码"
label="密码"
placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]"
/>
<div style="margin: 16px;">
<van-button round block type="info" native-type="submit" @click="onSubmit">登录</van-button>
</div>
<div class="reg">
<div @click="toRegister">没有账号？立即注册</div>
</div>
</van-form>
</div>
</template>
<script>
import { Toast } from 'vant';
export default {
name: "Login",
data() {
return {
username: '',
password: '',
};
},
methods: {
onSubmit() {
/*console.log('submit', values);*/
if(this.username=="123456"&&this.password=="123456"){
Toast.success('登录成功');
}
else if(this.username==""&&this.password==""){
Toast('请输入账号或密码');
}
else{
Toast.fail('账号或密码错误');
}
},
toRegister(){
this.$router.push('/Register')
}
}
}
</script>
<style scoped>
.title {
/* border-radius: 15px; */
size:1px;
height: 50px;
line-height: 50px;
background-color: #20a0ff;
color: #fff;
text-align: center;
}
</style>
register.view
<template>
<div>
<div class="icon-back" @click="tologin">
<van-icon size="25" name="arrow-left" />
</div>
<div>
<p>注册</p>
</div>
<van-form>
<van-field name="uploader" label="上传头像">
<template #input>
<van-uploader v-model="uploader" />
</template>
</van-field>
<van-cell-group>
<van-field
v-model="phone"
required
label="手机号"
placeholder="请输入手机号"
:rules="[
{ required: true },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
]"
/>
<van-field
v-model="sms"
center
clearable
label="短信验证码"
placeholder="请输入短信验证码"
>
<template #button>
<van-button size="small" type="primary">发送验证码</van-button>
</template>
</van-field>
<van-field
v-model="password"
required
type="password"
label="密码"
placeholder="请输入密码"
/>
<van-field
v-model="password1"
required
type="password"
label="确认密码"
placeholder="请再次输入密码"
/>
</van-cell-group>
<van-field
readonly
clickable
name="picker"
:value="value"
label="选择地区"
placeholder="点击选择城市"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-picker
show-toolbar
:columns="columns"
@confirm="onConfirm"
@cancel="showPicker = false"
/>
</van-popup>
</van-form>
<div style="margin: 16px">
<van-button round block type="info" native-type="submit" @click="onsubmit">注册</van-button>
</div>
</div>
</template>
<script>
import { Toast } from 'vant';
export default {
data() {
return {
phone:'',
sms:'',
password:'',
password1:'',
uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
value: '',
columns: ["城中区", "鱼峰区", "柳南区", "柳北区", "柳江区"],
showPicker: false,
};
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
},
tologin(){
this.$router.go(-1);
},
onsubmit(){
if(this.phone==""||this.sms==""||this.password==""||this.password1==""){
Toast('注册失败！信息未完善');
}
else if(this.password!=this.password1){
Toast('密码输入两次不一致！');
}
else{
Toast.success('注册成功');
this.$notify({
type: "success",
message: "注册成功，3s后返回登录",
duration: 3000,
});
setTimeout(() => {
sessionStorage.clear("regis");
this.$router.go(-1);
}, 3000);
}
}
},
};
</script>
<style scoped>
.icon-back{
position: absolute;
left: 2px;
top:15px
}
</style>
My project file (to achieve page jump, you need to write a good route)
The route is mainly written in the index.js file
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Register from "../views/Register";
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
The vant component here is a global reference (please refer to the vant official website ( https://youzan.github.io/vant/#/zh-CN/quickstart ) for reference)
My vant reference is written in the main.js file
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
The above is a simple login and registration interface implemented using vue and vant.
END