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

news2025/2/26 14:27:46

系列文章目录

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

文章目录

  • 系列文章目录
    • @[TOC](文章目录)
  • 前言
    • 1.1、前台用户
      • 1.1.1、用户模块
      • 1.1.2、资讯模块
      • 1.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启动项目，可见到第一部分的效果图
  • 总结

在这里插入图片描述

前言

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

1.1、前台用户

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

1.1.1、用户模块

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

1.1.2、资讯模块

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

1.1.3、藏品模块

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

一、本章节效果图

在这里插入图片描述

二、拆解任务

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

三、动手开干

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 的布局等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/862652.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Ubuntu18.04搭配无人机仿真环境(ROS,PX4,gazebo,Mavros,QGC安装教程)

Ubuntu18.04搭配无人机仿真环境(ROS,PX4,gazebo,Mavros,QGC安装教程)

Ubuntu18.04搭配无人机仿真环境 ROS环境配置版本安装 gazebo安装Mavrosa安装PX4源码下载和编译运行仿真地面站安装 ROS环境配置 我个人使用了代理环境进行下载。Linux没有代理的可以使用国内源。 清华大学源 sudo sh -c ‘. /etc/lsb-release && echo “deb http://m…
阅读更多...
Direct path read LOB

Direct path read LOB

Table full scan &#xff1a; wait event Direct path read because of LOB "Direct path read" Wait Event During LOB Access (Doc ID 2287482.1)​编辑To Bottom In this Document Symptoms Changes Cause Solution References APPLIES TO: Oracle Database …
阅读更多...
《赏金猎人》华为对战平台，新手部署指南！

《赏金猎人》华为对战平台，新手部署指南！

《赏金猎人》是一款休闲联机对战小游戏&#xff0c;目前已免费上架 Cocos Store 资源商城。 本文重点介绍&#xff0c;如何在该游戏中集成华为联机对战能力。 开发环境 Cocos Creator&#xff1a;Cocos Creator 3.7.2Android&#xff1a;Android Studio 3.6.1微信小游戏&#x…
阅读更多...
DenseNet网络分析

DenseNet网络分析

文章目录 DenseNet结构Dense Layer & Dense BlockDense Layer的宽度Transition Layers 对比实验网络结构训练参数对比结果CIFAR-10&#xff0c;CIFAR-100&#xff0c;SVHN ImageNet数据集 进一步分析 从ResNet开始&#xff0c;有很多研究都是琢磨怎么通过提高深度网络中层与…
阅读更多...
【C# 基础精讲】字典（Dictionary）的使用

【C# 基础精讲】字典（Dictionary）的使用

在C#中&#xff0c;Dictionary<TKey, TValue>是一种非常常用的泛型集合类&#xff0c;用于存储键值对&#xff08;Key-Value Pair&#xff09;的数据结构。Dictionary<TKey, TValue>可以根据键快速查找对应的值&#xff0c;因此在需要快速查找和检索数据的场景下&a…
阅读更多...
Lorenz系统最大lyapunov exponent的求解

Lorenz系统最大lyapunov exponent的求解

首先看下Lorenz混沌系统： 赋予初始值，例如： 当然，初始值可以根据需要设定。 看下他的吸引子，很美： 看下他的分叉图：
阅读更多...
【uniapp】使用Vs Code开发uniapp：

【uniapp】使用Vs Code开发uniapp：

文章目录 一、使用命令行创建uniapp项目&#xff1a;二、安装插件与配置&#xff1a;三、编译和运行:四、修改pinia&#xff1a; 一、使用命令行创建uniapp项目&#xff1a; 二、安装插件与配置&#xff1a; 三、编译和运行: 该项目下的dist》dev》mp-weixin文件导入微信开发者…
阅读更多...
SLAM框架与相关理论梳理

SLAM框架与相关理论梳理

应该是思维导图的形式使用markmap实现，可以使用md文档在VSCode中添加插件预览，预览图如绑定的那个资源的样式。 效果大概是长这个样子 > 但是CSDN不好用，一堆乱码。这里建议从这个链接中复制下载md文件，使用VSCode的markmap插件查看，或者直接把md的内容复制到markmap网…
阅读更多...
Java SPI机制详解-01

Java SPI机制详解-01

1. 概述 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是 Java 6 引入了一个内置功能&#xff0c;实现服务提供发现和加载机制&#xff0c;使之与特定接口的匹配。 SPI 机制的核心思想就是 解耦 &#xff0c;将装配的控制权移到程序之外&#xff0c;这…
阅读更多...
多模态图像融合的相关驱动双分支特征分解

多模态图像融合的相关驱动双分支特征分解

