【Vue3 博物馆管理系统】定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页

2023-10-11 13:20
文章标签 定制 管理系统 显示 vue3 区域 结构 底部 中间 首页 三层 博物馆 菜单 顶部 上中下

本文主要是介绍【Vue3 博物馆管理系统】定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

系列文章目录

第一章 定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页
第二章 使用Vue3、Element-plus菜单组件构建菜单
[第三章 使用Vue3、Element-plus菜单组件构建轮播图]
[第四章 使用Vue3、Element-plus菜单组件构建组图文章]

文章目录

  • 系列文章目录
    • @[TOC](文章目录)
  • 1、系统设计
    • 1.1、前台用户
      • 1.1.1、用户模块
      • 1.1.2、资讯模块
      • 1.1.3、藏品模块
  • 2、本章节效果图
    • 2.1、拆解任务
  • 3、动手开干
    • 3.1、Vue3项目的创建
      • 3.1.1、创建museum空白目录
      • 3.1.2、使用idea打开
      • 3.1.3、创建Vue3项目
        • 3.1.3.1、打开cmd命令，进入到上一步创建的目录；
        • 3.1.3.2、运行命令：vue create front
        • 3.1.3.3、选择 Vue3项目
        • 3.1.3.4、项目构建中
        • 3.1.3.5、构建成功
        • 3.1.3.6、按照提示启动项目
        • 3.1.3.7、在浏览器访问项目
    • 3.2、Vue3 路由应用
      • 3.2.1、在Idea里打开museum项目，展开front工程
      • 3.2.2、为项目安装router
      • 3.2.3、在src下创建view、router目录
        • 3.2.3.1、/view/Home.vue文件
        • 3.2.3.2、/router/index.js文件
        • 3.2.3.3、main.js加载路由
        • 3.2.3.4、App.vue 加载 router-view
        • 3.2.3.5、修改启动端口:80
      • 3.2.4、访问页面
    • 3.3、Element-plus 应用
      • 3.3.1、为项目安装Element-plus
      • 3.3.2、Vue项目加载Element-plus
    • 3.4、Element-plus 的布局、在顶栏区域放置菜单、底栏容器放置站内导航\版权等信息
    • 3.5、执行npm run serve启动项目，可见到第一部分的效果图
  • 总结

在这里插入图片描述

1、系统设计

Vue3 博物馆管理系统，从构建Vue3项目开始，打造一个博物馆系统。
分为2个系统：前台用户、后台管理
在这里插入图片描述

1.1、前台用户

包含模块：用户模块、资讯模块、藏品模块

1.1.1、用户模块

  • 登录
    提供前台用户登录功能
  • 注册
    提供前台用户注册功能
  • 检查登录账号是否唯一
    检索用户库，是否存在相同账号

1.1.2、资讯模块

  • 资讯列表
    咨询列表信息展示
  • 资讯详情
    资讯详情数据展示，展示资讯标题、副标题、发布时间、来源、作者、资讯内容等信息

1.1.3、藏品模块

  • 藏品分类信息查询
    藏品分类信息展示
  • 藏品列表信息查询
    藏品列表信息展示，可根据分类信息过滤查询，可根据藏品标题过滤查询
  • 藏品详情信息查询
    藏品详细信息展示，展示藏品标题、副标题、收藏时间、来源、发现人、收藏价值、年代、藏品内容等信息

2、本章节效果图

在这里插入图片描述

2.1、拆解任务

本章节的任务：
1、Vue3项目的创建；
2、Vue3 路由应用；
3、Element-plus 应用；
4、Element-plus 的布局；
5、在顶栏区域放置菜单；
6、底栏容器放置站内导航、版权等信息

3、动手开干

3.1、Vue3项目的创建

3.1.1、创建museum空白目录

在这里插入图片描述

3.1.2、使用idea打开

在这里插入图片描述

3.1.3、创建Vue3项目

命令格式：vue create 项目名称

由于本章节讲解的是构建前端用户首页，因此我们创建前端项目
vue create front

3.1.3.1、打开cmd命令，进入到上一步创建的目录；
3.1.3.2、运行命令：vue create front
3.1.3.3、选择 Vue3项目

在这里插入图片描述

3.1.3.4、项目构建中

在这里插入图片描述

3.1.3.5、构建成功

在这里插入图片描述

3.1.3.6、按照提示启动项目
cd front
npm run serve

在这里插入图片描述
在这里插入图片描述

3.1.3.7、在浏览器访问项目

访问地址：http://localhost:8080/
在这里插入图片描述

3.2、Vue3 路由应用

3.2.1、在Idea里打开museum项目，展开front工程

在这里插入图片描述

3.2.2、为项目安装router

npm install vue-router@4

安装好之后，打开package.json文件，验证是否有vue-router依赖
在这里插入图片描述

3.2.3、在src下创建view、router目录

在这里插入图片描述

