我也要用- 博客(74)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 【redux】redux和react-redux的学习
1.什么场景使用redux?1.项目角度用户的使用方式复杂 不同身份的用户有不同的使用方式（多角色） 多个用户之间可以协作 与服务器大量交互，或者使用了websocket view要从多个来源获取数据2.组件角度某个组件的状态需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态2.redux设计思想web应用是一个状态机，视图与状态一一对应的 所有的状态，保存在一个对象里面3.redu...
2021-04-10 11:02:00
20
1
原创 【css】grid布局学习
grid据说是最强大的css布局方案。兼容性：灵活但兼容不好，就连谷歌浏览器都有部分不兼容：https://www.caniuse.com/?search=gridgrid布局特征：将容器划分为行和列，以产生单元格1.容器 / 项目 / 单元格 / 网格线 / 容器属性采用grid布局的区域，称为容器（container），容器内部采用网格定位的子元素，称为项目（item）正常情况下，n行和m列会产生n*m个单元格（cell），比如3行*3列 = 9个单元格划分网格的线，称..
2021-04-06 11:40:32
13
原创 【typescript】记录typescript基本知识的学习
1.typescript特点1.编译型的语言2.强类型的语言3.真正面向对象的语言typescript 就是比javascript 更java 的script2.全局安装npm install -g typescripttips:ts编译成js：tsc demo.ts3.基础数据类型字符串类型let email:string="111@163.com"let msg:string = `my email is ${email}`...
2021-04-03 22:42:16
38
原创 【vue3.x】vue3.x基础知识学习
1.vue2.x和vue3.x项目的区别1.1.创建应用实例的方式vue2.x：通过new Vue()创建vue根实例，从同一个vue构造函数创建的每一个根实例共享相同的全局配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ ro.
2021-02-27 00:50:52
153
4
转载 【vue && js】省市区js数据转为tree结构
area.js 地区数据结构：//area.js/** * areas 对象转tree结构 */export function addressToTree(){ let districtssheng = address.province_list; let districtsShi = address.city_list; let districtsQu = address.county_list; let newArrSheng = []; for(var i in distr
2021-04-16 10:06:31
17
原创 【ant design vue】表格超过高度时显示滚动条
样式：/* 表格 *//*.table 为全局表格自定义样式*/.table .ant-table-body,.table .ant-table-header{ overflow-y: auto !important;}html代码：<a-table class="table" :scroll="{ y: 550 }"></a-table>
2021-04-12 10:56:29
54
原创 【vue】change事件在保留默认形参的情况下传递自定义形参
input事件只有一个默认参数：e,但是我想多传递一个别的参数<a-input :value="record.transferAmount" @change="toChangeInput"/>解决：写法一：//多传递单个参数@change="e => toChangeInput(e, record)"//假设默认参数有两个：oldval, newval@change="(oldval, newval) => toChangeInput(oldval, ne..
2021-04-08 12:00:28
14
原创 【vue && 上传组件】清除上传组件缓存，使之每次显示新的文件列表
有时上传后，因缓存问题，不会显示上传后的文件列表解决：html代码：我当前所用的UI框架是ant design vue给上传组件添加一个fileKey的变量//封装的上传组件<a-row :key="fileKey"> <a-upload list-type="picture-card" accept="image/*,.pdf" :multiple="true" .
2021-03-25 18:09:05
40
1
原创 【ant design vue】解决Tabs选项卡打开时不选择第一个选项卡页
tips:ant design vue Tabs的activeKey只能是string,否则设置不起作用原因：缓存导致，当选择其他选项卡页时，关闭后，再次打开，还是会选择关闭前的选项卡页解决：利用activeKeyhtml代码：这里给选项卡设置activeKey值，然后通过change回调将每次选择后的key值赋值给activeKey<a-tabs :activeKey="activeKey" @change="(key) => { this.activeKey =..
2021-03-25 17:57:38
105
转载 【工具类】数值金额转中文大写金额
/** * 数值金额转中文大写金额 * @param {数值金额} money */Vue.filter('amountToChinese',(money) => { let cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); let cnIntRadice = new Array('', '拾', '佰', '仟'); let cnIntUnits = new Array(''.
2021-03-18 12:04:29
14
转载 【工具类】格式化金额:逗号分隔三位且保留两位小数
/** * 格式化金额:逗号分隔三位且保留两位小数 */Vue.filter('amountFormat',(amount) => { //强制保留两位小数 let f = parseFloat(amount); if (isNaN(f)) return false; f = Math.round(amount * 100) / 100; let s = f.toString(); let rs = s.indexOf('.'); if .
2021-03-18 12:02:18
14
原创 【vue && 弹窗】vue项目弹窗中的组件编辑ref值却获取不到
vue项目中点击打开弹窗，弹窗上面有子组件，在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值：简易代码如下：<a-modal centered v-model="visible" :title="title"> <upload ref="upload" /></a-modal>js: handleOpenUpload(){ this.visibleUpload = tr..
2021-03-10 15:56:12
199
原创 【vue && vue-pdf】解决pdf预览时的跨域问题
问题：pdf预览引起跨域当时出问题时没截图，现在的图从网络上截取的和vue 接口请求解决跨域问题一样，在本地开发时同样通过 webpack的devServer去代理pdf预览的url（请求），其他环境（生成及测试）则让后端去解决。解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可：//vue.config.jsproxy: { //数据接口代理 '/api': { target:
2021-02-22 10:43:20
512
1
原创 【vue && ant design vue】利用vue-draggable-resizable插件实现表格拖拽
就很坑，为什么ant design vue没有表格拖拽？这应该是一个常用并且基本的组件功能，elementui的表格拖拽却如此丝滑。。。官网上说使用vue-draggable-resizable插件来实现，拖拽了一下官网上实现的，真的很丝滑，但是自己做完后，卡卡卡卡卡卡顿。。。1.下载为什么我这里指定了版本？？？因为别的版本我试了，同样的代码，这个版本行，别的版本不行 ，，，就能用就行npm i vue-draggable-resizable@2.1.02.实现/** ..
2021-02-19 15:39:24
281
原创 【vue】mixin混入的使用
1.全局mixin对mixin的使用我其实很浑浊，不太清楚，但我一般喜欢将mixin作为vue option API的公共method来使用，即将mixin全局引入，使没有组件中的methods选项都拥有该方法，比如使用ant design vue框架时没有表格拖拽功能，那么可以通过mixin混入，使每个页面都有这个方法//mixin/common.js/** * 全局mixins */export default { methods:{ filterColum
2021-02-19 15:13:44
20
原创 【vue && vue-pdf】pdf展示及解决签章不显示的问题
1.下载npm i vue-pdf//我使用的是4.2.0版本,版本可能影响问题的解决npm i vue-pdf@4.2.0 2.作为组件引入import pdf from 'vue-pdf';export default { components:{ pdf }}3.使用定义pages变量稍后用来获取pdf的页数<pdf v-for="i in pages" :key="i" :src="pdfUrl" ...
2021-02-18 17:39:41
287
1
原创 【ant design vue】a-tree树形组件获取数据及回显
1.获取数据首先，数据自然是tree结构的，这中间自然会有一些对数据的处理，说一下常用处理：将扁平化数据处理为tree结构数据https://blog.csdn.net/thcoding_cat/article/details/113697354 将数据的属性处理为组件要求的属性 解决该组件的一些问题，优化1.将数据的属性处理为组件要求的属性使用组件提供的该属性:replaceFields="{key:'id',title:'name',children:'child...
2021-02-18 16:25:53
780
1
原创 【vue pc端】 下载文件
利用原生fetch下载文件，该方法完美解决了浏览器下载文件会打开文件（本身是下载，结果却打开文件变成了预览文件）的问题。tips: 1.在a标签上加download属性有时会不管用 2.直接使用blob API将url转换为blob地址，API会直接将url认为是字符串，所以下载文件后打开文件显示文件已损坏 3.推荐将该方法放入mixin中，需要使用的组件可引入//url:文件地址//fileName 文件名download(url,fileName){ ...
2021-02-18 15:31:54
73
原创 【vue && ant design vue】 双击行复制该行数据id值
1.表格添加自定义行方法<a-table :customRow="customRow"></a-table>2.在自定义行方法中定义双击事件document.execCommand('copy') 调用浏览器复制命令，并返回boolean值customRow(record){ return { on:{ dblclick: (event) => { ..
2021-02-05 15:44:14
41
原创 【vue】 将扁平化数组结构数据处理为tree对象数组并对tree对象进行排序
/** * 将扁平化数据结构处理为tree结构 * @param { 扁平化数据结构 } obj */export function formatTree(obj){ let copyedObj = JSON.parse(JSON.stringify(obj)); //深拷贝源数据 return copyedObj.filter(parent =>{ let findChildren = copyedObj.filter(child => { retur.
2021-02-05 15:37:59
89
2
原创 【ant design vue】 a-cascader级联下拉框获取及回显（非动态加载级联数据）
1.获取list为级联数据，该数据为树状对象数组结构，可能涉及到树状对象排序问题:field-names="{}"：当数据中的对象与该组件要求属性不一致时，可通过该属性进行声明替换<a-cascader :options="list" placeholder="请选择" change-on-select :field-names="{label: 'name', value: 'id', children: 'children' }" ..
2021-02-05 15:30:13
379
1
原创 【ant design vue】 表单
ref,:model="",rules常见，说下ant design vue表单特有的：<a-form-model ref="form" :model="form" :rules="rules" v-bind="layout" class="form"> <a-form-model-item has-feedback label="角色名称" prop="roleName"> <a-input v-model="form.name.
2021-02-05 15:06:44
23
原创 【vue】 携带对象参数跳转页面
1.携带对象json转字符串后进行编码<span slot="action" slot-scope="record" ref="action"> <a-button type="link" @click="$router.push({name:'editSonAccount',query: { record: encodeURIComponent(JSON.stringify(record)) }})">
2021-02-05 14:53:49
86
原创 【ant design vue】 生成表格序号
1.作用域插槽columns:[ {title: '编号',scopedSlots: { customRender: 'indexRender' },align:'center'} ],2.表格中<a-table :columns="columns" :data-source="list" rowKey="id" :pagination="pagination" @change="handleTableChange"> &l..
2021-02-05 14:41:38
134
转载 【vue】jison解决后台返回的long类型数据位数过长的问题
问题:前端接收后端long类型数据超过16位,则会通过补零展示该数据,js自带的json parser无法对该数据进行正确解析,且浏览器上不能正确展示.如下图:可以看到16位数字后面是01.解决方案一 后端进行long转string操作,最为彻底.2.解决方案二 通过jison包在前端将long类型数据转为string类型来使用. 由于前后端交互是通过jsonString,到时候转换后的long类型数据再提交给后端不需要再次进行转换jison...
2020-12-23 18:20:37
156
原创 【vue && vuex】vuex中的数据同步到localStorage和sessionStorage
懒，所以我使用插件。可是，要面对的就是对插件的一知半解。大家都知道vuex中存储的数据在刷新地址栏时，会被销毁，故而vuex不能一直保持状态的存储。其实手写代码去改造这一点是最好的，但我选择插件。使用的是vuex-persistedstate。1.安装插件npm i vuex-persistedstate2.默认使用该插件默认将数据存储到localStorage中。在store/index.js中使用：import createPersistedState fro..
2020-11-22 02:15:01
286
1
原创 【vue && less】vue使用全局less
我一直以为vue可以是用全局的less，直到自己接触了才知道要通过配置去实现。我可查到的配置还挺坑的。这里就记录一种。该方式我只在vue-cli4及以上使用过1.安装相关包npm i style-resources-loader vue-cli-plugin-style-resources-loader -D2.在vue.config.js中添加以下代码module.exports = { pluginOptions: {//全局使用less 'style-.
2020-11-22 01:39:44
71
原创 【vuex学习】vuex基本使用及模块拆分
1.vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式我认为vuex主要分为以下几个模块：state 状态 mutations vuex的methods actions vuex的异步methods getters vuex的状态处理 modules vuex的模块划分 辅助函数 ...map* vuex的映射（方便直接使用vuex中的数据和方法） mutations_type 暂不知2.安装npm install ...
2020-11-21 20:19:40
105
2
原创 【工具类】cookie工具类封装
/* 设置cookie */function setCookie (cName, value, options) { options = options||{}; let expire = null; if(options.hour){ let today = new Date(); expire = new Date(); expire.setTime(today.getTime() + options.hour * 3600000); .
2020-11-21 17:09:49
20
原创 将已有项目导入svn
经常是本地建好了项目，却不知道该怎么把项目放到svn上？1.在svn上新建文件夹，名字和已有项目名字保持一致2.将已有项目中所有的文件及文件夹导入svn：3.上传后，将不需要的文件及目录删除4.在本地已有项目中直接checkout，检出后会发现本地已有项目已经生成了.svn的文件夹...
2020-11-21 17:00:33
106
原创 【面试】BFC(块级格式化上下文)
1.box(盒子)页面的基本构成元素，分为inline，block，inline-block三种类型的box.2.FC(Formatting Context)Formatting Context是W3C规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。常见得Formatting Context有Block formatting context（简称BFC）和inline formatting context（简..
2020-10-29 01:33:51
86
转载 【面试】javascript事件循环（Event Loop）
1.javascript的单线程javascript是单线程的。单线程的意思就是说负责解释和执行javascript代码的线程只有一个，同一个时间内只能执行特定的一段js代码(当前任务)。为什么javascript是单线程的？1.js最初被设计出来及时作为一种浏览器脚本，主要负责和用户交互，操作dom.2.如果js是多线程的，那么就会带来非常复杂的同步问题： 1.比如有两个线程，同时对一个dom操作，一个线程要删除，一个线程要在它上面添加属性，此时就有点不知所措 2.有...
2020-10-28 17:40:54
48
原创 【react学习】react入门必备知识
1.新建react项目npx：该方式不用全局下载脚手架，直接运行脚手架的命令原理：先下载脚手架生成项目，完了再删掉脚手架npx create-react-app my-appnpm start全局安装脚手架来创建项目：//全局安装脚手架npm i -g create-react-app//新建react项目create-react-app my-appnpm start2....
2020-10-02 14:48:06
107
原创 【面试】对网络的了解
1.终端终端跟服务器相对应，连接到服务器上的东西都叫做终端。比如： pc 手机 IP电视 空调 冰箱 电话 终端就是一个节点的意思，网络中有很多节点。网络就是把各种终端连在一起，就成了网络。那么问题来了？这么多各式各样的终端要怎么连？2.终端连接方式（共同构成网络）1.按拓扑结构分类 总线型 环形 星型：中间是核心的节点 网状 ...
2020-10-02 01:54:54
354
原创 【小程序】小程序细节：场景值的使用
1.根据场景值变更页面部分显示效果小程序中场景值是用来描述用户进入小程序的路径，通过不同的场景值ID来分辨小程序来自于哪个场景或处于哪个场景之中。场景值列表：https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html在小程序中，可以通过以下三种方式获取场景值：App的onLaunch App的onShow wx.getLaunchOptionSync()场景值有什么作用？以羊城通乘.
2020-10-02 01:18:47
103
原创 【css复习】总结前端各种常用布局适配方案
1.视口根据浏览器窗口的大小的单位，不受显示器分辨率的影响布局视口一般都PC端的页面使用移动端的页面，一定要设置 理想视口1.1.理想视口//理想视口有一些兼容性的问题 ，而且有时候会 出现一些莫名其妙的问题<meta name="viewport" content="width=device-width, initial-scale=1.0">1.2.标准理想视口//开发中推荐使用标准理想视口<meta name='viewport'...
2020-08-08 17:56:45
196
原创 【复习】javascript 事件与节点
事件三要素事件源 ------谁来做 事件类型------怎么做(点击,双击,鼠标移入,移出等等等) 事件处理函数-------做什么节点在文档树上的内容，称之为节点有哪些节点元素节点 属性节点 文本节点 注释节点节点的特性节点类型----nodeType 节点名称----nodeName 节点内容----nodeValue节点介绍1.元素节点 let box = document.getElementsByT...
2020-07-15 16:14:19
63
原创 vscode 黑屏和终端不能输入命令的问题
这个问题的记录是没有意义的，因为电脑，软件本身导致的问题各有不同，我之所以想记录主要是因为这两个问题花了我太多时间，在这个过程中，多次使我崩溃，没想到学前端那么久以来，最让我头疼的问题是这个。背景：重装win7系统，装各种软件，装vscode，装完后打开vscode（大概一点2的版本），没有任何问题...
2020-07-09 19:09:26
955
原创 【复习】javascript 数组，string对象，循环相关方法
1.数组1.1.数组的创建方式字面量创建//底层实现： new Array();var arr = [];数组构造函数创建var arr1 = new Array();1.2.js内置数组对象的方法toString() 将数组中的每一项拿出来，使用逗号隔开，变成一个字符串 valueOf() 返回数组本身 join() 使用一个字符将数组分割成一个字符串；join方法不传入参数，默认使用逗号分割 concat...
2020-07-06 20:55:14
94
原创 【复习】javascript 函数
1.函数的三种定义方式1.1.函数声明function 函数名称() { // 函数要执行的代码（要做的事情）}1.2.函数表达式var fn = function() { // 函数执行代码}1.3.函数对象构造函数var 变量名 = new Function('函数的执行代码'); 2.函数三要素 函数名称 函数参数 函数返回值 3.匿名函数没有函数名称的函数成为匿名函数，匿名...
2020-07-03 16:37:12
55
题库后台管理系统
2017-11-10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人 TA的粉丝