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

今天来实现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 = () => 
  • 14
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mzldustu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值