3.2.3.1、/view/Home.vue文件
<template><div><h1>{{msg}}</h1></div>
</template><script>
export default {name: 'Home',data() {return {msg: "首页"}}
}
</script><style scoped></style>
3.2.3.2、/router/index.js文件
import { createRouter, createWebHashHistory } from 'vue-router'const routes = [{path: "/",name: 'home',component: ()=>import("@/view/Home.vue")}
]const router = createRouter({history:createWebHashHistory(),routes
})export default router;
3.2.3.3、main.js加载路由
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"const app = createApp(App);
app.use(router);app.mount('#app');
3.2.3.4、App.vue 加载 router-view
<template><p><router-view/></p>
</template>
3.2.3.5、修改启动端口:80

npm run serve – --port 80
在这里插入图片描述
在这里插入图片描述

3.2.4、访问页面

可以看到这里显示了路由"/"（/view/VueHome.vue）页面的数据
在这里插入图片描述

3.3、Element-plus 应用

3.3.1、为项目安装Element-plus

npm install element-plus --save

检查package.json文件里的element-plus已经加上了
在这里插入图片描述

3.3.2、Vue项目加载Element-plus

在上一步router 的基础上，进一步引入了element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';const app = createApp(App);
app.use(router);
app.use(ElementPlus)app.mount('#app');

3.4、Element-plus 的布局、在顶栏区域放置菜单、底栏容器放置站内导航\版权等信息

修改App.Vue文件

<template><div id="app" name="app"><el-container><!-- 顶栏容器 --><el-header style="margin-top: 10px;"><el-menu:default-active="1"class="el-menu-demo"mode="horizontal"active-text-color="#409eff"router><div class="logo" style="width: 10%;" ><router-link to="/"><span style="width: 240px; position: absolute; top: 20px; left: 60px; ">xx科技</span><img  src="./assets/logo.png" style="height: 50px;" alt /></router-link></div><el-menu-item index="/" >首页</el-menu-item><el-menu-item index="/history">历史博物馆</el-menu-item><el-menu-item index="/news" >资讯</el-menu-item><el-menu-item index="/about" >关于我们</el-menu-item></el-menu></el-header><!-- 主要区域容器 --><el-main><keep-alive><router-view :key="$route.path+$route.query"></router-view></keep-alive></el-main><!-- 底栏容器 --><el-footer><div class="footer"><el-row :gutter="25"><el-col :span="6" ><div style="width: 100%; color: #c6cbd1; margin: 25px 10px; font-size: 20px"> 服务热线 </div><div style="color: #14cb85; font-size: 18px"><span> <el-icon color="#14cb85"> <phone /> </el-icon>  13999999999</span></div><div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> 深圳市XXXX </div><div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> 邮编：XXXXX</div></el-col><el-col :span="6" ><div style="width: 100%; color: #c6cbd1; margin: 25px 10px; font-size: 20px"> 新闻资讯 </div><div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> <router-link to="/news" style="color: #6a737d;font-size: 17px ">博物馆新闻</router-link>  </div><div style="width: 100%; color: #b0b0b0; margin: 25px 10px"> <router-link to="/news" style="color: #6a737d;font-size: 17px ">行业动态</router-link>  </div></el-col><el-col :span="6" ><div style="width: 100%; color: #c6cbd1; margin: 25px 10px; font-size: 20px"> 关于 </div><div style="width: 100%; margin: 25px 10px">  <router-link to="/about" style="color: #6a737d;font-size: 17px ">关于我们</router-link> </div></el-col></el-row><div class="mod_help"><p class="coty">商城版权所有 &copy; 2012-2021 XXXX</p></div></div></el-footer><!-- 底栏容器END --></el-container></div>
</template><script>export default {name: 'App',components: {}
}
</script><style>
/* 全局CSS */
* {padding: 0;margin: 0;border: 0;list-style: none;
}
#app .el-header {padding: 0;
}
#app .el-main {min-height: 300px;padding: 20px 0;
}
#app .el-footer {padding: 0;
}
a,
a:hover {text-decoration: none;
}
/* 全局CSS END *//* 顶部导航栏CSS */
.topbar {height: 40px;background-color: #3d3d3d;margin-bottom: 20px;
}
.topbar .nav {width: 1225px;margin: 0 auto;
}
.topbar .nav ul {float: right;
}
.topbar .nav li {float: left;height: 40px;color: #b0b0b0;font-size: 14px;text-align: center;line-height: 40px;margin-left: 20px;
}
.topbar .nav .sep {color: #b0b0b0;font-size: 12px;margin: 0 5px;
}
.topbar .nav li .el-button {color: #b0b0b0;
}
.topbar .nav .el-button:hover {color: #fff;
}
.topbar .nav li a {color: #b0b0b0;
}
.topbar .nav a:hover {color: #fff;
}
.topbar .nav .shopCart {width: 120px;background: #424242;
}
.topbar .nav .shopCart:hover {background: #fff;
}
.topbar .nav .shopCart:hover a {color: #ff6700;
}
.topbar .nav .shopCart-full {width: 120px;background: #ff6700;
}
.topbar .nav .shopCart-full a {color: white;
}
/* 顶部导航栏CSS END *//* 顶栏容器CSS */
.el-header .el-menu {max-width: 1225px;margin: 0 auto;
}
.el-header .logo {height: 60px;width: 339px;float: left;margin-right: 100px;position: relative;
}
.el-header .so {margin-top: 10px;width: 300px;position: absolute;right: 1%;}
/* 顶栏容器CSS END *//* 底栏容器CSS */
.footer {width: 100%;text-align: center;background: #2f2f2f;padding-bottom: 20px;
}
.footer .ng-promise-box {border-bottom: 1px solid #3d3d3d;line-height: 145px;
}
.footer .ng-promise-box {margin: 0 auto;border-bottom: 1px solid #3d3d3d;line-height: 145px;
}
.footer .ng-promise-box .ng-promise p a {color: #fff;font-size: 20px;margin-right: 210px;padding-left: 44px;height: 40px;display: inline-block;line-height: 40px;text-decoration: none;background: url("assets/imgs/us-icon.png") no-repeat left 0;
}
.footer .github {height: 50px;line-height: 50px;margin-top: 20px;
}
.footer .github .github-but {width: 50px;height: 50px;margin: 0 auto;background: url("assets/imgs/github.png") no-repeat;
}
.footer .mod_help {text-align: center;color: #888888;
}
.footer .mod_help p {margin: 20px 0 16px 0;
}.footer .mod_help p a {color: #888888;text-decoration: none;
}
.footer .mod_help p a:hover {color: #fff;
}
.footer .mod_help p span {padding: 0 22px;
}
/* 底栏容器CSS END */.flex-grow {flex-grow: 1;
}li.el-menu-item{font-size: 18px;
}</style>

