- 博客(62)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 基于腾讯地图+Ant-Design-Vue封装省市区联动查询组件
一、腾讯地图key申请 附上教程：腾讯地图key申请 二、在项目加载JS API 在VUE项目的pubilc文件夹下的index.html中加入 <script src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key"></script> 三、组件封装 1、在src>components文件夹下新建MyMap.vue 2、代码如下： <template> <div> <div
2021-11-03 15:36:06
1700
2
原创 Vue切换语言（vue-i18n插件）
1、安装插件 npm install vue-i18n 2、新建语言内容切换的配置文件 3、配置文件内容 （1）language-en.js module.exports = { title: 'VueI8n usage example', userName: 'userName', pwd: 'password' } （2）language-zh.js module.exports = { title: 'VueI8n使用', userName: '用户名', pwd: '密
2021-10-13 12:01:30
393
原创 微信小程序学习篇—1、echarts的使用
一、导入echarts包 通过访问在微信小程序中使用 Apache ECharts (incubating)下载最新的echarts包到微信小程序中 二、初始化 1、创建页面index，该页面包含index.wxml，index.wxss，index.js，index.json四个文件 2、在index.json引入，如下示例 { "usingComponents": { "ec-canvas":"../../common/ec-canvas/ec-canvas" }, "navigat
2021-09-13 14:46:30
556
原创 Electron-Vue学习篇—1、electron-vue项目打包后打开新窗口空白
一、场景描述 在本地运行electron-vue项目时，打开新窗口有显示内容，但经过打包之后，重复同样的操作，新窗口空白，打开Developer Tools，提示"DevTools was disconnected from the page" 二、解决思路 出现"DevTools was disconnected from the page"的提示，说明该页面没有被找到，那就是页面的路径配置错误 1、查看路由配置，采用的是hash模式，这没问题 const router = new VueRouter({
2021-08-31 14:25:43
2393
1
原创 日常写BUG-2、获取选中节点的所有父节点
一、场景 描述：在使用ant-design-vue的树选择组件(TreeSelect)时，需要获取到旋转节点的所有父节点，并通过数组的形式返回 二、实现 ```javascript /** * @description: * @param {*} tree 树 * @param {*} menuid 选择的节点 * @return {*} */ treeFindPath(tree, menuid) { var path = [
2021-06-17 17:26:59
1097
原创 日常写BUG-1、扁平化数组转化为树形数据结果
一、场景 描述：如下图图一，后端返回的数据是这个样子的，但业务我们将这个数据格式转换为树形结构（参考ant-design-vue 树选择组件），如图二 二、实现 function createTree(tree, parentId = 0) { let data = tree.filter(v => v.parentId == parentId) if (!data.length) { console.log(data, 'data'); retur
2021-06-17 17:15:22
263
原创 实习随笔-12、Vue打包压缩配置
一、安装 npm i compression-webpack-plugin@5.0.1 npm i image-webpack-loader npm i webpack-bundle-analyzer -D 二、项目根目录下创建vue.config.js 1、gzip配置 项目 const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: conf
2021-01-25 17:40:11
322
原创 实习随笔-11、Vue实现PC端自适应方案
一、安装 npm i lib-flexible -S npm i px2rem-loader -D npm i postcss-plugin-px2rem 二、进入node_modules,打开lib-flexible/flexible.js，修改 refreshRem()函数，如下 if (width / dpr > 1920) { width = 1920 * dpr; } if (width / dpr < 1300) {
2021-01-25 17:23:12
524
原创 实习随笔-10、process.env前端环境变量配置教程
一、实现原理 采用nodejs顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象。）属性，根据各个环境的配置文件区分和切换环境 二、具体操作（以vue项目为例） 1、安装依赖 npm install process 2、在根目录新增区分环境的文件 例如： 开发环境：.env.dev 预发布环境：.env.pre 生产环境：.env.product .dev NODE_ENV = 'development' VUE_APP_TITLE = 'development' /*请求接口地
2020-12-02 10:57:54
648
原创 实习随笔-9、实现先获取链接再执行跳转
序言： 本次需要实现的功能是从接口拿到返回的图片url，然后通过点击跳转到新页面进行预览。 初步想法：从接口拿到url，直接动态赋值给a标签的href，例如 <a :href='imageUrl' @click=viewTemplate(id) target="_blank" >预览</a> viewTemplate(id){ let _this=this; ajax.getForm({ url:`/v1/consultant/templates/${id}/pi
2020-11-17 10:48:24
237
原创 实习随笔-8、antd-vue Table组件根据权限在对应行渲染操作
序言： 需求：最近在开发一个功能，是需要根据用户身份与建议书的状态两者的结合来得出用户所拥有的操作，并需要渲染到对应的表格行上面。由于本项目是用antd-vue来进行开发的，笔者也是第一次用这套组件，着实费了我一些功夫才搞出来，用的是比较直观的方法，优化上尚有欠缺，希望各路大佬补充 需求 实现： 代码实现： 一、首先，我们要想的是，怎么将这些操作渲染到表格的操作列上面 1、我们先来看看，antd-vue Table组件的api，这时我们发现了，在Table 的Column里面，有这样的api，是不是很
2020-11-14 00:41:33
1040
原创 实习随笔-7、Antd-vue表格分页器设置
序言： 最近使用antd-vue进行开发，在使用表格组件Table时，遇到了一个问题，就是表格组件自带分页器，而且分页器的样式和我想要的不一样（应该是和产品要的不一样)，比如 自带的是这样的： 需求是这样的： 实现过程： 1、引入Table组件（我是按需引入的） main.js import Table from 'ant-design-vue' Vue.use(Table); 2、附上页面组件代码 在a-table标签内使用:pagination="pagination"绑定分页器属性，然后在dat
2020-11-11 19:35:24
2204
原创 实习随笔-6、Antd Vue LocaleProvider中文配置时间组件
1、在vue项目中的main.js中加入以下设置 import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); 2、同样是在main.js中，引入local Provider国际化组件，因为我的组件都是按需引入的，所以需要这样设置 import { ,LocaleProvider } from 'ant-design-vue'; //引入组件，但不用引入样式 Vue.use(LocaleProvider
2020-11-11 19:17:36
594
原创 实习随笔-5、Antd-vue-table 表格自增排序
实现效果： 实现代码： { title: '序号', dataIndex: 'number', key: 'number', scopedSlots: { customRender: 'number' }, width:100, align:'center', // sorter: (a, b) => a.number - b.number, customRender: (text, record, index) => `${in
2020-11-11 14:51:28
249
原创 实习随笔-4、Javascript实现向文件动态写入内容
这次要实现的功能是，实现向一个JS文件动态写入内容，但模板是不变的 实现： 新建一个rename.js，用来实现动态写入内容 let fs = require('fs'); fs.writeFileSync('./name.js', `exports.name = '11'`) 运行这个JS文件，则会向name.js写入exports.name = '11' 改变11—>12,再次运行rename.js，结果如下 exports.name = '12' ...
2020-10-30 15:22:25
552
1
原创 实习随笔-3、webpack多入口多出口打包
一、需求 通过webpack将项目的一个文件目录下的js按照其父目录进行区分打包 大概情况： 文件目录大概： |-- undefined |-- src |-- b2c-ads | | |-- pages | | | |-- app | | | | |-- .js（很多个） | | | |-- cms | | | | |-- .js（很多个） | |
2020-10-29 14:43:06
434
原创 实习随笔-2、nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in
启动nginx报错：nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions) 查错步骤： 1、打开cmd，输入一下命令查看80端口的占用情况， netstat -aon|findstr "80" 2、输入以下命令，查看端口被哪个进程占用，如图，发现被系统占用了 3、猜测可能是IIS的问题，打
2020-10-27 11:44:09
605
2
原创 实习随笔-1、Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run
今天访问服务器，查看docker时候，发现如下报错：Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get http://%2Fvar%2Frun%2Fdocker.sock/v1.40/containers/json: dial unix /var/run/docker.sock: connect: permission denied ，发现自
2020-10-23 13:20:32
174
原创 Javascript学习篇-6、Arguments 对象（关键字）
arguments 是一个对应于传递给函数的参数的类数组对象。 例：** function func1(a, b, c) { console.log(arguments[0]); // expected output: 1 console.log(arguments[1]); // expected output: 2 console.log(arguments[2]); // expected output: 3 } func1(1, 2, 3); arguments对象是所有（
2020-09-24 10:28:08
228
原创 JavaScript学习篇-5、JavaScript中的继承
一、借用构造函数继承父类型属性 // 1、父构造函数 function Father(uname, age) { this.uname = uname; this.age = age; } // 2、子构造函数 function Son(uname, age) { // 通过call()将this指向子构造函数 Father.call(this, uname, age) } var son = new Son('小明', 18); console.log(son); //S
2020-08-12 15:57:20
125
原创 JavaScript学习篇-4、浅谈JavaScript中的浅拷贝和深拷贝
一、浅拷贝 1、浅拷贝：浅拷贝只是拷贝一层数据，如果有更深层次对象级别的，只拷贝其引用地址 实例 var obj = { name: 'zs', age: 20 }; var o = {}; //遍历实现浅拷贝 for (var k in obj) { o[k] = obj[k] } console.log(o); //输出：{ name: 'zs', age: 20 } 当我们obj对象中添加一个对象，然后进行浅拷贝，在对象o修改msg.hobby的值,会发现对象obj也跟着改
2020-08-03 20:25:03
157
原创 移动端学习篇-2、Flex布局常见属性详解
一、布局原理 原理：通过给父盒子添加flex属性，来控制子盒子的排列方式 注意：当父盒子设置flex属性之后，子盒子的float、clear、vertical属性都将会失效
2020-08-03 12:07:41
434
原创 移动端学习篇-1、二倍精灵图做法
1、在fireworks里面将等比例将精灵图缩放为原来的一半 2、根据大小测量坐标 3、在代码里面background-size也要写：原来精灵图所选图标宽度的一半
2020-08-02 20:48:37
393
原创 CSS学习篇-2、css布局技巧
一、巧用margin负值(1) 1、场景描述：当我们要遇到下面这种情况时，会发现边框重叠了 2、解决方法 ul li { float: left; list-style: none; width: 150px; height: 200px; border: 1px solid #333; /*添加margin-left*/ margin-left: -1px; } 二、巧用mar
2020-08-02 11:55:32
176
原创 Vue学习篇-8、使用vue/uni-app搭建微信小程序
一、创建项目 1、打开powershell，输入下方命令创建项目 vue create -p dcloudio/uni-preset-vue dnpicture 2、选择默认模板 3、在项目目录下，安装sass依赖 npm install sass-loader node-sass 二、打开项目 1、运行项目 npm run dev:mp-weixin 2、打开微信开发者工具，预览项目 导入文件路径：D:\code\vue\dnpicture\dist\dev\mp-weixin 3、看到如下界面
2020-07-29 14:49:09
656
原创 JavaScript学习篇-3、null与undefined的区别
一、相同之处 先来比较一下 console.log(null==undefined) //true 则说明，null与undefined的值相等 二、不同之处 console.log(null===undefined) //false 则说明，null与undefined的类型不一样 三、两者区别 当声明的变量还未被初始化时，变量的默认值为undefined，表示缺少值 null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 四、典型用法 1、null表示”没有对象”，即该处不应该
2020-07-27 11:49:43
194
原创 CSS学习篇-1、CSS常用水平垂直居中
一、通过绝对定位+margin来实现水平垂直居中 .box{ width: 300px; height: 300px; background-color: red; position: relative; } .son{ width: 100px; height: 100px; background-colo
2020-07-27 10:54:52
174
原创 前端必备学习篇-1、前端浏览器兼容问题及解决方法之CSS篇
1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同 解决方案：css里增加通配符 `*{margin：0；padding：0}` 2.IE6双边距问题：在IE6中设置了float，同时又设置margin，就会出现边距问题 解决方案：设置display：inline； 3.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度 解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度 4.图片默认有间距 解决方案
2020-07-25 11:09:36
163
原创 算法学习篇-19、搜索插入位置
一、题目 给定一个排序数组和一个目标值，如果在数组中找到目标值则返回索引。如果没有，返回到它将会被按顺序插入的位置。 你可以假设在数组中无重复元素。 样例 [1,3,5,6]，5 → 2 [1,3,5,6]，2 → 1 [1,3,5,6]， 7 → 4 [1,3,5,6]，0 → 0 二、思路 1、遍历数组，如果数组中存在与目标值相等的元素，则返回该索引 2、如果数组中的元素比目标值大，那么目标值插入的位置为比目标值大的第一个元素的位置 3、若数组中的元素都比目标值小，则目标值插入的位置为数组的长度 三、代
2020-07-23 11:39:41
181
原创 Ajax学习篇-2、原生Ajax写法
来自MDN源码 //点击按钮发送请求 <button id="ajaxButton" type="button">Make a request</button> <script> (function() { var httpRequest; //监听点击事件 document.getElementById("ajaxButton").addEventListener('click', makeRequest); //事件处理函数 function m
2020-07-22 13:31:22
199
原创 算法学习篇-18、两数之和
一、题目 给一个整数数组，找到两个数使得他们的和等于一个给定的数 target。 你需要实现的函数twoSum需要返回这两个数的下标, 并且第一个下标小于第二个下标。注意这里下标的范围是 0 到 n-1。 样例 Example1: 给出 numbers = [2, 7, 11, 15], target = 9, 返回 [0, 1]. Example2: 给出 numbers = [15, 2, 7, 11], target = 9, 返回 [1, 2]. 二、思路 1、两个数相加要等于target，则一个数
2020-07-21 21:51:20
288
原创 算法学习篇-17、比较字符串
一、题目 比较两个字符串A和B，确定A中是否包含B中所有的字符。字符串A和B中的字符都是 大写字母 样例 给出 A = “ABCD” B = “ACD”，返回 true 给出 A = “ABCD” B = “AABC”， 返回 false 二、代码 const compareStrings = function (A, B) { let arrA=(A.split('')).sort() let arrB=(B.split('')).sort() if(arrA.length<
2020-07-20 22:06:40
317
原创 算法学习篇-16、最大子数组
一、题目 给定一个整数数组，找到一个具有最大和的子数组，返回其最大和。 样例 样例1: 输入：[−2,2,−3,4,−1,2,1,−5,3] 输出：6 解释：符合要求的子数组为[4,−1,2,1]，其最大和为 6。 样例2: 输入：[1,2,3,4] 输出：10 解释：符合要求的子数组为[1,2,3,4]，其最大和为 10。 二、思路： 1、使用for()循环遍历数组，依次累加 2、当遇到负的和则放弃之前累加的结果，重新进行累加，保留最大值； 用sum记录最终返回的最大和，用temp记录累计值； 三、代码
2020-07-20 11:58:39
204
原创 算法学习篇-15、恢复旋转排序数组
一、题目 给定一个旋转排序数组，在原地恢复其排序。（升序） 样例 Example1: [4, 5, 1, 2, 3] -> [1, 2, 3, 4, 5] Example2: [6,8,9,1,2] -> [1,2,6,8,9] 二、思路： 使用数组排序方法sort()直接排序 三、js代码 const recoverRotatedSortedArray = function (nums) { // write your code here return nums.sort((a
2020-07-20 11:35:34
231
原创 算法学习篇-14、翻转链表
一、题目 翻转一个链表 样例 样例 1: 输入: 1->2->3->null 输出: 3->2->1->null 样例 2: 输入: 1->2->3->4->null 输出: 4->3->2->1->null 二、思路： 1、先判断列表是否为空或者只有一个节点 2、当第一个节点（1）的下一个节点（2）不为null时，则把这个节点（2）插到链表的第一位置，然后第一个节点（1）向后移一位，依次循环，直到下一个节点为null跳出循
2020-07-20 11:30:20
200
原创 算法学习篇-13、搜索二维矩阵
一、题目 写出一个高效的算法来搜索 m × n矩阵中的值。 这个矩阵具有以下特性： 每行中的整数从左到右是排序的。 每行的第一个数大于上一行的最后一个整数。 样例 样例 1: 输入: [[5]],2 输出: false 样例解释: 没有包含，返回false。 样例 2: 输入: [ [1, 3, 5, 7], [10, 11, 16, 20], [23, 30, 34, 50] ],3 输出: true 样例解释: 包含则返回true。 二、思路： 1、先判断当前数组是否包含目标值 2、从坐标[0
2020-07-20 10:51:41
217
原创 算法学习篇-12、二分查找
一、题目 给定一个排序的整数数组（升序）和一个要查找的整数target，用O(logn)的时间查找到target第一次出现的下标（从0开始），如果target不存在于数组中，返回-1。 样例 样例 1: 输入:[1,4,4,5,7,7,8,9,9,10]，1 输出: 0 样例解释: 第一次出现在第0个位置。 样例 2: 输入: [1, 2, 3, 3, 4, 5, 10]，3 输出: 2 样例解释: 第一次出现在第2个位置 样例 3: 输入: [1, 2, 3, 3, 4, 5, 10]，6 输出
2020-07-17 23:39:37
274
原创 算法学习篇-11、Fizz Buzz 问题
一、题目 给你一个整数n. 从 1 到 n 按照下面的规则打印每个数： 如果这个数被3整除，打印fizz. 如果这个数被5整除，打印buzz. 如果这个数能同时被3和5整除，打印fizz buzz. 如果这个数既不能被 3 整除也不能被 5 整除，打印数字本身。 样例 比如 n = 15, 返回一个字符串数组： [ “1”, “2”, “fizz”, “4”, “buzz”, “fizz”, “7”, “8”, “fizz”, “buzz”, “11”, “fizz”, “13”, “14”, “fizz
2020-07-17 22:27:09
1048
原创 算法学习篇-10、合并排序数组 II
一、题目 合并两个有序升序的整数数组A和B变成一个新的数组。新数组也要有序。 样例 样例 1: 输入: A=[1], B=[1] 输出:[1,1] 样例解释: 返回合并后的数组。 样例 2: 输入: A=[1,2,3,4], B=[2,4,5,6] 输出: [1,2,2,3,4,4,5,6] 样例解释: 返回合并后的数组。 二、思路： 1、先合并两个数组 2、然后再对新的数组进行排序 三、js代码 const mergeSortedArray = function (A, B) { var C=
2020-07-17 21:45:45
179
网页模板库-网页模板素材库431MB
2020-07-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人