自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(33)
  • 资源 (3)
  • 问答 (3)
  • 收藏
  • 关注

原创 echarts多个折线图共用一个x轴和tooltip组件

功能:后端将所有数据传送过来,前端通过监听选中值来展示对应的图表数据。根据接口传来的数据,使用echarts绘制出,共用一个x轴的图表。

2024-03-19 17:18:08 1172

原创 根据接口中的数据,循环出多个echarts图表

根据巨口传来的数据,生成多个echarts图表

2023-08-02 09:32:54 603

原创 解决vue弹窗被遮罩层遮挡和关闭弹窗后遮罩层不消失的两个问题

(1)弹窗被遮罩层被遮罩层遮挡问题;(2)关闭弹窗后,遮罩层不关闭问题;

2022-12-05 19:03:52 7878 1

原创 修改vue-element-admin中导航菜单被激活后的背景色

修改vue-element-admin被选中后的菜单背景色

2022-10-28 16:58:44 3079 1

原创 浏览器中下载了vue扩展程序,控制台却不显示vue,且vue标签是灰色

解决浏览器控制台不显示vue,以及右侧的标签呈现灰色的问题

2022-10-10 16:06:25 8468 1

原创 echarts环形饼图标签字数过长被遮挡

echarts环形饼图标签文字过长被遮挡问题,将文字展示按照需求进行展示

2022-10-09 10:41:29 3544

原创 带阴影可切换年月日的折线图/曲线图

echarts绘制带有阴影面积的折线图,并可以实现年月日的数据切换

2022-09-27 17:38:27 1746

原创 前端开发视频监控(flv / rtmp 格式)

前端基于html或Vue开发视频监控,目前浏览器不支持rtmp格式,所以要讲rtmp格式修改为flv格式再进行开发

2022-07-11 09:31:19 2761

原创 echart地图不显示问题

解决echarts不显示地图问题,echarts5.0以上的版本不支持地图功能,所以需要装5.0以下的版本

2022-06-20 14:51:28 6955 2

原创 通用正则表达式:必填的必须按照规则,非必填的要么为空要么按照规则填

正则表达式不是必填但是填了要符合规则

2022-06-16 19:03:11 1620

原创 vue 城市选择器(省市区)的使用 element-china-area-data

本文参考:Element UI 中国省市区级联数据本文参考:根据此文做的整理2. 使用regionData是省市区三级联动数据(不带“全部”选项)CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市extToCode是个大对象,属性是汉字,属性值是区域码用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京

2022-03-23 13:16:30 23222 2

原创 echarts动态散点图+正弦图背景

echarts动态散点图+正弦图背景:动态效果视频:动态效果视频链接代码:// 正弦波背景function func (x) { x /= 57.2; return Math.sin(x) * 40 + 30;}function sinData () { let sindata = []; for (let i = 0; i <= 360; i += 0.1) { sindata.push([i, func(i)]); } return sindata;

2022-02-28 10:13:31 1157

原创 echarts3D动态柱状图

