官方哈哈-CSDN博客

原创 openlayers地图封装

近期项目中有用到第三方开源的openlayers地图，经过漫长的查阅文档以及收集资料，整理了一套支持地图轨迹回放、地图marker、地图popup以及在地图中绘制任意多边形的功能。粗略的封装了一下可能会有一些瑕疵。有瑕疵的地方希望各位小伙伴指点指点。import "ol/ol.css";import Map from "ol/Map";import View from "ol/View";import OSM from "ol/source/OSM";import XYZ from "ol/so

2021-08-21 10:41:08 919

转载 vue脚手架3.0快速搭建项目详解

这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下**转载于：**https://www.cnblogs.com/coober/p/10875647.html一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpa.

2020-10-28 16:41:33 6448

原创关于vscode中禁止使用cnpm解决方案

最近使用vscode时想用cnpm装依赖发现终端报：解决方案：右击VSCode图标，选择以管理员身份运行；在终端中执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的；这时执行set-ExecutionPolicy RemoteSigned；此时再执行get-ExecutionPolicy，显示RemoteSigned，则表示状态解禁，可以运行此时在vscode的终端中就可以使用cnpm淘宝镜像了...

2020-10-28 10:36:14 756

原创关于splice方法删除数组中的数据的问题

在根据条件删除数组中的数组的时候，发现splice没有处理对应的数组，循环只执行一次。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>测试splice</title>

2020-10-23 15:27:15 1185

原创 Vue中的watch的用法及与computed的区别

