Spring Boot 笔记 025 主界面

这篇具有很好参考价值的文章主要介绍了Spring Boot 笔记 025 主界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.1 路由搭建

1.1.1 安装vue router

npm install vue-router@4

1.1.2 在src/router/index.js中创建路由器,并导出

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端

import { createRouter, createWebHistory } from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/LayoutGeji.vue'


//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    { path: '/', component: LayoutVue },
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//导出路由
export default router

1.1.3 在vue应用实例中使用vue-router

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端

1.1.4 声明router-view标签,展示组件内容

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端

1.1 自动跳转

import { useRouter } from 'vue-router'

const router = useRouter()

const login =async ()=>{
    //调用接口,完成登录
   let result =  await userLoginService(registerData.value);
 
   ElMessage.success(result.msg ? result.msg : '登录成功')

   //跳转到首页 路由完成跳转
   router.push('/')
}

1.2 子路由

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端

1.2.1 配置子路由

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端

import { createRouter, createWebHistory } from 'vue-router'

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/LayoutGeji.vue'

import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'
import UserAvatarVue from '@/views/user/UserAvatar.vue'
import UserInfoVue from '@/views/user/UserInfo.vue'
import UserResetPasswordVue from '@/views/user/UserResetPassword.vue'

//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
   
    {
        path: '/', component: LayoutVue,redirect:'/article/manage', children: [
            { path: '/article/category', component: ArticleCategoryVue },
            { path: '/article/manage', component: ArticleManageVue },
            { path: '/user/info', component: UserInfoVue },
            { path: '/user/avatar', component: UserAvatarVue },
            { path: '/user/resetPassword', component: UserResetPasswordVue }
        ]
    }
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

//导出路由
export default router

1.2.2 声明router-view

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端

1.2.3 为菜单项 el-menu-item 设置index属性,设置点击后的路由路径

Spring Boot 笔记 025 主界面,Spring Boot,spring boot,笔记,前端文章来源地址https://www.toymoban.com/news/detail-825783.html

```html
<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
</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 index="/article/category">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>文章分类</span>
                </el-menu-item>
                <el-menu-item index="/article/manage">
                    <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 index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/resetPassword">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <div>小学生程序员:<strong>小白</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>
                <router-view></router-view>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>大事件 ©2023 Created by 黑马程序员</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>
```



到了这里,关于Spring Boot 笔记 025 主界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 带有 Spring Boot 后端的 Vue.js 前端

    概述 在开始本教程中,先推荐1个SpringBoot+Vue前后端分离Java项目,本项目是一个大型互联网金融项目,采用Spring Boot , Dubbo 微服务的架构,包括多个独立的微服务,micr-common个公共服务,micr-web服务,micr-database数据库服务,micr-pay支付服务 ,micr-task定时任务。 前端技术栈:Vue,

    2024年02月11日
    浏览(41)
  • 解决前端传给Spring Boot的中文数据乱码问题

    解决前端传给Spring Boot的中文数据乱码问题,可以按照以下几个方法进行操作: 在前端的请求头(Request Header)中设置字符集编码为UTF-8: Content-Type: application/x-www-form-urlencoded; charset=UTF-8 1.在Spring Boot的后端接收中文数据的Controller中,添加注解@RequestBody,并设置编码为UTF-8:

    2024年03月25日
    浏览(80)
  • Spring Boot 笔记 021 项目部署

    1.1 引入坐标,并双击package打包成jar包 1.2 在服务器上运行jar包 1.3 使用postman测试 2.1 运行配置 2.1.1 命令更改端口 java -jar big-event-1.0-SNAPSHOT.jar --server.port=7777 2.1.2 环境变量更新(略) 2.1.3 外部配置文件,在jar包同目录下配置application.yml文件(略) 3.1 多环境开发(开发,测试

    2024年02月21日
    浏览(37)
  • Spring Boot 笔记 028 文章列表

    1.1 导入中文语言包 1.2 显示文章分类 1.3.1 article.js增加文章列表接口 1.3.2 页面调用接口显示数据 1.3.3 表单绑定categoryname 1.3.4 搜索按钮,重置按钮,分页按钮 1.4 添加文章按钮 1.4.1 编辑页面,绑定数据,添加样式 1.4.2 文本编辑器 1.4.2.1 安装vue-quill 1.4.2.2 导入组件和样式 1.4.2

    2024年02月21日
    浏览(37)
  • Spring Boot 笔记 024 登录页面

    1.1 登录接口 2.1 编写页面 2.2 绑定数据模型并校验 2.3 清空表单内的数据 2.4 调用登录接口 3.1 修改响应拦截器以及提示框

    2024年02月19日
    浏览(39)
  • Spring Boot 笔记 023 注册页面

    1.1 request.js请求工具 2.1 编写注册接口 3.1 编写页面 3.2 给表单绑定数据 3.3 定义表单校验规则 3.4 调用注册接口 3.1 跨域问题 3.1.1 修改request.js 3.1.2 修改vite.config.js 4.1 测试

    2024年02月19日
    浏览(33)
  • spring Boot处理返回给前端Long类型精度丢失

    项目中采用springcloud Alibaba技术开发分布式系统,开发过程中采用雪花算法生成分布式Id,为Long类型,而Long类型返回给前端,会出现精度丢失问题。 接下来我们主要了解下,如何快速的处理精度丢失的问题 可以直接在返回实体属性添加\\\"@JsonSerialize(using = ToStringSerializer.class)\\\"。

    2024年02月02日
    浏览(59)
  • React.js前端 + Spring Boot后端员工管理

    该项目是一个员工管理系统,前端使用 React.js 构建,后端使用 Spring Boot 和 Data JPA 和 Lombok 构建。它提供了有效管理员工信息的全面解决方案。 特征 响应式设计:响应式 UI 设计,确保跨各种设备的可用性。 数据验证:验证用户输入以确保数据完整性。 使用的技术 前端:R

    2024年04月28日
    浏览(50)
  • Spring Boot 笔记 026 文章分类列表查询

    1.1 pinia 1.1.1 安装pinia npm install pinia 1.1.2 安装persist npm install pinia-persistedstate-plugin 1.1.2 在vue应用实例中使用pinia,在pinia中使用persist 1.1.3 在src/stores/token.js中定义store,定义状态Store时指定持久化配置参数 1.1.4 在组件中使用store 1.1.4.1 在login.vue中使用store将token存储到pinia中  

    2024年02月20日
    浏览(44)
  • Spring Boot后端+Vue前端:打造高效二手车交易系统

    作者介绍: ✌️大厂全栈码农|毕设实战开发,专注于大学生项目实战开发、讲解和毕业答疑辅导。 🍅 获取源码联系方式请查看文末 🍅  推荐订阅精彩专栏 👇🏻 避免错过下次更新 Springboot项目精选实战案例 更多项目: CSDN主页YAML墨韵 学如逆水行舟,不进则退。学习如赶

    2024年04月28日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包