【第19章】Vue实战篇之主页面


前言

登录完成之后,应该自动跳转到主页面,接下来我们搭建主界面。


一、代码

1. 主界面代码

<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import '@/assets/style.DmEXmmR7.css'
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="200px">
            <div class="el-aside__logo"></div>
            <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
                router>
                <el-menu-item >
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>文章分类</span>
                </el-menu-item>
                <el-menu-item >
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                <el-sub-menu >
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item >
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item >
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item >
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header class="tagline">
                <div  data-v-6b0c93fd=""><span class="accent" data-v-6b0c93fd="">渐进式</span> | <strong>JavaScript 框架</strong></div>
                <el-dropdown placement="bottom-end">
                    <span class="el-dropdown__box">
                        <el-avatar :src="avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>大事件 ©2024 Created by zhangjg</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #232323;

        &__logo {
            height: 120px;
            background: url('@/assets/logo.png') no-repeat center / 120px auto;
        }

        .el-menu {
            border-right: none;
        }
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>

2. App.vue

<script setup>
import LoginVue from './views/Login.vue'
import Layout from './views/Layout.vue'
</script>

<template>
  <!-- <LoginVue/> -->
   <Layout/>
</template>

<style scoped>
  h1{
    color:red;
  }
</style>

二、展示

在这里插入图片描述


总结

回到顶部

不知道大家有没有注意到一个问题,我们想展示主页面,需要把登录页面注释掉,那有没有一种技术能动态选择和切换呢?答案就是Vue Router(Vue.js 的官方路由)。

  • 29
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为你提供关于Vue实战-实现登录页面的步骤和思路。 1. 创建一个Vue项目 首先,你需要使用Vue CLI创建一个Vue项目。在终端中输入以下命令: ``` vue create my-login-page ``` 其中,my-login-page是你的项目名称,你可以根据自己的喜好进行命名。 完成项目创建后,你需要进入项目目录并启动项目: ``` cd my-login-page npm run serve ``` 2. 创建登录页面 接下来,你需要创建一个登录页面。在src目录下新建一个Login.vue文件,并添加以下代码: ```html <template> <div> <h2>登录页面</h2> <form> <div> <label for="username">用户名:</label> <input type="text" id="username" v-model="username"> </div> <div> <label for="password">密码:</label> <input type="password" id="password" v-model="password"> </div> <button type="submit" @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 在这里添加登录逻辑 } } } </script> ``` 这段代码定义了一个登录表单,包含用户名和密码两个输入框以及一个登录按钮。当点击登录按钮时,会触发login方法。 3. 添加登录逻辑 接下来,你需要在login方法中添加登录逻辑。你可以使用axios库向后端发送登录请求,并根据返回结果判断登录是否成功。 ```javascript import axios from 'axios' export default { data() { return { username: '', password: '' } }, methods: { login() { axios.post('/api/login', { username: this.username, password: this.password }) .then(response => { console.log(response.data) // 登录成功,跳转到首页 this.$router.push('/') }) .catch(error => { console.log(error) // 登录失败,提示用户错误信息 alert('登录失败,请检查用户名和密码是否正确!') }) } } } ``` 在这段代码中,我们使用axios库发送了一个POST请求到后端的/api/login接口,并传递了用户名和密码。如果登录成功,我们会在控制台输出返回结果并跳转到首页;如果登录失败,我们会弹出一个提示框提示用户登录失败。 4. 配置路由 最后,你需要在router/index.js文件中配置路由,将登录页面和首页进行关联。你可以使用Vue Router来实现这个功能。 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/Login.vue' import Home from '../components/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: Home }, { path: '/login', name: 'login', component: Login } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 在这段代码中,我们定义了两个路由:/表示首页,/login表示登录页面。当用户访问/login时,会跳转到Login组件。 完成以上步骤后,你就成功地实现了一个登录页面。用户可以在这个页面中输入用户名和密码,并点击登录按钮进行登录。如果登录成功,用户会跳转到首页;如果登录失败,会提示用户登录失败的信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值