Front End: Vue3, Vite, Css...

Directus APP使用VUE 3, Typescript,用Vite构建。 本文记录在评估Directus APP过程中了解到的前端相关知识。 1. vite 构建工具,类似webpack。 1.1. 原理 使用了浏览器的ES6模块加载功能,所以前端可以按需加载JS模块。开发过程中不需要打包了。 <script type="module" src="./foo.js"></script> 以上 module类型加载的 foo.js 中可以再import其它的模块,也可以export。浏览器认识js中的import和export命令,会按需向后台发请求加载。 1.2. 应用 在vite.config.ts中配置开发服务器,例如下面监听8080端口,API请求发送到8055端口。 server: { port: 8080, proxy: { '^/(?!admin)': { target: process.env.API_URL ? process.env.API_URL : 'http://localhost:8055/', changeOrigin: true, }, }, fs: { allow: [searchForWorkspaceRoot(process.cwd()), '/admin/'], }, }, 2. VUE 把js/css/html组织起来的方式。 运行环境(js库)提供数据绑定,改状态就会更新显示,方便JS更新页面。 2.1. 基本概念 data 一个函数,返回组件实例的数据对象。 props 一个数组,或者对象。是父组件调用此组件时候的可配置参数。 data和props都可以在template中访问,区别是 data不是通过父组件传递的,是子组件私有的,是可读可写的。 props中的数据,都是通过父组件传递给子组件的,是只读的。 data存储组件的状态, 没有data的组件就是无状态组件。 mixin, 为了DRY,为了减少重复,把组建脚本部分相同的地方(data,props,method…)抽离出来,单独放到一个对象里面。 然后在组件中mixin进去。 setup函数, 用来替代mixin,实现Composition API。 其输入为props, context,输出是一个对象。对象的所有属性都可以在组件中访问。 2.2. 组件生命周期 ...

2022年3月19日 · 2 分钟

Directus

1. Collection 一个Collection对应数据库的一张表。directus的collection里面有一些独有的概念,例如alias域, sort属性等。 1.1. alias Fields that do not map directly to an actual database column are called “alias” fields. For example, presentation fields (such as dividers and groups) and certain relational types that display data stored elsewhere (such as One-to-Many (O2M) and Many-to-Many (M2M)). O2M, M2M, M2A 等,都不会在表里面有实际的列。称其为alias域。 alias虽然在实际数据库表里面没有列,但是在direct_fields表里面有记录。例如上面pages集合的element域,是m2a类型的alias。 direct_collections表里面描述系统所有受directus管理的表,direct_fields里面描述所有表的所有属性。 通过这种非侵入的方式, 数据库中原有的表结构可以不做改动。 1.2. sort 属性 如果collection建立时候,选择了支持sort,表里面就会多一个sort列。 这一列的作用是支持在app上手工拖拽的方式调整记录的顺序。 原理很简单,表里面加了一个number类型的sort列, 当拖拽的时候,会导致该列的值根据记录的位置产生变动。 1.3. share APP的一个功能, 可以把模型中的一个记录生成一个链接,发送给其它人只读访问。 可以设置密码,有效期,以哪一个身份读取等。 ...

2022年3月13日 · 1 分钟

Docker

