vue+springmvc前后端分离开发（十二）（简易首页和登录注册页面）

前情提要

• 上一节我们成功用vuetify做了一个模板页，并且简单使用了vuex来对用户状态进行管理，这一节要讲解如何用vuetify来做首页和登录注册页面

首页

• 找到Home.vue这个文件，这个文件就对应着首页视图，将文件内容修改为如下形式

<template>
  <!--建议使用v-container来控制布局-->
  <v-container>
    <!--横幅-->
    <v-row>
      <v-col>
        <v-banner two-line>
          <!--小图标-->
          <v-avatar slot="icon" color="deep-purple accent-4" size="40">
            <v-icon icon="mdi-lock" color="white">mdi-lock</v-icon>
          </v-avatar>
          <!--文字介绍-->
          一个简易的首页
          <template v-slot:actions>
            <v-btn text color="deep-purple accent-4">Login</v-btn>
            <v-btn text color="deep-purple accent-4">Register</v-btn>
          </template>
        </v-banner>
      </v-col>
    </v-row>
    <!--信息卡片-->
    <v-row justify="center" class="mt-6">
      <v-col md="3">
        <v-img src="../assets/logo.png" alt="商标" width="160" class="mx-auto"></v-img>
        <h2 class="text-center mt-3">欢迎使用后台管理系统！</h2>
        <v-card-text class="text-center">
          您可以在本系统中使用后台管理相关功能，请先完成注册登录
        </v-card-text>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

export default {
  name: 'Home'
}
</script>

• 显示效果如下
  

登录页面

• 首先在views中创建一个Login.vue文件，并在其中写下如下内容（注意里面是有一个图片的，请对照图片路径的位置将图片添加到文件夹中）

<template>
  <!--建议使用v-container来管理-->
  <v-container fluid>
    <!--一个小卡片-->
    <v-row justify="center">
      <!--细节控制，不然卡片的大小会不自然-->
      <v-col sm="6" md="4" lg="3">
        <v-card class="mx-auto">
          <v-img class="white--text align-end" height="200px" src="../assets/user/top.jpeg">
            <v-card-title>Login</v-card-title>
          </v-img>
          <!--表单填写部分-->
          <v-card-text>
            <!--ref是vue特有的别名，无需通过id来获取元素-->
            <v-form ref="loginForm" v-model="valid" lazy-validation autocomplete="off">
              <!--用户名-->
              <v-row>
                <v-col>
                  <v-text-field v-model="form.username" :rules="rules.usernameRules" label="用户名"></v-text-field>
                </v-col>
              </v-row>
              <!--密码-->
              <v-row>
                <v-col>
                  <v-text-field v-model="form.password" :rules="rules.passwordRules" label="密码" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" @click:append="show = !show" :type="show ? 'text': 'password'"></v-text-field>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text>
          <!--动作执行按钮-->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn :disabled="!valid" color="primary">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Login',
  data: () => ({
    // 用于验证表单内容填写是否正确
    valid: true,
    // 用于控制密码是否以可见的形式显示
    show: false,
    // 表单填写的内容
    form: {
      username: '',
      password: ''
    },
    // 验证规则
    rules: {
      usernameRules: [
        v => !!v || '用户名不能为空',
        v => ((v || '').length >= 1 && (v || '').length <= 20) || '用户名必须在1-20个字符以内'
      ],
      passwordRules: [
        v => !!v || '密码不能为空',
        v => ((v || '').length >= 6 && (v || '').length <= 30) || '密码必须在6-30个字符以内'
      ]
    }
  })
}
</script>

