vue3-admin商品管理后台项目(登录页开发和功能实现)

mzldustu

已于 2022-10-18 21:39:59 修改

阅读量4.2k

点赞数 14

分类专栏： vue-admin项目文章标签： javascript vue.js 前端

于 2022-10-17 23:48:11 首次发布

本文链接：https://blog.csdn.net/qq_45628733/article/details/127373961

版权

今天来实现vue3-admin商品管理后台项目的登录页功能
首先在pages文件夹下面添加一个login.vue文件，里面先写入简单的template

<template>
    <div>
        登录
    </div>
</template>

然后在router文件夹下面的Index.js里面编辑，仍然是引入页面配置路由，about页暂时没啥用，只是测试用的，所以就把它删了。

import {
    createRouter, createWebHashHistory } from 'vue-router'
import Index from '~/pages/index.vue'
import Login from '~/pages/login.vue'
import NotFound from '~/pages/404.vue'

const routes = [{
   
    // 根路由
    path:"/",
    component:Index
},{
   
    // 登录路由
    path:"/login",
    component:Login
},{
   
    //404路由 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
    path: '/:pathMatch(.*)*', 
    name: 'NotFound', 
    component: NotFound
}]

const router = createRouter({
   
    history:createWebHashHistory(),
    routes
})
export default router

运行项目域名输入http://127.0.0.1:5173/#/login，可以看见成功了
在这里插入图片描述

然后开始正式编写登录页代码，因为要做响应式布局，所以优先使用element plus的layout布局。然后我直接给出login.vue做完布局后的代码：结合了windi css进行布局，注释写的很详细

<template>
  <!-- el-row会将页面分为24份，用span进行值的设定 这里面的class是windi css里面的颜色快捷方式,以及设置min-height使其占满整个屏幕,-->
  <el-row class="min-h-screen bg-indigo-500">
    <!-- 左边布局 class里面实现的主要是垂直水平居中 flex-col就是垂直方向-->
    <el-col :span="16" class="flex items-center justify-center">
      <div>
        <!-- class里面的内容分别是：加粗，字体增大，字体加亮，与下面外间距1rem -->
        <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
        <div class="text-gray-200 text-sm">此站是vue-admin的登录页面,作者是mzldustu</div>
      </div>
    </el-col>

    <!-- 右边布局 -->  
    <el-col
      :span="8"
      class="bg-light-50 flex items-center justify-center flex-col"
    >
    <!-- 加粗，字体3xl，颜色深灰色 -->
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
      <!-- flex布局，水平垂直居中，上下边距， 浅灰色,水平方向元素的间距 -->
      <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
        <!-- 高度，宽度，浅灰色 -->
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <!-- 这里使用的是element plus里面的典型表单 -->
      <!-- 表单宽度 -->
      <el-form :model="form" class="w-[250px]">
        <!-- 用户名输入框 -->
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码"/>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
            <!-- 圆角，宽度250px,颜色 -->
          <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import {
    reactive } from 'vue'

// do not use same name with ref
const form = reactive({
   
    username:"",
    password:""
})

const onSubmit = () => {
   
  console.log('submit!')
}
</script>

以上代码之后，login.vue的页面最终效果就是：
在这里插入图片描述
到此登录页的样式布局就写完了。

然后我们进行登录页的响应式处理以及输入框图标的引入：
直接上代码吧，注释写的很明白，图标用的是element plus里面的图标引入

<template>
  <!-- el-row会将页面分为24份，用span进行值的设定 这里面的class是windi css里面的颜色快捷方式,以及设置min-height使其占满整个屏幕,-->
  <el-row class="min-h-screen bg-indigo-500">
    <!-- 左边布局 class里面实现的主要是垂直水平居中 flex-col就是垂直方向-->
    <!-- 因为要响应式布局，所以我们使用windi css里面类似媒体查询的一个功能 lg是>1200px的屏幕，md是>992px的屏幕-->
    <el-col :lg="16" :md="12" class="flex items-center justify-center">
      <div>
        <!-- class里面的内容分别是：加粗，字体增大，字体加亮，与下面外间距1rem -->
        <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
        <div class="text-gray-200 text-sm">此站是vue-admin的登录页面,作者是mzldustu</div>
      </div>
    </el-col> 

    <!-- 右边布局 -->  
    <el-col :lg="8" :md="12" class="bg-light-50 flex items-center justify-center flex-col"
    >
    <!-- 加粗，字体3xl，颜色深灰色 -->
      <h2 class="font-bold text-3xl text-gray-800">欢迎回来</h2>
      <!-- flex布局，水平垂直居中，上下边距， 浅灰色,水平方向元素的间距 -->
      <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
        <!-- 高度，宽度，浅灰色 -->
        <span class="h-[1px] w-16 bg-gray-200"></span>
        <span>账号密码登录</span>
        <span class="h-[1px] w-16 bg-gray-200"></span>
      </div>
      <!-- 这里使用的是element plus里面的典型表单 -->
      <!-- 表单宽度 -->
      <el-form :model="form" class="w-[250px]">
        <!-- 用户名输入框 -->
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户名">
            <!-- 插槽引入user图标 -->
            <template #prefix>
                <el-icon><User /></el-icon>
            </template>
          </el-input>

        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码">
            <!-- 插槽引入lock图标 -->
            <template #prefix> 
                  <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
            <!-- 圆角，宽度250px,颜色 -->
          <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import {
    reactive } from 'vue'
