左直拳的马桶_日用桶

近期对前端的路由卫士有了更多的认识。何为路由守卫？这可能是一种约定俗成的名称。就是VUE中的自定义函数，用来处理路由跳转。

之前我在项目中使用过CAS作为单点登录服务，不过那些项目，不管是asp.net MVC项目，还是java的spring boot项目，是前后端不分的，只要使用CAS的客户端（对于asp.net mvc项目来说，cas的客户端就是DotNetCasClient.dll，而java项目，cas客户端就是一些java包），然后配置一下就好了。现在普遍前后端分离，该如何使用CAS呢？

我首先是想到用AI直接给我一点数据，没想到给出来的坐标，有许多都落在陆地上，根本不符合我的要求。后来结合AI给出的建议，我用程序计算，得到了一些坐标点。勾勒多边形的工具，我在谷歌地图上完成。https://www.google.com/maps/d/，不久前收到一个需求，说要随机创建约一百个某段江河上的坐标点，用于做一些数据呈现。1、在地图上沿江河勾勒出一个封闭的多边形，计算出来的坐标点，将落在该多边形内。我用vue3来完成。2、导出该多边形，用于计算。比如随机算出100个坐标。2、计算多边形内的坐标。

有了nvm，可以在一台机器上同时安装多个版本的nodejs，然后指定使用某个版本。

在nginx中，将静态资源设为internal；然后将前端的静态资源地址改为指向后端，在后端的响应头部中写上静态资源地址。近期客户对我们项目做安全性测评，暴露出一些安全性问题，其中一个是有些静态页面（*.html）无须授权即可直接访问，里面的信息一览无遗，不安全。这些静态页面都是arcgis地图页面，依赖arcgis for js，没有办法做成一般意义上的动态页面。或者说，该项目是个老项目，目前只处于维护阶段，大规模改头换面不现实。

引入接口后，不能原封不动地直接export出去。typescript支持面向对象语言中常见的接口（interface）、类（class）等。但我近几天发现，一个interface，通过import引入后，如果直接再export出去，是不行的。语法没有错，但运行时似乎出问题。比如，我写一个组件timeline，文件结构如下图所示。为规范其他模块调用，我在_type.ts中定义了一个接口，是关于数据类型的。

如题，可以在vue项目使用typescript创建抽象类，然后使用这个抽象类。通过TypeScript，可以在前端应用抽象类了。抽象类的好处，可以同时满足继承和多态，好处多多。

现在的前端，越来越像后端。当我听到我同事说这些名为*.data.ts的json格式文件，是通过工具自动导出来时，我感到震惊，50岁的心灵遭到暴击，内心一阵被时代抛弃的恐慌。前端的话，我复制了其中的实体类模板，改名为：vue.json.vm，然后稍为改改里面的内容，即可得到前端模板。在intellij idea中，通过插件EasyCodeMybatisCodeHelperPro，从现有的模板文件中选择一个复制粘贴，然后稍为修改，即可得到一个合适的模板文件。模板里的普通正文，会输出到导出文件里。

事实证明，这种多级缓存机制下，前端展示数据非常迅速，及时。虽然前端和WEB后端之间没有使用websocket进行数据传输，而是使用了最笨的定期获取，但丝毫没有影响前端的用户体验。2）WEB后端设置一个定时器，每2秒读一次redids的1号库，处理后写入redis的2号库。3）前端虽有多个组件，但不是每一个组件都向后端请求，而是统一请求一次，存入前端缓存，然后全部组件都从前端缓存中读取，对性能是一个保障。2）后端定期处理原始数据，将结果缓存，当前端请求时，返回缓存中的该结果，减少重复劳动，提高了性能。

如题。在vue项目中，如果祖宗想将参数传递给孙子甚至更小一辈的组件，是一件麻烦事。可以通过爷爷-儿子-孙子-曾孙这样的链条，一辈辈地传承下去，但未免太繁琐、太蠢了些；也可以通过store间接传送，但如何触发孙子们去获取是个问题。第三种方法是通过provider和inject方式。老祖宗provider，后代inject。在以下示例中，祖宗页面将一个json对象传给孙辈。其中，祖宗provider一个函数，函数返回一个json对象state。