• 然后我们需要添加前端路由，在router/index.js下添加如下内容（其实只加了Login的部分）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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/About.vue')
  },
  {
    // 登录视图
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

• 最后我们需要完成很重要的一步，就是在点击登录这个按钮之后，我们可以跳转到/login路由上去
• 首先需要在App.vue中的script中添加open函数，用来跳转路由

<script>
export default {
  name: 'App',

  data: () => ({
    // 控制导航侧栏的显示和隐藏
    drawer: true
  }),
  methods: {
    // 通过视图的名字跳转到特定视图，一般用作主页，登录页，注册页等
    open (name) {
      // 需要先判断当前路由名称是否和目标路由一致，如果一致就不跳转
      if (this.$route.name !== name) {
        this.$router.push({
          name: name
        })
      }
    }
  }
}
</script>

• 然后需要在登录按钮上添加点击事件，并且在事件触发时调用这个函数，我们需要先找到登录按钮

<v-btn block color="primary" @click="open('Login')">登录</v-btn>

• 现在点击登录按钮就可以看到登录界面了，效果如下
  

注册页面

• 和登录界面同理，首先也是在views文件夹中创建一个Register.vue的文件，内容如下

<template>
  <!--建议使用v-container来管理-->
  <v-container fluid>
    <!--一个小卡片-->
    <v-row justify="center">
      <!--细节控制，不然卡片的大小会不自然-->
      <v-col sm="6" md="4" lg="3">
        <v-card class="mx-auto">
          <v-img class="white--text align-end" height="200px" src="../assets/user/top.jpeg">
            <v-card-title>Register</v-card-title>
          </v-img>
          <!--表单填写部分-->
          <v-card-text>
            <!--ref是vue特有的别名，无需通过id来获取元素-->
            <v-form ref="registerForm" v-model="valid" lazy-validation autocomplete="off">
              <!--用户名-->
              <v-row>
                <v-col>
                  <v-text-field v-model="form.username" :rules="rules.usernameRules" label="用户名"></v-text-field>
                </v-col>
              </v-row>
              <!--密码-->
              <v-row>
                <v-col>
                  <v-text-field v-model="form.password" :rules="rules.passwordRules" label="密码" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" @click:append="show = !show" :type="show ? 'text': 'password'"></v-text-field>
                </v-col>
              </v-row>
              <!--确认密码-->
              <v-row>
                <v-col>
                  <v-text-field v-model="form.passwordConfirm" :rules="[rules.passwordConfirmRules.required, rules.passwordConfirmRules.equal(form.password, form.passwordConfirm)]" label="确认密码" :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'" @click:append="show = !show" :type="show ? 'text': 'password'"></v-text-field>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text>
          <!--动作执行按钮-->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn :disabled="!valid" color="primary">Register</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Register',
  data: () => ({
    // 用于验证表单内容填写是否正确
    valid: true,
    // 用于控制密码是否以可见的形式显示
    show: false,
    // 表单填写的内容
    form: {
      username: '',
      password: '',
      passwordConfirm: ''
    },
    // 验证规则
    rules: {
      usernameRules: [
        v => !!v || '用户名不能为空',
        v => ((v || '').length >= 1 && (v || '').length <= 20) || '用户名必须在1-20个字符以内'
      ],
      passwordRules: [
        v => !!v || '密码不能为空',
        v => ((v || '').length >= 6 && (v || '').length <= 30) || '密码必须在6-30个字符以内'
      ],
      passwordConfirmRules: {
        required: v => !!v || '请输入确认密码',
        equal: (password, passwordConfirm) => password === passwordConfirm || '两次密码不一致'
      }
    }
  })
}
</script>

• 然后修改router/index.js里面的内容

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 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/About.vue')
  },
  {
    // 登录视图
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    // 注册视图
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

• 最后再对注册按钮添加一个点击事件

<v-btn block color="success" @click="open('Register')">注册</v-btn>

• 做完后点击注册按钮查看页面效果
  

为主页添加点击事件

• 我们现在还有一个问题，就是点击主页链接没反应，这是因为没给主页链接添加点击事件，所以我们需要添加点击事件，修改如下

<!--主页-->
<v-list-item link @click="open('Home')">
  <!--mdi图标，home-->
  <v-list-item-icon>
    <v-icon>mdi-home</v-icon>
  </v-list-item-icon>
  <!--文字说明-->
  <v-list-item-title>主页</v-list-item-title>
</v-list-item>

---

至此，简易首页和登录注册页面已编写完毕，并且添加事件使点击按钮能够跳转到其它页面，以及完成了表单的基本验证功能。下一节会讲解如何注册一个用户以及如何完成登录动作