web项目开发
项目中的知识点
SpringSir
道阻且长,行则将至。
展开
-
原生js实现拖拽改变宽度
javascript 拖拽宽度原创 2023-12-04 14:46:22 · 256 阅读 · 0 评论 -
用户反馈组件实现(Vue3+ElementPlus)含图片拖拽上传
vue3 element-plus 用户反馈 图片拖拽 图片上传 图片和文字一起上传原创 2023-12-01 16:57:30 · 478 阅读 · 0 评论 -
vue3-element-plus,控制表格多选的数量
element-plus, 控制表格多选数量原创 2023-07-20 15:30:24 · 1076 阅读 · 0 评论 -
Element-Plus select选择器-下拉组件错位bug(有高度滚动时)
element-ui、element-plus select选择器,下拉菜单滚动时错位原创 2023-07-03 10:35:45 · 1384 阅读 · 0 评论 -
如何切换不同的node版本(不使用nvm,适用于内网开发)
node多版本配置、切换原创 2023-04-20 17:41:55 · 651 阅读 · 0 评论 -
Vue3.2-动态加载异步组件
vue3 动态组件 异步组件原创 2023-03-14 13:19:51 · 204 阅读 · 0 评论 -
element-plus,date-picker组件,选择00:00:00,却转为12:00:00
element-plus date-picker 12小时制 24小时制原创 2023-02-07 17:45:27 · 726 阅读 · 0 评论 -
Vue3+Element-Plus,重置指定表单项
Element-Plus+Vue3, 重置指定表单项原创 2022-12-08 11:32:51 · 1533 阅读 · 0 评论 -
环形进度条-带加载动画(Vue3+TS)
自定义环形进度条组件原创 2022-06-18 00:40:21 · 1352 阅读 · 1 评论 -
vite+Vue3技术栈项目- 解决跨域配置代理
vite+Vue3技术栈项目- 解决跨域配置代理1. 跨域问题引入2. 解决跨域编码:3. 更改后端请求:4. 编码测试OK1. 跨域问题引入我的前端项目启动,是 http://127.0.0.1:3000需要访问的后端接口是:http://localhost:9693/httphwm/getList如果直接请求,会出现跨域问题,如下:2. 解决跨域编码:在项目根目录下,创建文件 vite.config.ts,配置文件如下:import { defineConfig } from 'v原创 2022-02-22 18:38:33 · 3213 阅读 · 1 评论 -
JS 浏览器地址栏传递参数,参数加密/解密(编码/解码)- 转载
我们有时候在JS里进行页面跳转,并且传递了参数(AppName),如下:window.location = “…/…/views/form/edit.html?AppName=新增”但是跳转之后我们用 window.location.search 取出来却成了这样:“?AppName=%E6%96%B0%E5%A2%9E”实际上浏览器在传参的时候对参数进行了编码,那么我们要用的时候就需要解码,解码方法有:1、decodeURI()2、decodeURIComponent()两者之间的区别是:转载 2022-02-07 13:51:56 · 3066 阅读 · 0 评论 -
路由跳转错误:Uncaught (in promise) Error: Redirected when going from “...“ to “...“ via a navigation guard
vue路由跳转错误:Uncaught (in promise) Error: Redirected when going from “/layout/home” to “/layout/user” via a navigation guard.Uncaught (in promise) Error: Redirected when going from “…” to “…” via a navigation guard.在项目开发中,并不是每一个路由跳转都是明确的。 例如很多页面跳转需要登录判断,原创 2021-08-03 20:54:47 · 31846 阅读 · 17 评论 -
vue2.0动态代理详讲
2.配置示例 devServer: { proxy: { // 只要请求的路径中有 /pdf 就会走这个代理 '/pdf': { // 请求的路径会变成以下路径 target: 'http://61.186.254.137:20001', // 是否开启跨域(如果接口跨域,需要进行这个参数配置) chang原创 2021-12-16 14:27:23 · 1120 阅读 · 0 评论 -
前端-代码规范
@TOC前端-代码规范vue文件基本结构<template> <div></div></template><script> export default { components: {}, data() { return { name: '张三', // 用户名 age: '18' // 年龄,所有变量均需要注释 }; }, methods原创 2021-10-08 14:45:09 · 124 阅读 · 0 评论 -
Vue的混入和继承
混入将多个vue文件内重复使用的功能代码,提取成单个js文件,在需要使用的地方进行调用即可。在一个js文件内定义一个对象, 在对象中可以写 vue文件内的 data 、methods、components等所有<script>中可以定义的代码。混入注意(重名情况)组件中的 data变量名 和 混入中的 data变量 名, 发生重名时, 以组件为准;组件中的 methods,computed,wath名称 和 混入中的 methods,computed,wath名称 名, 发生重原创 2021-09-21 02:38:15 · 3118 阅读 · 4 评论 -
父子组件传参 关于 .sync修饰符等用法
父子组件传参 关于 .sync修饰符等用法单向数据流讲解Vue2.x使用定义事件的形式, 通知父组件修改.sync 和 update: 的使用父传子, 传递多个数据的简写采用v-model简写(要求严格)Vue3.x使用普通用法简写单向数据流讲解单向数据流(堆可以修改,栈不可修改)我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值但实际上, 对于修改值, 真正是:`基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改Vue2.x原创 2021-09-17 20:25:30 · 764 阅读 · 0 评论 -
Vue Router两种模式
hash 模式 (默认)工作原理: 监听网页的hash值变化 —> onhashchange事件, 获取location.hash使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转主要用在单页面应用(SPA)// 模拟原理// 监听页面hash值变化window.onhashchange = function(){ // 获取当前url的哈希值 const _hash = loca原创 2021-09-15 11:04:23 · 140 阅读 · 0 评论 -
Vue2.x和Vue3.x-路由钩子详讲及对比
Vue2.x和Vue3.x-路由钩子详讲及对比vue2.x前置概念:路由钩子分类路由和组件的概念(方便理解钩子函数)全局路由钩子路由配置守卫钩子组件内的守卫钩子路由钩子执行顺序vue3.x对比变化图区别补充:vue2.x前置概念:路由钩子分类一共分3类, 7个钩子路由和组件的概念(方便理解钩子函数)路由和组件是2个概念, 可以粗犷的认为:路由是浏览器网址组件是显示在网页上的不同内容全局路由钩子router.beforeEach(to, from, next){ } 前原创 2021-09-14 20:40:48 · 993 阅读 · 0 评论 -
watch侦听器的使用-Vue2和Vue3
watch:侦听数据变化 (某个值的change事件)vue2.x data(){ return{ num:10 } }, watch:{ num:{ /* * newValue:当前值 * oldValue:修改上一刻的值 */ handler(newValue,oldValue){ // doSomething .原创 2021-09-13 18:36:54 · 142 阅读 · 0 评论 -
兄弟组件通讯bus-Vue2和3比较
vue2.xVue.prototype.$bus=new Vue()监听: this.$bus.$on(‘方法名’,(参数)=>{}),它可以累加触发: this.$bus.$emit(‘方法名’,实参值)销毁:this.$bus.$off(‘方法名’),谁监听谁销毁注意: 由于监听可以累加, 所以必须要有第四步销毁vue3.xtiny-emitter插件用法安装插件 npm i tiny-emitter导入使用import emitter from ‘tiny-emi原创 2021-09-13 18:05:36 · 163 阅读 · 0 评论 -
vue刷新页面的两种方法(provide / inject的应用)
方法1:直接调用函数将整个页面重载, 以下两种都可以window.location.reload()this.$router.go(0)方法2:采用provide / inject(静刷新)在高阶函数中声明一个reload刷新函数<template> <div id="app" v-if="show"></div></template><script>export default { // 控制显示/隐藏, 实现原创 2021-09-13 17:57:53 · 631 阅读 · 0 评论 -
vue给v-html渲染出的页面添加样式 >>>
在选择器中, 使用 >>><template> <div v-html="data" class="box"> </div></template><script>export default { data(){ return{ data:"<h1>Hello JavaScript</h1>" } }}&l.原创 2021-09-13 17:34:05 · 399 阅读 · 0 评论 -
跨域原因, 多种解决方案
跨域原因是由于浏览器的同源策略限制;跨域指: 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域JSONP这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇.核心思想: 网页通过添加一个<script>标签的src属性,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。缺点:需要后端配合才能完成只能发送get请求实现:注意后端返原创 2021-09-11 18:37:51 · 121 阅读 · 0 评论 -
JS-内存回收机制
什么是垃圾?一般而言, 没有被引用的变量就是垃圾, 会被清除;有一个例外, 如果几个对象互相引用, 形成了一个闭环. 虽然有引用, 但是也是垃圾.垃圾清除算法标记清除-常用从全局变量开始, 一层一层的往下标记, 所有被标记到的就是不会清除的;标记完成以后, 就会把没有被标记的清除回收引用计数每次一个对象被引用的时候, 就会加一;再被引用的时候, 再加一;有人不引用的时候, 就减一,当减到0的时候, 这个对象就会被清除回收清除时间当使用以上两种算法, 满足回收原创 2021-09-07 12:12:00 · 224 阅读 · 0 评论 -
JS-把并列的对象数组转为树状结构
// 将并列对象数组, 转换为树状结构turnData(arr, pid){ const newArr = [] arr.forEach(item => { if(item.pid === pid){ const children = this.turnData(arr, item.id) if(children.length > 0){ item.children = children } newArr.push原创 2021-09-02 23:13:16 · 230 阅读 · 0 评论 -
js-把对象的中文key转换为英文的key
// 原数据const arrObj = [ { 入职日期: 43535, 姓名: '张三', 工号: '9527', 手机号: '13899999999', 转正日期: 43719 }, { 入职日期: 43535, 姓名: '李四', 工号: 9528, 手机号: 18255555555, 转正日期: '43719' }]// 转换const obj = { 入职日期: 'timeOfEntr原创 2021-08-30 15:06:22 · 999 阅读 · 0 评论 -
vue 分页删除最后一条数据,返回上一级的分页
需求: 在删除某一页的唯一条数据时, 能成功跳转回删除操作页的上一页async del (id) { try { await this.$confirm('确定删除吗?', '警告') /** * vue 分页删除最后一条数据,返回上一级的分页 * * 这两个数据都是在 "data" 中定义的 * this.totaData: 总数据数量 * this.pageSize: 页容量 */ const tot原创 2021-08-27 19:40:09 · 1048 阅读 · 0 评论 -
父子传值, 报错
单向数据流, 子组件不允许修改父组件的数据, 否则报错原创 2021-08-26 19:58:37 · 101 阅读 · 0 评论 -
关于!!+Cookies.get(‘sidebarStatus‘)讲解
文章目录问题引入作用及文件位置作用文件位置!!+Cookies.get('sidebarStatus')详细详解总结问题引入在vue-element-admin框架中, vuex的app子模块中有这段代码:opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,其中的 !!+Cookies.get('sidebarStatus') , 看到的第一眼令人费解作用及文件位置作用控制左侧的 “侧原创 2021-08-19 18:29:04 · 4176 阅读 · 6 评论 -
前端-环境变量配置(vue)
说明一个实际开发项目最少有两种环境:开发环境: 程序员正在开发项目;生产环境: 程序员的代码已经写完了,项目已经上线了;当然除此以外, 根据实际情况还有预发布环境、测试环境等…但是以上2个环境是最低要求配置环境变量注意: 修改任一环境变量之后,需要重启服务器配置开发环境(npm run serve)在项目的根目录下创建一个文件: .env.development在文件中添加我们要配置的变量: + 变量名结构: VUE_APP_XXX + 例如: V原创 2021-08-18 15:23:44 · 1143 阅读 · 0 评论 -
vue中-图片上传预览和FormData上传
vue中-图片上传预览和FormData上传图片上传预览FormData上传图片上传预览原理: 通过监听input表单的 change事件, 获取标签的文件FormData上传要实现文件上传, 必须借助FormData对象;表单域中, 需要提交的数据, 必须设置name属性, 且取值和接口的参数名一致;FormData实例化的时候, 需传入form表单的dom对象;如果有非表单项的数据数据需要传入, 可以借助 .append("key", value) 追加参数, 该方法没有返回值, 不原创 2021-08-14 18:01:00 · 192 阅读 · 0 评论 -
vue路由传参-Vue2.x和3.x一样
两种vue路由传参-目录动态路由匹配介绍第一种 query第二种 params动态路由匹配介绍作用 : 跳转路由时给组件传参; + 类似于以前跳转页面window.location.href 传参注意:路由地址使用 path, 路由地址前面的 / 可省略, 因为写的是路径;路由地址使用 name, 路由名字前面的 / 必须省略, 因为写的是路由名称;写法上注意, 跳转传值的时候单词是router, 取值的时候单词是route, 一个有r, 一个没有第一种 query路径传原创 2021-08-14 17:35:23 · 102 阅读 · 0 评论 -
聊天室功能-消息过多时, 怎么让滚动条位于最底部?
// 滚动条自动滚到最底部this.$refs.char.scrollTop = this.this.$refs.offsetHeight原创 2021-08-10 18:47:20 · 410 阅读 · 0 评论 -
项目中, 后端使用其他网站的图片等资源报403与404错误
出现404与404错误原因因为我们的服务器里面的图片并不是自己的,而是从网上找的一些图片链接;403原因:没有权限。 有的服务器图片做了防盗链处理,不允许在别人的网页去获取他们的服务器;404原因:路径错误。 有的图片可能被别人删除、更改域名、服务器、项目停止维护等原因,导致目标资源不存在, 无法获取.解决解决方案:给你的html页面添加meta信息<meta name="referrer" content="no-referrer" />原理:别人怎么知道我在使用他原创 2021-08-10 18:40:30 · 854 阅读 · 1 评论 -
JS-函数防抖与节流
JS-函数防抖与节流目录防抖引入防抖场景1(鼠标移入)防抖场景2(键盘按键)函数节流防抖经典应用常见: 手风琴效果引入没有做防抖的网站:做了防抖的网站:防抖场景1(鼠标移入)抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件。例子: 想看第五张图片,。不想看2 3 4张。 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面。误触发。函数防抖 : 用户连续多次触发某个事件,则只执行最后一次实例及解决代码:<!DOCTYPE html&原创 2021-08-10 18:29:53 · 114 阅读 · 0 评论 -
解决vue中, vant插件,van-img标签无法读取本地图片问题
问题在使用移动端布局框架, vantjs的时候, 本地图片无法加载:解决先将需要使用的图片导入import imgA from '@/assets/a.jpg'import imgB from '@/assets/b.jpg'将导入的图片, 放到data数据中:// 这里采用对象简写形式data () { return { imgA, imgB }},结构代码:由于src需要读取的是变量, 所以只把图片数据放在组件的data中<template>原创 2021-08-10 17:51:56 · 1080 阅读 · 0 评论 -
项目中2个Token的原因
问题:项目中2个Token, 一个时效2个小时(简称:短Token), 另一个时效14天(简称:长Token),为什么要用2个Token?解答:基于安全性, 防止Token泄露的考虑, 服务器资源中所有的请求都只能使用短Token, 并且短Token只有2小时时效;长Token的作用只有一个, 就是短Token时效了的时候, 用长Token去请求获取新的短Token,只有这个接口中, 才能用长Token发请求.import Vue from 'vue'import axios from.原创 2021-08-07 09:52:29 · 1091 阅读 · 1 评论