使用json，并且要用ajax来加载；应用过程中也有一些注意的问题。有关“vue3项目发布后修改配置文件仍然生效”问题，之前做过一篇笔记。但事实上，那篇笔记的步骤，只解决了项目发布后，配置文件没有被压缩，仍然可见可编辑的问题；但配置文件编辑保存后，并没有生效，也就是说，改了也是白改，一点意义都没有。那篇笔记中，配置文件是js文件，使用import的方式。结果项目发布后，估计打包程序做了处理，直接将里面的内容读出来，内联到每个使用它的组件中去了，所以后面再改配置文件不会起作用。

await者，等待异步操作完成也。上面例子中，getStructApi是一个promise，第二个，如果一个方法，包含了await关键词，则该方法在声明时要加上 async 关键词。意思就是死活等它完成，等到一个结果为止。

【代码】v-if的外面要罩一个div。

今天我忽然有点明白了。这是一个跟前面语句有关的方法。意思是，等前面的都执行完了，再执行nextTick里面的方法。比如说，页面上有一块内容，正常情况下是隐藏的，满足条件下才显示。这里用了v-if来控制。结果就是new1的方法没有被调用。为啥，因为隐藏内容尚未展示完毕。加上nextTick就可以，意思我想应该是，等待前面的语句执行完，才触发nextTick里面的方法。由以上2段代码可知，某个事件触发下，首先显示隐藏内容，然后调用其中的某个部件的方法。

更奇怪的是，进一步调试，发现别的cookie都能顺利更新，唯独这个token不行。这代表该cookie无法被javascript操纵，既不能读取，更不能更改或删除，所以就无法被前端脚本所操作，只能是浏览器自己玩。cookie里的token还是旧的，这样的话，到后台请求资源，带上的token还是旧的，系统认为没有登录，于是退出，又回到了登录界面。鉴于“token”这个名字，差不多等于系统保留字，猜测是后台调用了其他系统返回所导致，覆盖了我们自己那个。于是将“token”改为“mytoken”，以进一步观察。

现在用vue和react的话，基本都会选用一种UI框架，比如element plus，或者ant design等。但如果有些自己还想额外加一些效果的话，就会发现困难重重，不像以前用jquery那么好控制。注意这个isActive，忽而isActive.value，忽而 isActive === index，让人摸不着头脑。用上VUE之后，前后端分离，组件式开发，代码复用、独立性和隔离性都挺好，可维护性得以提高。相比之下，以前用jQuery，代码实在太多了。//如果点击的div没有处于置亮状态，则置亮。

网上找答案，总是扯什么修改.eslint.js文件，须知改文件位于node_modules，如大海捞针，并且有多个。改这里是没有道理的，也没有效果。可能是很久之前的答案了吧。

在vue页面中，使用getElementsByClassName获取dom，发觉总是获取不到，返回的数组，空空如也，长度为0。需要使用nextTick

vue3下，父组件调用子组件的方法，如果使用了这种写法，那么子组件方法需要采用进行修饰，才能被外界调用。

一般这个动态赋值，要用require。而且，这个require里，只能有一个变量，多个变量，有运算，有方法，都不行。没想到这破东西，居然这么折腾人。

使用element plus的table，然后获取里面的dom对象，使用定时器设置滚动

严格来说，所谓利用vue3实现单点登录，是指实现单点登录的前端。身份验证，只能是服务器端干的活。

一般前端项目少不了侧边栏。如图所示这些鬼东西特别繁琐，所以我们喜欢找些现成、开源的所谓后台管理的前端框架，开箱即用。方便是方便，而且做得还挺好，问题是，有学习成本，要按照它的规则行事。一些功能是怎么实现的，不清楚，除非研究它的源代码。想改的话，更不容易。一切都靠猜、盲测，一则不好改，二则出了问题也不知道是哪里的毛病，反而欲速则不达。所以我们之前基于一个空白的vue项目开发，把需要的路由、ajax封装等摞上去。现在是实现侧边栏菜单。点击左侧菜单项，对应页面展示在右侧。

一般来说，前端项目中的路由，很有可能是需要动态注册的。因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。菜单往往跟路由挂钩，因此，路由需要动态注册。具体如何实现呢？思路是，系统只提供默认的路由，登录以后，读入菜单/路由数据，加载。这其中，可能会出现默认路由与动态路由有重叠的情况。处理办法是覆盖。数据结构方面，菜单与路由数据二合一。