1. Docker client通过运行在主机上的docker daemon操作image和container,registry提供image的发布和下载(类似npm和pip)。 Docker 镜像是一个特殊的只读文件系统,提供容器运行时所需的程序、库、资源、配置等文件,还包含一些为运行时准备的配置参数(如匿名卷、环境变量、用户等)。镜像不包含任何动态数据,其内容在构建之后也不会被改变。 Container是image的运行实例,是运行在宿主机上的一种特殊的进程。一个image可以有多个container。 Container是在Image基础上叠加了一个读写层,在container内部做一些写操作后,可以commit读写层生成新的image 上图省略掉了存储配置文件信息的init层。init层位于上图image和container两层之间。存放运行操作系统时候需要写的一些目录/文件。例如/etc 目录。init层commit时候不提交。 因为没必要,每次只读层运行时候都会自动生成init层内容。 1.1. commands # d d d # d d d d d d d d d d o o o o o o o o o o o o o I c c c C c c c c c c c c c c m k k k o k k k k k k k k k k a e e e n e e e e e e e e e e g r r r t r r r r r r r r r r e a p i r i p r r s r r p c a e u m m n s u u t m m o p t x l a i e n n a r t e l g r - r < $ t l a c e a - - t C ( o c h s < i d O d < c h - e I t < N o C a i l M f c T c O l < t l A c l o A k N _ c o G e a n I e T f o - E n s t N r A i n d w t k a E I l t i o I o - i R c N e a r r D s h n o E _ i e l > e e I n R n n c d l r D t a e t l _ > a I m r u o n i D e s - a n > n - 从 查 删 查 交 w m e a s r 看 除 看 互 o e r 4 m q e 本 某 有 式 r > 删 查 9 e l g 地 个 哪 运 l 除 l 看 f > i i 有 i 些 行 d c s 端 7 t s 哪 m c o 口 9 e t 些 a o 重 n - 映 6 对 r i g n 后 启 t a 射 0 于 / y m e t 台 a q 信 e d b 下 a , a 运 i ) 息 b o i 载 g 可 i 行 n 7 c n h e 以 n e e k / e 只 e r 4 e s l 写 r 删 : r h l I 除 / o D 所 d r - 的 有 o u 在 w 前 c c n 名 o 几 o k / 字 r 位 n e s 是 l t r t d a _ a d i f r i i n i t r m e l e a r e 启 c g _ 动 t e n 的 u a 容 s m 器 - e , s 可 q 以 l 拷 用 i 贝 这 t 文 个 e 件 来 的 到 a 容 d t 器 o t 内 c a 执 k c 行 e h s r 到 h 里 控 面 制 台 上 看 输 出 。 1.2. Dockerfile 是用来build image的配置文件,从一个基础image开始,运行一些列配置命令,得到另外一个image ...

2022年3月8日 · 37 分钟

Typescript

Typescript学习笔记。From zero to hero。 1. Array,Tuple,Union,Enum // Basic Types let id: number = 5 //变量后面加类型,用冒号隔开 let company: string = 'Traversy Media' let isPublished: boolean = true let x: any = 'Hello' //any类型变量,可以放任何类型数据 let ids: number[] = [1, 2, 3, 4, 5] //不定长数组 区别传统静态语言的int a[4]; let arr: any[] = [1, true, 'Hello'] //any数组,可以混合各种值 // Tuple let person: [number, string, boolean] = [1, 'Brad', true] //元组:已知元素数量和类型的数组,各元素的类型不必相同。 // Tuple Array let employees: [number, string][] //每个元素是元组的数组 employee = [ [1, 'Brad'], [2, 'John'], [3, 'Jill'], ] // Union let pid: string | number //联合 /* 以下是C语言的联合,都是一个变量可以存几种不同类型数据 union data{ int n; char ch; double f; }; */ pid = '22' // Enum enum Direction1 { Up = 1, Down, Left, Right, } enum Direction2 { Up = 'Up', Down = 'Down', Left = 'Left', Right = 'Right', } 2. Map //定义 type MapType = { [id: string]: string; } //实例化 const map: MapType = {}; map['a'] = 'b'; map['c'] = 'd'; //删除 delete map['c']; //枚举 for (let i in map) { console.log(map[i]); } //得到包含所有key的数组 console.log(Object.keys(map)); //另外一种用Record的实现方式 const map: Record<string, string> = {}; map['a'] = 'b'; map['c'] = 'd'; 3. Object // Objects type User = { id: number name: string } const user: User = { id: 1, name: 'John', } // Type Assertion 类型的选择 let cid: any = 1 // let customerId = <number>cid 从any到 number 的选择 let customerId = cid as number 4. Function // Functions function addNum(x: number, y: number): number { return x + y } // Void function log(message: string | number): void { console.log(message) } 5. Interface, Class // Interfaces interface UserInterface { readonly id: number name: string age?: number } const user1: UserInterface = { id: 1, name: 'John', } interface MathFunc { (x: number, y: number): number } const add: MathFunc = (x: number, y: number): number => x + y const sub: MathFunc = (x: number, y: number): number => x - y interface PersonInterface { id: number name: string register(): string } // Classes class Person implements PersonInterface { id: number name: string constructor(id: number, name: string) { this.id = id this.name = name } register() { return `${this.name} is now registered` } } const brad = new Person(1, 'Brad Traversy') const mike = new Person(2, 'Mike Jordan') // Subclasses class Employee extends Person { position: string constructor(id: number, name: string, position: string) { super(id, name) this.position = position } } const emp = new Employee(3, 'Shawn', 'Developer') 6. Generics // Generics => C++的泛型 function getArray<T>(items: T[]): T[] { return new Array().concat(items) } let numArray = getArray<number>([1, 2, 3, 4]) let strArray = getArray<string>(['brad', 'John', 'Jill']) strArray.push(1) // Throws error 7. FAQ 7.1. type alias or interface https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces ...

2022年3月4日 · 3 分钟