- 博客(114)
- 收藏
- 关注
RSS订阅原创 mybatis批量删除
EmployeeMapper.xml文件：注意里面的foreach进行取数组的值的写法。ps：数组需要加注解。3、测试： 方法调用。
2023-03-08 16:26:14
405
1
原创 使用Echarts实现项目数据可视化
1、安装插件，全局引入，页面布局结构如下图。 # echarts 底层依赖 ZRender（ZRender基于canvas），一个轻量级的二维绘制库 封装后端请求重点是地图注册以及数据，至于地图geo组件配置 ，参考官方debugg：南海诸岛不显示，国家主权问题，有点危险 ，如果隐藏还可以参考博文
2022-12-06 23:35:06
858
原创 表格数据方法、分页方法及组件的封装和分页组件的复用
1、数据获取与显示的通用方法封装 table.js2、数据转换指令方式： 服务方式： 查看请求后端接口：发现需要两个参数——当页数和每页条数 前端的方法是用公式计算，参考博文 这里用后端的方法：分页由后端完成，所以每次切换页面的数据条数和当前页码时，都要根据接口请求参数，发送请求。debug：总条数和数据页码不显示。 修改添加scss样式后： 在common文件夹下，新建Pagin.vue组件，把上一个页面与分页相关的代码复制过来，修改后如下：
2022-12-05 23:35:09
520
原创 通用后台管理系统前端界面Ⅻ——信息管理页（增删改查封装）
在utils下新建table.js拷贝信息列表到信息管理页面，修改根节点的class命名为InfoLists，同时并改scss后，在信息管理页进行使用封装好的getData方法。
2022-12-03 01:12:24
820
原创 表单校验规则
使用element-ui的datePicker组件选择时间，传递的表单里用户的时间格式为：，所以这里value=“2022-11-02“校验规则：用户输入时间必须在的当前系统时间之后。1、系统时间如果不转换对象为string，就直接比较的话，结果不对2、因为系统月份是从0开始计算的， 所以获取到的系统的月份会比生活中的少1，所以获取的系统月份需要加一str;把str字符串根据“-”符号，将str字符串进行拆分成数组str.join("-");将str数组中的元素用“-”进行连接。
2022-11-28 16:46:29
476
原创 通用后台管理系统前端界面Ⅺ——信息列表页（弹窗复用增改、CRUD前端基础实现）
因为需求发生了点变化，所以把之前的代码稍改一下，把之前的信息列表全复制到用户列表中，最后效果一样。调整一下页面元素布局和样式：按钮、图标等。调整后。
2022-11-27 01:20:53
913
原创 通用后台管理系统前端界面Ⅹ——前端数据表格的删除、查找
1、拿到id或者行数据对象2、查看后端接口方法，写api方法，将操作连接上后端后端请求操作成功，但是前端数据表格未更新，最简单的一种方法数据删除后要重新获取数据===》依旧显示成功，但是前端数据表格未变化，排查后，看封装请求方法的api.js文件，发现：1、方法没有获取参数；
2022-11-24 23:00:33
1155
原创 通用后台管理系统前端界面Ⅸ——数据表格渲染及处理+前端分页
在页面添加table表格，从element-ui官网查找，包括数据一起复制过来，查看显示没有问题后，把tableData清空为空数组。
2022-11-21 22:54:45
1734
原创 通用后台管理系统前端界面Ⅷ——公用组件之面包屑
新建共用组件Breadcrumb.vue，从element-ui官网找组件。导入面包屑到Home.vue显示使用。
2022-11-21 21:54:13
336
原创 通用后台管理系统前端界面Ⅶ——公用组件（Header+Footer+Menu）
components下新建文件夹common，新建三个组件：Header.vue Footer.vue Menu.vue从element-ui官网找到想要的组件，粗略写好后，挂载在主页Home.vue上，
2022-11-19 00:10:43
1063
原创 通用后台管理系统前端界面Ⅵ——首页、登录页、404页面
1、为了方便起见，先将element-ui的使用改为全局引入的方式。2、写登陆页面：2.1、components文件夹下新建Login.vue2.2、从找需要的组件：+3、修改路由：启动项目（使用重定向）和输入http://localhost/login，进入的页面都是为登录页面运行结果：4、登录验证4.1 简易版，适用于小项目和简单的验证规则，实现：将验证规则直接写在html中当输入框失去焦点时，会自动进行表单校验4.2登录验证进阶版。
2022-11-17 23:02:03
3322
1
原创 通用后台管理系统前端界面Ⅴ——axios使用与封装、配置路由和路由懒加载
如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。2、在 main.js导入使用axios，因为是用的比较多，所以采用的是全局引入，挂载到原型的方式。实现2、： 使用Vue异步组件，修改router文件夹下的index.js文件为下。实现1、：修改router文件夹下的index.js文件为下。
2022-11-17 13:11:26
528
原创 通用后台管理系统前端界面Ⅲ——使用CSS预处理器
使用（scss可以嵌套使用。在App.vue的style中进行引入使用。的scss改为less，两者语法通用的。重置之后：会更紧凑，看起来更舒服。
2022-11-17 12:26:53
193
原创 通用后台管理系统前端界面Ⅱ——按需配置element-ui
①作为一个独立的模块进行引入，在项目下新建plugins文件夹，再新建element.js文件（更推荐）②直接在main.js文件进行引入。使用element-ui。
2022-11-17 11:54:29
275
原创 通用后台管理系统前端界面
##安装指定版本的vue脚手架工具 或者是已安装了，该命令则为使用4.5.15版本的vue/cli。2.1 效果：自动打开项目，终端输入“npm run serve”后自动弹出项目主页。③使用Vue Project Manager ，使用命令行输入。1.1 局部安装vue-cli 工具，方便不同版本进行切换。后续项目还可以看到使用的依赖、module，对启动速度等进行优化。局部安装vue-cli 4.5.15 和创建项目。###查看当前vue脚手架工具版本。会弹出vue项目托管器。
2022-11-16 22:44:39
1015
原创 vue3使用element-plus
1、下载包2、引入全局引入+挂载：引入记得有css文件（下载不下来可能是项目正在运行，先关掉）按需引入：先下载两个插件修改vue.config.js文件。
2022-11-16 16:40:05
3215
原创 vue3新特性 Ⅱ
▣ provide（） / inject（）实现嵌套组件之间的数据传递。以前外层只允许一个根节点，即最外层会包一个div，现在可以不用。在生命周期钩子前加上on来访问 并且需要保持小驼峰的命名方式，▣子组件中使用inject（）获取上层传递过来的数据。▣父组件中使用provide（）向下传递数据。（只能父组件向子组件传递数据，不能反向）▣只能在setup（）函数中使用。
2022-11-15 22:37:00
2758
原创 Nginx
该权重值，主要是针对实际工作环境中不同的后端服务器硬件配置进行调整的。：修改配置文件nginx.conf后，重新生成新的worker进程，当然会以新的配置进行处理请求，而且新的请求必须都交给新的worker进程，至于老的worker进程，等把那些以前的请求处理完毕后，kill掉即可。为了加快服务器的解析速度，把静态资源、放到Nginx上，由Nginx管理，动态请求转发给后端，可以把动态页面和静态页面交给不同的服务器来解析，加快解析速度，降低原来单个服务器的压力，方便管理维护。（有点valatile的味道）
2022-11-15 16:26:32
919
原创 Sass 和 SCSS
▣Sass (Syntactically Awesome StyleSheets)，是由编写的一款，和html一样有，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。Sass 是一款强化 CSS 的辅助工具，是对，它在 CSS 语法的基础上增加了(mixins)、(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
2022-11-14 23:02:13
10742
1
原创 keepalived
Keepalived是一款由C编写的软件，一般解决负载均衡器的高可用性问题，提供了负载均衡、健康检查和高可用的功能，高可用功能是由VRRP协议来实现的。keepalived起初是为LVS（ Linux Virtual Server ）设计的专门用来监控集群系统中各个服务节点的状态如果某个服务节点出现异常或者工作出现故障,keepalived将检测到,并将出现故障的服务节点从集群系统中剔除,而在故障节点恢复正常后,keepalived又可以自动将该服务节点重新加入集群中，这些工作全部自动完成。
2022-11-14 22:41:18
252
原创 npm和npx的区别
npx是一个工具，它是npm v5.2.0引入的一条命令（npx），是npm的一个包执行器，只要为了提高从npm注册表使用软件包的体验。就像npm极大地提升了我们安装和管理包依赖的体验，在npm的基础之上，npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。也就是说 npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去环境变量里面的 PATH 里找。4、可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。2、可以执行依赖包中的命令，安装完成自动运行。
2022-11-14 22:20:42
2534
原创 BIO，NIO和AIO的区别联系
NIO如果把所有的连接对象都放在channellist里，性能会非常低，因为channellist里的对象可能非常多至成百上千至万，当一个用户的客户端发来请求，服务器就需要在这么多的对象里用for循环去找那一个channel，非常慢，所以就有了selector（多路复用器），使用主从模式，并注册在sever socket channel上。4.BIO是单向的，要么是输入流要么是输出流，NIO是双向的，可以从channel往buffer读写数据，同时buffer也可以向channel读写数据。
2022-11-14 21:57:50
133
原创 vue3 新特性
这对代码压缩更友好，因为变量的名字可以变得更短，但对象的属性名则不能。选项式 API 在单个组件的逻辑复杂到一定程度时，也面临了一些限制，主要体现在需要处理多个逻辑关注点的组件中，同一个逻辑关注点相关的代码没有被归为了一组，程序员为了一个逻辑关注点在不同的选项块间来回滚动切换，如果是大项目，后期维护非常困难。执行，所以无法像2.x 中一样使用this获取当前组件，修改data变量，所以3.x是通过接收setup（props，ctx）的方法，获取到当前组件的实例ctx（context）和props。
2022-11-11 23:56:01
1521
原创 JS和TS的异同
TypeScript ：是JavaScript 的超集（ts是微软开发的开源编程语言，vue3的底层代码也是ts），即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。js有的类型：boolean类型、number类型、string类型、array类型、undefined、null。ts新增的类型：tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）4、ts增加了接口interface、泛型、类、类的多态、继承等。
2022-11-05 15:38:26
3256
原创 vue状态管理——Vuex
Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单理解vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。什么时候我们该使用它？Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
2022-11-05 00:33:31
1574
原创 vue引入路由——帮助管理页面跳转逻辑
1、安装路由2、准备两个存在相互跳转逻辑的页面新建文件夹views新建文件 AboutViews.vue HomeViews.vue3、配置独立文件新建文件夹router 新建文件 index.jshistory 表示访问方式4、在main.js文件进行全局导入和挂载5、最后使用或 router-link 标签——的声明式导航，并router-link标签添加to属性值 ==》来是router文件夹下的index.js文件中的配置，最后运行显示。
2022-11-03 17:18:06
394
原创 中国boy小空间分享 —— hansw.life
图片加载的真的很慢，像拍立得的感觉，晚上开着灯，慢慢刷着图，感受到了同龄人努力生活的氛围，虽然自己遇到了很多不如意的事，很累也很迷茫，但还是要向“猩猩哥”学习。在某机缘巧合的意外下，通过别人的分享发现了王哥一个分享生活的小空间，刚开始是欣赏，到后面莫名启动了程序猿的DNA，开始思考王哥怎么写的，于是有了这篇博文。盲猜存储在云服务器上，隐约是fengkong。====》vue写的。2、F12后台查看元素。
2022-11-02 22:11:50
1947
原创 axios 网络封装
网络请求有很多，但终归是发送和接收，并且axios发送的数据不能是对象，只能是字符串的形式，所以可以使用统一的工具类对axios发送请求的数据进行处理；以此类推，接收返回的请求，可以通过判断不同的状态码，进行不同的处理（500服务器内部错误、404访问地址不存在等）新建如下： index里封装所有的网络请求 path里放所有的路径。
2022-11-02 16:11:06
453
1
原创 电脑更新后，突然node、npm无法识别
可以用 nvm use 14.10.0 进行证实，exit status1：目前绝大部分问题是权限不足导致的，正常运行。但此时返回的没有星号，证明node版本下载好后，使用切换出现问题。所以点击菜单，右键，使用管理员身份打开，再进行nvm ues。如果还是不行，可能需要检查npm或者环境变量的配置。1、cmd 输入 nvm list 检查。正常应如下图，带星号返回。
2022-11-02 15:09:52
1072
原创 vue3——使用axios
浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。简单一点：可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。的(即同一套代码可以运行在浏览器和node.js中)。
2022-11-01 22:19:27
5982
3
原创 vue使用第三方例子 —— swiper
纯js打造的开源 、强大的触摸滑动插件 ，面向移动端。可实现触屏焦点图、触屏Tab切换、触屏轮播图切换等效果。1.1.1 使用终端执行命令，进行安装，save命令进行保存到package.json中。1.1.2新建轮播图组件。效果：多了显示当前位置的指示器，高亮显示。1.1.4 添加指示器。1.1.3主组件引入。
2022-11-01 18:06:52
1642
原创 vue3事件处理 组件 组件交互 数据传递
3.2 ◉父组件从子组件取值 数据从子组件传递到父组件 使用自定义事件 $emit。v-model.lazy 只有当用户提交或enter键后才触发，去同步数据。◉创建时：beforeCreate、created（组件创建完成不代表，已显示）一般把 定时器和性能消耗的组件 放在beforeUnmount 函数中销毁，处理掉。◉ 渲染时：beforeMount、mounted。同时父组件想要显示子组件传递过来的数据，则。2、组件的组织——嵌套的组件树。页面一启动就会自动调用该函数。
2022-10-30 21:56:49
1232
原创 v-for 添加key提高性能
当用v-for渲染列表时，默认使用“就地更新”的策略，当数据发生变化，vue不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。如果没有key那可能就需要全部都重新渲染，而有key就不用，所以说提高了性能。② 当对象没有id时。
2022-10-30 21:28:50
196
原创 v-if 和 v-show 的区别
v-if 和 v-show 都能实现元素的显示隐藏 1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件 为假，元素会被销毁）； 2. v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多； 3. v-if 有更高的切换开销，v-show 切换开销小； 4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有 5. v-if 可以搭配 template 使
2022-10-30 16:52:19
354
原创 搭建vue2的项目
Rollup也是一款ESModule打包器，可以将项目中的细小模块打包成整块代码，使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境。webpack结合插件可以完成前端工程化的绝大多数工作，而Rollup仅仅是一款ESM打包器，没有其他功能，例如Rollup中并不支持类似HMR这种高级特性。：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；
2022-10-30 15:57:43
134
原创 redis缓存穿透和击穿
对查询为空的缓存对象设置过期时间 eg：在12点上秒杀，但用户11点开始搜，到12点后再搜应该能搜到了，如果不设置有效时间，那该用户就一直搜不到秒杀商品。这里互斥锁是保证每次从数据库查询数据，都再从redis查找数据，最后拿到的都是最新的，这样redis里就不会有过期数据。发生原因：有恶意攻击或DB确实没有符合查询条件的。缓存击穿：redis没有，但是数据库可能有。缓存穿透：redis和数据库都没有。
2022-10-30 00:06:52
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人