![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 60
左直拳
程序猿
展开
-
随机产生一些江河上的坐标数据
我首先是想到用AI直接给我一点数据,没想到给出来的坐标,有许多都落在陆地上,根本不符合我的要求。后来结合AI给出的建议,我用程序计算,得到了一些坐标点。勾勒多边形的工具,我在谷歌地图上完成。https://www.google.com/maps/d/,不久前收到一个需求,说要随机创建约一百个某段江河上的坐标点,用于做一些数据呈现。1、在地图上沿江河勾勒出一个封闭的多边形,计算出来的坐标点,将落在该多边形内。我用vue3来完成。2、导出该多边形,用于计算。比如随机算出100个坐标。2、计算多边形内的坐标。原创 2024-06-18 20:01:17 · 296 阅读 · 0 评论 -
npm版本切换工具nvm
有了nvm,可以在一台机器上同时安装多个版本的nodejs,然后指定使用某个版本。原创 2024-04-07 16:03:44 · 1429 阅读 · 0 评论 -
利用nginx内部访问特性实现静态资源授权访问
在nginx中,将静态资源设为internal;然后将前端的静态资源地址改为指向后端,在后端的响应头部中写上静态资源地址。近期客户对我们项目做安全性测评,暴露出一些安全性问题,其中一个是有些静态页面(*.html)无须授权即可直接访问,里面的信息一览无遗,不安全。这些静态页面都是arcgis地图页面,依赖arcgis for js,没有办法做成一般意义上的动态页面。或者说,该项目是个老项目,目前只处于维护阶段,大规模改头换面不现实。原创 2024-02-23 19:33:43 · 2107 阅读 · 3 评论 -
vue3项目中typescript如何export引入(imported)的interface
引入接口后,不能原封不动地直接export出去。typescript支持面向对象语言中常见的接口(interface)、类(class)等。但我近几天发现,一个interface,通过import引入后,如果直接再export出去,是不行的。语法没有错,但运行时似乎出问题。比如,我写一个组件timeline,文件结构如下图所示。为规范其他模块调用,我在_type.ts中定义了一个接口,是关于数据类型的。原创 2024-01-25 17:06:05 · 1434 阅读 · 0 评论 -
vue项目使用typescript创建抽象类及其使用
如题,可以在vue项目使用typescript创建抽象类,然后使用这个抽象类。通过TypeScript,可以在前端应用抽象类了。抽象类的好处,可以同时满足继承和多态,好处多多。原创 2024-01-11 18:41:15 · 629 阅读 · 0 评论 -
创建EasyCodeMybatisCodeHelperPro模板文件用于将数据库表生成前端json文件
现在的前端,越来越像后端。当我听到我同事说这些名为*.data.ts的json格式文件,是通过工具自动导出来时,我感到震惊,50岁的心灵遭到暴击,内心一阵被时代抛弃的恐慌。前端的话,我复制了其中的实体类模板,改名为:vue.json.vm,然后稍为改改里面的内容,即可得到前端模板。在intellij idea中,通过插件EasyCodeMybatisCodeHelperPro,从现有的模板文件中选择一个复制粘贴,然后稍为修改,即可得到一个合适的模板文件。模板里的普通正文,会输出到导出文件里。原创 2024-01-09 18:41:19 · 902 阅读 · 0 评论 -
项目应用多级缓存示例
事实证明,这种多级缓存机制下,前端展示数据非常迅速,及时。虽然前端和WEB后端之间没有使用websocket进行数据传输,而是使用了最笨的定期获取,但丝毫没有影响前端的用户体验。2)WEB后端设置一个定时器,每2秒读一次redids的1号库,处理后写入redis的2号库。3)前端虽有多个组件,但不是每一个组件都向后端请求,而是统一请求一次,存入前端缓存,然后全部组件都从前端缓存中读取,对性能是一个保障。2)后端定期处理原始数据,将结果缓存,当前端请求时,返回缓存中的该结果,减少重复劳动,提高了性能。原创 2023-12-22 18:00:11 · 667 阅读 · 0 评论 -
vue3使用provider+ inject直接将参数由祖宗传送给孙子
如题。在vue项目中,如果祖宗想将参数传递给孙子甚至更小一辈的组件,是一件麻烦事。可以通过爷爷-儿子-孙子-曾孙这样的链条,一辈辈地传承下去,但未免太繁琐、太蠢了些;也可以通过store间接传送,但如何触发孙子们去获取是个问题。第三种方法是通过provider和inject方式。老祖宗provider,后代inject。在以下示例中,祖宗页面将一个json对象传给孙辈。其中,祖宗provider一个函数,函数返回一个json对象state。原创 2023-11-23 22:24:04 · 702 阅读 · 0 评论 -
vue3项目发布后修改配置文件仍然生效
使用json,并且要用ajax来加载;应用过程中也有一些注意的问题。有关“vue3项目发布后修改配置文件仍然生效”问题,之前做过一篇笔记。但事实上,那篇笔记的步骤,只解决了项目发布后,配置文件没有被压缩,仍然可见可编辑的问题;但配置文件编辑保存后,并没有生效,也就是说,改了也是白改,一点意义都没有。那篇笔记中,配置文件是js文件,使用import的方式。结果项目发布后,估计打包程序做了处理,直接将里面的内容读出来,内联到每个使用它的组件中去了,所以后面再改配置文件不会起作用。原创 2023-09-23 19:02:48 · 913 阅读 · 0 评论 -
vue3 async await
await者,等待异步操作完成也。上面例子中,getStructApi是一个promise,第二个,如果一个方法,包含了await关键词,则该方法在声明时要加上 async 关键词。意思就是死活等它完成,等到一个结果为止。原创 2023-09-04 20:03:09 · 754 阅读 · 0 评论 -
v-if的外面要罩一个div
【代码】v-if的外面要罩一个div。原创 2023-09-04 19:45:24 · 189 阅读 · 0 评论 -
vue中的nextTick的作用
今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是,等前面的都执行完了,再执行nextTick里面的方法。比如说,页面上有一块内容,正常情况下是隐藏的,满足条件下才显示。这里用了v-if来控制。结果就是new1的方法没有被调用。为啥,因为隐藏内容尚未展示完毕。加上nextTick就可以,意思我想应该是,等待前面的语句执行完,才触发nextTick里面的方法。由以上2段代码可知,某个事件触发下,首先显示隐藏内容,然后调用其中的某个部件的方法。原创 2023-08-29 20:51:35 · 850 阅读 · 1 评论 -
cookie的httponly问题
更奇怪的是,进一步调试,发现别的cookie都能顺利更新,唯独这个token不行。这代表该cookie无法被javascript操纵,既不能读取,更不能更改或删除,所以就无法被前端脚本所操作,只能是浏览器自己玩。cookie里的token还是旧的,这样的话,到后台请求资源,带上的token还是旧的,系统认为没有登录,于是退出,又回到了登录界面。鉴于“token”这个名字,差不多等于系统保留字,猜测是后台调用了其他系统返回所导致,覆盖了我们自己那个。于是将“token”改为“mytoken”,以进一步观察。原创 2023-06-01 17:39:37 · 1187 阅读 · 3 评论 -
VUE3页面div点击改变样式
现在用vue和react的话,基本都会选用一种UI框架,比如element plus,或者ant design等。但如果有些自己还想额外加一些效果的话,就会发现困难重重,不像以前用jquery那么好控制。注意这个isActive,忽而isActive.value,忽而 isActive === index,让人摸不着头脑。用上VUE之后,前后端分离,组件式开发,代码复用、独立性和隔离性都挺好,可维护性得以提高。相比之下,以前用jQuery,代码实在太多了。//如果点击的div没有处于置亮状态,则置亮。原创 2023-04-26 19:01:02 · 1967 阅读 · 0 评论 -
vue3 编译报 ESLint: ‘defineProps‘ is not defined no-undef 错误问题
网上找答案,总是扯什么修改.eslint.js文件,须知改文件位于node_modules,如大海捞针,并且有多个。改这里是没有道理的,也没有效果。可能是很久之前的答案了吧。原创 2023-01-12 17:30:27 · 1652 阅读 · 2 评论 -
vue页面中使用getElementsByClassName无法获取元素问题
在vue页面中,使用getElementsByClassName获取dom,发觉总是获取不到,返回的数组,空空如也,长度为0。需要使用nextTick原创 2023-01-05 17:03:55 · 6024 阅读 · 0 评论 -
vue3 setup语法糖下父组件调用子组件的方法
vue3下,父组件调用子组件的方法,如果使用了这种写法,那么子组件方法需要采用进行修饰,才能被外界调用。原创 2022-12-10 21:35:26 · 3460 阅读 · 6 评论 -
vue项目中img的src动态赋值
一般这个动态赋值,要用require。而且,这个require里,只能有一个变量,多个变量,有运算,有方法,都不行。没想到这破东西,居然这么折腾人。原创 2022-10-31 17:36:43 · 5334 阅读 · 3 评论 -
vue3应用elementPlus table并滚动显示
使用element plus的table,然后获取里面的dom对象,使用定时器设置滚动原创 2022-10-28 12:05:34 · 4145 阅读 · 1 评论 -
vue3实现单点登录
严格来说,所谓利用vue3实现单点登录,是指实现单点登录的前端。身份验证,只能是服务器端干的活。原创 2022-10-13 18:45:06 · 5051 阅读 · 0 评论 -
vue3 + element plus实现侧边栏
一般前端项目少不了侧边栏。如图所示这些鬼东西特别繁琐,所以我们喜欢找些现成、开源的所谓后台管理的前端框架,开箱即用。方便是方便,而且做得还挺好,问题是,有学习成本,要按照它的规则行事。一些功能是怎么实现的,不清楚,除非研究它的源代码。想改的话,更不容易。一切都靠猜、盲测,一则不好改,二则出了问题也不知道是哪里的毛病,反而欲速则不达。所以我们之前基于一个空白的vue项目开发,把需要的路由、ajax封装等摞上去。现在是实现侧边栏菜单。点击左侧菜单项,对应页面展示在右侧。原创 2022-09-28 18:51:09 · 11710 阅读 · 0 评论 -
vue3动态路由及菜单
一般来说,前端项目中的路由,很有可能是需要动态注册的。因为菜单可能在管理系统中维护,还跟权限绑定,用户登录以后,需要动态展示菜单。菜单往往跟路由挂钩,因此,路由需要动态注册。具体如何实现呢?思路是,系统只提供默认的路由,登录以后,读入菜单/路由数据,加载。这其中,可能会出现默认路由与动态路由有重叠的情况。处理办法是覆盖。数据结构方面,菜单与路由数据二合一。原创 2022-09-26 14:06:14 · 11432 阅读 · 0 评论 -
vue中如何复用vuex.store对象定义
我有几个组件,都需要用到vuex.store,而且这几个组件结构极其类似,就在想,能不能复用store的对象定义?因为每个组件都定义一遍,繁琐,且没必要。主要是用到克隆组件。原创 2022-08-29 18:23:03 · 644 阅读 · 0 评论 -
vue项目中利用锁控制页面响应式布局
单单布局变化没啥,绑定window.resize事件,然后做一些处理就完了,甚至都不用js,只通过css也可以。但如果布局变化,同时也关联到数据产生变化,就复杂一些了。但假如是用鼠标来拉伸或缩小窗口就麻烦了,这个时候会不断产生window.resize事件,从而不断的请求后台数据,系统压力陡然增大。这种情况,使用定时器来控制的话,一来比较复杂,二来效果不佳。可以考虑用锁来控制。当触发window.resize事件时,检测有无上锁,有的话就返回,不做任何处理;请求数据是一个异步方法,在返回数据时,释放锁。..原创 2022-08-29 18:14:46 · 657 阅读 · 0 评论 -
vue项目中的类
如题所示,vue项目中想提供类,该怎么写?老实说,语法有点怪。原创 2022-08-29 17:29:52 · 1465 阅读 · 0 评论 -
不依赖框架用vue3空白项目从头打造一个过得去的前端
通过一行行代码的手动码入,全程参与,可以加深对VUE项目的理解。原创 2022-08-16 18:48:39 · 2752 阅读 · 3 评论 -
vue循环语句v-for中元素绑定值问题
响应式数据,就是可与用户或程序交互的数据。vue中,声明响应式数据,可以使用ref和reactive。二者的区别在于,ref用于指定的单个变量,reactive用于复合变量。原创 2022-08-12 19:33:38 · 1547 阅读 · 0 评论 -
vue.config.js中的devServer
你看vue3的语法,我感觉并不比vue2更高明,反而有种累赘和啰嗦的感觉,估计VUE4还要来个大改,折腾不止,至死方休。*.vue本身的内容较容易掌握,但更大的方面,比如它整个项目的运行机制,路由,配置,就比较讳莫如深了。资料很少,说的人也是不知从哪里抄的,没有说清楚。对于像我这样普通的开发者来说,让我不用啥框架,直接用空白项目捣鼓出一个看得过去的前端,我会感到困难重重,这也不知,那也不懂,无从下手。所以,别看它里面写了这么多,又是端口,又是代理,让人一看就头大,其实只是用于我们本机开发和调试。...原创 2022-08-10 18:55:34 · 11412 阅读 · 0 评论 -
vue3中使用$refs
vue3比vue2烂原创 2022-08-05 19:06:56 · 22656 阅读 · 9 评论 -
vue3新开窗口并传参
我其实觉得vue2还可以,反倒是vue3越改越让人看不懂。原创 2022-08-01 18:57:10 · 4046 阅读 · 0 评论 -
动态改变vue项目页面的title
其实也没啥,就是一句代码的事,只不过看在哪里执行而已。原创 2022-07-28 14:33:39 · 3317 阅读 · 0 评论 -
vue项目发布采用gzip压缩文件部署到nginx无法运行问题
gzip压缩分为服务器压缩和前端文件压缩。应该二者结合,综合使用。原创 2022-07-05 14:49:49 · 4818 阅读 · 8 评论 -
vue项目读取全局配置
普遍的需求,却很少有现成的答案。我相信这是普遍的需求。即,在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目,至少有3个地方会用到系统名称:登录页,登录后页面的页头,以及每个页面的title。直接写在页面里,当然没有什么大问题,但修改繁琐,且容易出现不一致的情况。对于VUE项目来说,咋弄?vue页面无须多言,假如存在一个配置文件,直接读取配置文件就好了。而对于项目唯一的页面/public/index.html怎么办?这是一个静态页面。我查了许久。......原创 2022-06-29 17:17:57 · 9489 阅读 · 6 评论 -
vue自定义组件中再嵌套其他组件
其实就是在容器组件里放一个插槽(slot)。VUE的看点是组件。组件应用的典型例子,是一个网站首页。分为若干版块。每个版块都是一个方框框,样式一致,只是版块中间内容不同。对于VUE来说,很自然的想法,就是方框是一个组件,然后里面嵌套个性化内容,或者每个版块索性也做一个组件。这样就提出了题目描述的需求:如何实现自定义组件中再嵌套其他组件。俄罗斯套娃。实现起来十分简单。就是在方框组件(即容器组件)中放置一个插槽(slot)。1、容器组件(Block.vue)<template> <原创 2022-03-12 16:54:01 · 5773 阅读 · 4 评论 -
使用vue.js + jQuery开发组件
本模式有3个要点:1)利用vue.js实现html封装进组件,让复用可以落地;2)jquery负责操作dom;3)js函数模拟面向对象中的类,运行时通过new方式创建对象,将dom标识符和业务数据作为参数传递,提高组件独立性,实现与调用页面解耦,且能够动态渲染。近期做的一个项目,使用的框架十分古怪。spring boot,但没有使用默认的thymeleaf,而是前后端分离,同时前后端代码却又放在同一个项目工程里。前端使用了vue.js,但与我之前接触到的vue项目很不一样。一般vue项目,除了一个首原创 2022-01-22 15:41:30 · 2162 阅读 · 0 评论 -
vue样式穿透>>>
原创 2021-12-07 17:16:28 · 1447 阅读 · 0 评论 -
用了一段时间VUE后的学习笔记
1)process.env.NODE_ENV2)devServer.proxy3)axios这3个东西我都还没搞懂。一、process.env.NODE_ENVprocess.env.NODE_ENV 这个东西用于区分当前环境是开发环境,还是生产环境。如果是开发环境,就如何如何;开发环境,就怎样怎样。如何设置这个NODE_ENV?据说process.env里没有这个东东,你不设置,就不会天然有这个东东。那怎么设置呢?vue3跟vue2是不一样的。vue2,可以写在webpack.config.j原创 2021-11-10 19:36:08 · 2116 阅读 · 0 评论 -
为VUE项目提供部署后仍可修改的配置文件
将配置文件放在public/下(如果是vue2.,放在/static/下)*前后端分离,前端代码码也像后端一样编译、发布,再也不是以前那种完完全全的静态文件了。这就为代码复用,模块式开发带来了便利,不过有一些问题。比如配置文件,发布时也会被编译、打包,部署之后就再也找不到,更别说修改了。只能在打包前设置好,这样就失去了配置的意义。那应该如何提供配置文件,使得前端在部署后,仍然可以手动修改呢?以vue3.*为例。很简单的,在public/下提供一个config.js,然后在public/index.ht原创 2021-10-09 18:26:38 · 2557 阅读 · 0 评论 -
vuex动态注册嵌套module提供模块内部组件间的数据共享
vuex的提供了全局性的共享数据。如果数据限于模块内共享,可以采用嵌套module,通过命名空间进行访问。vue开发的主角是组件。组件在代码解耦、复用、提高可读性方面立下功劳,但组件间共享数据、传递参数却很麻烦,尤其是组件嵌套层次很深的情况。如果是祖宗辈传递参数给儿孙辈还好一些,祖宗provider,儿孙inject;然而这是单向的,儿孙想更改祖宗里的这些值就难了。因为你想用 this.$parent,未必能找到父一辈的组件。就算能找到,this.$parent.$parent...这种方式也让人抓狂。原创 2021-09-29 16:26:09 · 1426 阅读 · 0 评论 -
vue v-if未生效问题
事实证明,v-if本身是没有什么问题的,问题出在对应的变量身上。原创 2021-09-14 19:18:34 · 26105 阅读 · 1 评论