欢迎来到人人都可写代码，大家好，我是杨晓华，今天我们的课程内容是，项目实操，开发一个登录界面的H5。

这是要实现的H5登录界面展示效果，手机号+验证码的登录方式；下面就是教大家如何制作的步骤：

1、在views的项目smart-zgw目录下，新建login.vue文件。这个文件由三部分style、template、script组成。stytle用于绑定样式、template用于设计标签界面、script用于数据交互操作。

2、template部分里编写的代码是：

<template>

<div class="page-login">

<div class="login-form">

<div>

<img src="../../assets/img/ic_shouji@2x.png" style="width: 0.176rem">

<input style="width: 90%" type="text" placeholder="请输入手机号" v-model="phone" maxlength="11" ref="input">

<i class="icon-roundclose" @click="handleClear"></i>

</div>

<div>

<img src="../../assets/img/ic_yzm@2x.png" alt="">

<input type="text" placeholder="验证码" v-model="code" maxlength="4">

<div class="getcode" v-if="time == 0" @click="getCode">获取验证码</div>

<div class="getcode" v-else>{{time}}秒后重试</div>

</div>

<mt-button class="submit" size="large" type="primary" @click="onSubmit">登录</mt-button>

<p class="xy">登录【这个娃】，即表明你已同意<a href="#!/smart-zgw/xie-yi">《用户服务协议》</a></p>

</div>

</div>

</template>

3、style部分里编写的代码是：

<style lang="scss">

@import '../../assets/css/fn';

.page-login{

font-size: 0.18rem;

padding: 0.15rem 0.15rem;

overflow: hidden;

background-color: #fff;

.icon-roundclose{

font-size: 0.2rem;

font-weight: lighter;

color: #ccc;

position: absolute;

right: 0.12rem;

top: 0.18rem;

}

.xy{

text-align: center;

margin-top: .1rem;

font-size: .14rem;

a{

font-size: .14rem;

//text-decoration: underline;

color: #1E90FF;

}

}

.login-form{

position: relative;

overflow: hidden;

width: 92%;

margin: 1rem auto 0;

>div{

position: relative;

background-color: #fff;

padding: 0 0.16rem;

margin-top: 0.2rem;

border: 1px solid #eee;

border-radius: 0.06rem;

img{

display: inline-block;

vertical-align: middle;

margin-top: -0.05rem;

width: 0.2rem;

}

input{

height: 0.55rem;

line-height: 0.55rem;

padding: 0.12rem 0.05rem;

}

.getcode{

position: absolute;

right: 0.15rem;

top: 0.15rem;

}

}

}

.submit{

margin-top: 0.5rem;

height: 0.55rem;

line-height: 0.55rem;

border-radius: 0.06rem;

font-size: 0.2rem;

}

}

</style>

4、script部分里编写的代码是：

<script>

import api from '../../api'

import Button from '../../components/button'

import Toast from '../../components/toast'

import {checkPhone} from '../../utils/check.js'

import { getAllParam, setCookie, getCookie, clearCookie } from '../../utils/other.js'

export default {

components: [ Button,Toast],

data () {

return {

phone: '',

code: '',

tj_uid: '',

time: 0

}

},

created () {

},

route: {

data (transition) {

let access_token = ''

//登录成功过，直接进入

if (process.env.NODE_ENV === 'production') {

access_token = getCookie('prod_access_token')

if(access_token.length > 0)

{

window.location.href = "http://www.zhegewa.com/?#!/smart-zgw/home"

}

} else {

access_token = getCookie('dev_access_token')

if(access_token.length > 0)

{

window.location.href = "http://localhost:8087/?#!/smart-zgw/home"

}

}

}

},

methods: {

handleClear() {

this.phone = '';

this.$refs['input'].focus()

},

getCode () {

if (!this.phone) {

Toast('请填写手机号码')

return false

} else if (!checkPhone(this.phone)) {

Toast('请输入正确的手机号码')

return false;

}

api.getVerifyCode.get({mobile: this.phone}).then(res => {

let data = res.data.data

Toast('验证码已发送')

this.time = 60

let timeout = setInterval(() => {

if (this.time > 0) {

this.time--

} else {

window.clearInterval(timeout)

}

}, 1000)

})

},

onSubmit () {

this.login()

},

login () {

if (!this.phone) {

Toast('请输入手机号码')

return false

} else if (!this.code) {

Toast('请输入验证码')

return false

}

let params = {}

params.mobile = this.phone

params.code = this.code

api.login.save(params).then(res => {

let data = res.data.data

Toast(res.data.message)

if (process.env.NODE_ENV === 'production') {

setCookie('prod_access_token', data.access_token, '/',10000000)

setCookie('prod_zhu_bf', data.user_info.nickname, '/',10000000)

setCookie('prod_zhu_bf_phone', data.user_info.mobile, '/',10000000)

window.location.href = "http://wx.zgw.com/?#!/smart-zgw/home"

} else {

setCookie('dev_access_token', data.access_token, '/',10000000)

setCookie('dev_zhu_bf', data.user_info.nickname, '/',10000000)

setCookie('dev_zhu_bf_phone', data.user_info.mobile, '/',10000000)

window.location.href = "http://localhost:8087/?#!/smart-zgw/home"

}

}, res => {

Toast(res.data.message)

})

},

onClose() {

let target = this.$route.query.target

if (target && target !== 'undefined') {

location.replace(target)

} else {

history.back()

}

}

}

}

</script>

5、登录界面用到获取验证码和登录动作两个接口，在script里可以看到api.getVerifyCode和api.login，在api目录的index.js文件里需设置这两个接口。

export default {

login: init(appHost, '/v2/topic/login?appid=zgw'),

getVerifyCode: init(appHost, ‘/v2/login/get-verify-code?appid=zgw'),

}

6、编写界面和数据交互后，还需要设置页面的访问路由，在route目录的index

.js文件里添加下面代码，在开发环境，输入http://localhost:8087/?#!/smart-zgw/login就可访问该页面。

export function configRouter (router) {

router.map({

'/smart-zgw': {

component: require('../views/smart-zgw/wrap.vue'),

subRoutes: {

'login': {

component: require('../views/smart-zgw/login.vue'),

title: '登录'

},

'xie-yi': {

component: require('../views/smart-zgw/xie-yi.vue'),

title: '《用户服务协议》'

}

}

开头：人人都可写代码-H5零基础编程-序言01

下一篇：人人都可写代码-H5零基础编程-首页界面实操06