- 博客(86)
- 收藏
- 关注
原创 一文掌握前端自动化部署cicd流程
第一次弄的时候访问腾讯云地址,死活显示不出来,排查半天追踪到问题是路由没加载出来的问题。创建好之后可以在存储桶列表看到,这里面是可以上传图片视频的,相当于一个云盘。html访问不到其他资源(js,css等)需要手动配置。每次发布后访问html是下载文件,需要配置一下。注意我是执行过npm run eject的。注意选择公有读私有写,其他的用默认配置。官网购买很便宜,我买的一个月一块钱。我这里把代码托管在gitee的。
2025-01-25 19:37:15
335
原创 纯前端实现将pdf转为图片(插件pdfjs)
预览简历功能在移动端,由于用了一层iframe把这个功能嵌套在了app端,再用一个iframe来预览,只有ios能看到,安卓就不支持,查了很多资料和插件,原理基本上都是用iframe实现的。最终转换思路,将pdf下载转为图片然后绘制到canvans中也是一样的效果。
2024-12-31 21:36:04
1761
原创 数据结构:二叉树遍历
在 JavaScript 中实现二叉树的遍历,可以使用递归或迭代的方式。前序遍历的顺序是:根节点 -> 左子树 -> 右子树。中序遍历的顺序是:左子树 -> 根节点 -> 右子树。后序遍历的顺序是:左子树 -> 右子树 -> 根节点。后序遍历(Post-order Traversal)前序遍历(Pre-order Traversal)中序遍历(In-order Traversal)本内容由AI搜索,仅供学习参考。(In-order)和。
2024-12-04 16:34:36
296
原创 vue-h5:在h5中实现相机拍照加上身份证人相框和国徽框
参考:https://blog.youkuaiyun.com/weixin_45148022/article/details/135696629https://juejin.cn/post/7327353533618978842?searchId=20241101133433B2BB37A081FD6A02DA60https://www.freesion.com/article/67641324321/https://github.com/AlexKratky/vue-camera-lib效果:调用组件的主要组件方法
2024-11-11 13:20:58
2302
原创 React学习-hooks
官方文档:https://zh-hans.react.dev/reference/react/useActionState。
2024-09-03 14:13:30
701
原创 React学习-类组件+生命周期
1. 挂载阶段(Mounting Phase)constructor() 是 React 组件的构造函数,用于初始化组件的状态和绑定方法。在组件实例创建时调用,且只会调用一次。static getDerivedStateFromProps() 是一个静态方法,用于根据 props 的变化来更新组件的状态。在组件实例创建和更新阶段都会被调用。render()render() 方法负责根据组件的状态和 props 来渲染组件的 UI。它是组件生命周期中的核心方法,必须实现。
2024-08-12 15:12:40
797
原创 自己写的组件中使用v-model双向绑定
多余代码已去除,vue中组件传值具有单向数据流的特性,所以想实现双向绑定,则需要在子组件中重新定义一个变量timeStr。这里的时间选择表单是我写的一个组件,我想用v-model获取到实时的ref值。
2024-04-09 16:02:44
459
2
原创 基于vue-advanced-chat组件自义定聊天(socket.io+vue2)
通过上一篇文章我们已经在vue-advanced-chat中替换掉原有的firebase,用socket.io简单的实现了聊天功能。现在需要自义定该组件,改造成我们想要的样子:先将比较重要的几块提取出来。
2023-12-21 15:23:52
2349
原创 vue-advanced-chat使用指南(socket.io+node+vue实现聊天)
messageSelectionActions: [{ name: 'deleteMessages', title: '你确定要删除嘛?' }]
2023-11-02 11:22:17
2669
原创 日常开发问题汇总
发版时出现的问题:点击报错或提交没有反应排查:点击保存后控制台network没有发起请求,定位问题在前端代码,查看代码发现,代码执行到这一行就没往下执行了这个结果匪夷所思,细看代码后发现是下面代码的问题:然后重新打了个有log信息的生产包重新发版测试:点击保存后发现是下面的这几个table组件报的错,证实了问题最后重新分析代码:这几个table组件都加了key值,每次执行更新信息的操作就会刷新组件,导致保存时第一次给组件的数据被重置,保存调用的还是原来的组件而报错。
2023-10-26 14:45:47
186
原创 websocket+node+vite(vue)实现一个简单的聊天
先在根目录建一个server文件夹,在下面建一个index.js文件(node需要js文件才可以执行,别建ts文件),然后执行以下两条命令。//因为从后台接收到的数据是blob类型的值,所以转换一下。开启两个窗口就可以测试了,可以基于此代码优化各种细节。执行node index.js。新增一个登录页和聊天室页面。在测试之前需启动后台。
2023-10-16 10:09:29
557
原创 城市级联选择优化:H5使用的vant,后管使用Element
H5使用的vant,后管使用Element,两个组件所使用的的数据源不一样,导致两端的级联选择问题。因为element选择完地址后返回的地址格式为一个数组:结构类似于。h5选择地址后存为两个字段:birthProv, birthCity。解决方案 :将vant的资源库处理为element需要的数据。所以还需要封装两个函数来转换code和地址中文。现在就可以实现h5和后管同时起作用了!,而且数据库存的值为一个中文字符。
2023-05-10 11:35:57
868
原创 前端面试题合集
原型的本质就是一个对象。当我们在创建一个构造函数之后,这个函数会默认带上一个prototype属性,而这个属性的值就指向这个函数的原型对象。当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止(最顶层就是Object.prototype的原型,值为null)。所以通过原型一层层相互关联的链状结构就称为原型链。闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就是将函数内部和外部连接起来的一座桥梁。
2023-02-23 18:21:46
657
原创 用原生js封装的思想写一个购物车
2 准备数据和实现简单的逻辑封装该步骤需要实现能在控制台操作购物车的所有的功能(增加、减少商品数量,计算价格等)以下为控制台控制购物车的基本功能。通过前面两步,我们已经实现了能够在控制台进行操作购物车的逻辑。但是这个界面是需要交给用户去使用的,我们还需要将页面和第二步的逻辑结合在一起。
2023-01-31 16:15:30
183
原创 用electron+vue+ts开发桌面应用
安装electron插件这里安装插件会包如下错:在终端执行:配置参数在vite.config.ts中导入刚才引入的electron插件并配置入口文件:在项目根目录创建electron目录和index.ts文件index.ts现在执行会报错,需要将将pakege.json中的type去掉并增加main再次执行即可打开桌面程序安装插件package.json中build信息更改为再对electron目录下的index.ts修改如下先安装path依赖index.ts再在packag
2022-12-08 11:39:21
810
原创 Vite+Vue3+TS项目创建及基本环境搭建
vscode-文件-首选项-配置用户代码片段-vue.json添加如下代码即可快速创建vue模板{
2022-11-28 17:22:54
1640
原创 JeecgBoot低代码平台+Vue3之新建vue页面的路由配置及权限配置
1.克隆项目安装依赖并将项目跑起来2.查找到需要添加的路由文件3.找到路由文件添加新的模块4.编写新的页面5.在系统管理->菜单管理->里面找到同级模块的配置,然后新建一个跟他类似的配置。同级菜单:新增菜单:增加完成后就可以在同级菜单看到了6.在系统管理->角色管理里面增加用户的权限,这样用户就可以看到该页面了。刷新一下页面就可以看到新增的vue页面了!
2022-06-01 17:30:42
4522
4
原创 JavaScript高级应用
1.原型链构造函数创建一个对象function Dog() {}var dog = new Dog();dog.name = '旺财'console.log(dog);//Dog { name: '旺财' }prototype每个函数都有一个 prototype 属性function Dog() {}//注意:prototype是函数才会有的属性Dog.prototype.name = '小红'var dog1 = new Dog();var dog2 = new Dog(
2022-03-15 18:21:59
734
原创 vue工程化管理axios
1.创建vue项目并配置安装json-server插件npm install json-server -g安装完成后在vue项目的根目录添加一个db.json文件,并在其中加入json数据进入vue项目目录并执行json-server db.json在游览器输入对应api地址就可以拿到相应的数据了2.工程化管理axios文件axios的基本使用给项目安装axios插件npm install --save axios vue-axios引入axiosimport Vue fr
2022-02-14 15:43:37
1752
原创 vue-rouer的基本使用及路由文件工程化管理
测试环境搭建vue-cli搭建一个路由项目需求一实现未登录拦截到登录界面,登录后才可以访问其他界面目录结构:index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{ path: '/', name: 'Home', comp
2022-02-11 16:02:55
578
原创 vue2.0中组件传值的几种方式
搭建好测试环境app.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> <child></child> </div></template><script>i
2022-02-10 13:36:30
2137
原创 TypeScript入门基础
1.TypeScript安装npm install -g typescript检测ts是否安装成功tsc -v新建一个文件夹用vscode打开并创建一个ts文件因为游览器不支持ts和es6语法,所以需要有一个编译的过程将ts转换成es5语法设置自动编译新建一个文件夹testinit并在cmd中进入这个目录并键入tsc --init命令在该目录就生成了一个tsconfig.json的文件修改该配置文件的outDir部分我这里报了错,因为我的vscode是有用户权限
2021-12-23 14:50:47
1303
原创 vue2.0基础入门
VUE2.02.1入门1 什么是vue?构建用户界面用vue往html页面中填充数据,非常方便框架框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能要学习vue,就是在学习vue框架中规定的用法vue的指令、组件(是对UI结构的复用)、路由、Vuex只有上面罗列的内容掌握以后,才有开发vue项目的能力2 vue特性数据驱动视图双向数据绑定注意:这两个特性的底层原理是MVVM2.1数据驱动视图数据的变化会驱动视图自动更新好处:程序员
2021-11-23 14:34:48
1386
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人