- 博客(47)
- 收藏
- 关注
RSS订阅原创 SPA和SFC
2.局部刷新，用户每次访问别的功能，实际上是我们做的路由的跳转，而不是让用户访问一个全新的页面，这样不会让用户有较长的等待时间。3.前后端分离式的开发，前端程序员只需要关心页面上的功能，逻辑以及和后端的交互，后端也可以更专心的完成自己的业务。1.每个页面都是一个组件，将三个巨大的层（html，css，js）分成了很多个小组件和模块去完成，就像搭积木一样，大化小。1.因为是单页面，所以对于SEO的搜索不够友好，不像多页面应用，每个页面都能被搜索引擎抓取到。（😀）单页面应用对应的是多页面应用，SPA的优点有，
2024-03-01 09:21:19
366
原创 node的n和nvm
nvm有个问题就是版本会落后，我不知道该怎么处理，我试了网上几种方法，包括用命令更新，都没用，我选择的方法是删了重新下，如果直接下而不去删，不知道会怎么样，希望有试过的人告诉我一下。windows只能用nvm，网上那些说n的，一般都是linux。然后那些curl和wget究竟是啥，我还没搞清楚，好像也是linux的命令，windows都用不了的。
2024-02-27 19:46:40
365
原创 vue-cli和vue3的项目创建命令
vue-cli是vue2+webpack创建的，这里因为vue官方直接把webpack和vue配合了，所以我们使用vue-cli的时候实际上是用的是vue官方的方式创建vue2的项目，所以命令是。这个命令并不单单是创建vue项目的，是可以选择的，所以实际上是创建一个vite项目，然后我们自己选择配置。而我们用的vite的时候，我们还是得用npm的vite包，所以命令是。
2024-02-25 12:55:28
393
原创 vue2和vue3除代码方面的对比（面试可能会问）
vue2是选项式API，而3虽然兼容2，但是推荐的则是组合式API，即代码逻辑更集中，不需要翻上翻下的寻找data和methods。默认是这样书写setup函数的，但是3可以将setup写在script标签上，这样就使用了。a和fn可以直接在template里面使用。vue3最早执行的函数是setup函数。
2024-02-20 20:09:41
377
原创 js中对象的属性要注意的点以及在vue中watch对象的属性的方法
然后对象的深度拷贝可以通过自己手写递归来实现，也可以通过JSON.parse(JSON.stringify(obj))来实现。obj.a或者obj['a'],中括号还可以写成。obj[name]和obj['a']是一个意思。然后在vue的watch要监听对象的属性，写法是。取对象值有两种方式，
2024-02-20 19:41:34
467
原创 构造函数，原型，实例，类的关系整理
如视频所说，构造函数的prototype指向原型，实例化的对象的__proto__指向原型，原型通过constructor指向构造函数，正如class里面的constructor方法就相当于Person构造函数一样，而我们在class中写在constructor之外的方法则是被默认放到了原型上面即相当于原本的Person.prototype.fn，这样实例化的对象都能访问到。在调试时，[[prototype]]就相当于。其中的constructor里面仍然是用this来声明实例的属性或者方法的，如。
2024-02-20 19:27:09
1286
原创 vue2和vue3的写代码上的区别
vue3中的pinia只有state，getters，actions，去掉了mutations和modules，之所以vuex里面有mutations，vue的开发团队称是为了在vue开发工具中能够看到进行了多少次的state状态修改。如上面，vue2是通过new Router，这个Router是从vue-router的文件里面import的，new这个构造函数，然后传入我们需要的对象，其中history和hash模式是通过mode属性来控制的。vue2创建路由对象实例。
2024-02-19 20:29:42
401
原创 vue2中vuex的各项的各种调用方式，部分对比vue3的pinia
..mapMutations('模块名',['mutations方法1','mutations方法2']),...mapActions('模块名',['actions方法名1','actions方法名2'])...mapGetters('模块名',['getters属性1','getters属性2'])...mapState('模块名',['state属性1','state属性2']),上面这两个都是属性，所以不需要加()去调用，后面的才需要()调用，然后调用方式是一样的。这样的方式来关联大仓库和模块。
2024-02-19 15:24:57
423
原创 基于RBAC的权限管理的理论实现和权限管理的实现
首先需要两个页面支持，分别是角色管理和员工管理，其中角色管理对应的是角色和权限的配合，员工管理则是讲登录的员工账号和员工所处的角色进行对应，即通过新增角色这个概念，让权限和员工并不直接关联，而是通过分别和角色进行关联从而实现给员工分配权限。
2024-02-19 14:12:05
476
原创 svg之全局组件，配合雪碧图解决vue2的svg优化问题
这里是vue2中的svg的完整解决方案的另一篇。这里这个就是全局的svg组件，代码来自于。
2024-02-18 21:43:02
679
原创 前端技巧之svg精灵图svg-sprite-loader
老师没提到上面的部分，然后这里还有我没注意到的细节就是，或许因为这个东西属于是webpack上的，所以在vue.config.js文件中并没有引入这个文件而是直接添加配置项即可。上面的框的意思是不要用默认的svg的方式来解析，下面的框意思是按照我们设置的svg-sprite-loader来将这些图片转成雪碧图。当然，我们想看到效果，可以通过检查浏览器的代码，找到。然后这里要说明的是这个插件是webpack上面的，所以在vue2中比较好用，如果在vue3中，可能解决方案就不是这个插件了。这是老师的图的细节。
2024-02-18 21:36:12
791
原创 elementUI之el-form-item的嵌套的场景
像这种，计费规则这几个字而且带红点，外观上是el-form-item，但是其并没有直接和控件进行相关联，这是和其他的el-form-item不同之处。所以这里就得用上嵌套了。也就是说elementUI中el-form-item是可以嵌套使用的。
2024-01-31 20:36:58
1674
原创 收集错误的笔记
形似这样的代码，arr的每一项都会return一个对象，list会自动将这些对象收集在数组里，也就是说return这个东西，主要是将每一项的操作后的结果进行返回，并不是返回一个总的操作结果，而是只返回某一项的结果，是list自动将这些项收集起来的。
2024-01-31 19:54:34
358
原创 elementUI之用label传值给v-model的el-radio
这个控件比较特别，是用label作为传给v-model的值，其他控件大多都是用value来传值。el-radio-group的作用是将其中的单选控件作为一组。
2024-01-31 19:00:44
505
原创 elementUI表单校验的几个方法区分
validate 这个通常用来做表单的整体校验，出现位置在提交表单的方法的最前面。 validateField 这个通常用于校验非常规的表单控件，因为对于非常规控件来说validate是一次性的校验，当我们校验后，即使我们符合规则了，并不会响应式的进行校验，此时我们就需要用到这个方法。传的参数一般是el-form-item的prop对应的。出现位置在await 调后端接口。这一代码的下一行，以及一些钩子函数内。如取消图片上传，就需
2024-01-31 13:33:47
676
原创 elementUI中表单校验的清空校验以及手动校验
this.$refs.表单.clearValidate(),这个可以传入字符串或者字符串数组，字符串对应的是我们自定义的rule里面的属性名，rule的属性名对应的是el-form-item的prop。这个api目前遇到的场景是el-radio切换时v-if展示不同的表单内容，但是当有校验提示的时候会被带到不该在的地方。如上所示，这里就可以用clearValidate来清空提示文字。
2024-01-31 13:19:23
1293
原创 vue2中watch监听对象的属性的写法
这种写法不再是watch对象然后deep:true这样的写法，直接监听对象属性的写法更加精准，不会有多余的消耗。'对象的属性'(){
2024-01-31 13:13:23
404
原创 git操作之本地代码修改后想回退成当前最新版本
我们的vscode就是workspace，我们提交代码需要三步，add，commit，push，其中我们想拉取代码有两种方式，git pull或者git fetch/clone,再git checkout。所以当我们本地的代码修改了一些内容后，想恢复成最新版本的远程的代码。首先先将远程最新的fetch到Repository。1.先把我们修改的内容全部保存。
2024-01-31 13:04:19
454
原创 表单校验问题之单选框切换时校验结果混乱
elementUI团队很明显考虑到了这个问题，所以他们提供了一个方法用来清空部分校验结果，这个场景和对某个表单控件重新进行校验不同，因为这种场景属于是我们使用v-if隐藏显示元素时候表单的校验结果被错误的带到别的地方，并不是没有对某个控件进行校验操作。注意体会这两种差异。前者是这个框架的问题，后者是框架正常的运行结果。所以存在两种解决手段。
2024-01-30 22:41:35
359
原创 20240130收获
el-table-column的formatter属性的回调函数会传给我们row的数据，即直接把整行的数据给到我们了，而不是给我们该列的数据。所以我们应该通过{xx}解构的方式来取我们要的属性。 解构的时候，不要写错了，比如obj.name，我们想取name就要写成{name}而不是{obj.name}
2024-01-30 21:01:12
349
原创 20240129收获
今天终于发现《八部金刚功》第五部我一直做的是错的，嗨。 这里这个写法非常聪明，创立的数组，以及用obj[key] =item[key]这样的写法，这个写法充分展示了js常规写法中只有等号右边会去参与运算，等号左边就是普通的键的写法，但是两个直接看起来却很对称，然后这样的写法特别好的利用了这个数组，看来js的写法里面数组和对象的利用也很关键。 打算重新分一个类别，用来专门记录一些工具的简单使用，以后工作中遇到某类场景，我可以快速找到自己习惯的工具的使用方法。
2024-01-29 17:51:26
688
原创 20240128收获
很多事情自以为有兜底的时候，不妨去试试兜底的事情先，这样可以看看到底自己能不能承受这样的代价。 有时候请求错误，可以通过状态码来判断原因，比如400那就是前端操作的问题，比如有些日期，后台就规定需要至少大于今天，但是后台的错误提示并不一定会指出，所以如果知道400代表操作的问题，就至少不会去调数据，因为如果数据格式不对，会返回500，告诉我们服务器处理不了这种格式的数据。即400一般不是格式的错，500可能是格式的错。
2024-01-28 21:49:53
322
原创 20240127收获
《八部金刚功》真的无价之宝。 今天有机会反思一下最近自己的学习规划路线了，发现自己偏航了很多。应该先从项目入手，后续如果工作中遇到各种问题，再去拓展才对。 动态路由，就要用动态跳转和动态传参，写法就是path:"/xxx/:id"，那么id就是参数名字，跳转的时候写成@click="$router.push(`/xxx/${yy}`)",yy就是可以得到id的变量，比如scope.row.id，然后就是拿这个id，写法是this.$route.params.id，这是一整套的，记住query传值用que
2024-01-27 21:16:40
401
原创 打个草稿ddd
JSONP和今天看到的vue的MC和d函数有相似之处，都像钓鱼，区别是MC多需要一个d函数，因为在js里面想给函数传参，就相当于执行该函数，而且是MC作为接收数据的一方，所以得相当于让d函数来作为参数的接收者，同时我看待函数的眼光好像也得改变，函数的定义，即函数体的操作空间好像非常大。
2024-01-26 23:24:49
358
原创 20240126收获
这里还可以加上的理解就是父子组件的生命周期，容我粗糙的模拟一下渲染过程，先执行父组件的beforeMount钩子，然后执行子组件的bm钩子，如果一开始把这些组件的值都分好层，或者做个什么隔离处理，子组件就能执行自己的程序，然后子组件挂载完毕，执行mounted钩子，里面代码走完，子组件暂时的生命周期完成，接下来跑到父组件的代码逻辑，父组件整整好，挂载好，此时子组件已经挂载在父组件里了，所以挂载好父组件后就可以执行mounted钩子了。12.插槽首先要区分两个点，一个是传参，一个是内容，所谓传参，就是通过。
2024-01-26 23:11:45
1976
原创 20240124收获
el-upload，上传组件，必须加一个属性叫做action,用来指定上传的地址，但是因为我们的上传不单单是上传文件，我们需要拿到服务器反馈的数据，所以我们必须自定义上传事件，所以不用这个默认的上传事件，但是又不能不写，于是我们将action写成 action="#"即可。这里注意，#就是普通字符串，不用加冒号给action。通过来定义我们的上传和接收。
2024-01-25 00:00:35
792
原创 20240123收获
第二步是将我们上传的文件的地址上传给 后端，这里是为了让后端将文件和我们的操作关联起来，因为第二步的时候我们会上传表单里的其他信息，我们传给后端的数据，我们需要明明白白的写出来数据结构，而我们拿来渲染的数据，因为是从后端拿来的数据，然后为了工作方便，我们不需要写明白数据结构，直接用一个数组或者对象接受就好了，因为我们渲染页面的时候往往只用一部分数据，所以我们只用关心我们要渲染哪些到页面上，渲染方式根据使用的UI框架即可，这样省力，所以不要预设数据结构。很多操作，尤其是往往到了工作中的时候，都是为了省力。
2024-01-23 21:59:46
324
原创 20240122收获
翻译过来就是，我们如果想在bfe里面写代码，想用到vue实例，只能写在next里面，因为next这种被称为回调函数，意思就是由他们的创作者写的逻辑去执行，而不用我们来操心何时执行，我们只需要把我们要的逻辑丢到next里面，这样next就带着我们写的逻辑，当他们的创作者在执行他们的逻辑的时候会顺带调用next，此时我们的代码就在他们的逻辑里面执行了。路由的生命周期是在组件实例的生命周期之前的，反正粗暴些理解，就是路由的玩意先整好，再去整实例的生命周期，所以bc里面就已经可以使用路由了。
2024-01-22 11:11:01
807
原创 20240119收获
vue的路由按需导入组件的写法是此处是将import当作一个函数用，然后箭头函数不写大括号，相当于省略return和{}原本我以为表单系列里的新建功能是不需要用到el-form-item的prop的，结果写的时候发现要添加表单校验功能，而这个功能必须要有prop，这下就明白了，而且目前据我所知之所以要prop的原因有：表单自带的重置功能使用的时候只会重置有prop的控件。
2024-01-19 20:53:03
888
原创 20240118
然后就是option的规则，这个东西没有直接绑定数据，而是通过v-for来进行遍历，遍历后将每一条数据的label和value进行使用，这里我在想为什么这里是value，记得el-form使用数据是通过:model,el-table使用数据是通过:data,然后那些控件是通过prop来使用数据的(这里对于"使用数据"的描述和定义不准确)也就是说现在有两种可能性，一种是从最外层元素，如form,table中绑定数据是通过prop，另一种可能性则是涉及到和后台交互后取到的数据，才是通过prop。
2024-01-18 21:42:23
331
原创 20240117收获
1. el-table有个列叫做序号，通常默认的序号会有问题，所以我们需要自己手动配置一下。2. 通过vscode提交git代码，全程鼠标，就是写commit信息那里用一下键盘，非常便捷。3. token过期的处理中，token是否过期，这个东西目前好像只有一种判断方式，那就是通过响应的状态码，401就是token过期，除了这个方法，目前我好像没想到有其他任何一种方法能在写代码的时候写出来if(满足某个条件){token过期，过期处理}
2024-01-17 21:52:40
348
原创 20240116收获
1.router的路由拦截，如果将其写到单独的文件中，我们希望其文件能执行，所以要把该文件import到main.js文件中，这样该文件肯定会被执行，同时这里也出现了import的第二种用法，就是可以用来执行一些操作。8.formatter功能实现的过程中，值得记忆的技巧是，当我们需要根据后台返回的数据进行处理然后重新渲染到页面上的时候，我们可以通过定义一个字典，这样以后如果有更多的状态需要设置，我们只需要增加字典即可。这个是必须要的，区别在于有时候是后端来加，如果后端没加，得我们自己加。
2024-01-16 19:46:23
343
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人