- 博客(38)
- 收藏
- 关注
RSS订阅原创 Vue3之Suspense
我们可以看到官网并不推荐我们使用它，目前仍处于测试中。AsyncComponent组件。SuspenseView路由组件。suspense测试。
2023-10-02 11:35:59
3106
原创 SEO搜索引擎
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO。通过欺骗技术和滥用搜索算法来推销毫不相关、主要以商业为着眼的网页，导致用户搜索到不满意的搜索结果（遭剔除）服务端渲染，服务端生成html返回给浏览器渲染，页面的数据可以更好的给搜索引擎收录到。隐藏文本（热门的关键词在网站上小字体展示，或者隐藏，但是这些关键词与该网站不相关）我们可以看到一些网页中的数据通常是通过ssr实现服务端渲染的。设置网站的 keywords 关键词标签。设置网站的title标题标签。
2023-10-01 23:48:53
5130
原创 Docker 自动化部署（实践）
我们通过创建容器demo，将demo容器的配置文件拷贝到主机当中 它的作用是为了让我们使用创建容器的配置文件，后期我们通过主机容器映射到新的容器 从而实现nginx文件同步映射到堡塔文件。映射文件看好自己文件的名称是否一样 这里的/home/www/project是4.1中配置remote directory中的匹配地址。将容器demo的/etc/nginx/nginx.conf目录拷贝到主机的/home/www/nginxConf/目录中。docker rm 容器id/容器名称 删除容器。
2023-10-01 14:18:49
3550
原创 ajax封装get、post请求
getParams是为了将我们get请求中 获取到的date数据可以解析到我们的请求地址上，封装为一个函数。主要需要掌握ajax的原理，封装之前考虑到我们函数需要接收的参数。
2023-09-19 11:08:28
2893
原创 事件循环面试题如何去回答？
谈到事件循环，我们脑子里会延伸出很多问题，比如说浏览器方面的一些问题、同步异步、线程进程等等等等，很多问题，如果我们希望回答这个问题可以让面试官眼前一亮亦或者说回答这个面试题你能把它说的面非常广，我想此时你在面试官印象会更加深刻一些。(●ˇ∀ˇ●)该文章来源于渡一老师的腾讯课堂 可以加微信去免费领取腾讯课堂：duyi19891008。
2023-09-19 09:16:46
2890
原创 OCI runtime exec failed: exec failed:unable to start container process: exec: “mongo“: executable...
这里表明我们无法启动该进程，我刚开始一直纳闷，不应该啊 跟着官网来的，怎么出现问题了呢？今天按照Docker官网安装MongoDB的方式进行安装，容器运行成功以后 想要添加用户并设置密码尝试连接出现了错误，这里我们来解决一下吧。在mongo5.0以上的版本使用mongo来执行mongodb命令已经不支持了，你需要改用mongosh来替代mongo！通过docker ps我们查看容器状态 此时已经处于运行的状态。此时我们发现已经成功，这时我们再进行添加和设置用户密码。按照步骤我们此时运行mongo容器。
2023-09-15 19:16:41
2991
原创 docker: Error response from daemon: driver ailed programming external connectivity on endpoint mong
我逛了很多博主，大家都是在纠结删除容器或者重启容器亦或者重启docker来解决，可能一些朋友的问题源于这些，但是很多朋友的问题可能是因为你的端口号正在被使用，你再次以同样端口号来进行运行，当然是已经被占用了。我们先通过netasta -tanlp看看我们的端口是不是已经在使用了，如果已经被使用我们需要将它kill（杀掉）。这里我们通过kill+占用端口号的进程（这里是1530）我们通过docker ps 查看一下我们容器的状态。希望可以解决你的问题(●'◡'●)这时我们端口号已经没有进程占用。
2023-09-15 18:40:54
2890
原创 面试如何回答弹性盒子布局这个问题呢？
在我们面试中如果被问道css方面的面试题 那么极有可能被问到的一道面试题就是弹性盒子，本篇文章通过一张图带你拿捏这道面试题。1、首先需要说一说弹性盒子的基本概念：弹性盒子是一种用于网页布局中创建灵活和响应式设计的CSS布局模型。2、其次需要说弹性盒子存在哪两个部分：弹性盒子模型包含两个部分容器和项目，容器是包含弹性项目的父元素，项目则是容器内的子元素。3、然后需要说弹性盒子的两个轴：弹性盒子存在一个主轴和一个交叉轴。主轴是弹性盒子子元素在容器中排列的方向，交叉轴则是与主轴垂直的方向。
2023-09-03 20:09:34
3157
原创 弹性盒子的使用
弹性盒子是一种用于按照布局元素的一维布局方法，它可以简便、完整、响应式地实现各种页面布局。容器中存在两条轴，主轴和交叉轴(相当于我们坐标轴的x轴和y轴)。我们可以通过flex-direction来决定主轴的方向。主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为main start和main end。交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为和cross end。设置了。
2023-09-03 12:05:32
3072
原创 vue中router路由的原理？两种路由模式如何实现？(vue2) -(下)
和上期一样，我们都需要定义一个router类，并且定义了一个install方法，这都是在第一次实习的基础上做出了小的更改。这里我们通过递归的方式，将我们的一级路由信息一级子级路由信息全部添加到我们定义的matched数组中，并且我们每次路由发生变化以后会将我们匹配到的路由信息清空，重新再次调用我们的匹配递归方法。这样依次递归，就不会导致我们下一次路由匹配错误。let Vue;//保存选项// 定义一个current，保存当前的hash值// defineReactive定义响应式的对象。
2023-08-15 16:55:31
3083
原创 vuex的实现原理？(vue2)
通常我们使用vuex，都是通过下载vuex插件，自己创建一个store目录，在里面创建一个js文件，在文件中引入vuex，vue.use我们的vuex从而通过实例化一个vuex，定义五大核心从而实现一个基本的vuex。那我们如何不下载插件，自己创建文件自己通过插件的形式，实现一个vuex呢？我们需要知道，state是一个响应式的数据它应该怎么去实现呢，并且vuex是一个单向数据流，我们应该怎么讲单向数据流转起来。
2023-08-11 20:54:27
3102
原创 vue中router路由的原理？两种路由模式如何实现？(vue2) -(上)
div><router-link to="/home">首页</router-link><router-link to="/list">列表</router-link><hr></div>这里我们会发现使用以后会报错，因为我们没有下载插件，因此没有这两个组件。我们需要配置plugin插件由于没有这两个全局组件因此我们需要配置两个全局组件install方法是为了将我们的路由挂载在我们的组件实例上，通过mixin全局混入，将我们的实例上挂载$router属性。
2023-08-11 19:24:55
3209
原创 vue插槽是什么？如何使用？
通常通过插槽传递列表以后，我们想要执行一些操作，但是无法获取到数据，通过作用域插槽可以获取子组件中的值，父组件可以获取值从而进行业务逻辑处理。插槽是vue提供的一个内置组件，是一个占位符。顾名思义就是没有名字的插槽，我们通常是通过匿名插槽把我们在子组件标签内写的html全部渲染到子组件中。有名字的插槽，通常是将我们想要定义的html放置到对应的位置。匿名插槽：vm.$slots.default。插槽通常分为匿名插槽、具名插槽、作用域插槽。具名插槽：vm.$slots.name。
2023-08-08 19:59:51
2963
原创 vue组件通信的方式？
1、父传子：在父组件的子组件标签绑定一个自定义属性，子组件通过props获取父组件传递的数据。vue3通过defineProps接受props数据2、子传父：在父组件的子组件的标签上绑定一个自定义方法，子组件通过$emit触发父组件传递的方法从而传递数据给父组件。vue3中通过defineEmits接受父组件的方法vue3以上代码都是在setup语法糖中写的3、ref:通过给子组件标签定义ref属性，通过this.$refs.ref属性名或租子组件的实例。
2023-08-08 11:59:54
3050
原创 说说 Real DOM 和 Virtual DOM 的区别？优缺点？
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能。请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程。，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实。跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行。来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难。目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟。节点，浏览器没这么智能，收到第一个更新。
2023-07-25 11:26:34
2897
原创 react如何实现拖拽组件？如何实现拖拽排序功能呢(拖拽移动位置)？
在定义鼠标按下事件时(MouseDown)我们需要将它的x,y鼠标坐标改为我们的当前鼠标的坐标位置-元素位于我们页面的xy坐标位置，这样就可以获取我们鼠标在元素中的x,y坐标位置。首先实现拖拽必须定义定位为固定定位，我们在组件中定义一个盒子，设置为固定定位，并且设置top值以及left值，这两个由于是变化的因此我们需要定义state值从而拖过拖拽改变该值。移动时需要定义移动鼠标方法(onMouseMove)，定义它的位置为当前坐标位置-在页面的坐标位置，这样减去偏移量可以获取到我们移动到的位置。
2023-07-22 10:58:04
4932
原创 使用proxy代理实现前端跨域的流程。(不同的框架)
1. 如请求的实际接口是https://api-hmugo-web.itheima.net/api/public/v1/goods/search。再vite.config.js文件中配置proxy代理，再server中有一个proxy属性可以实现我们前端代理跨域。2、src目录下创建setupProxy.js文件使用插件http-proxy-middleware配置代理。2、那么我们在axios的url地址就可以写为‘/api/public/v1/goods/search’通过创建中间件来进行配置。
2023-07-17 14:57:10
3971
原创 pinia的基本使用。
在渲染页面我们通过引入我们pinia定义的store文件，并且引入pinia中的storeToRefs可以将我们store中的数据展开以供我们使用。并且通过引入的store文件中的属性$patch可以修改属性的值，$reset可以重置回最初的值。getters计算属性，可以使用已定义的计算属性，获取上个计算属性的值进行改变值重新赋值使用。页面数据直接可以通过属性渲染，并且pinia可以直接通过获取到的属性值进行修改数值等操作。3、直接在src目录下创建个文件，名称自起，创建一个js文件。
2023-07-17 11:22:27
2986
原创 在使用react+antd实现一个表单的增删改查遇到的问题。
首先大致说一下实现的功能，表单展示，表单的添加，表单的修改，以及表单的删除，搜索等。这里要求修改是根据我们点击某一行，实现高亮并点击修改表单回填从而进行修改数据。
2023-07-14 19:28:40
3339
2
原创 ==和===的区别？
当进行==时，会先判断数据类型是否相同，如果相同进行===比较，如果不同，它会转换数据类型再判断值是否相等。比如：用字符串"1"和数值1进行比较，由于类型不同，会将它们转换成相同数据类型，从而进行判断，因此为true。进行===判断时，判断类型如果不同直接就为false不会像==那样转换数据类型，相比较更加严格。我们可以觉得==是代表判断是否相同，===表示判断是否严格相同。
2023-07-12 19:42:51
2826
原创 使用docker部署mysql
p 13306:3306 将容器的 3306 端口映射到主机的 3306 端口。--name my-mysql 启动后容器名为 my-mysql。-e MYSQL_ROOT_PASSWORD=Dl123456 初始化 root 用户的密码。方法一：如果要正常退出不关闭容器，请按Ctrl+P+Q进行退出容器。方法二：如果使用exit退出，那么在退出之后会关闭容器。
2023-06-28 15:51:53
2852
1
原创 React项目开发的代码规范。
在utils中的tools.js中我们一些配置，比如我们request当中axios创建的baseURL在外面被抛出引入。在以后公司开发项目中我们的代码由于是多人开发不是一个人的开发，那么我们应该把一个模块分成多个模块来分开去实现。我们平时项目中请求axios直接在项目当中请求，但是我们以后大多使用都是封装到外部，通过抛出引入来使用。pages是我们的路由组件，我们使用路由的组件在此当中。router是我们的路由配置信息，我们的路由配置在当中。我们在src/services下封装我们的接口。
2023-06-27 19:35:04
2974
原创 后端如何实现多条件模糊搜索？我们使用antd的Table表格时如果出现key值不唯一报错的我们如何解决？
那么我们可以通过query、body、params方法可以获取到前端传过来的参数，我们再通过是否存在将它添加到一个对象中，我们查找数据使用find查找，将对象传入以实现多条件模糊搜索。我们前边可以看到，我们前端进行获取数据的时候使用到了for遍历，给数据中每个对象添加一个key值，这样就可以避免我们table报key值错误问题了。如果存在我们将它添加到我们的空对象里面 这里使用到了$regex是为了模糊搜索，否则就必须精准搜索。但是我们想要实现多条件的，那么我们应该判断前端是否输入了某个需要搜索的数据。
2023-06-27 11:11:19
3031
原创 当克隆文件以后如何使用命令修改代码并提交并同步(推送)代码
最后通过git push origin master 推送代码带master分支。当我们修改了仓库代码以后 我们先git add .将所有改动过的代码跟踪。其次git commit -m '我们定义任务名‘可以提交所有更新的代码。打开文件命令行工具Git Bash打开git命令行。首先我们创建一个文件夹git init初始化一下。git clone我们仓库中复制的地址 克隆文件。
2023-06-15 19:48:53
3254
原创 我们新建仓库以后如何将代码推到我们的仓库中？
git remote add origin https://gitee.com/xxx/xx.git //这里是我们复制的仓库https克隆链接。1、首先保证电脑上已经安装了git客户端，并自己已注册了github或gitee账号。commit -m 提交所有更新过的文件 -m后是我们给这次提交起一个名字。2、我们找到需要推到仓库的代码右键选择git bash here。6、在gitee上新建仓库的仓库复制https克隆链接。4、在本地项目目录创建本地仓库 init初始化仓库。5、上传所有代码到本地仓库。
2023-06-15 16:37:59
3386
原创 react中如何实现pc端原生拖拽？遇到的一些问题
2、鼠标坐标我们获取到了 但是我们拖拽时还需要获取到盒子的偏移量，因为我们拖动盒子时它的x坐标y坐标都会移动，我们可以通过获取当前点击的xy坐标与鼠标移动时xy坐标做对比，使第一次按下时准备拖拽盒子的xy坐标-我们移动时的xy坐标 +我们盒子偏移量也就是我们当前盒子的offsetLeft/offsetTop来获取到当前距离左侧与距离顶部的距离。1、当我们需要拖拽的时候我们首先需要鼠标按下去拖拽，因此我们需要获取到我们鼠标按下时鼠标的x坐标和y坐标。3、我们更改盒子左侧顶部距离，我们需要给盒子设置绝对定位。
2023-06-12 17:31:28
2927
原创 如何实现美团外卖相似的楼梯式布局？滚动右侧滚动条左侧实现高亮变化？点击购物车小球动画如何实现？简单的动画效果怎么实现？
运用到了antd-mobile的Sidebar侧边栏导航，属性activeKey表示唯一值key，与普通的标签key相似，onchange事件可以通过形参获取到我们的key值。这里是重点，我们获取到key值就可以判断点击了哪个侧边栏，通过这个来判断与右侧对应的数据。通过判断点击哪个左侧栏，获取到与之对应的右侧栏数据，通过原生控制dom节点方式，将它移动到右侧对应位置。点击加号按钮，使之获取到触发数量+-变化，并且获取到我们鼠标的左坐标右坐标，判断小球初始位置，4、左侧侧边栏数据渲染+事件。
2023-06-05 09:40:09
2947
原创 移动端如何实现上拉加载？下拉刷新？
1、首先需要下载第三方库antd-mobile我们需要使用的是InfiniteScroll 无限滚动、PullToRefresh 下拉刷新2、我们需要在最外层的盒子上定义ref属性，并且需要调用onScroll事件、最外层盒子样式需要overflow-y:scroll;这里我们需要使用ref获取到页面高度和滚动条高度通过onScroll事件来判断是否触底这里是触底的操作 我们页面到底数据更新是在这里进行重新调用获取数据接口来渲染页面css必须使用overflow-y:scroll;
2023-05-22 11:17:10
3759
1
原创 props 和 state 的区别？render在哪些情况中会执行？
两种方式更新数据都会出现的问题就是拷贝问题，由于对数据更新只有一层在更新数据时有时会出现更新页面不刷新问题，因此可以使用...扩展运算符进行展开来解决深浅拷贝问题。1、在类组件中我们调用setState进行状态更新的时候会触发render渲染（注意：不要再生命周期函数中调用setState会出现死循环问题）都是普通的 JavaScript 对象。2、在函数组件中我们使用useState对数据更新时会触发render渲染。render方法两种情况下会执行。
2023-05-12 16:18:11
2835
转载 redux本来是同步的为什么它能执行异步代码?实现原理是什么?中间件的实现原理是什么?
这个函数执行的是一个异步操作，fetch一段数据，在fetch之前发出一个pending action，成功后再发出一个success action。redux-thunk是最常用的异步中间件，它让disptach能接收函数作为参数，使得我们能在actionCreator中返回一个函数，在这个函数中设计异步操作，并在异步操作的开始和结束时刻发送action来控制视图的渲染。如果是函数，执行它（相当于截获了它）。好了，我们现在已经明确，在发起异步的时候一个action，执行完异步后一个action。
2023-05-08 10:19:51
2869
原创 拖拽功能实现
现在执行 npm install react-draggable，执行完后应该在你的 node_modules 中就装好了 react-draggable。现在，我们希望当用户鼠标拖拽把手时，把手本身可以被移动。首先我们把 react-draggable 导入。在准备好 react 脚手架后，你就可以到目录里，执行 npm start把项目跑起来。如果你本地没有安装 npx 的话，强烈推荐，使用非常方便。二、安装 react-draggable。三、接入 react-draggable。
2023-05-08 10:09:45
2902
1
原创 React实现添加购物车小车抛物线
立方贝赛尔曲线： cubic-bezier.com （可以设置好曲线弧度，直接复制）向页面底部抛掷小球，css动画, 立方贝塞尔曲线。点击按钮，先将小球移到点击的地方。设置个定时器（可以重复点击）创建一个小球Div ,
2023-05-08 10:07:25
2872
原创 react中的props.children使用map函数来遍历会收到异常显示，为什么？应该如何遍历？
在ReactJs中，props.children不一定是数组。this.props.children的值有三种可能。
2023-05-08 09:47:52
2867
转载 react提高性能的方法？
我们文中列出的基本上是React内部提供的性能优化方法，这些方法可以帮助React更好地执行，并没有列出例如Immutable.js第三方工具库的优化方法。其实性能优化的方法有很多，但正如上面所说的，合适的方法也要在合适的场景下使用，过度的使用性能优化反而会得不偿失。
2023-05-08 09:16:27
2878
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人