- 博客(51)
- 收藏
- 关注
RSS订阅
原创 记录一些在绘制前端时的细节优化
适用与所有背景图片设置 地址 -- 平铺方式 -- 所在宽度位置 -- 背景图片大小 background-image: url('../../images/unit/huo.png'); background-repeat: no-repeat; background-position: 10%; background-size:20px 20px...
2018-10-26 18:41:45
320
原创 Promise 多层嵌套运用
let getPosition= () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 2000); }).then(() => { return new Promise((resolve, reject) => ..
2022-01-18 11:19:10
2457
原创 VUE首屏加载优化
1、打包压缩优化，实测初始化加载 17000ms => 3800ms这个优化是两方面的，前端将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件。1.先引入 compression-webpack-plugin 打包插件，注意版本，高版本可能会报错： tapPromise of undefined 。 npm install --save-dev [email protected] 2.vue.confi
2022-01-13 09:50:12
1495
原创 element 模态框内，表单编辑回填的值在关闭时，表单内容无法正确重置问题
element 表单使用 this.$refs[formName].resetFields() 进行数据重置，但重置的初始数据是基于表单第一次渲染时的数据为模板。由于点击编辑时，模态框显示与表单内容渲染是同时进行，所以 el-form 就认为回填值是初始数据，每次重置都以回填值数据来重置表单。解决思路：将回填值赋予表单对象的操作 放入 $nextTick 中延迟进行，让表单对象将空数据认定为初始数据。解决方法 <el-dialog :visible.sync="visible" @cl.
2021-12-22 15:14:12
732
原创 简单 store 全局状态管理
Vue 大型项目中一般使用 Vuex 作为数据存储。但是小项目中存储几个共用数据可以不必使用 Vuex新建 storeEasy.js /* 简单的store模块管理共享状态 vue3 需要加 reactive , 否则不会即时更新视图 */ import { reactive } from "vue" const store = reactive({ state: { age: 6 }, setAge(age) {.
2021-09-07 17:23:11
544
2
原创 个人开发规范要求
函数定义规范方法和 this 关键字是面向对象编程范式的核心。任何用作方法的函数实际上都会饮食收到一个参数，即调用它的对象。通常，方法会在对象上执行某些操作，而方法调用语法是表达函数操作对象这一事实的直观方式。比如下面这两行代码，第一行的方法调用语法更清晰的传达出了对象 rect 才是这个操作的焦点： rect.setSize( width , height ) setRectSize( rect , width , height) CSS类遵从 BEM 命名规范，BEM .
2021-08-24 17:54:01
134
原创 vue3 用后感
好处相比 vue2 更快 更小，开发时搭配 vite 热编译瞬间完成。组合式API 搭配 es6 的语法编写代码很舒适。坏处setup 内编写代码时，页面需要 Import 大量的依赖例如：ref、reactive、getCurrentInstance、useStore、watch、computed 、onMounted 这些频繁使用的必须函数。引起不适，其次语法也不够简洁明了。读写 ref 的操作比普通值的更冗余，因为需要访问 .value，而在模板中又不需要加 .value，这.
2021-08-21 14:35:11
3770
13
原创 本地环境 vue 使用 Axios 请求地址，出现跨域，使用 vue.config 代理解决
错误信息：has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.接口url： /api/customer/login/LoginAxios 设置请求IP： axios.defaults.baseURL =.
2021-08-04 11:57:40
1188
原创 vue 配置运行时环境
npm install cross-env --save 引入依赖package.json 文件中编辑 “scripts” 的属性，然后就可以在项目内读取 process.env.NODE_ENV 属性来做相关配置的判断： "scripts": { "dev": " cross-env NODE_ENV=dev vue-cli-service serve", "prev": "cross-env NODE_ENV=prev vue-cli-service build.
2021-08-04 09:54:20
300
原创 vue3 使用 ECharts 的问题
Vue 3 中，响应式状态都被封装为一个 Proxy 实例（至少 IE11 兼容版发布之前是这样）。如果状态本身也是一个对象，Vue 会默认同时代理其属性（利用 Proxy 特性）。你的代码 this.chart.setOption、this.chart.resize 访问的实际上是被 Vue proxy 代理出来的属性。这里应该出现了引用问题，导致 ECharts 实例的某个方法调用失败。解决办法 1使用单纯的 JS 变量储存 ECharts 实例（而不是使用 Vue 响应式状态）：.
2021-07-31 15:59:13
1293
原创 vue3 + vite 中使用 three.js
cnpm install three --save需要的页面 import * as THREE from “three” 引入即可开发，也可以按需引入问题引入 OrbitControls (相机轨道控制器) ： import OrbitControls from ‘three/examples/js/controls/OrbitControls’抛出异常 ReferenceError: THREE is not defined ，遂面向谷歌寻找方案 ，辗转腾挪最后在 这里 找到了问题.
2021-07-29 22:24:53
2519
原创 云闪付小程序 转 微信小程序 ( vue ＞＞ mpvue ＞＞ wxApplets ) 记录
创建mpvue项目安装脚手架npm install vue-cli -g创建基于mpvue的项目 选项全部回车Yes，ESLint 选 Novue init mpvue/mpvue-quickstart firstappVScode 打开项目，执行 cnpm install 安装依赖npm run dev会发现文件夹内多出 dist 文件夹，里面的 wx 就是 run dev 编译出的 微信小程序代码使用微信小程序导入 dist 里的 wx ，将编辑器设置为保存时自动编译 (正常
2021-07-21 18:40:34
2633
2
原创 CSS揭秘及自身补充
自适应方案框架的宽高使用视口相关的单位（vw、vh、vmin 和 vmax）来控制，内容的高宽使用 rem 单位控制通过 根元素 html { font-size:10px } 制定 1rem == 10px当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。不要忘记为替换元素（比如 img、object、video、iframe 等）设置一个 max-width，值为 100%。在使用多列文本时，指定 colu.
2021-07-21 10:14:31
150
原创 可迭代对象与迭代器(Iterator)和生成器(Generator)
用循环语句迭代数据时，必须要初始化一个变量来记录每一次迭代在数据集合中的位置，于是 ES6 向 JS 中添加了这个迭代器特性。新的数组方法和新的集合类型 ( 例如 Set 集合与 Map 集合 ) 都依赖迭代器实现。你也会发现在语言的其他特性中也都有迭代器的身影：新的 for / of 循环、展开运算符 ( … ) ，甚至连异步编程都可以使用迭代器。什么是迭代器迭代器是一种特殊对象，它具有专门为迭代过程设计的接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。该对象有.
2021-06-30 17:32:20
277
1
原创 Map、Set、weakMap、weakSet 使用方式
Map，键唯一的 键值对数组，任何值(对象或者原始值) 都可以作为一个键或一个值。键是强引用存储常用方法：set 、get 、has 、remove 、clear 、size使用 forEach 去访问 Set 集合元素，forEach 返回的三个值分别是 value , key , Map 集合本身 let map = new Map([ [ '我是键', '我是值' ] ]); // 初始化 Map 及加入一个键值对 map.set( [ '小左', '程序员' ] ); //.
2021-06-29 10:06:14
199
原创 vite + vue3 开发记录
scss /deep/ 报错，请使用 :deep(.select) 深度赋值。使用 …mapState ( [ ‘menu’ ] ) 获取的值为 null，是因为 store 使用了 Module 实现。改成以下写法： //1. mapState 中基于 moduleName 访问 ...mapState({ menu: state => state.login.menu, }) //2. 在模块中开启命名空间 modules: { login: { na.
2021-06-26 14:50:01
272
原创 vue 完整的导航解析流程
导航被触发在失活的组件里调用 beforeRouteLeave 守卫调用全局的 beforeEach 守卫在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)在路由配置里调用 beforeEnter解析异步路由组件在被激活的组件里调用 beforeRouteEnte调用全局的 beforeResolve 守卫 (2.5+)导航被确认调用全局的 afterEach 钩子触发 DOM 更新调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建.
2021-06-25 11:03:47
222
原创 高德 Web JS 常用方法 与 API
地图 new AMap.LngLat(lng, lat); // 创建一个标准经纬度点 this.map.setCenter([lng, lat]); // 设置地图中心点 this.map.panTo([lng, lat]) // 地图中心点平移至指定点位置 this.map.setFitView(); // 根据地图上的覆盖物元素自动缩放比例以及移动中心点覆盖物 //绘制轨迹 this.poly.
2021-06-23 11:53:01
649
原创 module.exports / exports / export default / export 的使用方法
module.exports 与 exports 是 nodejs 的语法export default 与 export 是 ES6 加入的语法module.exports 的使用方式，假设这是个util.js // 内部暴露 module.exports = { url : 'baidu.com', log : function(text){ console.log(text) } } // 外部引用 import util from './util'
2021-06-08 16:06:00
155
原创 Node 包管理工具 npm 常用命令
i > install-s > --save-d > --save-dev-g > --global引入指定版本的包：@ npm i [email protected]引入到依赖(dependencies) npm i vuex -s引入到开发依赖(devDependencies)，打包时会忽略该引用 npm i vuex -d快速清空 node_modules 依赖包文件夹的工具：rimraf npm i rimraf -g rimraf.
2021-06-08 14:38:02
225
原创 浏览器默认策略记录
浏览器根据 Event 的 isTrusted 属性来区分事件来源false 说明该事件是由 JS 创建的ture 则是由用户手动触发为了安全和友好，浏览器定义了规范，致使浏览器因事件产生的一些默认效果只会响应 isTrusted 为 true 的场景例如：弹出键盘、播放音频如果发现创建的默认效果事件无法产生作用可以设置易触发的用户事件：触摸、鼠标移动 等，来设置效果......
2021-06-08 14:19:13
222
1
原创 JavaScript 防抖与节流
<buttom @click="debounce(fn, 1000)"> /** 防抖函数 * fn 执行方法 * time 等待间隙 */ function debounce(fn, time) { let timer = null; return function () { clearTimeout(timer); timer = setTimeout(() => { fn()..
2021-05-19 11:55:16
67
原创 vue.use 和 vue.prototype 挂载的区别
vue.use( - ) 专注挂载为vue开发的 方法/命令/模板/插件 等函数，该函数必暴露 install方法 import myTable './components/table' export default { install(Vue) { // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vu
2021-04-30 16:07:57
765
1
原创 CSS基础知识点
css的盒模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。元素的总宽度=宽度+左右填充+左边框+左右边距元素的总高度=高度+上下填充+上边框+上下边距BFC (块级格式化上下文)https://zhuanlan.zhihu.com/p/25321647...
2021-04-21 11:18:59
56
原创 vuex sotre配置和使用
模块化sotresotre仓库代码 及 函数注释 import Vue from 'vue' import axios from 'axios' // 参数 ps:外部只读,内部读写 this.$store.state.users const state = { users: [], }; // 过滤的参数 ps:外部只读 this.$store.getters.usersGetter const getters = { user
2021-04-13 16:50:43
136
原创 全局注册vue自定义指令
import Vue from 'vue' const loadmore = { bind(el, binding, vnode) { el.addEventListener("scroll", function() { let sign = 0; let scrollDistance = el.scrollHeight - el.scrollTop - el.clientHeigh..
2021-03-26 15:55:40
175
原创 mixin 全局混入
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 仓库数据 < 给外部引用的 只读 state: { platform: [] }, // 数据变更方法 mutations: { // 外部调用 ：this.$store.com..
2021-03-26 15:50:18
228
原创 vue自定义指令 “下拉加载”
directives: { loadmore: { /* el 绑定指令的dom元素 binding 指令触发的方法 vnode 作用域内容 */ bind(el, binding, vnode) { el.addEventListener("scroll", function () { const sign = 0; const scrollDistance = this.scrol..
2021-03-26 15:18:51
162
原创 Promise.all 和 for中await 的区别
async getInfo (list) { let results = await Promise.all(list.map(async (item) => { let data = await request.post(url, {item.id}) return data ; })); }
2021-03-26 15:11:23
709
原创 VUE3 框架搭建
先配置好node.js按顺序执行以下命令// 安装并配置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm config set registry https://registry.npm.taobao.org/npm config get registry https://registry.npm.taobao.org/// 安装vue3.0脚手架创建项目npm install @vue/cli -g
2021-03-26 15:04:50
209
原创 对代码的简洁优化
对代码的简洁优化对象赋值对于每个属性，JavaScript引擎都必须遍历整个对象链，直到找到匹配项。 如果使用不当，这会占用大量资源，并影响应用程序的性能。 const name = res.data.user.firstname + res.data.user.lastname const user = res.data.user const name = user.firstname + user.lastname 在上述情况下，userResponse可能不是对象，如果是
2020-12-29 16:32:29
179
原创 一个简单的轮播图代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>明月别枝惊鹊</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"&g...
2019-05-07 16:47:30
3225
原创 BCC服务器搭建以及安装Apache服务 与 网站部署和配置网站默认访问路径
1、先购买一个BCC服务器（阿里云、百度云、腾讯云…）2、购买域名绑定服务器（可忽略）3、申请ssl证书绑定域名（可忽略）4、登录服务器控制台 输入以下命令 安装Apache服务 1 安装apache服务 yum -y install httpd 2 设置开机自动启动 systemctl enable httpd 3 启动apache服务器 systemctl st...
2019-04-01 16:02:32
2046
原创 js+jquery批量获取指定特征元素方法
//根据Id/Class/标签获得属性集合 function getAttributeArr(type, Name, element) { var objList; if (type == "class") { objList = document.getElementsByClassNam...
2018-12-10 17:34:32
438
原创 java.lang.StackOverflowError: null
一般很少有人会掉进死循环和无限递归导致栈溢出我的原因是新建了Mapper和Service 没给Mapper写注解导致报错希望对你有帮助
2018-11-12 19:15:34
1446
原创 MySql将查询结果多行合并为一行
GROUP_CONCAT(需要合并的列) SELECT class.classId , GROUP_CONCAT( obj.objId ) AS objId FROM class , obj WHERE class.classId = obj.objId GROUP BY class.classId
2018-11-08 18:10:14
4277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人