互联网切图仔-CSDN博客

原创基于腾讯地图+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.vue2、代码如下：<template> <div> <div

2021-11-03 15:36:06 1389 2

原创 Vue切换语言（vue-i18n插件）

1、安装插件npm install vue-i18n2、新建语言内容切换的配置文件3、配置文件内容（1）language-en.jsmodule.exports = { title: 'VueI8n usage example', userName: 'userName', pwd: 'password'}（2）language-zh.jsmodule.exports = { title: 'VueI8n使用', userName: '用户名', pwd: '密

2021-10-13 12:01:30 254

原创微信小程序学习篇—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 390

原创 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 1820

原创 Vue学习篇-9、vue3+vite+ant-desigin-vue项目工程化

项目地址项目地址后续会出相关笔记和对项目进行优化，敬请期待

2021-07-25 14:01:43 160

原创日常写BUG-2、获取选中节点的所有父节点

一、场景描述：在使用ant-design-vue的树选择组件(TreeSelect)时，需要获取到旋转节点的所有父节点，并通过数组的形式返回二、实现```javascript/** * @description: * @param {*} tree 树 * @param {*} menuid 选择的节点 * @return {*} */ treeFindPath(tree, menuid) { var path = [

2021-06-17 17:26:59 784

原创日常写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 161

原创实习随笔-12、Vue打包压缩配置

一、安装npm i compression-webpack-plugin@5.0.1npm i image-webpack-loadernpm i webpack-bundle-analyzer -D二、项目根目录下创建vue.config.js1、gzip配置项目const CompressionWebpackPlugin = require('compression-webpack-plugin');module.exports = {configureWebpack: conf

2021-01-25 17:40:11 210

原创实习随笔-11、Vue实现PC端自适应方案

一、安装npm i lib-flexible -Snpm i px2rem-loader -Dnpm 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 426

原创实习随笔-10、process.env前端环境变量配置教程

一、实现原理采用nodejs顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象。）属性，根据各个环境的配置文件区分和切换环境二、具体操作（以vue项目为例）1、安装依赖npm install process2、在根目录新增区分环境的文件例如：开发环境：.env.dev预发布环境：.env.pre生产环境：.env.product.devNODE_ENV = 'development'VUE_APP_TITLE = 'development'/*请求接口地

2020-12-02 10:57:54 512

原创实习随笔-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 153

原创实习随笔-8、antd-vue Table组件根据权限在对应行渲染操作

序言：需求：最近在开发一个功能，是需要根据用户身份与建议书的状态两者的结合来得出用户所拥有的操作，并需要渲染到对应的表格行上面。由于本项目是用antd-vue来进行开发的，笔者也是第一次用这套组件，着实费了我一些功夫才搞出来，用的是比较直观的方法，优化上尚有欠缺，希望各路大佬补充需求实现：代码实现：一、首先，我们要想的是，怎么将这些操作渲染到表格的操作列上面1、我们先来看看，antd-vue Table组件的api，这时我们发现了，在Table 的Column里面，有这样的api，是不是很

2020-11-14 00:41:33 838

原创实习随笔-7、Antd-vue表格分页器设置

序言：最近使用antd-vue进行开发，在使用表格组件Table时，遇到了一个问题，就是表格组件自带分页器，而且分页器的样式和我想要的不一样（应该是和产品要的不一样)，比如自带的是这样的：需求是这样的：实现过程：1、引入Table组件（我是按需引入的）main.jsimport Table from 'ant-design-vue'Vue.use(Table);2、附上页面组件代码在a-table标签内使用:pagination="pagination"绑定分页器属性，然后在dat

2020-11-11 19:35:24 1964

原创实习随笔-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 492

原创实习随笔-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 163

原创实习随笔-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 408 1

原创实习随笔-3、webpack多入口多出口打包

2020-10-29 14:43:06 335

原创实习随笔-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 412 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 102

原创 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 116

原创 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 70

原创 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 91

原创移动端学习篇-2、Flex布局常见属性详解

一、布局原理原理：通过给父盒子添加flex属性，来控制子盒子的排列方式注意：当父盒子设置flex属性之后，子盒子的float、clear、vertical属性都将会失效

2020-08-03 12:07:41 345

原创移动端学习篇-1、二倍精灵图做法

1、在fireworks里面将等比例将精灵图缩放为原来的一半2、根据大小测量坐标3、在代码里面background-size也要写：原来精灵图所选图标宽度的一半

2020-08-02 20:48:37 314

原创 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 110

原创 Vue学习篇-8、使用vue/uni-app搭建微信小程序

一、创建项目1、打开powershell，输入下方命令创建项目vue create -p dcloudio/uni-preset-vue dnpicture2、选择默认模板3、在项目目录下，安装sass依赖npm install sass-loader node-sass二、打开项目1、运行项目npm run dev:mp-weixin2、打开微信开发者工具，预览项目导入文件路径：D:\code\vue\dnpicture\dist\dev\mp-weixin3、看到如下界面

2020-07-29 14:49:09 541

原创 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 115

原创 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 98

原创前端必备学习篇-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 98

原创算法学习篇-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 109

原创 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 127

原创算法学习篇-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 177

原创算法学习篇-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 216

原创算法学习篇-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 111

原创算法学习篇-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 131

原创算法学习篇-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 131

原创算法学习篇-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 141

原创算法学习篇-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 181

原创算法学习篇-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 790

原创算法学习篇-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 119

网页模板库-网页模板素材库431MB

空空如也