- 博客(46)
- 收藏
- 关注
RSS订阅原创 微信小程序开发踩过的坑
1 swiper使用swiper显示列表时，如果不设置swiper的高度，则数据会显示不完整，网上找了一大堆，小结一下解决：wx.getSystemInfo+scroll-view <swiper class="swiper" style="height: {{clientHeight?clientHeight+'px':'auto'}}" current="{{currentTab}}" duration="200" bindchange="swiperChange"> &
2022-05-18 16:04:24
108
原创 根据概率生成随机数
random(arr1, arr2) { var sum = 0, factor = 0, random = Math.random(); for(var i = arr2.length - 1; i >= 0; i--) { sum += arr2[i]; // 统计概率总和 }; random *= sum; // 生成概率随机数 for(var i = arr2.length - 1; i >= 0; i--) .
2021-08-30 14:04:59
785
2
原创 支付宝或微信小程序，使用canvas时小程序第二次渲染会失败
因为微信小程官方文档有指明:同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作链接指明:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html由：做支付宝小程序，涉及到前端要把图片转为base64,文档支持使用canvas解决，不免会涉及到用户拍完照，不想使用该照片，返回主页面，再选择拍照时，由于第一次已经渲染了，第二次使用.
2021-08-19 15:23:11
1446
原创 前端下载文件流
let blob = new Blob([res], { type: `application/vnd.openxmlformats-officedocument.spreadsheetml.shee` });//res就是后端接口返回的文件流;type是文件类型，此处类型是xlsx let href = window.URL.createObjectURL(blob); let downloadElement = document.createElement('a'); do...
2021-08-11 09:34:06
245
原创 el-table设置固定高度
:row-class-name="'rowStyle'"//el-table标签里 :row-style="{ height: '48' }" //el-table标签里 /deep/ .admin-table .rowStyle { height: 48px; line-height: 48px; } /deep/ .admin-table .el-table td { padding: 0; }
2021-04-27 18:05:45
4225
原创 vue前端导出excell文件列表
1 安装cnpm i file-savercnpm i xlsx2 引入外部文件 文件名自定义 eg:‘Export2Excel.js’/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from 'xlsx'function generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var .
2021-04-07 17:41:37
243
原创 vue中 Echarts之柱状图、饼状图、曲线图（x轴缩放）
安装cnpm i echartsimport echarts from "echarts"Vue.prototype.$echarts = echarts1 柱状图* 参数解释//1 ID名//2 柱状图标题//3 x轴描述//4 y轴数据//5 y轴最大刻度 drawBar(sysDiv, textTitle, xData, yData, maxYNum) { let myBarChart = this.$echarts.init(document.getEle
2021-04-06 15:46:13
910
原创 Git分支合并（命令操作）
//自己分支test的代码合并到主分支dev//git checkout test 自己分支代码，右击就是test# 1 git add .# 2 git commit -m '描述'# 3 git checkout dev# 4 git pull origin dev# 5 git checkout test# 6 git pull origin dev //如果报错，说明有冲突，解决一下冲突，vscode的话直接看代码暂存区就行了，标红的就是冲突// 解决完冲突 # 6-1 git
2021-03-30 11:44:48
334
原创 leaflet地图之 获取经纬度
import "L.Control.MousePosition.css";import "L.Control.MousePosition.js";L.control.mousePosition({ position: "bottomleft" }).addTo(this.omap);
2021-03-19 10:03:59
2102
原创 leaflet中的工具条:放大、缩小、画笔、线量、面量、全屏
import "leaflet-measure-path";import "leaflet-measure-path/leaflet-measure-path.css";//要引入样式import "leaflet-editable"; onToolbarClick(type) { let self = this; switch (type) { case "zoomIn": //缩小 this.omap.zoomOut(); //减小地
2021-03-18 09:05:54
1495
原创 百度地图(＜baidu-map＞)
1 安装 cnpm i vue-baidu-map --save2 引入 import Vue from 'vue' import BaiduMap from 'vue-baidu-map'3 useVue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'xxxxxxxxxxxxxxxx' })4 使用//组件 <.
2020-12-16 10:16:08
3612
3
原创 vue中使用element开发后台管理系统遇到的问题
1 菜单menu的激活项 可通过$route.path :default-active="$route.path" 2 路由配置中，想携带自定义的信息，可添加一个meta3 Table-column Scoped Slot 表格中也存在slot -自定义列的内容，参数为 { row, column, $index } row就是行数据4 删除数据 axios.delete()5 删除数据需要获取id，可通过slot插槽中的row获取6 组件中的click是自定义事件(在组件中定义的)，但能触
2020-12-15 14:39:08
617
原创 小程序接口封装
function request(method,url,config={}){ return new Promise((resolve,reject)=>{ uni.request({ url, method, data:config.data, dataType:config.dataType, header:config.header, success: resolve, fail:reject })})}const get = (url
2020-12-06 12:39:27
90
原创 商品求和和总价,获取元素高度
1 小程序中商品求和和总价//总数total(){ let arr = [] //拿到所有的商品 const products = this.data.products for(let i = 0;i<products.length;i++){ const goods = products[i].goods arr = [...arr,...goods] } //console.log(arr) //找到所有total不为0的数据 //con
2020-10-27 19:07:46
258
原创 小程序基础
小程序1 view 相当于 div 、 text 相当于 span 、block 相当于 2 判断 wx:if 、wx:elif 、 wx:elseEg:<view> <text wx:if="{{scord > 60}}">好</text> <text wx:elif="{{scord > 54}}">中</text> <text wx:elif="{{scord > 53}}">还行<
2020-10-22 16:18:52
191
原创 react draftjs富文本编辑器使用
import React, { Component } from 'react';import { Editor } from 'react-draft-wysiwyg';import { EditorState } from 'draft-js';import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';import dtohtml from "draftjs-to-html"// Draft 富文本编辑器class Draft ex
2020-10-16 15:14:04
678
原创 react中的通信
1 e.currentTarget.dataset 就可获取标签上所有的自定义属性eg:import React, {Component} from "react"class xxx extends Component { ...//省略代码 fun(e){ console.log(e.currentTarget.dataset) //就是所有的自定义的类名 ,比如可添加一个属性表示id data-id="xxx" data-xxx="xxx" }}
2020-10-09 20:37:14
182
原创 webpack打包 vue
识别.vue 文件 需要安装的插件vue-loadervue-template-compiler使用vue-loader中的插件 VueLoaderPlugin使用@，就是使用webpack中的resolve配置const path=require("path") resolve:{ alias:{ "@":path.resolve(__dirname,"./src"), } }...
2020-09-29 19:23:36
87
原创 拆分打包的文件
页面引入了第三方库（eg:jquery文件）， 没有配置SplitChunksPlugin(在插件中，直接使用不需安装)时，打包时会把入口文件和jquery文件打包在一个文件里在出口文件中 要配置 chunkFilename1 单个入口文件 entry: "./src/main.js", output: { filename: "js/[name].js", chunkFilename:"js/chunk-[id].js",//此选项决定了非入口(non-ent
2020-09-29 19:17:24
385
原创 webpack 入口和出口文件的简单配置
const path = require("path")const HtmlWebpackPlugin=require("html-webpack-plugin");//引入自动生成新的html后可自动引入相关出口js文件的插件const { CleanWebpackPlugin } = require('clean-webpack-plugin');//引入自动删除上一次打包的文件的插件module.exports = { //入口文件 默认指的是src 下的 index.js
2020-09-28 11:03:08
316
原创 前端跨域问题解决之cors
如果后台(Node) 使用了 cors解决了跨域前台在请求数据时，就直接写对应的后台接口即可，只需要在axios的配置中配置baseURL 前提是要配置好.env 环境变量.env.development新建开发环境的env文件VUE_APP_URL=http://开发环境接口地址.env.production新建生产环境的env文件VUE_APP_URL=http://生产环境接口地址//serve 服务import axios from "axios"const _axi
2020-09-27 20:15:36
186
原创 前端跨域问题解决之代理
如果是前台解决跨域问题 可使用 proxy代理方式 <!-- a b c 前台 a:localhost:8080 要请求后台 c :3000 的数据，但由于跨域 中间隔了一堵墙 b 但墙b既可以被a访问，也可访问c (b就是一个代理，想当于中介) 于是a 让 墙b(就是自己的服务器) 上面的8080 去请求c，把数据给b，b再给a -->1开发环境中 新建 vue.config.js文件//只有一个后台
2020-09-27 20:14:28
478
原创 json-server模拟后台请求数据的基本使用
json-server的使用安装npm i -g json-server创建目录在电脑合适的位置创建一个文件夹，尽量是英文创建db.json在文件夹中创建一个db.json，并进行编辑json中数据对应关系{ "books": [], "users": []}当我们在db.json中写入以下内容时，未来会给你我们提供下列接口GET /books 获取所有信息GET /books/:id 获取单个信息POST /books 新增数据PATCH /books/:id 更新
2020-09-24 18:54:03
154
原创 vuex之state、mutations、actions
Vuexvuex在使用时需要通过new Vuex.Store获取到对应的对象，然后进行相关的配置state用来保存组件中的数据，如果想要修改这里的数据，需要通过mutation进行修改const store = new Vuex.Store({ state: { msg: "Hello Vuex" }})获取到对应state中的数据在想要使用的组件中，我们可以直接通过this.$store.state.msg获取到对应的msg数据<template> <
2020-09-21 20:02:30
244
原创 vuex之modules
modules如果不拆分对应模块，那么未来store中的相关内容会变得臃肿。所以我们可以把不同的组件的数据拆分成不同的模块。命名空间建议给所有的模块都添加命名空间namespaced: trueconst store = new Vuex.Store({ state: {}, modules: { moduleName: { namespaced: true } }})添加命名空间后，我们的mutation和action都会变成 模块名/对应名字se
2020-09-21 20:01:33
171
原创 vue项目部署
项目部署使用vue开发的项目，最终还是HTML CSS JavaScript构建项目npm run build使用该命令可以构建我们的项目，会生成一个dist文件夹，文件夹中就是构建完成的项目部署项目nginx进入到nginx的conf/nginx.conf，修改该文件的配置，添加新的虚拟主机。server { listen 8000; # 监听端口 server_name localhost; # host地址 location / { root
2020-09-17 12:06:07
195
原创 vue中生命周期
生命周期组件声明周期的几个过程创建挂载更新销毁创建beforeCreate (创建前)初始化事件和生命周期后created (创建后)相关数据注入时，这个时候可以获取到data中的值，但是无法获取DOM挂载beforeMount (挂在前)当data数据已经和vue模板渲染出HTML时，页面上还没有内容mounted (挂在后)将编译好的HTML替换到页面上后，这个时候可以获取到真实的DOM更新beforeUpdate (更新前)当data中的值发生变化前，
2020-09-05 16:08:40
78
原创 vue中组件通信
1 父子通信父组件模板在使用子组件标签时，在子组件标签上添加属性xxx，然后把自己的数据作为属性值添加上去子组件中通过props去接受到对应的属性，然后把它当做data使用即可vue-cli写法<template> <div> {{msg}} <Child :msg="msg"></Child> </div></template><script> export default {
2020-09-05 16:05:41
106
原创 class封装promise
class mypromise { constructor(fun) { //fun 就是相当于 (resolve, rejest) => {} this.status = "pading"; this.value = "";//promise状态为fulfilled时，定义一个形参来接收传递的参数 this.errval = "";//p.
2020-08-19 21:53:21
493
原创 闭包
闭包函数执行时创建了一个内部函数，这个内部函数作为返回值，或以某种方式保留下来（属性），之后才会调用，这就会形成了闭包 function fun() { var a = 10; // funA的活动对象之中; return function () { //匿名函数的活动对象; alert(a); } } var
2020-08-10 19:00:12
487
原创 webSocket
WebSocket 客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据//前端页面 var connect=new WebSocket("ws://localhost:3000")//参数是要访问的服务器地址 使用的协议是ws协议 connect.onopen=function(){ console.log("开启连接，连接成功"); } connect.onmessage=function(
2020-08-10 18:59:30
106
原创 ajax请求和封装、跨域解决
1 Ajax请求var requestHead=new XMLHttpRequest();//实例化一个ajax请求的对象requestHead.open(method,url,false);//开启一个ajax请求// 参数1 请求的方式(method/post) 参数2 请求的地址 参数3 是否发送同步请求(一般默认，不写)requestHead.send();//发送ajax请求//获取ajax请求的响应数据//获得来自服务器的响应，使用 XMLHttpRequest 对象的 resp
2020-07-29 19:18:33
262
原创 cookie
总结安装cookie中间件 cookie是一种存储数据的方法 使用cookie可以将数组存储起来 他是可以在客户端和服务端穿梭的数据安装命令 yarn add cookie-parser --save使用cookie在要使用cookie的js文件中 var express = require('express'); var app = express() var cookieParser = require('cookie-parser'); // 第三方中间件
2020-07-27 20:23:31
259
原创 js-数组中方法
数组1 存储的一系列相关的数据； 可以任意的数据类型2数组的下标从 0 开始的； 数组是通过 下标 取值数组声明：字面量形式var arr = [1, 32,4]使用关键字newvar arr = new Array();//手动添加值: 指定下标和对应的值arr[0] = 1;arr[2] = 2;使用new关键字传参var arr = new Array(1, 3, 4, 5)3 数组中取值：通过下标获取var res = arr[0]var res1
2020-07-25 12:30:34
108
原创 nodejs连接数据库的方法、post请求
post 请求在js文件中 var express = require('express'); var app = express(); // 考虑到post的请求的参数在请求体内 req.body 所以要安装body-parser来解析请求体中的数据 // 安装body-parser的命令 npm install body-parser --save var bodyparser = require('body-parser'); // 以解析表单提
2020-07-24 19:16:08
653
原创 字符串中方法
字符串 方法字符串的索引值从0开始的；字符串也有长度：字符串的属性： length 获取字符串的长度 var a="hello, " console.log(a.length);//8 标点、空格都计算在长度内1 charAt(index) 获取指定索引值位置的字符 index ： 就是索引值 var A="wzqADC"; console.log(a.charAt(2));//q2 str.concat(str1, str2, str3, …)
2020-07-23 18:32:43
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人