从0开始搭建vue + flask 旅游景点数据分析系统(二):搭建基础框架
这一期目标是把系统的布局给搭建起来,采用一个非常简单的后端管理风格,可以参考官方的页面
https://element.eleme.cn/#/zh-CN/component/container
下面我们开始搭建,首先,安装一下vue-router,element-ui
npm install vue-router@3
npm install element-ui
然后在src目录下创建layouts文件夹和router文件夹 ,
在layouts文件夹下建立Layout.vue文件
<template><el-container class="container"><el-aside width="200px" style="background-color: rgb(229,227,238)"><el-menu :default-active="activeIndex" active-text-color="#BAA7FFFF" class="el-menu-vertical"><el-menu-item index="/dashboard" @click="navigateTo('/dashboard')">Dashboard</el-menu-item><el-menu-item index="/users" @click="navigateTo('/users')">Users</el-menu-item><!-- 其他菜单项 --></el-menu></el-aside><el-container><el-header class="header"><div class="logo">My Admin</div></el-header><el-main class="main"><router-view></router-view></el-main></el-container></el-container>
</template><script>
export default {data() {return {activeIndex: '/dashboard'};},methods: {navigateTo(path) {console.log(this.activeIndex);if (this.$route.path !== path) {this.activeIndex = path;this.$router.push(path);}}}
};
</script><style scoped>
.container{height: 100vh;border: 1px solid #eee;
}.header {background-color: #ffffff;text-align: center;line-height: 60px;border-bottom: 1px solid #ebeef5;
}.logo {font-size: 20px;font-weight: bold;
}.main {padding: 20px;
}
</style>
在router下建立index.js文件,
import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/layouts/Layout';// 引入页面组件
import Dashboard from '@/views/Dashboard';
import Users from '@/views/Users';Vue.use(Router);const routes = [{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',component: Dashboard,name: 'Dashboard'},{path: 'users',component: Users,name: 'Users'}// 其他子路由]},// 其他路由
];const router = new Router({mode: 'history',routes
});export default router;
因为想访问 /
直接转到 /dashboard
,所以有这行设置:
redirect: '/dashboard',
还需要新建views文件夹,新增两个vue文件Dashboard.vue和Users.vue
<!-- Dashboard.vue -->
<template><div className="dashboard"><h1>Dashboard</h1><!-- Dashboard 内容 --></div>
</template><script>
export default {name: 'Dashboard'
};
</script><style scoped>
.dashboard {/* 样式 */
}
</style><!-- Users.vue -->
<template><div class="users"><h1>Users</h1><!-- Users 内容 --></div>
</template><script>
export default {name: 'Users'
};
</script><style scoped>
.users {/* 样式 */
}
</style>
修改main.js ,引入上面我们新增的内容:
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')
运行程序:
npm run serve
效果:
相关文章:

从0开始搭建vue + flask 旅游景点数据分析系统(二):搭建基础框架
这一期目标是把系统的布局给搭建起来,采用一个非常简单的后端管理风格,可以参考官方的页面 https://element.eleme.cn/#/zh-CN/component/container 下面我们开始搭建,首先,安装一下vue-router,element-ui npm insta…...
【过滤器 vs 拦截器】SpringBoot中过滤器与拦截器:明智选择的艺术(如何在项目中做出明智选择)
文章目录 SpringBoot 过滤器 vs 拦截器过滤器 (Filter)定义特点使用场景实现步骤创建过滤器类注册过滤器(可选,如果不使用 WebFilter 注解) 拦截器 (Interceptor)定义特点使用场景实现步骤创建拦截器类注册拦截器 过滤器与拦截器的比较实际项…...

2024-06学习笔记
1.事务与数据库链接的占用 如果用Transactional注解,那在第一次与数据库交互的时候,就会打开数据库链接,再整个方法执行完,才会关闭数据库链接。 即使后边用的事务传播是required_new,那之前的事务也是被挂起,不会被…...

【VUE】封装一个追随鼠标的漂浮组件框架
红色箭头代表鼠标位置,蓝色区域跟随鼠标出现,鼠标进行其他操作的时候,蓝色区域隐藏。 vue全码 <template><divmousemove"updatePosition"mouseleave"hideDiv"class"container":style"{ positi…...
mapstruct与lombok结合使用
问题 如果同时使用mapstruct与lombok,需要多添加一个lombok支持mapstruct的依赖库。 解决 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId> </dependency><dependency><groupId&…...
【SpringBoot】Web开发之URL映射
RequestMapping("/getDataById/{id}") public String getDataById(PathVariable("id") Long id){ return "getDataById:"id; }46 如果URL中的参数名称与方法中的参数名称一致,则可以简化为: RequestMapping("/get…...

对递归的一些理解。力扣206题:翻转链表
今天在刷力扣的时候,在写一道翻转链表的题目的过程中,在尝试使用递归解决该问题的时候,第一版代码却每次都返回的是null,这个错误让我尝试去debug了一下,最终找出了问题,并且让我对递归有了一些更深的理解&…...
Kafka面试三道题
针对Kafka的面试题,从简单到困难,我可以给出以下三道题目: 1. Kafka的基本概念与优势 问题:请简要介绍Kafka是什么,并说明它相比传统消息队列的优势有哪些? 答案: Kafka定义:Apa…...

C/C++编程-算法学习-数字滤波器
数字滤波器 一阶低通滤波器结论推导11. 基本公式推导2. 截止频率 和 采样频率 推导 实现 二阶低通滤波器实现1实现2 一阶低通滤波器 结论 其基本原理基于以下公式: o u t p u t [ n ] α ∗ i n p u t [ n ] ( 1 − α ) ∗ o u t p u t [ n − 1 ] output[n] …...

maven介绍 搭建Nexus3(maven私服搭建)
Maven是一个强大的项目管理工具,它基于项目对象模型(POM:Project Object Model)的概念,通过XML格式的配置文件(pom.xml)来管理项目的构建 Maven确实可以被视为一种工程管理工具或项目自动化构…...

电商项目之如何判断线程池是否执行完所有任务
文章目录 1 问题背景2 前言3 4种常用的方法4 代码4.1 isTerminated()4.2 线程池的任务总数是否等于已执行的任务数4.3 CountDownLatch计数器4.4 CyclicBarrier计数器 1 问题背景 真实生产环境的电商项目,常使用线程池应用于执行大批量操作达到高性能的效果。应用场景…...

【前端 15】Vue生命周期
Vue生命周期 在Vue.js中,了解组件的生命周期对于开发者来说是至关重要的。Vue的生命周期指的是Vue实例从创建到销毁的一系列过程,每个阶段都对应着特定的生命周期钩子(或称为生命周期方法),允许我们在不同的时间点加入…...

PCIe总线-Linux内核PCIe软件框架分析(十一)
1.简介 Linux内核PCIe软件框架如下图所示,按照PCIe的模式,可分为RC和EP软件框架。RC的软件框架分为五层,第一层为RC Controller Driver,和RC Controller硬件直接交互,不同的RC Controller,其驱动实现也不相…...

视觉SLAM第二讲
SLAM分为定位和建图两个问题。 定位问题 定位问题是通过传感器观测数据直接或间接求解位置和姿态。 通常可以分为两类:基于已知地图的定位和基于未知地图的定位。 基于已知地图的定位 利用预先构建的地图,结合传感器数据进行全局定位。SLAM中的全局…...

mysql1055报错解决方法
目录 一、mysql版本 二、 问题描述 三、解决方法 1.方法一(临时) 2.方法二(永久) 一、mysql版本 mysql版本:5.7.23 二、 问题描述 在查询时使用group by语句,出现错误代码:1055…...
Java的@DateTimeFormat注解与@JsonFormat注解的使用对比
Java的DateTimeFormat注解与JsonFormat注解的使用对比 在Java开发中,处理日期和时间格式时,我们经常会使用到DateTimeFormat和JsonFormat注解。这两个注解主要用于格式化日期和时间,但在使用场景和功能上有所不同。本文将详细介绍这两个注解…...

德国云手机:企业移动办公解决方案
在现代商业环境中,移动办公已经成为一种趋势。德国云手机作为一种高效的解决方案,为企业提供了强大的支持。本文将探讨德国云手机如何优化企业的移动办公环境。 一、德国云手机的主要优势 高灵活性 德国云手机具有高度的灵活性,能够根据用户需…...

【React】useState:状态管理的基石
文章目录 一、什么是 useState?二、useState 的基本用法三、useState 的工作原理四、高级用法五、最佳实践 在现代前端开发中,React 是一个非常流行的库,而 useState 是 React 中最重要的 Hook 之一。useState 使得函数组件能够拥有自己的状态…...
商品中心关于缓存热key的解决方案
缓存热key一旦被击穿,流量势必会打到数据库,如果数据库崩了,游戏直接结束。 从两点来讨论:如何监控、如何解决。 如何监控 通过业务评估:比如营销活动推出的商品或者热卖的商品。基于LRU的命令,redis-cl…...

【Python系列】Parquet 数据处理与合并:高效数据操作实践
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...

Rust 开发环境搭建
环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行: rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...

边缘计算网关提升水产养殖尾水处理的远程运维效率
一、项目背景 随着水产养殖行业的快速发展,养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下,而且难以实现精准监控和管理。为了提升尾水处理的效果和效率,同时降低人力成本,某大型水产养殖企业决定…...