3.5、执行npm run serve启动项目，可见到第一部分的效果图

本章节内容完毕，后续在讲解路由变更、监控路由变化、主要区域容器布局、轮播图、e-tab组件、e-row、e-col组件如何使用。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了博物馆管理系统首页布局，涉及Vue3项目的创建，Vue3 路由，Element-plus 的菜单，Element-plus 的布局等。

这篇关于【Vue3 博物馆管理系统】定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/188334。

相关文章

Vue3绑定props默认值问题

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1：使用 defineProps 定义 Props步骤2：设置默认值总结前言使用T
阅读更多...
Vite 打包目录结构自定义配置小结

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明（1）js 资源分离（2）非 JS 资
阅读更多...
Java集合中的链表与结构详解

Java集合中的链表与结构详解

《Java集合中的链表与结构详解》链表是一种物理存储结构上非连续的存储结构,数据元素的逻辑顺序的通过链表中的引用链接次序实现,文章对比ArrayList与LinkedList的结构差异,详细讲解了链表... 目录一、链表概念与结构二、当向单链表的实现2.1 准备工作2.2 初始化链表2.3 打印数据、链表长
阅读更多...
创建springBoot模块没有目录结构的解决方案

创建springBoot模块没有目录结构的解决方案

《创建springBoot模块没有目录结构的解决方案》2023版IntelliJIDEA创建模块时可能出现目录结构识别错误,导致文件显示异常,解决方法为选择模块后点击确认,重新校准项目结构设置,确保源... 目录创建spChina编程ringBoot模块没有目录结构解决方案总结创建springBoot模块没有目录
阅读更多...
基于Spring Boot 的小区人脸识别与出入记录管理系统功能

基于Spring Boot 的小区人脸识别与出入记录管理系统功能

《基于SpringBoot的小区人脸识别与出入记录管理系统功能》文章介绍基于SpringBoot框架与百度AI人脸识别API的小区出入管理系统,实现自动识别、记录及查询功能,涵盖技术选型、数据模型... 目录系统功能概述技术栈选择核心依赖配置数据模型设计出入记录实体类出入记录查询表单出入记录 VO 类（用于
阅读更多...
SpringBoot利用树形结构优化查询速度

SpringBoot利用树形结构优化查询速度

《SpringBoot利用树形结构优化查询速度》这篇文章主要为大家详细介绍了SpringBoot利用树形结构优化查询速度,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一个真实的性能灾难传统方案为什么这么慢N+1查询灾难性能测试数据对比核心解决方案：一次查询 + O(n)算法解决
阅读更多...
Oracle查询表结构建表语句索引等方式

Oracle查询表结构建表语句索引等方式

《Oracle查询表结构建表语句索引等方式》使用USER_TAB_COLUMNS查询表结构可避免系统隐藏字段（如LISTUSER的CLOB与VARCHAR2同名字段）,这些字段可能为dbms_lob.... 目录oracle查询表结构建表语句索引1.用“USER_TAB_COLUMNS”查询表结构2.用“a
阅读更多...
Windows环境下解决Matplotlib中文字体显示问题的详细教程

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体（以SimHei为例）步骤
阅读更多...
MySQL中的索引结构和分类实战案例详解

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2
阅读更多...
如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2