热门标签
热门文章
- 1ChatGPT高效提问—prompt常见用法（续篇三）
- 202机器学习基础-特征工程概念_特征值和目标值的区别
- 3python微信公众号推送_python爬虫_微信公众号推送信息爬取的实例
- 4b站尚品汇学习笔记_lodash uuid
- 5华为OD机试真题 Python实现【最小的调整次数】【2023Q1 100分】_特异性的双端队列 最小的调整次数python
- 6素数快速求法_素数 加速计算
- 72020年物联网发展现状与趋势预测
- 8全网最细！PyCharm 详细使用指南，果断收藏了_pycharm使用手册
- 9webstorm、vscode、HBuilder配置eslint检查
- 10Manjaro Linux 17.0.2 KDE环境安装、配置记录_pacman aria2
当前位置: article > 正文
Vue前端项目-系统监控-数据监控_vue3开发数据监测网页
作者：数据科学灵魂 | 2024-01-30 12:47:41
赞
踩
vue3开发数据监测网页
实现效果:
1、前台vue 项目
创建 src / views / monitor / druid / index.vue 页面， 内容如下：
- <template>
- <div v-loading="loading" :style="'height:'+ height">
- <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
- </div>
- </template>
- <script>
- export default {
- name: "Druid",
- data() {
- return {
- src: process.env.VUE_APP_BASE_API + "/druid/index.html",
- height: document.documentElement.clientHeight - 94.5 + "px;",
- loading: true
- };
- },
- mounted: function() {
- setTimeout(() => {
- this.loading = false;
- }, 230);
- const that = this;
- window.onresize = function temp() {
- that.height = document.documentElement.clientHeight - 94.5 + "px;";
- };
- }
- };
- </script>
2、引入 druid 依赖（之前章节完成）
- <!--阿里数据库连接池 -->
- <dependency>
- <groupId>com.alibaba</groupId>
- <artifactId>druid-spring-boot-starter</artifactId>
- <version>${druid.version}</version>
- </dependency>
3、编写 数据库连接池配置文件application-druid.yml（之前章节完成）
- # 数据源配置
- spring:
- datasource:
- type: com.alibaba.druid.pool.DruidDataSource
- driverClassName: com.mysql.cj.jdbc.Driver
- druid:
- # 主库数据源
- master:
- url: jdbc:mysql://124.70.178.21:3306/ry-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
- username:
- password:
- # 从库数据源
- slave:
- # 从数据源开关/默认关闭
- enabled: false
- url:
- username:
- password:
- # 初始连接数
- initialSize: 5
- # 最小连接池数量
- minIdle: 10
- # 最大连接池数量
- maxActive: 20
- # 配置获取连接等待超时的时间
- maxWait: 60000
- # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
- timeBetweenEvictionRunsMillis: 60000
- # 配置一个连接在池中最小生存的时间，单位是毫秒
- minEvictableIdleTimeMillis: 300000
- # 配置一个连接在池中最大生存的时间，单位是毫秒
- maxEvictableIdleTimeMillis: 900000
- # 配置检测连接是否有效
- validationQuery: SELECT 1 FROM DUAL
- testWhileIdle: true
- testOnBorrow: false
- testOnReturn: false
- webStatFilter:
- enabled: true
- statViewServlet:
- enabled: true
- # 设置白名单，不填则允许所有访问
- allow:
- url-pattern: /druid/*
- # 控制台管理用户名和密码
- login-username:
- login-password:
- filter:
- stat:
- enabled: true
- # 慢SQL记录
- log-slow-sql: true
- slow-sql-millis: 1000
- merge-sql: true
- wall:
- config:
- multi-statement-allow: true
4、安全框架 放行 druid 的匿名访问
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/46548
推荐阅读
- axios可以在浏览器和node里面用原生的问题:无法在node里使用，fetch是在浏览器里使用的。(但是原生可以帮助我们理解。_vue3axiosvue3axios文章目录求一键三连前言认识axios使用Axios常见请求演示配置选项b... [详细]
赞
踩
- 想象一下我们有一个非常耗性能的计算属性list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于list。计算属性值会基于其响应式依赖被缓存，一个计算属性仅会在其响应式依赖更新时才重新计算。一个计算属性的声明中描述的是... [详细]
赞
踩
- 在项目中多处使用到表格组件,所以进行了一个基础的封装,主要是通过antdvue中表格的slots配置项,通过配合插槽来进行封装自定义表格;vue3.2二次封装antdvue中的Table组件，原有参数属性不变vue3.2中的<scri... [详细]
赞
踩
- 在Vue3中，watch与watchEffect是两个非常重要的响应式API。它们可以用于监听数据的变化，并在数据变化时执行相应的操作。本文将详细介绍watch与watchEffect的用法及示例，并对它们进行总结。Vue3watch与wa... [详细]
赞
踩
- Teleport的灵活性使得我们能够将组件的内容渲染到任何位置。无论是在同一个组件内部还是在不同的组件之间，我们都可以通过Teleport将内容渲染到所需的目标元素中。这使得我们能够更好地控制组件的布局和样式，并实现一些复杂的交互效果。Vu... [详细]
赞
踩
amis是百度开源的一个低代码前端框架，它使用JSON配置来生成页面，可以减少页面开发工作量，极大提升效率。_amisvue3amisvue3amisamis是百度开源的一个低代码前端框架，它使用JSON配置来生成页面，可以减少页面开发工作... [详细]赞
踩
- 此处需要关闭element-plus的自动上传,:auto-upload=“false”语法:URL.createObjectURL(…)创建本地预览的地址,来预览。官网地址：https://vueup.github.io/vue-quil... [详细]
赞
踩
- 定义图库抽屉组件_vue抽屉组件vue抽屉组件 ✨✨个人主页:沫洺的主页... [详细]
赞
踩
- 可拖拽控制高度的抽屉组件_vue3tselementplusdrawervue3tselementplusdrawer<template><el-drawermodal-class="app-modal"class="ap... [详细]
赞
踩
- vue3版本watch(1,2,3)接收三个参数。vue3watch理解监听变化vue3版本watch(1,2,3)接收三个参数第1个参数需要监听的数据第2个参数是监听的回调参数回调里常用的两个参数,(一,二)=>{第一个参数是新值,... [详细]
赞
踩
- 手把手教如何封装动态表单组件vue3+antd封装动态表单组件（二）传送带：vue3+antd封装动态表单组件（一）前置条件：vue版本v3.3.11ant-design-vue版本v4.1.1vue3+antd封装动态表单组件（一）是基础... [详细]
赞
踩
- article
Vue3 +ts + eslint 配置 + [git hooks] pre-commit 配置 实现git 提交 阻拦不规则代码（包括console.log、debugger）_vue3添加commit hook
要求在gitcommit之前阻拦不规则代码提交，包括console.logdebugger，包括其他错误。_vue3添加commithookvue3添加commithook需求：要求在gitcommit之前阻拦不规则代码提交，包括conso... [详细]赞
踩
- vue3中v-model无法获取this.$emit('input')的值文章目录前情提要实战解析最后前情提要vue3的v-model已经有了变化，假如你还不知道其中细节，看完这篇文章你就完全明白了，我以踩坑的场景来进行解析。起因是在我的项... [详细]
赞
踩
相关标签
