「 设计模式学习 」 L00 开坑贴 & 设计模式概览

设计模式是我在2018年在成都工作的时候听 肉山老师 的直播JavaScript 设计模式 导言的时候就想学习的一个东西,但是一直拖拖拖,买了肉老师的 Chat 从 jQuery 里学习设计模式,但是看了一头雾水,也同样买了肉老师推荐的书《设计模式:可复用面向对象软件的基础》,但是在家里吃灰了半年。
一直想把整个设计模式都了解一下啊,不用吃透,吃个大概明了就可,但是每次都提不起开坑的念头,如果再写成学习笔记的话,学习周期会大大拉长。

但是这在当前项目中的不断迭代中,我遇到了一个问题,就是 项目中的类型和状态管理,所以就想着是否有一个合适的设计模式来解决问题,所以就被逼迫着捡起来了……

阅读全文

项目中的类型和状态管理

这段时间项目迭代比较快,所以很多时候对于记录的状态和类型判断我都是使用的 魔术字符串 的形式,但是这样就与代码形成了 “强耦合”, 不利于后期的维护

例如这样的代码结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 用vue template来举例 -->
<template>
<table>
<!-- 其它结构 -->
<td>
<!-- 直接使用状态值判断 -->
<a @click='xxx' v-if='record.status === 0'>操作A</a>
<!-- 使用数组下标判断 -->
<a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
<a @click='xxx' v-else'>其他操作</a>
</td>
<!-- 其它结构 -->
</table>
</template>

特别是最近一整个分类的类型和状态的都变更了,所以在业务逻辑内的魔术字符串也需要一个一个文件去同步修改,大部分的都被替换了,但还有一些零碎的地方没有被修改到,导致不断有 BUG 被提上来,这就很头疼了。

所以我就想者怎么把业务逻辑内的魔术字符串使用一种方式替换掉,最开始我想法是把状态集中起来进行管理

阅读全文

VueJS中 v-bind 的一些修饰符

今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候,一直觉得这次面试的学生有点差,如果是我来面话可能已经让他回家了,但是 方方老师 很有耐心,在中间问道 .sync 的时候我 ???? 完全没有印象了。

正好自暴自弃了2个月没有更新了,所以复习一下 v-bind 的三个修饰符 [ .prop, .camel, .sync ]

阅读全文

Caddy单域名部署Vue与Laravel项目

之前是想写一篇 Nginx 关于配置前后端项目公用一个域名笔记的,可是后来客户提供的是已经是由其它项目的服务器,他们是使用的 Caddy 作为 web 服务器,所以也就变成了这篇文章。

我对于服务器环境配置可以说是一无所知,勉勉强强完成这次的项目部署,各位将就看看…😖

阅读全文

Jeecg-boot 开发挖坑日记11 查询过滤器整理

如果不配置默认查询条件是全匹配,想实现模糊查询需求在查询值的前后加: *

Jeecg-boot支持不编码通过配置实现 模糊查询匹配查询范围查询不匹配查询 等规则,
但是页面查询字段,需跟后台 ControllerPage 的字段对应一致,就可以不需写后台代码自动生成查询条件SQL。

例如:想实现模糊查询需求在查询值的前后加: *

阅读全文

map() 和 forEach() 的区别

一直以来没有整理查阅过数组的原生方法,所以对什么时候用 map, 什么时候用 forEach 并不是很明确,完全看心情。
只是知道 map有返回值而 forEach 没有需要自己操作,所以今天准备好好梳理一下记录下来。

阅读全文

ESlint的格式化风格有很多种,选择哪一种作为自己的代码格式化风格呢?

这段时间刚刚复工,年前的我负责的一个年会大屏系统公司准备重新整理制作成为商城可售卖版本,然后又来了一个公司服务器租赁的 WebAPP 的项目,
我春节期间的外包项目也没有做完。那么给我自身 CodeReview 的时间就不够了,所以需要一个 ESLint 的通配规则来减少我编写的时候小失误,
虽然有自己的代码书写习惯,但是并没有强制要求自己,一直以来自己的 ESLint 配置仅具有错误预防功能,并没有使用一个通用的格式化风格,一直考虑的是使用 Airbnb config

趁着 CLI 在创建项目下载依赖的时间,我想选择一个规则作为我自己的以后的编码风格,
根据 CLI 给出的提示,默认可以配置的有三种:

阅读全文

Jeecg-boot 开发挖坑日记09 AntD 表单校验

之前开发的时间比较赶,所以在某些还没弄明白的地方我直接使用了 v-model 来绑定数据,没并没有使用 v-decorator,所以表单验证需要自己手动去写,异常提示也是需要单独的去做,

现在空下来了,重新整理了一下业务代码,总的来说大部分的表单元素都有demo可以对照着看,复杂的部分也只是上传组件或者一些联动的部分。

阅读全文

Jeecg-boot 开发挖坑日记02 用户头像上传 / Vue-AntD上传组件

项目正式开始,第一个功能模块的用户信息编辑就开始卡壳,特别是头像上传组件。

  • 弹出框 a-mdal 的表单值怎么获取到的
  • ant-design-vue 上传组件的头像上传

使用 ant-design-vue 上传组件的头像上传。

在 Jeecg-boot 中头像上传是 antD 的上传组件 listType="picture-card"
在教程里是直接使用 upload 组件的 defaultFileList API,
但他们 DEMO 是 listType="text",或 listType="picture-card" 但绑定的是 fileList
并不是 defaultFileList,就和 ant-design-vue 的文档是一摸一样的照着读了一遍,

然后我直接复制的官方用户头像 DEMO,就出现了问题。

阅读全文

怎么知道依赖包需要安装到生产还是开发环境或者是安装到全局

刚开始接触 Node.js (包管理项目) 的时候很多人都会疑惑哪些依赖是可以装在全局的,哪些依赖是安装在项目里的,安装在项目里的依赖又是怎么分辨是否是要安装在开发环境中还是生产环境中?

小白的时候还不知道怎么搜索关键词,然后就只能看着文档,他们怎么说自己就怎么敲,

上边写的是 npm install vuenpm install,
如果写的是 npm install -g @vue/cli 那么就 npm install -g,
如果是 npm install --save-dev @babel/core 那么就 npm install --save-dev

比如 4 个月前的我就是这样,最近有一些人在群里问,那我就整理了下(原来这不是我笨理解不了,别人也是这样觉得的!)

阅读全文