文章目录 CDDFuse: Correlation-Driven Dual-Branch Feature Decomposition for Multi-Modality Image Fusion摘要本文方法损失函数 实验结果 CDDFuse: Correlation-Driven Dual-Branch Feature Decomposition for Multi-Modality Image Fusion 摘要 多模态图像融合的目的是使…
阅读更多...
GaussDB之SQL Audit，面向应用开发的SQL审核工具

GaussDB之SQL Audit，面向应用开发的SQL审核工具

前言 我们先从一个SQL语句说起&#xff08;以某传统单机数据库为例&#xff09;。 也许这就是我们业务代码中潜藏的一个SQL语句&#xff0c;对于一个普通开发者来说&#xff0c;这个语句编写工整&#xff0c;逻辑清晰&#xff0c;没有什么问题&#xff0c;可以直接推到代码仓中…
阅读更多...
只需要一个技巧，医疗设备立马大变样！

只需要一个技巧，医疗设备立马大变样！

当谈及医疗领域中的设备运行与维护&#xff0c;蓄电池的监控成为至关重要的一环。医疗设备的顺利运行直接关系到患者的生命安全和医疗工作的有效性。为此&#xff0c;对医疗设备所使用的蓄电池进行实时监控和管理显得尤为关键。 蓄电池监控不仅提高了医疗设备的可靠性&#xff…
阅读更多...
7个位运算符（二进制运算）（左移右移运算符的使用）

7个位运算符（二进制运算）（左移右移运算符的使用）

位运算符运算符运算范例<<左移>>右移>>>无符号右移& 与运算 &#xff08;按位与&#xff09; & | 或运算 &#xff08;按位或&#xff09; ^ 异或运算 &#xff08;按位异或&#xff09; ~ 取反运算 &#xff08;按位取反&…
阅读更多...
Apache-Maven

Apache-Maven

安装Maven 解压apache-maven到目录下 Maven目录如下 bin&#xff1a;目录中存放的是可执行文件&#xff0c;JAVA项目中的编译执行打包都要使用bin. conf:存放的是Maven的配置文件&#xff0c;本地配置、私服配置都需要在conf下的settings.xml进行配置。 lib下存放的是Maven所…
阅读更多...
高精度、抗干扰强、低功耗：双频四模卫星定位导航GPS/北斗模块SKG123LD参考设计

高精度、抗干扰强、低功耗：双频四模卫星定位导航GPS/北斗模块SKG123LD参考设计

北斗定位很好理解&#xff0c;就是通过测量出已知位置的卫星导北斗模块之间的距离&#xff0c;再综合多可卫星的数据计算出北斗模块所在位置的经纬度信息。北斗模块和GPS模块一样&#xff0c;北斗模块被称为用户部分&#xff0c;它像“收音机”捕获并跟踪卫星的信号&#xff0c…
阅读更多...
TreeSize优化Windows磁盘空间

TreeSize优化Windows磁盘空间

TreeSize优化Windows磁盘空间 C盘空间爆红下载连接 C盘空间爆红 最近电脑C盘空间爆红&#xff0c;软件卡顿&#xff0c;从网上下载各种厂商软件辅助清理C盘&#xff0c;效果都不理想&#xff0c;要么提示能给你优化几十G的空间&#xff0c;但是一点击执行&#xff0c;哐哐&…
阅读更多...
Xcode 基座打包

Xcode 基座打包

Xcode基座打包-APP更新版本内容无效 问题&#xff1a;解决&#xff1a; 问题&#xff1a; 使用xcode基座打包之后&#xff0c;上传到appstore进行提审发布。 用户在appstore商城进行更新下载&#xff0c;打开更新后的APP发现版本号是最新的&#xff0c;APP里面的其他内容还是上…
阅读更多...
实现简单通信 JAVA

实现简单通信 JAVA

创建服务端与客户端&#xff0c;再利用Java中socket编程传入传出数据 服务端 import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.io.*; import java.net.*; public class QqMain extends JFrame implements ActionListener{public static void …
阅读更多...
CentOS7 安装远程桌面

CentOS7 安装远程桌面

换源 设置镜像源为清华源&#xff1a; sudo sed -e s|^mirrorlist|#mirrorlist|g \-e s|^#baseurlhttp://mirror.centos.org/centos|baseurlhttps://mirrors.tuna.tsinghua.edu.cn/centos|g \-i.bak \/etc/yum.repos.d/CentOS-*.repo详见 https://mirrors.tuna.tsinghua.edu.…
阅读更多...
【无标题】echarts pieChart legend 图例文字颜色与图例一致

【无标题】echarts pieChart legend 图例文字颜色与图例一致

先看成图效果 首先是封装一个公用的函数 const renderPieEcharts (ele: HTMLDivElement,data: Record<string, any>[],color: string[],titleText: string, ) > {const legendData data.map((item, i) > ({name: item.name,textStyle: {color: color[i],},}))co…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023