- 博客(105)
- 资源 (11)
- 问答 (3)
- 收藏
- 关注
RSS订阅
原创 echarts 绘制省份地图 [ 把不同省份的市合并在一起 ]
安装echartsyarn add echarts效果图：获取任意省市县数据来源json格式注意：这里在请求在写地图数据的时候，我采用的是JQ。使用axios的话会出现错误信息;废话不多说，看代码效果：<template> <div id="container"></div></template><script>import echarts from "echarts";import $ from "jquer
2020-12-16 13:38:24
2311
原创 vue 3.0出现 ERROR Error: Cannot find module ‘vue-loader-v16/package.json‘解决方法
vue 3.0出现 1ERROR Error: Cannot find module 'vue-loader-v16/package.json'解决方法样本：解决方法：使用 cnpm 在下载一次就好了cnpm i vue-loader-v16
2020-11-12 10:31:17
3483
1
原创 前后端交互的几种方式
前后端交互的几种方式前端开发只做两件事：1、 创建页面解构;2、数据交互数据交互尅分为两中：1、后台技术2、从后台拿数据1、 利用cookie前端通过登录来存储cookie后端可以通过 req.cookies() 来获取存储的cookie信息2、 利用ajaxnode.js 之前常用的前后端交互都利用ajax和JQ中已经封装好的ajax;ajax ;ajax;post; $getJSON 通过创建一个XMLhttpRequest对象，来进行前后端交互；node.js
2020-10-10 01:37:26
18886
原创 v-for 绑定key值,不建议使用index (原因详解)
v-for 中的key值：使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;例子：const list = [ { id: 1, name: 'test1', }, { id: 2, name: '
2020-07-10 20:12:46
6866
5
原创 vue3.0 依赖 postcss-px2rem-exclude 插件做自适应
效果图1、下载依赖 cnpm install postcss-px2rem px2rem-loader --svae2、在utils 文件下新建一个rem.js 文件// 基准大小const baseSize = 14 // 设置 rem 函数function setRem() { // 当前页面宽度相对于1440宽的缩放比例，基准宽度可根据自己ui设计图修改。 const scale = document.documentElement.clientWidth / 1
2022-04-28 10:18:40
1132
原创 uniapp 悬浮球【随意拖拽】
先看效果代码具体实现逻辑<template> <view class="hover_ball_cell" :style="{ width: `${diameter}px`, height: `${diameter}px`, top: `${top}px`, left: `${left}px` }" @touchmove="touchmove" @touchend="touchend" @touchcancel="touchcancel" @tap="onTa
2022-03-18 11:11:02
3485
5
原创 uniapp公众号禁止调整字体大小
uniapp公众号禁止调整字体大小把这个自执行函数，放在app.vue即可(function(){//安卓端// 禁止页面改变字体大小if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {// 设置网页字体为默认大小WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });// 重写设置网
2021-09-16 19:26:43
650
原创 在uniapp 中使用百度统计 【精华版】
一、 百度统计官网百度统计的地址二、百度统计添加域名：三、 安转百度统计的代码：这是百度统计的核心代码`在uniapp 中使用
2021-08-10 22:38:14
2712
原创 解析vue2.0和vue3.0 响应式的区别：
vue 3.0 的响应式：3.0 的响应式是采用 es6 里面的 proxy 来实现响应式的；用大白话理解 proxy 的响应式的话：proxy 就是在对象之前设置了一个拦截，当该对象被访问的时候，都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。proxy 里面有13个参数，常用的参数 target 、handler、get、set、deleteProperty例子：new Proxy(data, { // 拦
2021-07-02 22:20:03
409
3
原创 uniapp手写一个日历
效果演示：功能实现思路<template> <view class="calendar-wrapper"> <view class="header" v-if="headerBar"> <view class="preWidth" @click="changeMonth('pre')"> <view class="pre" ></view> </view>
2021-03-23 23:58:47
2048
4
原创 uniapp上传视频或图片(手写原生)
效果演示：html<view class="add_picture"> <label class="title">视频</label><br> <view class="many_photo" v-show="addVideo"> <image src="@/static/icon1.png" @click="test"></image> </view> <view c
2021-03-23 23:44:40
744
原创 绘制饼图点击旋转
效果图演示：具体实现思路：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="chart-nam
2021-01-29 17:08:47
418
原创 JDK （java）安装与环境变量配置(Win10详细版)
jdk的安装地址：安装jdk的在线链接一个jdk的安装程序，我安装的市1.8版本；安装：点击下一步：我在这里并不修改JDK的安装路径，所以无需改动，点击下一步：如下所示：接下来会弹出这个：配置环境变量：鼠标右键 “此电脑” 选择属性，之后会出现一个弹窗，点击 “高级系统设置”：请看下图：点击 “环境变量” 然后会看到这样的画面：关键是下面的内容，用户变量可以不用管：至此你已经完成了所有的准备步骤，接下来就是环境配置了：1.点击“新建”会出现一个弹窗：变
2021-01-06 22:19:35
484
原创 修改element 里面的复选框的默认样式
效果演示：具体的实现思路：.el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #277f7b; color: #fff;}.el-pagination.is-background .el-pager li.active { color: #fff; cursor: default;}.el-pagination.is-background .el-pager li
2021-01-06 18:33:37
1069
原创 vue echarts 地图往下穿透到县
效果图：下载echarts 的安装指令是：yarn add echarts实现的思路：在地图上面绑定上点击事件，在这个点击事件里面传要渲染的到页面即可：全国省市县的json数据省市县的资源包具体的代码实现逻辑：<template> <div> <div> <div @dblclick="backMap" id="container"></div> </div> </d
2020-12-18 19:08:58
1502
原创 vue echarts绘制全国地图
效果展示：安装echartsyarn add echarts地图数据来源：全国数据来源json格式获取任意省市县数据来源json格式设置容器 <div class="echarts"> <div ref="myEchart" :style="{ height: '981px', width: '100vw' }" /> </div>引入文件import echarts from "echarts";import $ fro
2020-12-11 21:43:11
305
原创 element ui组件库使用面包屑组件
效果展示：实现的思路需要在路由的meta中设置breadNumber字段，‘一级页面’不设置breadNumber（因为大部分页面是一级页面，所以就不设置了~），‘二级页面’设置breadNumber=2，‘三级页面’设置breadNumber=3，以此类推…meta的定义：meta简单来说就是路由元信息 也就是每个路由身上携带的信息。meta的作用：有利于我们处理seo的东西，我们在html中加入meta标签，就是有利于处理seo的东西，搜索引擎在面包屑的页面监听路由，路由变化时则触发面包
2020-12-02 22:54:26
2481
1
原创 vue播放视频插件
vue 播放视频的插件是名称是：vue-video-player安装指令是：yarn add install vue-video-player --save在main.js 里面引入插件import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)在组件中使用：
2020-11-21 18:28:14
1615
2
原创 TypeScript 里面的元组详解：
数组和元组的区别：数组就是：数组，是可以存储着一些任意类型或者相同类型数据的集合。元组：我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组;元组中允许存储不同类型的元素，元组可以作为参数传递给函数;说句人话：元组就是，一个数组可以存放不同的数据类型，比如，Sstring，Number，放在一起；这个数组就是元组，下面就详细的介绍一下这个元组：数组：数组的特点：数组定义时无需指定数据类型数组定义时可
2020-11-19 16:32:11
983
原创 TypeScript 入门必看
TypeScript 的简介：TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器>上。TypeScript 和 JavaScript 的区别:1、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。2、TypeS
2020-11-18 17:02:15
105
原创 vue 右键探出菜单
插件名称yarn add install vue-contextmenu --save引入import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)在组件中使用<template> <div> <div id="app" @contextmenu="showMenu" style="width: 100% ;height: 500px
2020-11-17 11:57:08
219
原创 解决渐变色和border-radius的兼容性问题
实现带圆角的渐变边框（border-image和border-radius不能同时生效问题）已知，border-image可以给边框设置渐变效果，border-radius可以设置圆角。然而这两个是不能一起使用的；那我就换一个思路，思路的原理是： 两个div。第一个div设置大一点。第二个img设置小一点，用padding顶一下，就会出现圆色的边框线：具体实现的思路，请往下看： <!-- 头像 --> <div class="headSculpture">
2020-11-12 16:30:20
628
原创 vue3.0按需引入element-ui组件库
1.引入vue add elementHow do you want to import Element? -->选择 Import on demand （关键）Choose the locale you want to load–>选择 zh-CN2.回车后，系统会自动配置引入babel.config.jsmain.jssrc\plugins\element.jsApp.vue 自动将el-button作为范例3.cd src\plugins\element.js修改，
2020-11-11 18:25:40
2418
2
原创 解决移动端兼容问题
解决移动端兼容问题：1、在ios手机上使用 <input type='button'> 属性的disabled 设置为true，会出现文字和背景异常问题；解决方法：使用opacity = 1 ，可以解决这个问题2、 input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题3、 在移动端图片上传图片兼容低端机的问
2020-10-31 23:53:40
388
原创 微信小程序使用视频播放器video组件
在app.json中配置好页面路由和权限。1.app.json { "pages":[ "pages/video/video"],"permission": { "scope.writePhotosAlbum": { "desc": "读取相册" } }}使用video组件2.video.wxml<view class="section tc"> <video id="myVideo" src="ht.
2020-10-18 23:41:42
3155
2
原创 v-if 和v-for的优先级
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中所以，不推荐v-if和v-for同时使用推荐<ul><li v-for="user in activeUsers":key="user.id" >{{ user.name }}</li></ul>## 或者：<ul v-if="shouldShowUsers"><li.
2020-10-12 23:44:50
1350
原创 手写实现递归函数
实现递归函数的思路：将要拷贝的数据 obj 以参数的形式传参声明一个变量 来储存我们拷贝出来的内容判断 obj 是否是引用类型数据，如果不是，则直接赋值即可（ 可以利用 obj instanceof Type 来进行判断），由于用 instanceof 判断array 是否是object的时候，返回值为true, 所以我们在判断的时候，直接判断obj 是否是Array 就可避免这个问题根据判断的不同类型，再给之前的变量赋予不同的类型： [ ] : { }循环obj 中的每一项，如果里面还有复杂
2020-10-12 09:04:26
2137
原创 vue中的data为什么是一个函数？
因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。例子一：function Component() {}Component.prototype.data = { name: "jack",.
2020-10-12 08:58:50
504
原创 作用域和作用域链
什么是作用域：作用域是可访问变量的集合。在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。分为 全局作用域/局部作用域（函数作用域与块级作用域）全局作用域：全局作用域贯穿整个javascript文档，在所有函数声明或者大括号之外定义的变量，都在全局作用域里。一旦你声明了一个全局变量，那么你在任何地方都可以使用它，包括函数内部。事实上，JavaScript默认拥有一个全局对象window，声明一个全局变量，就是为wi
2020-10-10 13:21:06
168
原创 面试题http 和https
1、 http 和https 的基本概念：http : 是互联网上的应用最为广泛的网络协议，是一个客户端请求和应答的标准（TCp）。用于从WWW服务器传输超文本到本地浏览器的传输协议，他可以使用浏览器更加高效，使用网络传输减少。https ：是以安全为目标的http通道，说白就是http的安全版本, 就是http加入了ssl 层，https的安全是基础是ssl，因此加密的详细内容就是需要sslhttps 协议的作用可以分为两种：一种是建立在一个信息安全通到上的，用来保证数据传输的安全；另一种就
2020-10-10 02:15:12
348
原创 小程序中的生命周期
小程序中的生命周期钩子方函数：首先小程序的生命周期函数是在app.js里面调用的，App(Object)函数用来注册一个小程序。接受一个 Object 参数，指定其小程序的生命周期回调；一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。onLaunch() { console.log('onLaunch监听小程序初始化');}onShow() { console.log('onShow监听小程序显示');}onHi
2020-10-03 22:48:15
204
原创 解决小程序中的rich-text标签解析出来的图片大小
模拟请求接口wx.request({ url: 'https://api.it120.cc/small4/cms/news/detail', header: { 'Content-Type': 'application/json' }, success: function(res) { const CONTENT = res.data.data.content.replace( /\<img/gi, '<img st
2020-10-03 22:47:10
947
原创 小程序内组件传值
小程序中的组件传值父传子父组件中的json文件{ "component": true, //设置component为true "usingComponents": { "componentB": "../child2/child2" //这个是引入子组件 }}第二步是在父组件中的wxml中使用子组件中模块<view>
2020-09-28 19:04:23
341
原创 小程序路由跳转
1、保留当前页面 goDel() { wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面 url: "...", //url里面就写上你要跳到的地址 }); },2、 关闭当前页面,跳转到应用内的某个页面 goDel() { wx.redirectTo({ url: "...", //url里面就写上你要跳到的地址 }); },3、关闭所有页面，打开到应用内的某个页面 goDel() {
2020-09-26 18:38:38
104
原创 vue项目打包上线
电商后台管理系统一.项目优化策略生成打包报告第三方库启用 CDNElement-UI 组件按需加载路由懒加载首页内容定制1、生成打包报告打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：① 通过命令行参数的形式生成报告// 通过 vue-cli 的命令选项可以生成打包报告// --report 选项可以生成 report.html 以帮助分析包内容vue-cli-service build --report② 通过可视化的UI面板直接查看报告（推
2020-09-24 23:04:45
316
原创 小程序内封装api网络层
文件说明：1、 http.js 文件的作用是： 封装wx.request2、api.js 文件的作用是：统一管理所有接口;3、 mine.js 文件的作用是： 调用请求接口http.js/** * 这个文件的作用是: * 封装wx.request */module.exports = { http(url, method, params) { // 获取token，自行获取token和签名，token和签名表示每个接口都要发送的数据 let token = "toke
2020-09-24 17:02:05
128
mongodb可视化工具.zip
2020-10-27
musicVueDemoByGanto.zip
2020-05-18
vue（框架 思维导图）.xmind
2020-05-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人