- 博客(37)
- 收藏
- 关注
RSS订阅
原创 egg.js(三):基本的增删改查
承接上篇，默认已创建好表，数据模型新增操作新增单条数据方便演示也将数据库相关操作写在Controller层，实际中应抽离到Service层/**app/controller/user.js 目录下*/const Controller = require('egg').Controllerclass UserController extends Controller{ async create(){ // 从post请求的body中解构出参数 let {userna
2021-08-27 00:10:27
1971
原创 Element-ui二次封装一个带图片展示的高通用性table表格
使用Element-ui框架也很久了，最近项目中有个应用场景，如下图示：如上截图，在这个table表格中，有显示类文本，有ima图片，有switch开关，还有数据编辑操作列。话不多说，开撸：首先，在项目文件夹的components中新建CommonTable.bue文件，先生成一个标准的vue页面模板:<template> <div> </div></template><script> export
2020-05-11 17:02:59
1855
原创 js原型以及class语法糖实现
在js中，原型，原型链及原型继承的重要性不言而喻，它不像java等语言通过class来继承: // 父类 public class Person{ private String name, private int age, public Person(String name,int age){ this.name = name this.age = age } ...
2020-04-23 20:06:58
1453
原创 js 解决实时时间刷新精度差不够的问题
vue中使用方法 解决代码如下：//设置时间 export default { methods:{ setClock(systime) { let that = this; clearInterval(this.clockInterval); //设置时间循环，每一秒钟循环一次 let lastTime = null; // let localTime = this.$mo
2022-05-14 15:12:36
686
原创 react函数式组件中使用react-redux
一、背景最近我最近在用react重构公司的项目，但是在使用redux时，我遇到了很多坑，经过多次查找资料,特此记录：二、踩坑过程因为我已经搭建了项目架构，所以这里只从react-redux的使用开始1、安装插件npm i redux react-redux -S2、定义store仓库，action，reducerredux目录结构如下我们先来看看index.js，定义全局 数据仓库/redux/index.jsimport {legacy_createStore as crea
2022-05-12 16:20:08
2955
原创 svg-icon的使用方法【以icon的方式使用自定义svg图标】
借助svg-sprite-loader插件，使我们使用自定义svg图标库，通过组件标签的形式使用，从而使引用svg变得更加容易
2022-04-22 15:55:18
18503
6
原创 Vue3（二）其他特性
teleport// 将包裹的标签移动到body下 <teleport to="body">....</teleport>将teleport标签包裹的元素移到指定的元素下Suspense<Suspense>配合defineAsyncComponent实现组件的异步加载<template> <div> <h1> 父组件 <Suspense> // 需要异步加载的内容 .
2022-02-25 23:23:14
104
原创 Vue3 (一)composition API
ref : 将基本类型包装为响应式(refImp对象，底层基于Object.definePropertype)reactive：将对象类型包装为响应式(基于Proxy)watch：监听watchEffect：全部监听（会自动监听函数体内用到的所有响应式变量）toRef(对象,对象属性)： 将一个非响应式变为响应式常用示例<template> <div> <div>姓名:{{person.name}}</div> <div>.
2022-02-22 23:04:56
431
原创 解决uni-uploadFile上传图片丢失后缀名的问题
本次在使用uni.uplodFile()上传图片时，遇到丢失后缀名导致后台服务器无法解析的问题，特此记录首先放上解决问题前后对比图解决前:formdata filename属性无后缀解决后，filename参数已有后缀，并且为文件名:问题如下：当使用uni-file-picker组件上传图片时，formdata中的filename丢失后缀名，导致后台服务器返回的url无后缀名，图片无法正常显示的问题<uni-file-picker file-extname="
2022-02-22 11:01:07
9180
9
原创 qrcode生成二维码并本地下载
1、npm 安装qrCodenpm install qrcode --save2、代码中引入并使用// xxxx.vue<template> <canvas id="canvas"></canvas><br> <span style="color:#1AB394" @click="handleDownloadCode">立即下载</span></template><script>im.
2021-10-13 10:36:45
2896
1
原创 egg.js(五)：Sequelize之Op模块
承接自之前的 egg.js(三)增删改查操作，对Op操作符进行记录。Op操作符的基本使用async findMultiple(){ // 解构出keyword关键词 let {keyword} = this.ctx.request.body let Op = this.app.Sequelize.Op let res = await this.app.model.User.findAll({ where:{ username:{ // 查询username中有keyword
2021-08-27 14:16:29
1604
原创 egg.js(四) : 属性获取器和设置器
在上一篇egg(三)中，我有提到获取器和设置器的用法，我觉得还是独立出来方便以后复习查找。获取器通过属性获取器对某个查询到的属性进行处理后返回场景：当我获取某条数据，我希望该数据的createdAt返回的是一个时间戳而不是格式。/app/model/user.js 目录文件下定义的模型'use strict'module.exports = app =>{ const {STRING,INTEGER,DATE,ENUM} = app.Sequelize // 配置（重要：一定要
2021-08-27 00:03:58
353
原创 egg.js(二)：egg数据库配置和迁移文件
一、安装安装并配置egg-sequelize插件(它会辅助我们将定义好的Model对象加载到app和ctx上) 和 mysql2模块1、安装npm install --save egg-sequelize mysql22、在config/plugin.js中引入egg-sequelize插件exports.squelize = { enable:true, package:'egg-sequelize'}3、在config/config.default.jsconfig.
2021-08-26 00:22:39
1046
原创 记录：el-form-item中使用v-if导致规则检验不生效的解决办法
今天在项目中遇到一个问题，需要v-if渲染的 el-form-item组件使用prop设置规则校验时不生效：如图，请求链接仅在http协议类型下才有，所以必须使用v-if做条件渲染,但是导致了上述请求链接空时，规则校验未生效。解决办法，给该el-form-item 设置一个key即可...
2021-08-24 11:05:42
1483
原创 el-cascader组件懒加载从服务器拉取数据 以优化性能
这几天在工作中遇到一个场景：在项目中，我需要发送请求从后台拉取所有的部门列表作为下拉框的一级菜单，然后需要根据每一个部门的id从后台获取每个部门的所有人员列表。如下图:乍一看，好像这个需求很容易实现，我只需要在获取每一个部门列表的请求中去拿到id然后在发请求给后台拿到所有的人员列表，并通过一系列数据结构的处理使之成为满足el-cascader要求的结构，如下//Cascader.vue<template> <el-cascader :options="depa
2021-08-16 15:28:26
1565
转载 前端性能优化《一》：vue-cli3中使用external进行cdn配置
前端性能优化《一》：vue-cli3中使用external进行cdn配置
2021-08-10 12:41:32
291
原创 Vue2.0响应式原理(一):监听对象
一、原理Object.definePrototypeVue2.0实现响应式对象的最核心api实现思想通过Object.definePrototype对Vue data中的对象进行处理，在setter方法中，对属性的修改进行监听，一旦数据发生变化，即通知View视图进行更新。二、代码实现响应式对象原理Object.definePrototype只能针对对象做处理监听数组需要使用别的办法// 用于监听数据类型，不同类型进行不同处理function Observer(targe
2021-08-09 16:23:13
923
原创 前端下载文件方式之：创建a标签下载文件
日常工作中，通过a标签下载文件也是相当常见的场景。(后端返回二进制文件流)每一行都有写注释，就不做过多描述，直接上代码/** * @description:签到资料导出 */ handleExportExcel(){ this.exportRequest(`${this.exportExeclUrl}?meetingKey=${this.richengMeetingKey}`,{ }).then(res
2021-08-09 09:31:37
1490
原创 解决koa2中不能使用es6的导入导出语法问题
1、安装babel相关依赖npm i @babel/core @babel/cli @babel/node @babel/plubin-transform-runtime @babel/preset-env --save-dev安装完成后的package.json2、根目录新建 .babelrc文件{ "presets":["@babel/preset-env"], "plugins":["@babel/plugin-transform-runtime"]}讲过上面2个步骤，再.
2020-10-29 15:49:49
1062
原创 启动redis服务器报错：[12048] 27 Aug 14:22:39.631 # Creating Server TCP listening socket 127.0.0.1:6379: bind
今天在启动redis服务时报错，错误信息入下：以前也出现过好几次，但是没有记录，时间久了，再出现这些问题又会浪费时间找资料，所以决定记录下来，以后找起来也更方便。解决办法输入:redis-cli shutdown之后再输入启动命令即可成功启动...
2020-08-27 14:40:12
165
原创 js中获取url中查询参数的3种办法
前端中，获取url中的查询参数是我们经常遇到的问题，下面就列出3种获取查询参数的方法：第一种:通过正则表达式匹配参数（markdown编辑器js注释颜色太暗，故下面汉字需要加 "//"改成js注释在运行）function regExpQuery(name){ 从索引1处开始截取，即舍弃掉"？" let search = location.search.substring(1) 通过正则表达式匹配，例如 ： a=10&b=70&password=90 注意看下面的正则表达式
2020-05-18 10:21:46
3506
原创 echarts中怎么把x轴文字方向设置为竖向
1、调节坐标轴x轴文字为竖直方向xAxis:{ axisLabel: { color: '#333', // 让x轴文字方向为竖向 interval: 0, formatter: function(value) { return value.split('').join('\n') } }}如图，在该位置添加 axisLabel 配置2、.
2020-05-13 22:05:31
23202
原创 html中的标签和meta
1、移动端viewport容器窗口，缩放比例<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,minimum-scale=1,user-scalable=no"><!-- initial-scale=1.0：初始缩放比例1，允许小数 maximum-scale=2：最大缩放比例 minimum-scale=1：最小缩放比例 user-scalable：是否允许.
2020-05-12 21:45:59
178
原创 js节流防抖
什么是节流防抖？在学习这个问题前，我们先抛出问题：假设我现在有这么一个需求：根据input框输入内容打印到控制台这个问题简单啊，很简单的功能嘛，代码如下:<body> <input type="text" id="input"> <script> let input = document.getElementById('input') inp...
2020-05-04 17:00:27
111
原创 es6新语法Proxy对象代理和Reflect内置对象
因为之前在工作中没怎么用过Proxy，对他只是个简单的概念，最近准备面试，所以写这篇文章来恶补一下。Proxy对象用于定义基本操作的自定义行为。这是MDN给的解释，挺绕口的是不是？简单来说，Proxy可以代理一个对象，并且自定义行为，在想要操作这个被代理对象时，是通过proxy对象去操作。基本语法： let proxy = new Proxy(target,handler) targe...
2020-05-04 10:36:56
245
原创 webpack开发环境和生产环境打包
// 开发环境webpack.config.js基础的配置const path = require('path')// 首先要安装该插件 npm i html-webpack-plugin -Dconst htmlWebpackPlugin = require('html-webpack-plugin')module.exports = { mode:'development', //...
2020-04-29 16:12:56
655
原创 js面试技巧之手写一个通用事件绑定函数
看到这个问题，还是需要我们去思考这道面试题到底考察我们哪些知识点：1、js事件绑定2、事件冒泡机制3、js事件委托(事件代理)4、js绑定事件的this指向代码如下：// 准备DOM元素<body><div> <div id="div1"> <a href="#">a1</a> <a...
2020-04-27 16:59:23
305
原创 js面试技巧之手写一个深拷贝
手写一个深拷贝，虽然这个题并不难，但是我们也要明白它所要考察的知识点：1、浅拷贝和深拷贝的区别2、数值类型和引用类型在内存中的存储方式3、typeof能对哪些数据类型进行判断4、instanceof 的用法5、hasOwnProperty的用法6、递归函数的用法代码如下：// 给copySouce一个默认的对象参数，防止报错function deepCopy(copySource...
2020-04-27 16:37:19
278
1
原创 js面试技巧之手写一个ajax请求
这题的考察的点其实有2点：1、ajax是一个异步的请求，所以考察了promise的用法2、对ajax重要的XMLHttpRequest的考察代码入下：// 这里仅以get请求为例function ajax(url){ // 返回一个Promise对象，才能通过then和catch链式调用 return new Promise(resolve,reject=>{ // 创建XM...
2020-04-27 16:03:16
493
原创 js事件、事件冒泡与事件委托(事件代理)
js事件是js中非常重要的知识点。js与用户的很多互动都需要事件来完成。比如：1、点击登录按钮完成登录的click点击事件2、输入框失焦校验的blur失焦事件3、鼠标移入移出的mouseover和mouseout事件等等。下面通过代码来展示在dom元素上绑定一个点击事件： <body> <input type='button' value="请点击!" onClic...
2020-04-26 21:59:28
392
原创 js异步和单线程问题解析
什么是异步？在这个问题开始前，我们需要知道，javascript是一门单线程语言，即同一时间只能做一件事情。这也被其他语言所诟病。它不像java，python等语言，有多线程，多进程的概念。 作为单线程语言，那就意味着同一时间，只能做一件事情，所有的任务都需要排队，一个任务执行完毕才能执行下一个任务，如果当这个任务耗时长，那么后面的任务就得一直等着。当cpu空闲时，其实是对资源的一种浪费...
2020-04-25 23:17:38
296
原创 使用mock数据调试接口的2种常用的方式
一、Easy Mock网站生成项目和定义接口：二、（推荐）使用mockjs使用方法：1、npm下载插件：npm i mockjs --save-dev2、在src目录下新建一个mock文件夹，并在该文件夹下新建api.js,如下3、通过require("mockjs")引入mockjs我们希望很方便的开启和关闭mock数据，所以这里使用require()运行时加...
2020-03-01 12:54:28
952
转载 vue.config.js常用配置
vue.config.js常用配置：https://www.cnblogs.com/theblogs/p/10890362.html
2020-02-22 16:02:29
156
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人