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

前情提要

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

首页

  • 找到Home.vue这个文件,这个文件就对应着首页视图,将文件内容修改为如下形式
<template>
  
  <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-lockv-icon>
          v-avatar>
          
          一个简易的首页
          <template v-slot:actions>
            <v-btn text color="deep-purple accent-4">Loginv-btn>
            <v-btn text color="deep-purple accent-4">Registerv-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>
  • 显示效果如下
    vue+springmvc前后端分离开发(十二)(简易首页和登录注册页面)_第1张图片

登录页面

  • 首先在views中创建一个Login.vue文件,并在其中写下如下内容(注意里面是有一个图片的,请对照图片路径的位置将图片添加到文件夹中
<template>
  
  <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>Loginv-card-title>
          v-img>
          
          <v-card-text>
            
            <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">Loginv-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>
  • 现在点击登录按钮就可以看到登录界面了,效果如下
    vue+springmvc前后端分离开发(十二)(简易首页和登录注册页面)_第2张图片

注册页面

  • 和登录界面同理,首先也是在views文件夹中创建一个Register.vue的文件,内容如下
<template>
  
  <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>Registerv-card-title>
          v-img>
          
          <v-card-text>
            
            <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">Registerv-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>
  • 做完后点击注册按钮查看页面效果
    vue+springmvc前后端分离开发(十二)(简易首页和登录注册页面)_第3张图片

为主页添加点击事件

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

<v-list-item link @click="open('Home')">
  
  <v-list-item-icon>
    <v-icon>mdi-homev-icon>
  v-list-item-icon>
  
  <v-list-item-title>主页v-list-item-title>
v-list-item>

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

你可能感兴趣的:(前后端分离开发,vue,html)