VUE学习笔记(八)-登录页设计

登录页设计

src下新建auth文件夹，新建auth.service.js,

auth文件夹下新建views文件夹，view文件夹下新建UserLogin.vue

UserLogin.vue

<template>
    <div class="login">
        <div class="body">
            <div class="container">
                <h2>用户登陆</h2>
                <el-form   :model="ruleForm" ref="loginForm" class="login-form" >
                    <el-form-item label="账号">
                        <el-input v-model="ruleForm.email" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="ruleForm.password" />
                    </el-form-item>
                    <el-button style="width: 100%;" type="primary">登陆</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import {  reactive,toRefs } from 'vue';

const state=reactive({
    ruleForm:{
        email:"ant@163.com",
        password:"ant123"
    }
})

const {ruleForm}=toRefs(state)
</script>
<style scoped>
.login {
    background: url("../../assets/bg.jpg");
    height: 100%;
    width: 100%;
    position: fixed;
    background-size: cover;
}
.body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20%;
}
.container{
    width: 420px;
    height: 250px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    border-radius: 0px 21px 41px 0px rgba(0,0,0,0.2);
    font-size: 12px;
}
</style>

调整路由，将分类管理的路由合并到分项里

src/router/index.js

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("@/auth/views/UserLogin.vue"),
  },
  {
    path: "/",
    name: "/",
    component: () => import("@/views/LayoutView.vue"),
    redirect:'/home',
    children: [
      {
        path: "/",
        name: "home",
        component: HomeView,
      },
      {
        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/AboutView.vue"),
      },
      {
        path: "/category",
        name: "category",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/CategoryView.vue"),
      },
      {
        path: "/addCategory",
        name: "addCategory",
        component: () => import("../components/AddCategory.vue"),
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

src下views新建LayoutView.vue,调整旧页面主页

<template>
    <el-container class="layout-container-demo">
      <el-aside width="200px">
        <el-scrollbar>
          <div class="mb-2 logo">Vue+WEBAPI</div>
          <el-menu :default-openeds="['1', '2']" active-text-color="#ffd04b" background-color="#303133" text-color="#fff"
            router="true">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <message />
                </el-icon>店铺管理
              </template>
              <el-menu-item-group>
  
                <el-menu-item index="/"><el-icon>
                    <HomeFilled />
                  </el-icon>首页</el-menu-item>
  
                <el-menu-item index="/category"><el-icon>
                    <Operation />
                  </el-icon>分页管理</el-menu-item>
                <el-menu-item index="1-3"><el-icon>
                    <ShoppingCart />
                  </el-icon>商品管理</el-menu-item>
              </el-menu-item-group>
  
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Setting />
                </el-icon>系统设置
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1"><el-icon>
                    <Edit />
                  </el-icon>修改密码</el-menu-item>
              </el-menu-item-group>
  
            </el-sub-menu>
  
          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>View</el-dropdown-item>
                  <el-dropdown-item>Add</el-dropdown-item>
                  <el-dropdown-item>Delete</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
  
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </template>
  
  <script setup>
  
  </script>
  
  <style scoped>
  .logo {
    height: 50px;
    color: white;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
  }
  
  .layout-container-demo {
    height: 100vh;
  }
  
  .el-header {
    position: relative;
    background-color: white;
    color: var(--el-text-color-primary);
    box-shadow: var(--el-box-shadow-light);
  
  }
  
  
  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: black;
  }
  
  .layout-container-demo .el-menu {
    border-right: none;
  }
  
  .layout-container-demo .el-main {
    padding: 0;
    box-shadow: var(--el-box-shadow-light);
    margin: 10px 0px;
  }
  
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
  }
  
  .el-footer {
    box-shadow: var(--el-box-shadow-light);
  }
  </style>