移动APP登录注册(vue+vant)

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

我们可以使用vue和组件vant实现简单的登录和注册,下面是我做出来的样子(这是在手机测试的界面)
在这里插入图片描述
在这里插入图片描述
里面很多组件都是在vant官网上面直接拿来使用的

其中,手机端适配是我上一篇的博客的内容。不懂的话可以参考我之前的博客
https://blog.csdn.net/weixin_45667289/article/details/115002765

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

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

已标记关键词 清除标记
相关推荐
<p> <span style="color:#424242;">本套课程系大喵在**</span><strong><span style="color:#FF0000;">2020年**<span style="color:#000000;"></span></span></strong><span>**录制课程</span><span style="color:#424242;">,大喵将带着大家使用vscode这款轻量级编辑器神器,快速上手</span><span>Python</span><span style="color:#424242;">高效开发、调试及单元测试的插件扩展和</span><span> VSCode</span><span style="color:#424242;"> </span><span><strong>IDE</strong></span><span style="color:#424242;">环境配置;</span> </p> <p> <span style="color:#424242;"><br /></span> </p> <p> <span style="color:#424242;"></span> </p> <p> <span style="font-size:18px;"><strong>什么是 <span style="color:#FF0000;">vscode</span> 编辑器?</strong></span> </p> <p> <span style="color:#FF0000;">Visual Studio Code</span>(以下简称vscode)是一个轻量且强大的跨平台开源代码编辑器(IDE),支持Windows,Mac OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过插件面板来方便快捷的安装插件来支持javascript、C++、C#、Python、PHP等其他语言。 </p> <p> <br /></p> <p> <span style="font-size:18px;"><strong>什么是 <span style="color:#FF0000;">python</span> ?</strong></span> </p> <p> <span style="color:#FF0000;">Python</span>,它是一门编程语言,截止到目前python已经广泛应用在:无人驾驶、个人助理、金融、电商、医疗、教育等各大领域。尤其是在 Web开发、自动化运维与测试、游戏服务器开发方面有着先天的优势。目前许多大型网站就是用Python开发的,例如YouTube、Instagram,还有国内的豆瓣。很多大公司,包括Google、Yahoo等,甚至NASA(美国航空航天局)都大量地使用Python。 </p> <p> <br /></p> <p> <span style="font-size:18px;color:#FF0000;"><strong>VSCode</strong></span><span style="font-size:18px;"><strong> + <span style="color:#FF0000;">Python</span></strong></span> </p> <p> <span style="color:#FF0000;">VSCode</span>毫无疑问是一款非常优秀的IDE,而<span style="color:#FF0000;">Python</span>则无疑是一门使用领域相当广泛,非常强大的高级语言;那我们如何把这两者结合起来,用**美的IDE编写最棒的语言,<span style="color:#000000;"><strong>优雅与**</strong></span>,<strong>强强结合</strong>,<strong><span style="color:#000000;">气冲入虹</span></strong>,<strong>势不可挡</strong>。 </p> <p> <br /></p> <p> <strong>课程内容主要包括</strong>: </p> <p> 01. 课程内容介绍 </p> <p> 02. VSCode IDE 介绍 </p> <p> 03. 为什么推荐使用 VSCode IDE  </p> <p> 04. Python 语言基础介绍  </p> <p> 05. 为什么选择 Python 语言 </p> <p> 06. VSCode和Python 强强联手 </p> <p> 07. 课程插件扩展介绍 </p> <p> 08. Python扩展安装及介绍 </p> <p> 09. Python扩展代码测试 </p> <p> 10. AREPL安装和介绍 </p> <p> 11. AREPL for Python 特点介绍 </p> <p> 12. AREPL 代码功能测试 </p> <p> 13. autoDocstring 安装和介绍 </p> <p> 14. autoDocstring 代码测试使用 </p> <p> 15. python test explorer 安装和介绍 </p> <p> 16. Python pytest 测试和使用 </p> <br /><p> <br /></p>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页