细雨、-优快云博客

原创关于vue-pdf的使用h5

引用及使用import pdf from 'vue-pdf'export default { name: 'Pdf', components:{ pdf }, data(){ return{ src: "", vuePdf: null, numPages:1, } } }html<pdf :src="src" v-for="i in numPages" :key="i"

2021-12-31 18:10:41 598

首先新建js文件引入js内容var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端// 注册jsbridgefunction connectWebViewJavascriptBridge(callback

2021-12-17 11:43:28 1488

原创支付宝小程序或高德小程序与h5交互

首先呢再index.html上引入<script type="text/javascript" src="https://appx/web-view.min.js"></script>然后就是交互了首先是h5向小程序发送通知并且传值 my.postMessage({ type:val, routing:"badingCar" }); postMessage是小程序定义的方法好像都是一个方法里面的就是传值给小程序的两个值其他

2021-12-17 11:30:21 1589

原创实现ocr上传图片识别各类证件

一：正常的文件上传还是正常的和后端联调后端肯定是会告诉你返回一个图片路径的不返回的话也是自己去拼接的图片链接地址也就是能直接在浏览器打开的地址这里就不多做其他解释了二：ocr能识别imgdata（也就是图片base64的形式）也能imgUrl的形式具体如下：当是base64的时候你需要手动把图片地址转为base如下方法<canvas id="canvas" style="display: none"></canvas> //一定要设置为le

2021-04-21 21:48:00 1087

原创根据后端返回结果高德回显路线

一：先引用高德的key 是一定的其二呢在所在页面引入import AMap from "AMap";二：创建div 设置高宽<div id="all-map" class="map"></div>//css代码.map { z-index: 10; width: 90%; height: 240px;}三：定义方法我这边是init()//由于后端返回的数组不能直接渲染所以需要做转换例如： polylinearr2:[“123.9

2021-04-21 21:29:21 445

原创关于vue使用高德地图vue-amap实现路径规划

1 在main.js里面应用要使用的组件等当然呢要先安装整个vue-amap2 在使用页面中使用 <div class="amap-page-container" style="height: 100vh"></div>//地图的出现 //路径规划的一些详细路线显示 <div id="panel" style=" position: fixed; z-index: 150; bott

2020-10-19 18:46:55 4163

原创表单允许两位小数的不足自动补0 大小限制在0到一万的rules

//首先要rules定义和props 要与后端返回的字段一致 <el-form label-width="80px" ref="addform" style="padding: 0 10px;" :rules="rules" :model="addtableData" > <el-form-item label="价格" prop="thematicPrice">

2020-09-27 17:24:14 598 1

原创 elementui根据后台返回的进行表格分页

先是基础的html代码放上<div class="pagaination-tool" style="display:flex;padding: 8px 0;"> <div class="count-show" style="line-height: 32px;">共{{total}}条</div> <div class="custom-pagination" style="width:80px"> <el-sel

2020-09-27 17:16:12 480

原创 elementui的tree的详细使节点的删除与增加与编辑实现刷新当前树

<el-tree style="width:20%;padding-left: 14px;" :props="defaultProps"//配置 :data="treedata" //数据来源 ref="tree" highlight-current //选中的高亮节点样式 :load="loadNode" draggable :allow-drop=".

2020-09-27 17:09:30 3839 3

原创 html2canvas的使用

