07-1 登录注册页基本布局

前面的课程我们对项目的前置知识，以及请求接口api进行了讲解，从本节课开始，我们开始制作具体的功能模块。

login.png

在项目开发中，为了开发效率以及统一性，我们的UI样式引用了iview，本节我们先制作login页面的基本样式。登录页面我们使用垂直水平居中布局。表单引入了iview的form表单组件，tab切换组件

<template>
  <div class="login">
    <div class="container">
      <div class="logo">
        <img src="../../static/logo.png" alt="">
        <p>记录一切重要事项。</p>
      </div>
      <Tabs>  // iview tabs组件
        <TabPane label="登录" >
          <Form ref="loginForm" :model="loginForm" :rules="ruleLogin" > // iview form组件
            <FormItem prop="username">
                <Input  prefix="ios-person-outline" type="text" v-model.trim="loginForm.username" placeholder="Username" size='large'>
                    <!-- <Icon type="ios-person-outline" slot="prepend"></Icon> -->
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input prefix="ios-lock-outline" type="password" v-model.trim="loginForm.password" placeholder="Password" size='large'>
                    <!-- <Icon type="ios-lock-outline" slot="prepend"></Icon> -->
                </Input>
            </FormItem>
            <FormItem>
                <Button long type="primary" @click="onLogin('loginForm')">登 录</Button>
            </FormItem>
          </Form>
        </TabPane>
        <TabPane label="注册" >
          <Form ref="registerForm" :model="registerForm" :rules="ruleRegister" >
            <FormItem prop="username">
                <Input prefix="ios-person-outline" type="text" v-model.trim="registerForm.username" placeholder="Username" size='large'>
                    <!-- <Icon type="ios-person-outline" slot="prepend"></Icon> -->
                </Input>
            </FormItem>
            <FormItem prop="password">
                <Input prefix="ios-lock-outline" type="password" v-model.trim="registerForm.password" placeholder="Password" size='large'>
                    <!-- <Icon type="ios-lock-outline" slot="prepend"></Icon> -->
                </Input>
            </FormItem>
            <FormItem>
                <Button long type="primary" @click="onRegister('registerForm')">注 册</Button>
            </FormItem>
          </Form>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import Auth from '../apis/Auth'
export default {
  data () {
      return {
          loginForm: {
            username: '',
            password: ''
          },
          registerForm: {
            username: '',
            password: ''
          },
          ruleLogin: {
              username: [
                  { required: true , message: '用户名不能为空', trigger: 'blur' },
                  { pattern: /^[\w\u4e00-\u9fa5]{3,15}$/ , message: '用户名3~15个字符，仅限数字字母下划线及中文', trigger: 'blur' ,}
              ],
              password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { type: 'string', min: 6, max:16, message: '密码长度为6-16个字符', trigger: 'blur' }
              ]
          },
          ruleRegister: {
            username: [
                  { required: true , message: '用户名不能为空', trigger: 'blur' },
                    { pattern: /^[\w\u4e00-\u9fa5]{3,15}$/ , message: '用户名3~15个字符，仅限数字字母下划线及中文', trigger: 'blur'}
              ],
              password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { type: 'string', min: 6, max:16, message: '密码长度为6-16个字符', trigger: 'blur' }
              ]
          }
      }
    },
    methods: {
      onLogin(name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              Auth.login(this.loginForm).then(res=>{
                this.$refs[name].resetFields()
                this.$router.push('/notebooks')
                this.$Message.success({
                    content: `${res.data.username},欢迎您使用印象笔记`,
                    duration: 6
                })
              }).catch(err=>{
                this.$Message.error(err.msg)
              })
            } else {
                return
            }
          })
        },
        onRegister(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                  Auth.register(this.registerForm).then(res=>{
                    this.$refs[name].resetFields()
                    this.$router.push('/notebooks')
                    this.$Message.success({
                        content: `${res.data.username},欢迎您使用印象笔记`,
                        duration: 6
                    })
                  }).catch(err=>{
                    this.$Message.error(err.msg)
                  })
                }
            })

        },

    }
}
</script>

<style lang="less" scoped>
.login {
  .container {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // 以上代码通过绝对定位加css3,形变实现垂直水平剧中
    width: 60vh;
    height: 85vh;
    border: 1px solid #eee;
    padding: 75px;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    .logo {
      margin-bottom: 18px;
      height: 110px;
    }
    img {
      width: 60%;
    }
    p {
      font-size: 14px;
    }
  }
}
</style>

code.png