- 博客(27)
- 收藏
- 关注
RSS订阅原创 nodejs中使用数据库逆向映射字段
链接数据需要使用到一定的数据，例如数据库的ip、端口、数据库名、用户、密码等，这些是链接数据库的必要数据，乜有这些数据是连接不上数据库的。在搭建项目时，一般都是先创建数据库，在使用服务去访问数据，但是由于数据库的映射非常麻烦，导致需要书写大量的映射文件。运行完成后，你会在dbModels里面看到对应的生成文件，代表映射文件生成成功。在package.json文件的scripts添加如下代码，如。以上的依赖是我们在使用过程中会用到的。表示文件生成成功，数据库链接成功。先创建一个链接数据的文件。
2023-05-30 09:03:31
471
原创 vue之封装tabs组件案例
回顾封装tabs组件熟知运用$children,$parent的案例生成整个容器，通过$children拿取子组件<template> <div class="ll-tabs"> <div class="ll-tabs__header"> <div class="ll-tabs__header__wrapper" v-if="tabsArray && tabsArray.length &g
2021-12-17 17:46:48
825
原创 vue3 setup语法糖（部分总结）
setup script有什么用看到这里很多小伙伴就不理解了，我在script后面加上一个setup有什么用呢？接着看！1、自动注册子组件直接看例子vue3语法<template> <div> <h2>我是父组件!</h2> <Child /> </div></template><script>import { defineComponent, ref } from 'v
2021-12-10 17:37:02
5234
原创 vue-封装分割面板
记录一次 分割面板的封装： <template> <div class="split-pane-wrapper" ref="outer"> <div class="pane pane-left" :style="{ width: leftOffsetPercent }"> <slot name="left"></slot> </div> <div class="pane-tri
2021-08-31 10:36:28
626
原创 vue-封装锚点组件
当页面的内容或者文字特别多的时候 我们就需要使用到锚点。但是由于element-ui没有锚点（iview，ant有）。故自己封装一个锚点页面：由于锚点的滚动可能和vue路由有冲突，所以我选择自定义函数来实现锚点的滚动第一种修改路由：（我没有参考这种方法）// 例子，自行封装到你項目的代碼const router = new VueRouter({ routes, mode: 'history', scrollBehavior (to, from, savedPosition) {
2021-08-30 16:59:26
1940
原创 vue-列表及长列表封装-长列表优化
一.本组件诞生的前提是 element-ui 没有对应的列表组件，故自己封装一个列表组件。二.自己封装列表组件时，发现当大量数据渲染时会出现延迟，或显示时间过长等问题。这时就需要使用长列表或者使用分页来搭配使用。分页处理，在这里就不做过多的处理，大家都会。现在先来看看如何实现长列表和列表的封装：1.封装一个list外层框架：<template> <div :class="`CecList ${border ? 'CecList-border' : ''}`" :style="{
2021-08-24 10:23:58
951
原创 关于混入（minxs）的使用
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。钩子函数合并同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子函数将在组件自身钩子函数之前调用看一个例子： <body> <div id="app"></div> </body><script src="./vue.js"></
2021-07-15 18:08:49
2082
原创 vue+element-ui 实现动态换肤
一、更换主题颜色：通过颜色选择器来更换主题颜色：首先封装一个颜色选择器选择颜色更换主题颜色的按钮：<template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :size="size" > </el-color-picker></template><script
2021-07-14 15:52:22
1624
2
原创 vue3及与vue2的区别总结（部分）
1.生命周期的变化：3.x(上） 2.x（下）不难看出，vue3.0与vue2.0之间生命周期函数在销毁的时候有变化：beforeDestroy --> beforeUnmountdestroyed --> unmounted其他的区别主要在于书写使用的语言上的差别在ts中使用 class 类组件书写可以 参考 vue-class-component 或者 vue-property-decorator书写的风格和vue2.0的选项式区别不大。如果使用js书写代码 则应当使用组
2021-07-12 16:22:01
43516
7
原创 闭包的详解及常用使用场景
什么是闭包？当函数可以记住并访问所在的词法作用域是，就产生了闭包，即使函数是在当前词法作用域之外执行。这句话怎么解释呢？我的理解是在一个函数里面，我有具体的属性，有具体的值，在当前函数作用域下，我调用是没有问题的。但是我要在其他地方调用这个函数里面的值是不行的。我们来看一段代码function fn1(){ var name='curslor' function fn2(){ console.log(name) } fn2();}fn
2021-07-05 14:44:10
3895
原创 防抖及节流详细解析，并在vue中使用防抖和节流
什么是防抖什么是节流？函数防抖（debounce）函数防抖，就是指触发事件后，在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。简单的说，当一个动作连续触发，只执行最后一次。函数节流（throttle）限制一个函数在一定时间内只能执行一次debounce和throttling 各有特点，在不同的场景要根据需求合理的选择策略。如果事件触发是高频但是有停顿时，可以选择debounce； 在事件连续不断高频触发时，只能选择throttling，因为
2021-07-02 17:26:30
1677
原创 typeScript学习（六）之在vue中使用ts编写vuex
vuex 装饰器cnpm install -s vuex-module-decorators文件地址：/store/modules/about.tsimport { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators'import store from '../index'const getList = () => { return new Promise<Array&
2020-10-01 18:11:31
4725
原创 typeScript学习（五）之vue中的使用
在vue中使用js和使用ts还有一些变化的。来让我们看看在vue中使用ts有哪些变化呢？先预告一波：下面我们会使用到常用的五个修饰器在使用装饰器之前 我们要引入相应的装饰器import {Component,Vue} from 'vue-property-decorator'@Component 修饰组件@watch 修饰watch监听@Prop 修饰props@Model 修饰父组件传入子组件的双向绑定数据@Emit 修饰父组件传入子组件的函数父组件：<templ
2020-09-30 14:11:06
2456
原创 typeScript学习（四）
接下来 我们认识一下类的使用对于类的的话，大家应该都不是很陌生吧。毕竟在es6中也有类的语法糖哦1.类的初认识//定义一个类，有自己的相关属性和方法class male{ content = "hello" name = '大脚,' sayHello() { return this.name + this.content }}//定义一个类，继承一个类class Boy extends male{ //重写父类的方法 sayHe
2020-09-28 11:27:13
101
原创 typeScript学习（三）
今天我们来学习一下接口1.接口的初认识（interface）下面介绍关于接口的属性类型的基本定义//定义接口interface Person{ name: string; age: number; sex: string; //不确定该值是否有值，前面加上？，表示该值不确定 money?: number;}//定义对象const person1= { name: '大脚', age: 18, sex: "男", mone
2020-09-28 09:40:49
108
原创 typeScript学习（二）
前面我们学习了关于TS的一些静态数据类型的定义那么接下来我们来讲解一下数组和元组这次需要学习的东西比较简单。1.数组定义数据类型//定义数组类型的方式//一、const numberArr: number[] = [1, 2, 3]//二、const arr:Array<number>=[1,2,3]//定义其他类型的数组const stringArr: string[] = ['a', 'b', 'c']const undefinedArr: undefined[] =
2020-09-27 18:52:14
2153
原创 typeScript学习（一）
什么是typescripttypescript是javascript类型的超集，可以变异为纯javascripttypescript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的typescript100%支持javascripttypescript :为构建大型应用而生，小程序也可以同样使用生态圈支持广泛强大的类型系统（强类型，静态类型）丰富了class的扩展功能（接口，抽象类）添加了系统级设计能力（自顶向下）以前的js属于弱类型语言，而ts属于强类型语言，让我们来了
2020-09-26 23:01:50
237
原创 浅析vue中的nextTick
什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，什么时候需要用的Vue.nextTick()？？1、Vue生命周期的created()
2020-09-23 09:52:30
453
原创 初学js中的链表
js中的链表操作首先我们应该知道什么是链表在我们基本使用中，储存多个元素，数组可能是最常用的数据结构。这种数据结构非常方便，但是有一个缺点：从数组的起点或者中间插入或移除的成本非常高，因为需要移动元素链表存储有序的元素的集合，但是不同于数组，链表中的元素在内存中并不是连续位置的。每个元素都是由一个存储元素本身的结点和指向下一元素的引用（也叫指针或者链接）组成。相比于数组来说，链表的好处在于添加或者删除元素的时候不需要移动其他元素。但是操作链表需要指针。数组的一个优点是可以直接访问任何位置
2020-07-30 12:58:19
1290
2
原创 解决react直接使用ref警告问题
有两种方式可以解决这个问题先来介绍第一种方式，使用React.createRef() API在构造函数里面使用React.createRef()复制代码constructor() { super(); this.author=React.createRef()}在需要使用refs的标签上绑定：复制代码<p classname="emails"><span>email:</span> <input ref="{this.author}
2020-07-15 10:46:43
1020
原创 react 实现权限管理和页面动态渲染树形控件
react权限管理后端数据返回示例{ code: 200, userInfo: { name: '李四', age: '22', sex: '男' }, menuInfo: [ { menuId: 0, menuName: "首页", menuUrl: "/home/table", pathname: "Dish"
2020-07-15 10:20:23
1667
原创 react中实现简单的动效
在react中如何实现一个简单的动效需要使用一个插件：npm install react-transition-group -s//导入import {Fragment} from 'react'import {CSSTransition} from 'react-transition-group'//需要实现动画效果的页面<Fragment> <CSSTransition in={this.state.shows} // 如果this.state
2020-07-15 10:06:47
551
原创 简单实现react+mobx
前面写过关于react+redux的文章简单实现react+redux这里对Redux和Mobx进行简单的对比:Redux的编程范式是函数式的而Mobx是面向对象的;因此数据上来说Redux理想的是immutable（不可更改）的，每次都返回一个新的数据而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;然而和Redux相比，使用Mobx的组件可以做到精确更新，这一点得 益于Mobx的observable; 对应的，Redux是用dispath进行广播,通过Provider和conn
2020-06-30 20:20:24
572
原创 简单实现redux+react
安装：npm install --save reduxredux是所有语言都可以使用的，并不是只有react可以使用有专门的react-redux与react的绑定库和开发者工具npm install --save react-reduxnpm install --save-dev redux-devtoolsredux的三大原则一、单一数据源，整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。二、St
2020-06-30 17:20:18
188
原创 实现一个简单的axios封装
简单实现axios封装1.创建生产环境地址 （本机地址）.env.development文件VUE_APP_BASE_URL='/api'创建开发环境地址（java后台地址）.env.production文件VUE_APP_BASE_URL='http://106.14.26.32:8080/api'2.在Axios代理处判断环境，进行相关的操作module.exports = { publicPath: process.env.NODE_ENV === 'production
2020-06-28 21:06:49
607
原创 实现前后端数据键名不一致，数据交换
实现前后端键名不一致的数据交换//后台数据的模拟： let dataList = [ {id: '1', name: '小狗', age: 5}, {id: '2', name: '小羊', age: 8}, {id: '3', name: '小猪', age: 10}, {id: '4', name: '小牛', age: 12} ]; //前台数据的模拟： let myList = [ {m
2020-06-28 20:54:01
744
原创 VUE实现组件之间的通信
VUE之间的通信方式在使用vue框架搭建项目时总会碰到父子组件，隔代组件，兄弟组件之间的传值，这里我介绍六种传值方式一、使用props在父子之间进行传递值父组件使用v-bind绑定相应的值，在子组件中使用props进行接收，获得父组件的值其中使用this.$emit（）来进行调用父组件的事件数据向下行，事件向上流在父组件Parent中：<Child :data-list='datalist' v-on:parent-chang-count="parentcount"></Ch
2020-06-28 20:40:00
582
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人