我有几个组件，都需要用到vuex.store，而且这几个组件结构极其类似，就在想，能不能复用store的对象定义？因为每个组件都定义一遍，繁琐，且没必要。主要是用到克隆组件。

单单布局变化没啥，绑定window.resize事件，然后做一些处理就完了，甚至都不用js，只通过css也可以。但如果布局变化，同时也关联到数据产生变化，就复杂一些了。但假如是用鼠标来拉伸或缩小窗口就麻烦了，这个时候会不断产生window.resize事件，从而不断的请求后台数据，系统压力陡然增大。这种情况，使用定时器来控制的话，一来比较复杂，二来效果不佳。可以考虑用锁来控制。当触发window.resize事件时，检测有无上锁，有的话就返回，不做任何处理；请求数据是一个异步方法，在返回数据时，释放锁。..

如题所示，vue项目中想提供类，该怎么写？老实说，语法有点怪。

通过一行行代码的手动码入，全程参与，可以加深对VUE项目的理解。

响应式数据，就是可与用户或程序交互的数据。vue中，声明响应式数据，可以使用ref和reactive。二者的区别在于，ref用于指定的单个变量，reactive用于复合变量。

你看vue3的语法，我感觉并不比vue2更高明，反而有种累赘和啰嗦的感觉，估计VUE4还要来个大改，折腾不止，至死方休。*.vue本身的内容较容易掌握，但更大的方面，比如它整个项目的运行机制，路由，配置，就比较讳莫如深了。资料很少，说的人也是不知从哪里抄的，没有说清楚。对于像我这样普通的开发者来说，让我不用啥框架，直接用空白项目捣鼓出一个看得过去的前端，我会感到困难重重，这也不知，那也不懂，无从下手。所以，别看它里面写了这么多，又是端口，又是代理，让人一看就头大，其实只是用于我们本机开发和调试。...

vue3比vue2烂

我其实觉得vue2还可以，反倒是vue3越改越让人看不懂。

其实也没啥，就是一句代码的事，只不过看在哪里执行而已。

gzip压缩分为服务器压缩和前端文件压缩。应该二者结合，综合使用。

普遍的需求，却很少有现成的答案。我相信这是普遍的需求。即，在配置文件里定义系统名称、版权人、建设方或者技术支持等信息。一个前端项目，至少有3个地方会用到系统名称：登录页，登录后页面的页头，以及每个页面的title。直接写在页面里，当然没有什么大问题，但修改繁琐，且容易出现不一致的情况。对于VUE项目来说，咋弄？vue页面无须多言，假如存在一个配置文件，直接读取配置文件就好了。而对于项目唯一的页面/public/index.html怎么办？这是一个静态页面。我查了许久。......

其实就是在容器组件里放一个插槽（slot)。VUE的看点是组件。组件应用的典型例子，是一个网站首页。分为若干版块。每个版块都是一个方框框，样式一致，只是版块中间内容不同。对于VUE来说，很自然的想法，就是方框是一个组件，然后里面嵌套个性化内容，或者每个版块索性也做一个组件。这样就提出了题目描述的需求：如何实现自定义组件中再嵌套其他组件。俄罗斯套娃。实现起来十分简单。就是在方框组件（即容器组件）中放置一个插槽（slot)。1、容器组件（Block.vue)<template> &lt

本模式有3个要点：1）利用vue.js实现html封装进组件，让复用可以落地；2）jquery负责操作dom；3）js函数模拟面向对象中的类，运行时通过new方式创建对象，将dom标识符和业务数据作为参数传递，提高组件独立性，实现与调用页面解耦，且能够动态渲染。近期做的一个项目，使用的框架十分古怪。spring boot，但没有使用默认的thymeleaf，而是前后端分离，同时前后端代码却又放在同一个项目工程里。前端使用了vue.js，但与我之前接触到的vue项目很不一样。一般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

将配置文件放在public/下（如果是vue2.，放在/static/下）*前后端分离，前端代码码也像后端一样编译、发布，再也不是以前那种完完全全的静态文件了。这就为代码复用，模块式开发带来了便利，不过有一些问题。比如配置文件，发布时也会被编译、打包，部署之后就再也找不到，更别说修改了。只能在打包前设置好，这样就失去了配置的意义。那应该如何提供配置文件，使得前端在部署后，仍然可以手动修改呢？以vue3.*为例。很简单的，在public/下提供一个config.js，然后在public/index.ht