用vant做一个登陆页面

首先打开vant官方组件库，搜索form表单

第二步，按需导入from，如果你是全局引用的话，这步可以省略

3然后我们将标签复制到想用的地方，这个登陆表单是由html标签，和js里面放的数据构成的

我们先来看html结构，其中的rules是一个简单的表单验证功能

再来看js部分，注意！这里面还有个方法，我们不要忘记

4如果我们想插入图标，我们可以使用vant组件库内置的图标！

怎么使用呢

5如果vant内置的图标满足不了我们。我们可以使用插槽，然后在插槽里放入我们从阿里巴巴图标库，引进来的图标就行

看一下代码

6看一下加了图标后的样式，是不是非常的漂亮呢

注意，这个页面，是加了自己设置的样式，原版的样式，是没有这么好看的

基本的样式布置好了。接下来。就需要调用后台的接口了。

7为了方便管理，我们建了一个文件夹专门用来存放，网络请求，我们在里面放了一个基础地址，也就是公共地址

8因为当我们发起网络请求的时候，一定会经过请求拦截器，所以我们又在请求拦截器里面设置了一个token，这样就不用每次请求那些需要token的接口时。手动的再写一个token参数了

9为了以后网络请求的代码能方便查找，我们又新建了一个api文件夹。在里面专门存放，网络请求的具体地址

10网络请求时候具体需要传递什么参数。就需要我们查看接口文档的要求了

11看一下，我是怎么做的，我首先在js里面的data数据里面，定义了一个user对象，然后给它添加了两个属性，分别是mobile和code，也就是手机号码和验证码。然后通过v-model实现数据双向绑定

12然后我们通过，submit，用来发起网络请求

看下对应方法里面的代码

13为了后期的方便管理，我们又用了vuex存储数据

来看下，它是怎么将变化的值，存到vuex里面的，还有顺便将两个token存到了本地存储里面，

用vant做一个登陆页面相关推荐

用DW做一个登陆页面并且可以跳转的一个页面
1.首先先看一下这是我的页面布局以及插件 2.这是是css的样式 3.首先获取到姓名. 身份证号. 电话号码这些文本框的ID,然后电话号码那里给一个onblur事件用于表单验证代码,然后reg那里是验 ...
一个html5页面,html5做一个黑板报页面
html5做一个黑板报页面我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
html网页设计板报,html5做一个黑板报页面
html5做一个黑板报页面我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
android登陆界面左右两种登陆布局,Android UI组件----用相对布局RelativeLayout做一个登陆界面...
[声明] 欢迎转载,但请保留文章原始出处→_→ [正文] 两个小时的学习成果,对于我这种还没入门但渴望不断进步的初学者来说,是一种激励.通过自己一行一行的敲代码,实现了用相对布局做一个登陆界面的效果. ...
用HTML做一个注册页面
学完了HTML的基础知识,做一个小练习巩固一下 <!DOCTYPE html> <html> <head><meta charset="UTF-8& ...
java web程序上机考试做一个登陆注册程序
大二期末 java web.用到数据库,jdbc.myeclipse实现用户的注册,登陆并且不能出现500错误,用户不能重复注册.当用户任意点击时也不能出现500错误! 这里.我只写注册成功的页面. ...
用Xaml搭建一个登陆页面
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:Vs ...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系如图所示:红 ...

用vant做一个登陆页面

用vant做一个登陆页面相关推荐

最新文章

热门文章