vue中watch的用法其实watch它是对data中的数据监听回调，当data中的数据发生变化的时候。监听就会被回调函数中传入两个参数一个newVal另一个为oldVal。watch的使用场景：当data中的某个数据发生变化时，我们需要做一些异步操作以及开销较大的操作。我们就可以是用watch进行监听。watch监听基本数据：：<template> <div class="contain-wrap"> <p>个人信息情况: {{ basicMsg

2020-10-22 23:21:31 425

原创 vue中动态组件使用及传值

在项目中常常需要切换不同的组件，这时候我们就可以使用vue内置的动态组件的方式来实现。component 组件：在页面中通过使用component元素，在根据组件中的is属性来动态的切换不同的组件。demo:<template> //index.vue <div class="contain-wrap"> <input type="button" @click="fatherBtn()" value="点击显示子组件"> <component :

2020-10-16 10:22:23 25848 7

原创关于this.$emit的返回值的问题

最近在做项目时发现想要通过this.$emit自定义的事件中，将事件中的数据返回出来，发现返回的是永远是当前的实例对象。如： getPringRowData(){ return this.$refs[`myGrid${this.id}`].getSelRowData(); },子组件中： directPrint() { //直接打印函数 let printRowData=this.$emit("getPringRowData")

2020-10-14 23:44:48 2167

原创关于Es6中Object.assign()基本使用以及一些规则

Object.assign()：是Es6中的语法，它的作用就是将源对象（source）的所有可枚举属性，复制到目标对象（target）中。Object.assign()：方法第一个参数是目标对象，后面可以接多个源对象，并且返回合并之后的对象。例如： const target = { a: "张德帅" }; const source1 = { a:"郝帅",b: 2 }; const source2 = { c: 3 };Object.assign(target, source1

2020-10-13 19:33:29 482

原创 Vue中混入的使用详情

虽然在项目中很少用到混入的使用，但还是记录一下关于vue中混入的使用。简介：先来讲讲什么是混入吧，借用vue官方的回答就是。混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。通过阅读官方我个人结合demo的理解，就是将混入对象中的数据以及一些方法结合到组件中，可以理解为将这个两种东西融合为一体！接下来我们通过demo来加深理解：钩子函数的共存<template>

2020-10-12 23:59:09 1627

原创 vue组件中点击页面的其它地方将自定的组件进行隐藏

需求:编写一个自定义的组件需要完成一个：点击页面的其他非组件的地方的时候要把这个组件隐藏起来。代码：beforeMount() {//在DOM元素渲染之前开始监听mousedown事件 this._close = (e) => { // 如果点击发生在当前组件内部，则不处理 if (this.$refs.closeSelect.contains(e.target)) { return; } this.isShowSelectL

2020-10-12 14:29:31 565

原创 vue中通过行内样式为元素设置Transform属性。

问题：在项目中我们可能需要动态控制某个元素，想要动态的控制某个元素只能通过使用行内样式来操作。代码： <i class="el-icon-arrow-down" :style="{ transform: `rotateZ(${showarrow})`}"> </i> showarrow() { //计算isShow属性值 return this.ShowSelectList ? "180deg" : "0"; }, ...

2020-10-12 14:10:32 8654

原创 vue中css作用域

问题:大家可能在写项目的时候经常看到style 标签中 scoped 属性，其实这个属性就是为该组件设置私有样式，防止污染其它组件的样式。例如：创建一个组件foodNews，index<template> <div class="container"> <span class="title">为何房价！！！</span> </div> </template><style lang="scss">

2020-10-11 14:34:59 588

原创 egg的基本使用

1.首先在编辑器的终端里面，通过脚手架创建基于egg的项目：mkdir egg-example && cd egg-examplenpm init egg --type=simplenpm i2.编写Controller:如果你熟悉 Web 开发或 MVC，肯定猜到我们第一步需要编写的是 Controller 和 Router//app/controller/user.js 文件路劲const Controller = require('egg').Controller;

2020-09-21 22:45:20 1636

原创基于node搭建的商城后端步骤

1.创建一个文件夹。名字可以随便取2.打开终端(ctrl+`)，输入npm init，之后就会出现一系列配置选项。2.安装koanpm install koa3.在当前文件夹下创建app.js作为入口文件const Koa = require('koa')const app = new Koa()app.use(async (ctx) => { ctx.body = 'Hello Wolrd'})app.listen(3000,()=>{ console.l

2020-09-16 10:20:33 482

原创 uniapp实现input自动对焦

需求：最近在做电商项目的时候使用到了uniapp的搜索插件，但产品经理觉得插件有些不够人性化。需要页面进入就让搜索框处于自动对焦状态代码：<input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!active && mode === 2}" :focus="is

2020-09-13 19:06:46 13078 3

原创微信小程序开发 px转换rpx

前言：最近在编写一个uniapp开源项目时，由于没有UI设计稿就使用浏览器提供的手机调试工具，把项目切换到iphone6作为UI设计稿。大家都知道UI设计师一般都是以750宽度作为视觉稿的标准。接下来先让我们了解一些概念然后再来了解rpx转换px的换算。像素：像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。分辨率:分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334。分辨率又分为【物理分辨率】和【逻辑分辨

2020-09-11 23:42:10 1924

原创 uniapp路由的封装

这里写自定义目录标题新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1.创建一个路由类Routerclass Router { constructor() { this.callBack = () => {}

2020-09-07 20:20:23 2321

原创 soucetree代码回滚到某个历史版本

问题：在多人协作开发的时候，可能会遇到项目经理和你们代码的时候不小心把你的功能给覆盖了。这时候你又重新拉取合并之后的代码。这样导致master分支和develop分支都在没有这个功能，那么sourcetree如何回退到之前的版本去呢？**第一步：**首先把你最新的代码备份一份(这是为了后面与远程仓库同步，因为你回退到之前的版本与远程仓库是不一致的)。**第二步：**切换到sourcetree的History中去，找到对应的提交记录。然后单击右键，找到重置当前分支到此次提交。就会弹出一个对应对话框，选择强

2020-09-07 11:53:36 3208

原创微信小程序真机调试预览呈现空白页面

问题描述：最近使用真机调试微信小程序时，编译没有问题也没有报错，但是真机预览的时候页面空白页。现在教大家如何利用微信小程序提供的调试工具来精确的找到问题的所在。1.首先将小程序编译到手机端，然后按照图片的指示操作这样你就知道什么原因导致页面空白。我的问题是：MiniProgramErrorTypeError: Cannot read property ‘getElementsByTagName’ of undefinedTypeError: Cannot read property

2020-09-02 17:13:16 17735 8

原创关于uniapp报VM52:1 SystemError (appServiceSDKScriptError) Cannot read property ‘forceUpd

这里写自定义目录标题前言：新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言：今天在搭建一个uniapp项目的时候遇到一个问题，使用Hbuilder建立一个空白的uniapp项目，把它运行再微信小程序上面时候发现"真机

2020-08-31 21:29:19 3103

原创 uniapp中如何使用阿里图标

1.访问阿里图标官网下载阿里图标2.将下载的文件拷贝至uniapp的static中3.然后在main.js中导入阿里图标css文件如：import '@/common/font/iconfont.css'//页面使用<text class="iconfont icon-radiochecked"></text>//iconfont 图标 icon-radiochecked 图标名...

2020-08-31 16:57:01 987

原创关于element-ui的upload组件实现自动上传多张图片的功能

## 前言：最近产品经理有个需求就是用饿了么组件上传图片之后自动上传的功能，虽然前面一篇文章有写借用upload组件实现上传文件的功能，觉得实现上传图片的功能应该是小菜一碟没想到做到时候遇到了很大的一个坑。代码：<div class="upload-wrap" v-show="MType != 'Mview'" @click.stop="getIndex(everyindex,index,numindex)"> <el

2020-08-30 17:31:02 2617

原创 uniapp中onReachBottomDistance属性的使用

关于uniapp中onReachBottomDistance在pages.json中的有什么作用一直搞不清楚，通过一个案例让我们来了解它的用处。代码： "style": { "onReachBottomDistance":100, "navigationBarTitleText": "购物车", "enablePullDownRefresh": true, "app-plus":{ "pullToRefresh": { "support": true,

2020-08-22 21:48:25 15523

转载关于formData详细使用教程

formData详细使用教程formData是ajax2.0(XMLHttpRequestLevel2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率**创建formData对象**var formData=new FormData(form); // 通过append()方法追加数据formData.append(“name”,“Lori”);FormData提供的方法For

2020-08-20 18:21:32 396

原创关于使用饿了么的upload组件实现上传文件的功能

upload组件实现上传文件的功能需求利用饿了么组件实现文件上传功能实现需求利用饿了么组件实现文件上传功能最近在写项目的时候利用饿了么upload组件实现上传功能时，遇到了一些坑。主要是在使用组件的时候后端一直获取不到前端上传的文件。然后看到一篇博客https://www.cnblogs.com/zhuqi7758258/articles/10643181.html，利用ForData对象对文件进行处理最终才解决后端获取不到文件的情况。实现upload组件： <div class="uplo

2020-08-20 17:51:57 3745

原创关于el-select组件设置默认值的实现

关于el-select组件设置默认值的实现问题：最近写项目的时候遇到将el-select组件设置默认值需求，通过查阅资料发现很多是使用v-model来实现的，但是只用v-model可能会有一些小小的问题。因此根据他们的进行改变了一下实现方式 el-select组件： <el-select v-model="templateValue" placeholder="请选择模板" @change="selectTm"> <el-option v-for="item

2020-08-20 17:04:51 13930 1

原创 sourcetree拉取代码出错 error: RPC failed； curl 18 transfer closed with outstanding read data remaining

最近在拉取一个github上面的一个项目时报:解决方案：三、解决方法1、第一种方法：少clone一些，每个文件只取最近一次提交，不是整个历史版本git clone https://github.com/xx/xx.git --depth 1 2、第二种方法：加大缓存区git config --global http.postBuffer 5242880003、第三种方法：更换clone链接，使用SSH方式本人是使用第二种方案成功解决问题。如果第二种方法不行的话可以尝试第三种

2020-08-16 17:58:13 600

转载 SourceTree的基本使用

SourceTree是什么拥有可视化界面的项目版本控制软件，适用于git项目管理window、mac可用2. 获取项目代码点击克隆/新建在弹出框中输入项目地址，http或者ssh地址都可以如果箭头指向的仓库类型表明“这不是一个标准的Git仓库”，可能是有以下原因　　　　1) 项目地址获取错误　　　　2) 没有项目访问权限点击“克隆”，等待项目克隆完成，完成后，左侧只有一个分支master　克隆完成后，得到的是发布后的master源码，如果想要获取最新的正在开发中的源

2020-08-16 17:52:41 621

原创 uni-app 全局变量的实现

uni-app 全局变量的实现方式1.公用模块2.globalData3.Vuex1.公用模块定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。示例如下：在uniapp根目录下创建comm目录，然后在common目录下创建一个index.js文件用户定义一些公用的方法const websiteUrl = 'http://uniapp.dcloud.io'; const no

2020-08-02 15:47:48 555

原创关于vuex页面刷新时state中的状态重置问题

在编写项目的时候会遇到刷新页面时，vuex中的状态会被重置的原因产生原因解决方案案例产生原因：由于store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值解决方案：当用户修改了state状态刷新的时候vuex实现又被重新加载了，那怎么办呢？这时候我们可以利用BOM的sessionStorage来进行存储。为什么选择sessionStorage的原因：localStorage是永久存储在本地，除非你主动去删除;s

2020-08-02 13:05:18 1989

原创关于sourceTree一直报fatal:Authentication failed for 的错误解决方案

**问题：**在使用sourceTree的时候由于对账户和密码模糊不清了，输入之后就一直提示身份验证的问题(对于新手来说，这就是sourceTree恶心的地方。)，并且尝试了CSDN上面的所有的解决方案都无果的情况下，最终在一篇论坛中找到了解决方案解决方案：**重置sourceTree密码：**找到sourceTree的安装目录将C：\ Users \ USERNAME \ AppData \ Local \ Atlassian \ SourceTree并删除passwd文件（记得把sourceTre

2020-06-08 19:16:40 9295 5

空空如也

空空如也