// 引入图标
import {
    User,Lock } from '@element-plus/icons-vue'

// do not use same name with ref
const form = reactive({
   
    username:"",
    password:""
})

const onSubmit = () => {
   
  console.log('submit!')
}
</script>

用windi css 的@apply抽离样式代码
很简单其实，直接看代码就行

<template>
  <el-row class="login-container">
    <el-col :lg="16" :md="12" class="left">
      <div>
        <div>欢迎光临</div>
        <div>此站是vue-admin的登录页面,作者是mzldustu</div>
      </div>
    </el-col> 

    <!-- 右边布局 -->  
    <el-col :lg="8" :md="12" class="right"
    >
      <h2 class="title">欢迎回来</h2>
      <div>
        <span class="line"></span>
        <span>账号密码登录</span>
        <span class="line"></span>
      </div>
      <!-- 这里使用的是element plus里面的典型表单 -->
      <!-- 表单宽度 -->
      <el-form :model="form" class="w-[250px]">
        <!-- 用户名输入框 -->
        <el-form-item>
          <el-input v-model="form.username" placeholder="请输入用户名">
            <!-- 插槽引入user图标 -->
            <template #prefix>
                <el-icon><User /></el-icon>
            </template>
          </el-input>

        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item>
          <el-input v-model="form.password" placeholder="请输入密码">
            <!-- 插槽引入lock图标 -->
            <template #prefix> 
                  <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
            <!-- 圆角，宽度250px,颜色 -->
          <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import {
    reactive } from 'vue'
// 引入图标
import {
    User,Lock } from '@element-plus/icons-vue'

// do not use same name with ref
const form = reactive({
   
    username:"",
    password:""
})

const onSubmit = () => {
   
  console.log('submit!')
}
</script>

<style scoped>
.login-container{
   
    /*el-row会将页面分为24份，用span进行值的设定 这里面的class是windi css里面的颜色快捷方式,以及设置min-height使其占满整个屏幕 */
    @apply min-h-screen bg-indigo-500;
}

/* <!-- 左边布局 class里面实现的主要是垂直水平居中 flex-col就是垂直方向-->
    <!-- 因为要响应式布局，所以我们使用windi css里面类似媒体查询的一个功能 lg是>1200px的屏幕，md是>992px的屏幕--> */
.login-container .left, .login-container .right{
   
    @apply flex items-center justify-center;
}

.login-container .right{
   
    @apply bg-light-50 flex-col;
}

/* class里面的内容分别是：加粗，字体增大，字体加亮，与下面外间距1rem */
.left>div>div:first-child{
   
    @apply font-bold text-5xl text-light-50 mb-4;
}

.left>div>div:last-child{
   
    @apply text-gray-200 text-sm;
}
/* 加粗，字体3xl，颜色深灰色 */
.right .title{
   
    @apply font-bold text-3xl text-gray-800;
}

/* flex布局,水平垂直居中,上下边距,浅灰色,水平方向元素的间距 */
.right>div{
   
    @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}

/* 高度，宽度，浅灰色 */
.right .line{
   
    @apply h-[1px] w-16 bg-gray-200;
}
</style>

到这里就抽离的差不多了。

然后实现登录表单验证处理：
login.vue的代码：

<template>
  <el-row class="login-container">
    <el-col :lg="16" :md="12" class="left">
      <div>
        <div>欢迎光临</div>
        <div>此站是vue-admin的登录页面,作者是mzldustu</div>
      </div>
    </el-col> 

    <!-- 右边布局 -->  
    <el-col :lg="8" :md="12" class="right"
    >
      <h2 class="title">欢迎回来</h2>
      <div>
        <span class="line"></span>
        <span>账号密码登录</span>
        <span class="line"></span>
      </div>
      <!-- 这里使用的是element plus里面的典型表单 -->
      <!-- 表单宽度 -->
      <!-- 引入element里的rules ,定义一个ref-->
      <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
        <!-- 用户名输入框 -->
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名">
            <!-- 插槽引入user图标 -->
            <template #prefix>
                <el-icon><User /></el-icon>
            </template>
          </el-input>

        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <!-- type设为password就是非明文存储,show-password就是后面的小眼睛，可以点击显示不显示密码 -->
          <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password>
            <!-- 插槽引入lock图标 -->
            <template #prefix> 
                  <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
            <!-- 圆角，宽度250px,颜色 -->
          <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
import {
    reactive, ref } from 'vue'
// 引入图标
import {
    User,Lock } from '@element-plus/icons-vue'

// do not use same name with ref
const form = reactive({
   
    username:"",
    password:""
})

// 表单验证rules,要在前面指定prop
const rules = {
   
  username:[
    // 书写验证规则
    {
   
      required: true,
      message: '用户名不能为空',
      // 失去焦点的时候触发
      trigger: 'blur'
    },
    {
   
      min:4,
      max:8,
      message: '用户名长度必须是4-8个字符',
      trigger: 'blur'
    },
  ],
  password:[
    {
   
      required: true,
      message: '密码不能为空',
      // 失去焦点的时候触发
      trigger: 'blur'
    },
  ]
}

// setup里拿到el-form节点
const formRef = ref(null)

const onSubmit = () =>