沃梦达 / 编程技术 / 前端开发 / 正文

vue + vant 入门（实现登录注册）

前端开发
2023-10-08

vue搭配vant组件可以做手机APP界面（vant是业界主流的移动端组件库之一）我们可以使用vue和组件vant实现简单的登录和注册，下面是我做出来的样子（这是在手机测试的界面） 里面很多组件都是在vant官网上面直接拿来...

vue搭配vant组件可以做手机APP界面（vant是业界主流的移动端组件库之一）

我们可以使用vue和组件vant实现简单的登录和注册，下面是我做出来的样子（这是在手机测试的界面）


里面很多组件都是在vant官网上面直接拿来使用的

其中我做了一些小的提示：

1. 登录成功后有“登录成功”提示
2. 未输入用户名和密码会提示“请输入账号或密码”
3. 用户名或密码错误会提示“账号或密码错误”
4. 注册界面，未输入完全信息会提示“注册失败！信息未完善”
5. 注册成功之后有提示“注册成功”，然后上面提示“注册成功，3s后返回登录”，并返回登录页

下面是我们的代码
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.vue

<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>

我的项目文件（实现页面跳转要写好路由）

路由主要写在index.js文件中
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

这里的vant组件是全局引用（可参考vant官网（https://youzan.github.io/vant/#/zh-CN/quickstart）进行引用）

我的vant引用写在了main.js文件中

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')

以上就是用vue和vant实现的简单的登录和注册界面。

END

本文标题为：vue + vant 入门（实现登录注册）

上一篇： vue 3.x 环境搭建及项目创建
下一篇： jsonp的原理及在vue中封装jsonp方法

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2