在页面生成截图下载1 首先要去安装这个依赖 npm html2canvas2 然后在从页面去应用 import html2canvas from “html2canvas”;3 再从你要截图的整个最大的div 绑定ref 随意定名4 再根据你自己的方法去使用就好了 toImage() { html2canvas(this.$refs.imageWrapper).then((canvas) => { const link = document.c

2020-09-24 15:49:40 2593

转载快速搭建 create-react-native-app

快速搭建 create-react-native-appReact Native 是结合 React + js 来实现混合开发方式启动项目要保证： pc 和 phone 处于同一局域网1…yarn 的源配置 — 国外源 —》国内源（taobao）查看当前 yarn的源` yarn config get registry`修改我们的yarn的源`yarn config...

2019-07-04 20:40:38 1849

原创 react的生命周期的钩子函数

react的钩子函数1. 初始化 constructor(props) 1. 通过super继承父类传递过来的属性 2. 初始化一个状态 3. 用来初始化绑定一个方法（非箭头函数，因为箭头函数的this是存在的），将this传递给这个方法注意： ...

2019-06-18 09:42:10 1680

原创使用高德的poi搜索功能

直接用接口 "https://restapi.amap.com/v3/place/text?keywords=" + this.name + //搜索的内容 "&city=hangzhou" + "&output=JSON" + "&offset=" + 10 + "&page=" + 1 + "&key=

2021-04-21 21:33:12 438

原创 vue 关于elementui -autocomplete 模糊搜索

表单提交中内容中的模糊搜索 <el-form-item label="" prop="trainerName" style="display:block" > <el-autocomplete class="inline-input" v-model="formInline.trainerName" value-key="

2020-09-27 17:57:26 576

原创大视频上传分片及显示进度 vue

封装一个js文件/* * @Descripttion: * @version: * @Author: xumingcai * @Date: 2020-04-15 17:58:03 * @LastEditors: xumingcai * @LastEditTime: 2020-04-20 16:22:45 */import SparkMD5 from 'spark-md5';import axios, { CancelToken, Cancel} from 'axios';impor

2020-09-27 17:43:47 715

原创自动轮播美如画

引入css文件html,body { color: #333; margin: 0; height: 100%; font-family: myriad set pro, helvetica neue, Helvetica, Arial, Verdana, sans-serif}* { -webkit-box-sizing: border-box;...

2019-09-26 11:12:57 559

原创打包后背景图片出不来解决方法亲测有效

需要将config/index.js改为build: { assetsPublicPath: './' //加上这一项}再从function generateLoaders (options) { ... if (options.extract) { return ExtractTextPlugin.extract({ use: ...

2019-09-02 09:48:21 793

原创 vue地图的引用

<template> <div> <div id="map_canvas" class="allmap"></div> <div class="allputin"> <img src="../../assets/img/xiao.png" alt /> <...

2019-08-28 16:01:56 1150

转载 git 命令上传分支

git 命令上传分支配置公钥(私钥在本地)1.配置个人用户信息和电子邮件地址git config --global user.name “用户名 ”git config --global user.email “你的邮箱”git config --list (查看所有配置项)输入如下命令：ssh-keygen -t rsa -C “你的邮箱” --回车直到结束。生成ssh...

2019-07-04 20:42:24 338

转载 redux使用流程

redux使用流程(以todolist 为例 – 增加一条数据 )redux是一个架构思维，我们实现需要一个工具，这个工具叫做redux安装redux$ yarn add redux在src下新建一个store,store中新建index.js用来打造store import { createStore } from 'redux' import reducer from ...

2019-06-20 19:44:28 239

转载 Flux使用流程

Flux使用流程Flux的使用流程要想使用FLux架构思维，需要通过一个工具进行使用，这个工具就是flux安装 flux$ yarn add flux在src目录下新建store目录，里面新建index.jsstore有两个功能存储数据当数据发生改变时，视图要进行更新（当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订...

2019-06-20 19:42:37 245

原创组件中DOM样式

组件中DOM样式行内样式想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现：// 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例...

2019-06-12 20:12:06 231

原创 react的组件

react的函数式组件react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入Re...

2019-06-12 20:07:32 91

原创 react的基础了解与安装

react的基础react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了React的起源和发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后...

2019-06-12 19:57:43 151

原创前端的工程化和自动化

前端的工程化和自动化grunt gulp browserify webpack当今主流 webpack vue react angular当前市面 2 个版本 webpack 3.0 webpack 4.0webpack一、webpack 基础认识（ webpack是一种静态编译工具(预编译) 我们主要研究：入口文件、出口、转换器、插件）...

2019-06-11 21:42:33 910

原创 Vue服务端的渲染

什么是服务端渲染：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完成的html页面，再直接返回给浏览器，以便用户浏览什么是客户端渲染数据由浏览器通过ajax动态取得，在通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染服务端渲染 vs 客户端渲染服务器端渲染需要消耗更多的服务器端资源（ cpu 内存等）客户端渲染可以将静态资源部署到cdn上...

2019-06-10 15:36:40 546

转载生命周期

生命周期生命是生命周期呢？当前组件在创建到销毁经历的一系列过程，称之为生命周期2. 生命周期的分为几个阶段？每个阶段有哪些钩子函数生命周期分为3个阶段，这三个阶段分别是：初始化、运行中、销毁初始化阶段：有4个钩子函数beforeCreatecreatedbeforeMountmounted运行中阶段：有2个钩子函数beforeUpdateupdated销毁阶...

2019-05-29 12:00:17 143

转载过滤器

过滤器过滤器： vue 1.x内部提供提供了 10 个过滤器，这10个过滤器是针对数字纸币符号日期大小写小数位数等的格式化什么叫过滤器？格式化数据的一个工具举例： 12.22225 ---> 12.2 Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) -- ...

2019-05-28 21:23:21 120

转载 transition-动画与动态组件

transition-动画6个类名 v-enter v-leave-to v-enter-active v-leave-activevue中实现过渡或是动画一共提供了这样四种形式：在 CSS 过渡和动画中自动应用 class — 自己写css3动画 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">...

2019-05-28 21:19:37 592

原创 sold插槽

插槽<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><body> <div id="app"> <Hello> <header> 头部 </header> <section> 内...

2019-05-28 21:04:21 107

原创组件化

Vue.js通过Vue.extend() 方法来扩展组件的使用2. Vue.extend( options ) 里面的options参数和 Vue(options) 的options参数几乎是一致的3. new Vue出来的 ViewModel( 视图模型 ) 也是一个组件，我们称之为 ‘根实例组件’ ，叫 ‘Root’ 组件4. Vue中组件的表现形式是类似于标签的，要想像标签一样使...

2019-05-27 17:09:09 136

转载虚拟DOM 和 Diff 算法，key的作用，jsx,render函数

虚拟DOM 和 Diff 算法1.什么是虚拟DOM？使用javascript模拟了DOM结构的树形结构（对象表示），这个树结构包含整个DOM结构的信息2.使用虚拟DOM有什么好处？操作数据要大大的减少性能损耗，提高渲染效率越多的真实dom操作，越损耗性能3.什么是Diff 算法？1.是linux的基础命令，用来比较两个文本文件的差异，是代码版本管理的基石之一2.vdom中应用dif...

2019-05-25 15:13:11 131

转载数据请求：axios vs fetch

首先我们知道数据请求的类型有：get ， post，head， put，delete，option，…等等数据请求在前端开发中的使用有两种形式1.使用原生javascript提供的数据请求：1.1 ajax( 四部曲，一般需要我们结合Promise去封装，使用不是很便利，但是效率很高 ) //四部曲： //1.创建ajax对象 var request = new XML...

2019-05-25 15:08:51 228

转载 computd watch methods和mixin

computd vs watch vs methods项目中：computed计算属性：有逻辑像变量一样使用一定要有return返回值 <div id="app"> <p> {{split_msg}} </p> </div> new Vue({ el:'#app', data:{ ...

2019-05-25 15:00:35 151

转载 Vue模板语法 mustache语法列表渲染事件

Vue模板语法 mustache语法双大括号语法1.指令Vue 指令作用：是用来操作DOM的，指令就是绑定在DOM身上的一个属性，这个属性具备一定的功能，这个功能用来操作DOM以后我们不在像以前一样，先获取DOM，在操作了，我们现在可以直接使用指令来操作DOM这个指令需要模板语法的支持，所以我们采用jsx语法糖2.组件模板语法模板语法支持性还是很高的，数据类型都是支持的，但是不...

2019-05-25 14:52:29 378

转载初识vue

前端框架的发展历史前端工程师（攻城狮）html css + divjs 加入 jqueryMVC angular1.0 react / vue14年2月正式发布vue / 衍生：2016年9月21日，微信小程序正式开启内测。2017年1月9日0点，万众瞩目的微信第一批小程序正式上线，用户可以体验到各种各样小程序提供的服务Vue.js第一次使用什么是框架？...

2019-05-25 14:25:10 87

转载 mongodb的安装

MongoDB下载与安装下载安装包：MongoDB官网地址：https://www.mongodb.com/MongoDB下载地址：https://www.mongodb.com/download-center#community选择适合自己系统的版本进行下载:在这里插入图片描述根据系统下载 32 位或 64 位的 .msi 文件，下载后双击该文件，按操作提示安装即可。下一步...

2019-05-21 15:46:00 153

转载 api接口暴露

测试接口是否正常，我们可以使用测试工具：postman insomniaBE: BackEnd 后端express中一个路由即一个接口,二级路由写在routes文件夹里面对应的.js文件里api接口暴露的方式有两种：第一种：使用模板进行暴露，但是要将数据做字符串转换，然后使用ejs的非转义输出 router.get('/',function( req,res,next ) { ...

2019-05-17 20:53:12 1598

转载 express 中间件（Middleware）

express 中间件（Middleware）中间件是一个函数,函数中参数有三个：request 请求response 响应next 请求和响应中间的循环流程中间件有三种类型应用级中间件路由中间件错误处理中间件前端的请求方式有几种？getpostputdeleteheadall以上的请求方式统称为： restful apirestful是一个规则，这个规则规定了...

2019-05-17 20:49:35 405

转载前端渲染与后端渲染

前端渲染 vs 后端渲染前端渲染是通过ajax请求数据，然后通过js语法将数据展示到页面中，称之为前端渲染后端渲染是通过后端语言 + 后端模板( ejs ) 将页面整个发送给前端后端模板ejspug( jade )art-template现在流行的：前端渲染问题：当前后端同时进行项目开发是，后端数据接口没有写好，但是前端却需要这个接口，这个时候怎么办？分析：需要一段数据...

2019-05-17 20:48:42 492

空空如也

空空如也