- 博客(30)
- 收藏
- 关注
RSS订阅原创 根据权限映射导航栏
背景：当项目面向的对象不只是一个角色的时候，需要我们考虑根据角色的不同，页面功能导航栏选项也要不同。这样可以避免跨权限问题。保证了在一个项目里面供多个角色都能安全使用。举例子：公司培训管理系统，涉及到：学生、讲师、团队领导三种角色，而且一个人可以是双重角色。比如A学生可能是B学生的讲师，则A既是学生又是老师。学生具有选课功能，而讲师没有。
2024-02-26 16:36:15
352
原创 图片的分片上传-node篇
当我们想实现图片上传到服务器，再让服务器返回一个url，我们把这个url设置到img的src属性实现图片的回显。这种场景非常常见。如果用户上传的图片稍微大一些会导致什么大图文件会占用更多的网络带宽和服务器资源，因此上传时间可能会延长。用户在上传大图时可能会感受到明显的等待时间。大图文件需要服务器更多的存储空间和处理能力。如果同时有多个用户上传大图，服务器可能会面临存储压力和处理请求的压力。当服务器处理大图时，生成图片URL可能会变得更慢，导致图片回显的时间延长。
2024-02-24 16:14:34
820
1
原创 主题定制的集中方案
我们可以使用选择器选取html的根元素，在根元素上定义属性被当作全局属性:root是一个，表示文档根元素，所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用。
2024-02-22 15:03:23
336
原创 在uniapp中解决 NumberBox 数据不合法的问题
问题说明：当用户在 NumberBox 中输入字母等非法字符之后，会导致 NumberBox 数据紊乱的问。
2023-02-25 22:42:33
545
原创 使用 Set 对象对关键字进行去重操作
方法一： 会关键字前后顺序的问题，解决：页面中渲染搜索关键词的时候，不再使用 data 中的 ，而是使用计算属性 ： 方法二：即解决了关键字前后顺序的问题，又解决了关键字去重
2023-02-25 17:56:21
304
原创 vuecli开发环境-做代理服务器
原因: 前端->后端接口跨域问题, 但是后端既不支持jsonp也不开启cors, 前端无法直接请求。使用: 还好webpack开发服务器, 默认就支持代理转发的功能, 但是需要你配置代理转发的地址。-- 后台接口返回 'callBackFn({"a": 10, "b": 20})' -->前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据。// data就是'{"a": 10, "b": 20}'(2): axios请求, 要请求本地开发服务器相对地址开头。
2023-01-11 17:34:59
355
原创 每添加一条消息就让滚动条滚到最底部
添加新消息的两种清空：1.用户互动发送2.客服发送消息所以我们最后封装一个函数专门处理滚动条到最底部在发布消息 / 接收到消息的时候, 调用。
2023-01-11 16:19:13
519
原创 小思同学_webSocket使用
安装客户端socket的包(支持websocket) - 内部对websocket进行了封装。在 send事件中, 把服务器发来的数据装到数组里。只有连接内置事件执行了, 才能进行后续操作。vuecli项目中下载socket.io包。继承webSocket, 和后台建立通道。在created监听socket的消息。在Chat/index.vue引入包。与后台协商好, 发送消息和接收消息的。建立和服务器的socket连接。要到连接地址和参数等注意事项。在组件销毁前, 关闭服务。创建socket服务。
2023-01-11 15:56:59
176
原创 webSocket使用-socket.io包使用
它是一种新的技术, 前后端只要支持这种协议, ==后端可以主动向前端推送内容==其实VueCli脚手架服务器 和 浏览器之间就建立了一个WebSocket通道。才实现的代码一改, 服务器向浏览器主动推送更新的js文件, 页面就自动更新了。Websocket 通过HTTP/1.1 协议的101状态码进行握手。在public文件夹下创建index.js文件。前端对WebSocket封装很好。后端对socket代码也封装好了。项目中使用: 做一个智能客服。
2023-01-11 15:12:12
478
原创 优化_图片懒加载
vant组件库里有个叫LazyLoad指令, 在main.js中全局注册。指令的值设置为你需要懒加载的图片。对于van-image标签。
2023-01-11 10:43:47
1009
原创 优化_首页-滚动条位置
原因：切换到我的页面，页面高度不够，没有滚动条（此滚动条为整个网页的），滚动位置会回到顶部，所以切换到首页，,滚动条还在顶部。因为home组件被keep-alive缓存，当切换出去了该页面只会被保存html和css js，而不会保存滚动位置。知识点：组件被缓存，切走了就会失去激活生命周期方法触发 deactivated。无被缓存，切走了，destroyed摧毁生命周期方法触发。解决：首页失焦（被切换时），在他的路由对象meta中保存滚动位置。keep-alive不会缓存滚动条的位置的！
2023-01-10 18:03:23
120
原创 优化_频道-滚动条位置
一下效果都没有发生路由切换！！！知识补充：activated：在组件被激活时调用，，之后每次keep-alive激活时被调用。deactivated：在组件被停用时调用。注意：只有组件被keep-alive包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在2.1.0版本之后，使用exclude排除之后，就算被包裹在keep-alive中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。这里我们的页面home组件被keep-alive包裹。
2023-01-10 17:19:41
68
原创 高亮的样式--包工具highlight
实现效果展示：分析：1.想要让代码高亮, 必须在时, 就要把代码分段用pre+code标签包裹2.前端可以通过获取这些标签名/指定类名, 分别给予相应样式。
2023-01-09 18:31:04
369
原创 ImagePreview 图片预览 的使用
ImagePreview 是一个函数（必须使用按需到处），调用函数后会直接在页面中展示图片预览界面。4、在 img 点击事件处理函数中，调用 ImagePreview 预览。1、从文章内容中获取到所有的 img DOM 节点。3、遍历所有 img 节点，给每个节点注册点击事件。2、获取文章内容中所有的图片地址。二、处理图片点击预览。
2023-01-08 20:44:19
4488
原创 关于 Token 过期问题的两种解决方案
手动更新token。拿到最新的token值后再重新发起刚刚因token过期的请求。2.refresh_token也有过期的时候，这时只能强行让用户自己重新登入了。手动更新token。拿到最新的token值后再跳回之前浏览的页面。时候，我们自己手动添加请求头为refresh_token。注意：1. 在请求响应器中做判断在非。请求头配置token，而。
2023-01-06 14:45:14
30969
2
原创 移动端 REM 适配
是一款 postcss 插件，用于将单位转化为 rem用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。
2023-01-05 21:05:34
742
原创 将 SVG 图标 包装为 Vue 组件来使用
设计师为我们单独提供了设计稿中的图标，为了方便使用，我们在这里把它制作为字体图标。在index.less（全局样式）中导入，注意全局样式必须引入main.js才会生效。在styles文件下创建icon.less,把复制过来的代码粘贴过来。五、配置到项目中使用。
2023-01-05 18:23:13
293
原创 如何将第三方包用cdn地址引入到index.html中保证运行？
但是第一次运行开发环境的速度会有点慢，所以开发环境下想要webpack引入本地的node_modules那些第三方包。生产环境，打包时会以public/index.html,也有那些第三方的cdn地址，所以也能正常运行。dist瘦身：影响dist的体积，其他第三方包用cdn地址引入到index.html中保证运行。把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。打包dist和开发环境都会使用这套配置（cdn地址），并排除掉第三方。问题：我们虽然排除调了第三方的包。
2022-09-29 19:45:28
1368
原创 如何打包发布减少包体积排除第三方？
比如 elementUI 文件就很大，而且这类插件长期不需要我们进行更新，所以。配置后再次运行 npm run build 打包生成的dist文件内存小很多。==一定要去修改掉引入Element用的变量名, 这里要匹配去替换==此选项作用, 告诉webpack排除掉这些包, 不进行打包。==因为cdn里的源代码配置在ELEMENT这个变量上==把一些平常不需要用的包排除在打包文字之外。全部打包到自己的项目中呢？
2022-09-29 19:12:01
1239
原创 解决打包问题--出现404问题
publicPath：默认值'/'确保开发环境下，是这个值，因为开发服务器会把所有打包在内存里面而且作为服务器的根目录文件夹，既结对地址。你如果把dist文件夹交给后台运维工程师部署到服务器上，dist下内容就得在服务器根目录才行，地址是以/开头（要找到当前index.html打开时所在服务器的根地址（文件夹））。生产环境准备上线了，这个时候，就得用相对地址，publicPath：'./'1.默认打包，index.html引入其他打包的文件使用的是绝对地址，路劲不以/开头，就是以./开头（默认）
2022-09-29 18:44:06
1421
原创 如果token有, 但是过期了怎么办?
前端是无法判断token是否过期了的, 所以当某次发请求把token带给后台做验证的时候。但是你又不确定在哪个请求会401, 所以要用统一的响应拦截器做判断。后台发现token过期了, 则会返回响应状态码401。中, 给自定义axios函数添加响应拦截器。
2022-09-28 16:49:39
1548
原创 在请求拦截器统一携带请求headers参数
正常接口方法里, 在函数里请求headers参数需要写多个, 要修改需要改多处, 所以我们决定在请求拦截器统一携带。
2022-09-28 16:26:25
925
原创 vuex中管理用户信息的数据如何渲染在组件中的?
方法读取vuex中被管理数据，那么假如用户数据有昵称，邮件，头像等，就得一个一个 . 出来太费劲了！在src/store/index.js。因为用户数据肯定不止一点，如果通过。：通过store中的。
2022-09-28 15:18:33
157
原创 如何实现持久化存储vuex
自己写localStorage.setItem等 需要一个个写, 很麻烦自己写localStorage.setItem等 需要一个个写, 很麻烦。刷新vuex的值会回归初始化, 如果在保存到vuex时, 它能自动保存到浏览器本地, 默认从浏览器本地取呢?这次再来重新登录, 查看浏览器调试工具vuex和浏览器本地存储位置, 是否自动同步进入。刷新网页看调试工具里vuex的默认值确实从本地取出了默认值, 保证了vuex的持久化。(配合vue2使用, 默认最新版是配合vue3使用)
2022-09-26 22:36:44
211
原创 axios以data，params，headers传参方式的区别
params的对象参数名和值，axios的源码会把参数和值，eg：先查看接口文档。
2022-09-26 21:16:24
2053
原创 vue中封装请求库
这种分层架构思想, 可以更好的统一管理项目中所有接口, 并也方便统一给axios方法。1.新建src/utils/request.js项目核心请求方法的模块文件。2.新建src/api/index.js项目接口方法统一管理模块文件。3.在任意组件中, 引入接口请求方法, 并请求数据。添加拦截器和修改基地址。
2022-09-26 19:31:25
1650
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人