echarts3D动态柱状图:动态效果视频:动态效果视频链接function generateData () { var data = []; for (var i = 0; i < 50; i++) { for (var j = 0; j < 100; j++) { data.push([i, j * 3.6, Math.floor(Math.random() * 50)]); } } // console.log(data) return

2022-02-28 10:04:12 1416

原创 使用echarts绘制正弦图

echarts绘制正弦图

2022-02-19 14:42:22 1572 1

原创 常用正则表达式

添加正则表达式:<el-form-item label="版本名称" prop="name"> <el-input v-model="addForm.name" placeholder="请输入版本名称" @blur="animate()"></el-input></el-form-item>methods: { handle () { new Date

2021-12-06 14:25:09 246

原创 使用$router.push携带参数进行页面跳转

点击详情后跳转到另一个页面,要求携带当前的id实现:使用router.push进行跳转,拼接id // 详情按钮 clickProductInfoButt (id) { // console.log(111) this.$router.push('/manage_products/product_info?id=' + id) }在另一个页面里的created中去获取该id尝试渲染一个图片data () { return { .

2021-11-15 18:41:41 1387

原创 unable to access ‘‘: OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443解决方法

Administrator@sunliu MINGW64 ~/Desktop/vue (master)$ git clone git://github.com/PanJiaChen/vue-element-admin.gitCloning into 'vue-element-admin'...fatal: unable to access 'https://github.com/PanJiaChen/vue-element-admin.git/': OpenSSL SSL_connect: SSL_E

2021-10-19 17:33:38 1346

原创 echarts柱状图--多y轴实例演示效果

完成效果:第一步:导入echarts// 1.导入echartimport * as echarts from 'echarts'第二步:准备容器<!-- 2.装echarts容器 --><div id="div-border" style="width: 400px;height:300px;"></div>第三步:画表格mounted: function() { this.SA10Chart()},methods: {

2021-09-16 16:39:44 2233

原创 vscode报错:error The “AlarmList“ component has been registered but not used,eslint语法校验

问题描述:组件导入了,且再componets中注册了,也在模板中使用了 ,但是依然报错:error The “AlarmList” component has been registered but not used,组件注册了,但是没有使用。解决方法:在vue项目的根路径下,创建一个vue.config.js文件(注意这个文件要跟package.json在同一个目录中),在该文件中写入如下代码,module.exports = {lintOnSave: false, // 关闭eslint语

2021-09-14 16:28:28 427

原创 element导航菜单的路由跳转(类似Tab栏切换)

实现效果:使用的是一级菜单(类似Tab栏切换)使用路由进行组件的跳转,这里只有路由跳转的代码,不包含样式HTML结构:router是element导航菜单中的属性,实现路由跳转,再用:index来绑定跳转的路径(记得要拼接一个 ‘/’ )<el-container> <el-header style="height:35px"> <el-menu class="el-menu-demo" mode="horizontal"

2021-09-09 10:43:33 4388

原创 vue+echarts饼图

效果:<template> <!-- 2.为echart准备一个具备大小的容器 --> <div id="stat-model" style="width:200px;height:200px"></div></template> <script>// 1.导入echartimport * as echarts from 'echarts'// 3.基于准备好的dom,初始化echarts实例va

2021-09-08 16:23:11 1031

原创 vue横向的table表格

最后的实现效果如下:HTML代码如下::colspan="alarms_models.length + 1"意思是规定单元格可横跨的列数,此处我动态设置为报警设备alarms_models+1,也可以写成colspan="10"<table class="list-table"> <thead> <tr class="table-title"> <th class="tac" :colspan="al

2021-09-07 17:46:50 3962

原创 修改element-ui中时间选择器的样式

最后实现的效果:使用的是element-ui中默认的日期时间范围选择器,下面代码是从element官网复制来的<span class="demonstration">默认</span><el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-d

2021-09-06 16:17:58 3810

原创 Element的input密码框小眼睛(点击眼睛显示密码,再次点击图标隐藏密码)

一、知识点:带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。因为图标涉及点击事件,带 icon 的输入框,采用的是 slot 方式。slot=“suffix” 表示,图标会出现在input 的尾部;二、实现思路要变化的有,图标样式和input的显示方式定义一个flag默认false,绑定input 的type值,flag为true时,type为 text 类型(可以看见数

2021-08-24 17:07:23 8540 6

原创 修改element-ui里的input输入框里的字体颜色和背景透明

标题修改之前的样式修改以后的样式:字体变色,背景透明可以发现在element-ui中把样式都默认了,自己修改的css样式不起作用代码如下:<el-input prefix-icon="el-icon-s-custom" placeholder="请输入账号"></el-input><el-input prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>使用深度选择器<s

2021-08-20 13:52:43 27556 3

原创 MySQL 在 Windows 系统下的安装步骤

MySQL 在 Windows 系统下的安装步骤双击 mysql-installer-community-8.0.19.0.msi,启动 MySQL 安装程序。如果弹框提示如下的警告信息,证明你的电脑需要安装额外的 .NET Framework 依赖包。此时,先退出 MySQL 的安装程序,然后双击 NDP452-KB2901907-x86-x64-AllOS-ENU.exe,启动 .NET Framework 4.5.2 的安装程序。重新启动 MySQL 的安装程序,看到如下界面:

2021-08-12 16:35:34 164

原创 在vscode运行PHP,使用code run 插件,使用及问题解决

在vscode运行PHP,终端运行代码结果下载Code run插件在代码中右键run code就可以直接出结果在vscode中右键run code,出现报错原因:没有配置path路径配置path路径:找到php的路径,复制该路径2. 此电脑-右键:属性-高级系统设置,进行配置3. 配置好后,可以使用【win+R】打开终端输入php -version查看PHP版本,这就代表配置好了重启vscode右键Run Code...

2021-08-05 13:35:33 2951 1

原创 ThingJS摄像机总结

飞行设置摄像机的位置:镜头位置 position 和被拍摄物体的位置 target (又叫目标点)app.camera.position = [x,y,z];app.camera.target = [x,y,z];app.camera.fit 聚焦到某物体:// 盯着某一物体:设置摄像机到物体的“最佳看点”app.camera.fit(obj);// 盯着某一坐标点app.camera.fit({ position: [100, 100, 100], tar

2021-08-03 09:31:33 751

原创 前端面试实战问题总结

面试实战问题总结1. JWT的认证流程—token原理分析客户端将用户名和密码发送到服务器,服务端进行校验,成功后将token返回给客户端,客户端将token进行存储(使用sessionStorage、localStorage方法进行存储),存储完后再次进行请求时,新的请求都会携带这个token发送到服务端,服务端进行校验,如果校验通过就允许客户端去访问服务端开放的接口传统认证流程是用户将用户名和密码发送到服务器,服务器进行校验后将token存储在服务器中,然后向客户端返回一个session_id存入

2021-07-12 23:30:26 492 2

原创 大事件接口项目笔记

Headline大事件后台 API 项目,API 接口文档请参考 https://www.showdoc.cc/escook?page_id=37071587612152171. 初始化1.1 创建项目新建 api_server 文件夹作为项目根目录,并在项目根目录中运行如下的命令,初始化包管理配置文件:npm init -y //安装了package.json文件运行如下的命令,安装特定版本的 express:npm i express@4.17.1 //安装了node_m

2021-06-03 20:48:26 1768 4

原创 富文本编辑器的实现步骤

1. 富文本编辑器的实现步骤添加如下的 layui 表单行:<div class="layui-form-item"> <!-- 左侧的 label --> <label class="layui-form-label">文章内容</label> <!-- 为富文本编辑器外部的容器设置高度 --> <div class="layui-input-block" style="height: 400px;">

2021-06-03 20:46:07 821

原创 大事件项目

0. 资源地址线上 DEMO 项目地址:http://www.escook.cn:8086/项目的 API 文档接口地址: https://www.showdoc.cc/escook?page_id=37071587612152171. 项目前期的准备工作1.1 初始化项目结构将 素材 目录下的 assets 和 home 文件夹,拷贝到 code 目录下在 code 目录下新建 login.html 和 index.html 页面1.2 使用GitHub管理大事件的项目在 co.

2021-06-03 20:42:53 2136 4

原创 任务列表案例

1.初始化项目打开【阶段五/05.组件基础】文件夹,按下【shift键+鼠标右键】打开终端,在终端运行以下命令,初始化 vite 项目:npm init vite-app todos安装依赖包:npm install安装 less 语法相关依赖包:npm i less -D运行项目:npm run dev2.梳理项目结构重置 index.css 中的全局样式如下::root { font-size: 12px; }body { padding: .

2021-06-03 19:19:27 1278

基于element-ui的后台管理系统.zip

这是一个后台管理系统,里面涉及到组件之间的切换(点击导航栏进行各组件的切换)运用到element-ui,下载后运行npm i ,再运行npm run serve

2021-08-29

前端面试宝典.docx

前端面试宝典.docx

2021-07-11

电商项目笔记.md

电商项目笔记.md

2021-07-11

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除