JavaScript
~柠凉id
这个作者很懒,什么都没留下…
展开
-
小程序发布
上传代码到服务器找到微信开发者工具点击上传然后填写版本号以及项目的备注单击上传,就会出现一个上传成功的弹框 上传之后页面注意:上传之后我们的小程序是一个开发版原创 2023-04-22 15:50:20 · 186 阅读 · 0 评论 -
vue+Element plus实现商品规格练习(sku列表)
6.点击“刷新”按钮,对上面的规格进行组合,得到表格数据。4.点击“添加规格值”按钮,添加一组规格值内容。2.点击“添加规格”按钮,添加一组规格内容。5.点击“x”按钮,删除该规格值内容。3.点击“x”按钮,删除该规格内容。7.最多添加3组规格内容。原创 2023-04-22 14:57:19 · 1074 阅读 · 1 评论 -
用vue+Element plus实现列表添加
选项操作,最多5个,最少1个。添加按钮显示在最后一项,当有5个选项时不显示添加按钮,当1个选项时,不显示删除按钮。页面初始化,显示题干,添加按钮,和题目列表框。在右下角显示删除按钮,能够删除题目。正确的答案用红色显示。原创 2023-04-22 14:44:24 · 460 阅读 · 0 评论 -
vue2使用脚手架方式实现父子,子父传值案例
vue2使用脚手架方式实现父子,子父传值案例 1.父组件给子组件传值(定义的组件需要用小写字母放入视图大写之前需要-连接) a.在父组件中的自定义组件标签中定义一个属性 b.在子组件中使用props来进行接收自定义的属性 c.props是专门用来接收父组件传递过来的值(数组,对象),接收的属性可以当做data数据进行使用 d.该属性只可用来渲染页面,不可以操作给属性,需要操作的话必须在子组件data中声明一个新原创 2022-11-19 17:51:47 · 366 阅读 · 0 评论 -
vue中使用数字滚动插件
数字滚动插件:vue-count-to是一个用于实现数字动画效果的插件,可以让数字在一定时间内从一个值平滑地过渡到另一个值。安装vue-count-to插件在组件中引入vue-count-to插件在组件中使用CountTo组件startVal表示开始的数值endVal表示结束的数值duration表示过渡时间(单位为毫秒)原创 2023-04-01 16:01:02 · 1161 阅读 · 0 评论 -
vue的防抖节流
防抖和节流是常用的优化前端性能的方法。一.防抖1.防抖是指在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。防抖的实现方式可以使用setTimeout函数和闭包。2.防抖封装export function debounce(fn: Function, delay = 200) {// 参数1:调用的函数或者是请求 参数2:延迟多少毫秒才执行 let timer: NodeJS.Timeout | null = null;//设定一个,在没有执行定时器为null原创 2023-04-01 13:44:52 · 295 阅读 · 0 评论 -
vue项目打包上线
解决方式:在vite.config.ts文件中添加esbuild:{drop:["console","debugger"]}原创 2023-03-31 22:58:46 · 1099 阅读 · 0 评论 -
vue使用tinymce实现富文本编辑器
div>base_url: '/tinymce', // [必要参数] 指定public的目录language_url: "/tinymce/langs/zh-Hans.js",//语言类型的路径language: 'zh-Hans', // 语言类型(中文),默认会到tinymce/langs/zh_CN.js文件skin_url: '/tinymce/skins/ui/oxide', // 皮肤,浅色。原创 2023-03-30 22:11:57 · 1144 阅读 · 0 评论 -
uni-app使用uview组件中的封装
通过将代码封装在函数中,您可以将其组织成更小、更可重用的部分,并将其隐藏在函数的内部。抽取公共逻辑代码,通过export对外公开函数、对象、属性,通过import来使用这些公开的函数、对象、属性,让代码具有复用性,从提高了代码的可维护性,做到一改全改的效果。封装可以使代码更易于维护和测试,并且可以使代码更易于重用。封装还可以帮助隐藏代码的实现细节,从而使代码更易于理解和使用。前后端分离,使用http作为两端的通讯协议,当然还可以有其他协议,例如Websocket,但http是前后端应用的最主要的协议。原创 2023-03-24 22:44:40 · 693 阅读 · 0 评论 -
js中数组常用的方法
map()方法用于创建一个新数组,其中包含通过提供的函数实现的测试的所有元素。它接受一个参数,即要为每个元素执行的函数。reduce()方法用于通过提供的函数将数组的所有元素累加到单个值中。它接受两个参数:要执行的函数和可选的初始值。它接受一个参数,即要搜索的元素。,并返回该元素的值。push()方法用于将一个或多个元素添加到数组的末尾,并返回新数组的长度。它接受一个参数,即要为每个元素执行的函数。它接受一个参数,即测试每个元素的函数。例如,以下代码将数字5添加到名为myArray的数组的末尾。原创 2023-03-24 22:11:17 · 460 阅读 · 0 评论 -
vue数据加载进度条
vue数据加载进度条1.安装第三方插件npm i nprogress2.在main.ts中引入样式import 'nprogress/nprogress.css';//引入加载进度条的样式3.在拦截器开始请求和结束请求加入相应的代码a.首先引入nprogress插件import NProgress from "nprogress"; // 引nprogress插件b.在请求拦截器中开启进度条NProgress.start();//开启进度条c.在响应拦截器中 NProgress .do原创 2023-03-21 09:46:28 · 482 阅读 · 0 评论 -
vue按钮权限的实现
然后在main.ts中定义一个函数(自定义指令),参数1:自定义指令名称,参数2:在钩子函数(挂载之后)传两个参数el和binding,el是绑定指令元素对象,binding是指令所传递的数据。在按钮中,以v-加上自定义名称来使用,如添加系统指令一样(v-permission自定义指令)然后获取状态管理中存储的用户权限与自定义指令传递过来的值进行判断是否相等。权限按钮就是不同的用户等级的用户可以进行操作也不同。登录成功之后,取到当前用户的权限并存储到状态管理中。原创 2023-03-15 12:28:39 · 286 阅读 · 0 评论 -
vue使用笛卡尔积算法构建sku表格
判断如果规格长度等于0,直接把规格属性赋空,然后使用笛卡尔积算法将数据进行交叉处理(使用reduce方法,参数1:空的二维数组,参数2:变量2的数据(维度名称标签),在声明一个空的数组array(用这个空数组去匹配交叉数组),再拿出reduce参数1空的二维数组,forEach循环遍历,在使用forEach遍历变量2数据(维度名称标签),进行交叉匹配,连接起来添加进array空数组,然后在这个二维数组中重新映射为对象数组,进行拼接数据构建sku表格。变量1接收过滤的tag标签,生成二维数组组。原创 2023-03-14 22:41:01 · 769 阅读 · 0 评论 -
vue无痛刷新
3.在http文件中的响应拦截器,定义一组数据就是需要无痛刷新的页面,先获取页面路径,判断令牌token是否是10006过期,使用some查找那一组需要无痛刷新的页面,此方法返回的是true跟false,判断如果为true则需要无痛刷新,先从状态管理中取出用户账号和密码,再重新调用登录接口重新登录,通过async将异步序列改为同步(同步获取请求),然后在把获取到的接口存储在cookie中,用于登录之后更新令牌。而无痛刷新的作用就是在客户在进行重要操作时 重新调用一次登录接口将过期的token替换。原创 2023-03-14 22:25:40 · 173 阅读 · 0 评论 -
nvm的使用与讲解
1.介绍1).node的版本管理器,可以方便地安装&切换不同版本的node,随着大前端的快速发展,node版本更新很快,我们在工作中,可以会有老版本的node的项目需要维护,也可能有新版本的node的项目需要开发,如果我们只有一个node版本的话将会很麻烦,nvm可以解决我们的难点2).nvm是什么nvm全英文也叫node.js version management,是一个nodejs的版本管理工具。nvm和npm都是node.js版本管理工具,为了解决node.js各种版本存在不兼容现象可以通过它原创 2023-03-09 23:01:42 · 279 阅读 · 0 评论 -
vue后台管理系统权限配置
vue后台管理系统权限配置1. 从element复制Tree 树形控件注解:• data展示数据• show-checkbox 节点是否可被选择• node-key每个树节点用来作为唯一标识的属性,整棵树应该是唯一的• default-checked-keys默认勾选的节点的 key 的数组2. 树形菜单数据 所有的权限3. 角色所拥有的权限4. 用于选中的数据5. 用于选中的权限信息6. 点击授权按钮时,调用接口获取角色所拥有的的权限,使用nextTick数据更新了,并且在dom中原创 2023-03-05 18:37:03 · 213 阅读 · 0 评论 -
vue引入/使用阿里矢量图库
vue引入/使用阿里矢量图库,1. 找好需要的图标2. 选择添加至项目3. 然后单击你需要加入的项目中,点击确定4. 跳转至个人页面,找到下载至本地5. 打开你下载值本地的目录,将其解压6. 将其解压好的文件,放入你需要的文件中7. 找到css文件,打开将before前面的复制8. 在需要用到的页面使用标签,里面嵌套标签,绑定class样式,参数1:代表图标,参数2:图标的形状原创 2023-03-05 17:26:00 · 182 阅读 · 0 评论 -
vue使用element悬停图片放大
vue使用element悬停图片放大,复制element中的气泡弹框卡片Popover 注解:• trigger弹出框触发方式• placement弹出框出现位置• reference触发弹出框显示的 HTML 元素原创 2023-03-05 16:46:31 · 563 阅读 · 0 评论 -
vue的图片上传及获取第一张图片颜色
vue的图片上传及获取第一张图片颜色,一.图片上传1. 首先获取token令牌(请求头)const headers = ref({ 'AdminToken': cookie.get('token') //获取请求头 })2. 从element复制图片上传代码before-upload传文件之前的钩子,参数为上传的文件,若返回false或者返回 Promise 且被 reject,则停止上传二.获取第一张图片颜色1. 创建一个文件color.ts原创 2023-03-05 16:30:26 · 285 阅读 · 0 评论 -
vue导出excel文件
vue导出excel文件,1. 安装相关得插件npm i file-saver xlsx2.需要的页面引入即可import FileSaver from 'file-saver';//引入export表格import * as XLSX from 'xlsx'; //引入export表格3.导出当前页原创 2023-03-04 21:00:12 · 169 阅读 · 0 评论 -
js的深拷贝与浅拷贝
一.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用 a. 概念:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。 b. 思路:浅拷贝可以想做把引用类型的第一子级当作是每一个数据类型来赋值 c. 实现方法: 1).Object.assign() Obj原创 2023-03-04 14:33:02 · 88 阅读 · 0 评论 -
vue组件化-换肤
vue组件化-换肤原创 2023-02-26 13:55:02 · 190 阅读 · 0 评论 -
vue组件化尺寸
vue组件化尺寸,尺寸改变组件size 用于设置表单组件的默认尺寸,zIndex 用于设置弹出组件的层级子组件原创 2023-02-26 13:48:48 · 531 阅读 · 0 评论 -
vue 组件化-全屏
全屏组件引入第三方插件 npm add screenfull需要使用的页面引入 import screenFull from 'screenfull';定义事件 @click="handclick"原创 2023-02-26 13:44:38 · 276 阅读 · 0 评论 -
vue国际化--中英文切换
vue国际化--中英文切换1.安装组件npm add vue-i18n2.使用config-provider全局配置器,只需要放入你需要中英文切换的区域(首页index.ts)标签中包起来引入3.定义语言包,在src目录下创建文件夹i18n,在此文件夹创建4. 全局引入注册vue实例src/main.ts5.在i18n文件中在创建index文件,在index文件做一些逻辑操作,创建i18n实例,把中文src/i18n/zh.ts和英文src/i18n/en.ts引入,然后接着上面操作,声明变原创 2023-02-26 13:33:32 · 966 阅读 · 0 评论 -
js中mousewheel鼠标滚轮事件
js中mousewheel鼠标滚轮事件,在你需要mousewheel鼠标滚轮的地方,使用mousewheel定义事件,在此事件传值@mousewheel="scrollTags($event)"在使用ref操作虚拟DOM原创 2023-02-26 12:59:50 · 810 阅读 · 0 评论 -
vue动态路由
vue动态路由,首先在router文件夹中的index文件先写固定路由(首页,404,登陆页面等),然后在router文件夹下创建page文件,此文件放入动态路由(运营管理,商品管理,推广管理等),2. 在从router文件夹中创建addRouter文件,先把固定路由index文件和动态路由page文件引入,使用addRouter方法(动态添加更多的路由规则),再从mian文件全局注册动态路由列表addouter文件原创 2023-02-26 12:53:24 · 434 阅读 · 0 评论 -
vue2动态路由权限列表
步骤1.登录成功之后获取到登录用户的权限信息,保存到临时存储中动态生成菜单和生成动态路由的操作1.先写固定死的菜单栏,用数据渲染菜单的方式渲染出来,把菜单的模板搞定,实现一个静态的菜单栏2.把菜单栏数据分开写在路由文件中,分成两部分,一部分是固定的,一部分是动态的 let fixedRouter(固定的路由表) permissionRouter(需要权限判断展示的路由)3.新建文件permission文件,里面是控制生成动态菜单栏的逻辑代码 3.1 引入路由文件,把固定菜单和动态菜单一原创 2023-02-19 12:57:40 · 400 阅读 · 0 评论 -
小程序请求封装
小程序请求封装, 创建utils文件夹,在此文件夹中创建http.js文件原创 2023-02-04 17:56:23 · 123 阅读 · 1 评论 -
小程序安装开发环境
路由跳转Navigator:默认跳转过去在导航栏中会出现一个返回按钮,如果不用返回,可以添加属性redirect1)、wx.navigateTo():保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面2)、wx.redirectTo():关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面3)、wx.switchTab():跳转到 abBar 页面,并关闭其他所有非 tabBar 页面4)、wx.navigateBack()关闭当前页面,返回上一页面或多级原创 2023-02-04 17:51:40 · 144 阅读 · 0 评论 -
使用react实现后台管理系统项目
一.开发React必须依赖三个库 1.react:包含react所必须的核心代码 2.react-dom:react渲染在不同平台所需要的核心代码 3.babel:将jsx转换成React代码的工具二.React的依赖引入 1.方式一:直接CDN引入 2.方式二:下载后,添加本地依赖 1).在html中引入 a.react.js b.react-dom.js c.b原创 2022-12-30 23:49:13 · 8451 阅读 · 1 评论 -
小程序实现简单页面渲染
pages 用来存放所有小程序的页面utils 用来存放工具性质的模块 (例如: 格式化时间的自定义模块)app.js 小程序项目的入口文件app.json 小程序项目的全局配置文件app.wxss 小程序项目的全局样式文件project.config.json 项目的配置文件sitemap.json 用来配置小程序及其页面是否允许被微信索引1.app.json用来对微信小程序进行全局配置,决定页面文件的路径(全局配置) 1).pages存放项目的页面(哪个页面在最前面,哪个页面就是原创 2022-12-30 23:32:36 · 1299 阅读 · 0 评论 -
小程序下单购买支付流程
小程序下单购买支付流程立即购买点击立即购买会先调用立即购买的接口,传商品id和数量以及规格id过去获取到data数据,然后跳转到填写订单页面,进入填写订单页面会立即调用填写订单的接口,传catid过去,catid就是刚刚获取到的data数据,调用之后会获取到订单的信息,把信息渲染到订单页面就可以了,第三步,点击去付款会触发两个接口,首先先触发提交订单的接口,传catid以及优惠券之类的数据,得到订单id,然后拿着订单id去调用支付的接口,会获取到做真正支付需要的数据,最后去调用小程序支付的api原创 2022-12-30 23:16:07 · 1707 阅读 · 0 评论 -
vue3代理
vue3代理原创 2022-12-15 20:45:47 · 242 阅读 · 0 评论 -
react代理
1.安装:npm install --save-dev http-proxy-middleware2.在src目录下创建一个setupProxy.js文件,在这个文件中配置3.创建文件:src/setupProxy.js原创 2022-12-15 20:43:19 · 119 阅读 · 0 评论 -
react的useState案例
hook的使用 useState处理之后数据返回的是一个数组 数组的第一个元素就是定义数据 数组的第二个元素就是操作数据的函数原创 2022-12-15 20:40:22 · 176 阅读 · 0 评论 -
react搜索框输入格子变色案例
react搜索框输入格子变色案例,.React事件绑定 1.在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick六.react条件渲染 1.if 语句:如果有数据就显示组件,如果没有数据就不显示任何内容。posts 为需要渲染的列表 2.三元运算符 3.&&运算符:如果条件为真,则逻辑 && 运算符之后的表达式将是输出。如果条件为假,React 会忽略并跳过表达式. 2.规范 1) 需要使用()包含,代表一个整体原创 2022-12-10 14:43:51 · 149 阅读 · 0 评论 -
react生命周期请求数据实现切换页面内容
react生命周期请求数据实现切换页面内容,挂载阶段componentDidMount: 组件装载之后调用,此时可以获取到DOM节点并操作,比如对canvas,svg的操作,服务器请求,订阅都可以写在这个里面,但是记得在componentWillUnmount中取消订阅更新阶段getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用shouldComponentUpdate: shouldComponentUpdate(nextProps, nextStat原创 2022-12-10 14:22:44 · 239 阅读 · 0 评论 -
使用react制作简单购物车
开发React必须依赖三个库 1.react:包含react所必须的核心代码 2.react-dom:react渲染在不同平台所需要的核心代码 3.babel:将jsx转换成React代码的工具组件化方法1).编写React的script代码中,必须添加 type="text/babel",作用是可以让babel解析jsx的语法2).使用ReactDOM.createRoot创建一个根节点用变量接收,把内容渲染到root上3).定义组件4).要渲染的根组件5原创 2022-12-10 14:12:53 · 972 阅读 · 0 评论 -
使用ECharts制作柱形图
使用ECharts制作柱形图1.下载EChartsnpm install echarts --save2.在main.ts引入EChartsimport 'element-ui/lib/theme-chalk/index.css'import * as echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts //注册组件3.在主页面先放一个div大盒子,设置宽高原创 2022-11-06 19:07:33 · 938 阅读 · 0 评论