起因起初手头上有一台阿里云99元/年的云服务器，，但使用起来非常卡顿，经常宕机，让人难以忍受。正好在论坛内，看到有服务器代理商的双十一优惠，一眼看中了2C2G 新加坡 30M带宽 1T/月 有国内线路优化的服务器，于是一次性购买了三年。一开始使用体验不错，域名不需要备案可以直接解析，docker镜像拉取速度极快，网站访问速度可以接受，但好景不长，一段时间后，国内访问速度极慢，和腾讯云的工单客服battle半天，只说新加坡运营商的线路问题，不确定何时解决，要么改用香港优选流量，要么迁移至国内服务器。思考之后，我决定把服务器的各项应用迁移至国内服务器，虽然使用了docker部署，但是迁移起来还是遇到了一些困难，下面我会记录迁移的各个步骤以便后续再次迁移使用。具体操作一、服务器数据文件备份原服务器防火墙策略从腾讯云管理平台导出防火墙策略，管理端口开放情况docker持久化数据从原服务器上下载各持久化数据，上传到新服务器对应目录，其中包含了Mysql数据库数据1panel已安装应用数据备份下载1panel已安装应用二、防火墙策略开通将之前导出的防火墙策略Excel导入新的服务器管理面板处导入即可。三、应用安装/迁移运维面板 -- 1panel安装直接选择在线安装方式，执行以下命令，按照提示一步一步完成安装。bash -c "$(curl -sSL https://resource.fit2cloud.com/1panel/package/v2/quick_start.sh)"配置安装完成后，需要进行以下的配置证书申请开启面板SSL修改SSH默认端口，且开启仅密钥登录应用利用之前备份文件还原已安装应用/opt/1panel/apps/openrestyuptime-kuma个人博客 -- Typechodocker run -d --name=typecho-blog -p 2234:80 -v /data/docker_typecho_data:/data -e PHP_TZ=Asia/Shanghai --restart=always 80x86/typecho:latest个人云盘 -- Cloudrevedocker run -d --name cloudreve -p 5212:5212 -p 6888:6888 -p 6888:6888/udp -v /data/docker_cloudreve_data:/cloudreve/data cloudreve/cloudreve:latest数据库 -- Mysql8.0docker run -it --name=mysql8.0 -p 5555:3306 -e MYSQL_ROOT_PASSWORD=xxxxxx -e TZ=Asia/Shanghai -v /data/docker_mysql_data:/var/lib/mysql -d --restart=always mysql:8.0导航页 -- Sun-Paneldocker run -d --restart=always -p 3002:3002 -v /data/docker_sun-panel_data/conf:/app/conf -v /var/run/docker.sock:/var/run/docker.sock --name sun-panel hslr/sun-panel:latest四、OpenResty代理应用类型panel反向代理blog反向代理cloud反向代理nav反向代理www静态网站status一键部署五、EdgeOne加速1、准备一个已备案域名2、将域名纳入EO管理3、添加子域名，并在DNS添加EO解析4、申请Https证书
参考链接： React 内置 HookHook简单介绍 定义： 以use开头的函数 作用： Hook有助于在组件中使用不同的React功能 使用： Hook比普通函数更为严格，只能在的组件（或其他 Hook）的 顶层 调用Hook 分类：State HookContext HookRef HookEffect Hook性能 Hook其他 Hook自定义 HookState Hook状态帮助组件，用于“记住”用户的输入信息useState ：声明可以直接更新的状态变量示例：function MyButton(){ const [count,setCount] = useState(0); function handleClick(){ setCount(count+1); } return( Clicked {count} times ) }useReducer：在reducer函数中声明带有更新逻辑的state变量reducer函数 ：将组件的所有状态更新逻辑整合到一个外部函数中，这个函数叫做reduceruseReducer钩子接受参数：一个reducer函数一个初始的state返回内容：一个有状态的值一个dispatch函数（派发用户操作给reducer）示例： {tabs}{tabs-pane label="App.js"}import { useReducer } from 'react'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; import tasksReducer from './tasksReducer.js'; export default funtion TaskApp(){ const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); function handleAddTask(text){ dispatch({ type:'added', id:nextId++, text:text, }); } function handleChangeTask(task){ dispatch({ type:'changed', task:task }); } function handleDeleteTask(taskId){ dispatch({ type:'deleted', id:taskId, }); } return ( <> 布拉格的行程安排 <AddTask onAddTask={handleAddTask} /> <TaskList tasks={tasks} onChangeTask={handleChangeTask} onDeleteTask={handleDeleteTask} /> </> ); }{/tabs-pane}{tabs-pane label="tasksReducer.js"}export default function tasksReducer(tasks, action) { switch (action.type) { case 'added': { return [ ...tasks, { id: action.id, text: action.text, done: false, }, ]; } case 'changed': { return tasks.map((t) => { if (t.id === action.task.id) { return action.task; } else { return t; } }); } case 'deleted': { return tasks.filter((t) => t.id !== action.id); } default: { throw Error('未知 action：' + action.type); } } } {/tabs-pane}{/tabs}Context Hook上下文帮助组件 从祖先组件接收信息，而无需将其作为 props 传递useContext 读取订阅上下文示例：import { createContext, useContext } from 'react'; const ThemeContext = createContext(null); export default function MyApp(){ return ( <ThemeContext.Provider value="dark"> <Form/> <ThemeContext.Provider> ); } function Form(){ return ( <Panel title="Welcome"> Sign up Log in </Panel> ); } function Panel({title,children}){ const theme = useContext(ThemeContext); const className = 'panel-' + theme; return( {title} {children} ); } funciton Button({children}){ const theme = useContext(ThemeContext); const className = 'button-' + theme; return( {children} ); }注意：通常情况下，useContext()只会调用上层provider,当然通过合并的方式可以实现嵌套调用Ref Hookref 允许组件 保存一些不用于渲染的信息，比如 DOM 节点或 timeout ID。与状态不同，更新 ref 不会重新渲染组件。useRef 声明ref，可以保存任何值，但常用于保存DOM节点示例：import { useRef } from 'react'; export default function Counter() { let ref = useRef(0); function handleClick() { ref.current = ref.current + 1; alert('You clicked ' + ref.current + ' times!'); } return ( 点击！{ref.current} ); } 与useState不同的是，ref不会触发重新渲染，所以JSX中显示{ref.current}不会变化useImperativeHandle 自定义从组件中暴露ref，不常用Effect HookEffect 允许组件 连接到外部系统并与之同步。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码useEffect 将组件连接到外部系统外部系统 ：有些组件需要与网络、某些浏览器 API 或第三方库保持连接，当它们显示在页面上时。这些系统不受 React 控制，所以称为外部系统示例：import {useState,useEffect} from 'react'; import {createConnection} from './chat.js'; function ChatRoom({roomId}){ const [serverUrl,setServerUrl] = useState('https://localhost:1234'); useEffect(()=>{ const connection = createConnection(serverUrl,roomId); connection.connect(); return ()=>{ connection.disconnection(); }; },[serverUrl,roomId]); // ... }需要向 useEffect 传递两个参数：一个 setup 函数 ，其 setup 代码 用来连接到该系统。它应该返回一个 清理函数（cleanup），其 cleanup 代码 用来与该系统断开连接。一个 依赖项列表，包括这些函数使用的每个组件内的值性能 Hook使用性能hook可以跳过计算和不必要的重新渲染来优化性能useMemo 缓存计算代价昂贵的计算结果useMemo(calculateValue, dependencies) calculateValue：要缓存计算值的函数 dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组示例： {tabs}{tabs-pane label="App.js"}import { useState } from 'react'; import { createTodos } from './utils.js'; import TodoList from './TodoList.js'; const todos = createTodos(); export default funtion App(){ const [tab,setTab] = useState('all'); const [isDark,setIsDark] = useState(false); return( <> setTab('all')}>All setTab('active')}>Active setTab('completed')}>Completed setIsDark(e.target.checked)}> Dark mode <TodoList todos={todos} tab={tab} theme={isDark?'dark':'light'}/> </> ); } {/tabs-pane}{tabs-pane label="TodoList.js"}import { useMemo } from 'react'; import { filterTodos } from './utils.js' export default function TodoList({ todos, theme, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); return ( Note: filterTodos is artificially slowed down! {visibleTodos.map(todo => ( {todo.completed ? {todo.text} : todo.text } ))} ); } {/tabs-pane}{tabs-pane label="utils.js"}export function createTodos() { const todos = []; for (let i = 0; i < 50; i++) { todos.push({ id: i, text: "Todo " + (i + 1), completed: Math.random() > 0.5 }); } return todos; } export function filterTodos(todos, tab) { console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.'); let startTime = performance.now(); while (performance.now() - startTime < 500) { // 在 500 毫秒内不执行任何操作以模拟极慢的代码 } return todos.filter(todo => { if (tab === 'all') { return true; } else if (tab === 'active') { return !todo.completed; } else if (tab === 'completed') { return todo.completed; } }); } {/tabs-pane}{/tabs}useCallback 将函数传递给优化组件之前缓存函数定义const cachedFn = useCallback(fn, dependencies) fn：想要缓存的函数 dependencies：有关是否更新 fn 的所有响应式值的一个列表示例：function ProductPage({ productId, referrer, theme }) { // 在多次渲染中缓存函数 const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); // 只要这些依赖没有改变 return ( {/* ShippingForm 就会收到同样的 props 并且跳过重新渲染 */} <ShippingForm onSubmit={handleSubmit} /> ); }useMemo与useCallback联系useMemo 经常与 useCallback 一同出现,区别在于useMemo 缓存函数调用的结果 useCallback 缓存函数本身// 在 React 内部的简化实现 function useCallback(fn, dependencies) { return useMemo(() => fn, dependencies); }示例：import { useMemo, useCallback } from 'react'; function ProductPage({ productId, referrer }) { const product = useData('/product/' + productId); const requirements = useMemo(() => { //调用函数并缓存结果 return computeRequirements(product); }, [product]); const handleSubmit = useCallback((orderDetails) => { // 缓存函数本身 post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); return ( <ShippingForm requirements={requirements} onSubmit={handleSubmit} /> ); }其他 Hook使用 useDebugValue 自定义 React 开发者工具为自定义 Hook 添加的标签。使用 useId 将唯一的 ID 与组件相关联，其通常与可访问性 API 一起使用。使用 useSyncExternalStore 订阅外部 store。使用 useActionState 允许你管理动作的状态.自定义Hook自定义hook
{card-default label="刘震云" width=""}这个世界我们只来一次，百年之后，没你也没我 我们拼搏一生，带不走一砖一瓦 我们执着一生，带不走一丝爱恨情仇，人生苦短 所以吃你想吃的饭，见你想见的人，看你喜欢的风景，做你喜欢的事 人生本来就是一次减法，来日并不方长 有钱把日子过好，没钱把心情过好，时间扑面而来 我们终将释怀 平静的过，健康的活着 开心地笑，适当地忙碌 就很好 不要去责怪你生命中的任何人，合得来就好好相处，多多关怀，合不来就保持距离，装装糊涂 人在世上总会遇见形形色色的人，好的人给了你快乐 坏的人给了你经历，最差的人给了你教训，最好的人给了你成长 所有的相遇绝非偶然 来者要惜，去者要放 {/card-default}{card-default label="白日梦想家" width=""}认识世界，克服困难。洞悉所有，贴近生活。寻找真爱，感受彼此。这就是生活的意义。{/card-default}
TypeScript入门笔记教程地址：官方文档：TypeScript 菜鸟教程：TypeScript入门教程简单介绍1、TypeScript由微软公司开发，是一种开源的编程语言2、TypeScript是JavaScript的超集，拓展了JavaScript的语法，因此，TS也是兼容JS代码的，只会对TS代码进行编译安装有两种主要的方式来获取TypeScript工具：通过npm（Node.js包管理器）安装Visual Studio的TypeScript插件这里采用npm的方式进行安装npm install -g typescript查看版本tsc -V 初始化一个项目tsc --init 基础语法数据类型布尔值let isDone: boolean = false;数字let decLiteral: number = 6; //十进制 let hexLiteral: number = 0xf00d; //十六进制 let binaryLiteral: number = 0b1010; //二进制 let octalLiteral: number = 0o744; //八进制字符串let name: string = "bob"; name = "smith";字符串除用"或'表示外，还可以使用模板字符串，可以定义多行文本和内嵌表达式，字符串由反引 号`包围，并且以${ expr }这种形式嵌入表达式let name: string = `Xiaohu`; let age: number = 37; let sentence: string = `Hello, my name is ${name}. I'll be ${age+1} years old next month;` console.log(sentence); //显示结果 Hello, my name is Xiaohu. I'll be 38 years old next month;SymbolSymbol 是 唯一且不可变 的数据类型，通常用作对象属性的键// Symbol 类型注解 const sym1: symbol = Symbol(); const sym2: unique symbol = Symbol("key"); // unique symbol 类型 // 作为对象属性 const obj = { [sym2]: "123" // 使用 unique symbol }; console.log(obj[sym2]); // "123"数组两种定义方式第一种在元素类型后面添加[]let list: number[] = [1, 2, 3];第二种使用数组放心，Array<元素类型>let list: Array<number>元组元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同let x: [string, number]; x = ['hello', 10]; // 正确 x = [10, 'hello']; // 错误当访问一个越界的元素，会使用 联合类型 替代x[3] = 'world'; x[4] = 100; console.log(x[5].toString()); //以上都是可以的, 字符串和数字都属于(string | number)类型,'string' 和 'number' 都有 toString x[6] = true; // Error, 布尔不是(string | number)类型联合类型一个变量是多个数据类型中的某一个，可以使用联合类型， 或 的关系function getArg(param: string | number) { return param.length }交叉类型一个变量是多个数据类型的总和，可以使用交叉类型， 与 的关系interface Person { name: string; age: number; } interface Employee { company: string; employeeId: number; } // BusinessPerson 必须同时拥有 Person 和 Employee 的所有属性 type BusinessPerson = Person & Employee;枚举enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字enum Color {Red,Green,Blue} let c:Color = Color.Green; console.log(c); //显示1默认情况下，从0开始为元素编号，也可以手动的指定成员的数值;枚举类型也可以通过值找到对应名字enum Color {Red=1,Green=2,Blue=4} //Green和Blue 不赋值，则默认从2开始 let colorName:string = Color[4]; console.log(colorName); // 显示BlueAnyAny表示任意类型，但不同在于Object只允许赋值，而不能调用其中的方法，即使对象内部真的有对应的方法let notSure: any = 4; notSure.ifItExists(); // 正常 notSure.toFixed(); // 正常 let prettySure: Object = 4; prettySure.toFixed(); // 报错，提示Object没有对应方法Void表示没有任何类型，比如在函数没有返回值时，返回voidfunction warnUser(): void { console.log("This is my warning message"); }void 只能赋undefined和nulllet unusable: void = undefined;Null 和 UndefinedTypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null，是所有类型的子类型（默认情况）；--strictNullChecks标记，null和undefined只能赋值给void和它们各自Nevernever类型表示的是那些永不存在的值的类型，never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）， 即使 any也不可以赋值给never。// 返回never的函数必须存在无法达到的终点 function error(message: string): never { throw new Error(message); } // 推断的返回值类型为never function fail() { return error("Something failed"); } // 返回never的函数必须存在无法达到的终点 function infiniteLoop(): never { while (true) { } }Objectobject表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型接口TypeScript的核心原则之一是对值所具有的shape进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约普通接口interface LabelledValue{ label:string; } function printLabel(labelledObj:LabelledValue){ console.log(labelledObj.label); } let myObj = {size:10,label:"Size 10 Object"}; printLabel(myObj);LabelledValue接口就好比一个名字，用来描述上面例子里的要求。它代表了有一个label属性且类型为string的对象。需要注意的是，我们在这里并不能像在其它语言里一样，说传给printLabel的对象实现了这个接口。我们只会去关注值的外形。 只要传入的对象满足上面提到的必要条件，那么它就是被允许的。还有一点值得提的是，类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。可选属性带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号，可选属性的好处之一是 可以对可能存在的属性进行预定义 ，好处之二是 可以捕获引用了不存在的属性时的错误interface SquareConfig { color?: string; width?: number; }只读属性一些对象属性只能在对象刚刚创建的时候修改其值，可以在属性名前用readonly来指定只读属性属性用readonly，变量用constinterface Point { readonly x: number; readonly y: number; } }函数类型接口也可以描述函数类型interface SearchFunc{ (source:string,subString:string):boolean; } let mySearch: SearchFunc; mySearch = function(source: string, subString: string) { let result = source.search(subString); if (result == -1) { return false; } else { return true; } } //对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配 mySearch = function(src: string, sub: string): boolean { let result = src.search(sub); if (result == -1) { return false; } else { return true; } }数组类型数组类型具有一个index类型表示索引的类型，还有一个相应的返回值类型表示通过索引得到的元素的类型interface StringArray { [index: number]: string; } let myArray: StringArray; myArray = ["Bob", "Fred"];interface NumberDictionary { [index: string]: number; length: number; // 可以，length是number类型 name: string // 错误，`name`的类型不是索引类型的子类型 }实现接口与Java中的接口一致，TypeScript也能够用它来明确的强制一个类去符合某种契约interface ClockInterface { currentTime: Date; setTime(d: Date); } class Clock implements ClockInterface { currentTime: Date; setTime(d: Date) { this.currentTime = d; } constructor(h: number, m: number) { } }类静态部分与实例部分实例部分 ：当你使用 new 创建一个类的实例时，实例上拥有的属性和方法。静态部分 ：类本身（构造函数）上拥有的属性和方法。当你用一个接口去约束一个类时（使用 implements 关键字），这个接口 只会检查类的实例部分，而不会检查静态部分 。当你用 构造器签名 （用来描述构造函数类型的一种特殊语法）去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误，因为当一个类实现了一个接口时，只对其实例部分进行类型检查。 constructor存在于类的静态部分，所以不在检查的范围内。interface ClockConstructor { new (hour: number, minute: number); } class Clock implements ClockConstructor { currentTime: Date; constructor(h: number, m: number) { } }因此，我们应该直接操作类的静态部分。 看下面的例子，我们定义了两个接口， ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock，它用传入的类型创建实例。interface ClockConstructor { new (hour: number, minute: number): ClockInterface; } interface ClockInterface { tick(); } function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface { return new ctor(hour, minute); } class DigitalClock implements ClockInterface { constructor(h: number, m: number) { } tick() { console.log("beep beep"); } } class AnalogClock implements ClockInterface { constructor(h: number, m: number) { } tick() { console.log("tick tock"); } } let digital = createClock(DigitalClock, 12, 17); let analog = createClock(AnalogClock, 7, 32);因为createClock的第一个参数是ClockConstructor类型，在createClock(AnalogClock, 7, 32)里，会检查AnalogClock是否符合构造函数签名继承接口接口可以相互继承,也可以继承多个接口，创建出多个接口的合成接口interface Shape { color: string; } interface PenStroke { penWidth: number; } interface Square extends Shape, PenStroke { sideLength: number; } let square = <Square>{}; square.color = "blue"; square.sideLength = 10; square.penWidth = 5.0;接口继承类当接口继承了一个类类型时，它会继承类的成员但不包括其实现。当创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）class Control { private state: any; } interface SelectableControl extends Control { select(): void; } class Button extends Control implements SelectableControl { select() { } } class TextBox extends Control { select() { } } // 错误：“Image”类型缺少“state”属性。 class Image implements SelectableControl { select() { } } class Location { }类与Java中的类很类似，成员有属性、构造方法、方法class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world");继承派生类通常被称作子类 ，基类通常被称作 超类class Animal { move(distanceInMeters: number = 0) { console.log(`Animal moved ${distanceInMeters}m.`); } } class Dog extends Animal { bark() { console.log('Woof! Woof!'); } } const dog = new Dog(); dog.bark(); dog.move(10); dog.bark();公共，私有与受保护的修饰符public:默认值，可以自由的访问类中定义的成员private:不能在声明它的类的外部访问；只用两个类中都有相同private成员，且来自同一处声明时，这两个类型才是兼容的，protected成员也一样protected:protected成员在派生类中仍然可以访问其他知识点1、readonly修饰符可以使用readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化2、存取器TypeScript支持通过getters/setters来截取对对象成员的访问3、静态属性创建类的静态成员，这些属性存在于类本身上面而不是类的实例上4、抽象类abstract，抽象类做为其它派生类的基类使用函数普通函数和匿名函数// Named function function add(x, y) { return x + y; } // Anonymous function let myAdd = function(x, y) { return x + y; };this和箭头函数箭头函数能保存函数创建时的 this值，而不是调用时的值let deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { // NOTE: the line below is now an arrow function, allowing us to capture 'this' right here return () => { let pickedCard = Math.floor(Math.random() * 52); let pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } } } let cardPicker = deck.createCardPicker(); let pickedCard = cardPicker(); alert("card: " + pickedCard.card + " of " + pickedCard.suit);泛型使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据Hello World不使用any类型是因为any会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的function identity<T>(arg: T): T { return arg; }类型推论 ：编译器会根据传入的参数自动地帮助我们确定T的类型let output = identity("myString"); 泛型约束<T extends Lengthwise>：这是泛型约束，表示类型 T 必须满足 Lengthwise 接口的要求interface Lengthwise { length: number; } function loggingIdentity<T extends Lengthwise>(arg: T): T { console.log(arg.length); return arg; }
前言这是我第二次读完这本书，记得第一次读应该是23年那会儿，在地铁上，用微信读书看完了电子版。刚接触这本书时对我的冲击还是比较大的，里面的观点有点颠覆常识，但又让人觉得挺有道理的。可随着时间的流逝，很多东西都记不得了。前不久在B站刷到相关视频，就冲动买了一本，花了两周时间看完了（实际书的内容不算多，快的话一天就可以看完）。现趁着刚看完，把自己所接受到的东西写一写，当然这里也不是完全赞同书中内容，会放一些自己的思考。阿德勒心理学书中主要就是通过哲人和青年的对话来阐述阿德勒心理学，其中个人感觉读阿德勒心理学是非常刺痛的，它冷血地把人性进行解剖，将很多的责任或者原因归结到个人本身，而不是外界的条件，避免你下意识地找借口来逃避。勇气一词贯穿全书，人需要被讨厌的勇气，或者说直面这个客观的世界也是需要莫大的勇气。PS：弗洛伊德、荣格、阿德勒被称为心理学三巨头，前两位好像更加出名一点，梦的解析或者MBTI16型人格在互联网上传播更为广泛。“原因论”和“目的论”首先，阿德勒心理学的一个观点就是目的论——你是抱着某种目的让自己这样，书中否定了弗洛伊德的原因论——你现在的样子是由于过去的某一系列原因造成。乍一听，很反直觉。毕竟，这是一个讲逻辑讲因果的世界，人的种种行动都不可避免地受到各种因素的影响，但阿德勒心理学却说人都是抱有目的地让自己这样。不仅如此，人现在遇到的很多事情是痛苦的，但却被书中称为“善”，是对本人有利的。这不是很奇怪吗？但结合自己的经历和真实的内心想法，仔细想想，我确实是这样子的。生活中，我让自己痛苦的行为会让自己很舒服。拿我放弃考研举例子，如果从原因论来解释，可以解释通，我是一个心态不好的人，考研肯定会失败；我的父母年纪大了，读研还要花掉三年的时间，不如直接工作等等。也就是说，我放弃考研，是由多个因素造成的。责任不在于我。但是如果用目的论的角度，结果就比较直接了，我害怕考研的失败，害怕读研的辛苦，出于逃避的目的，所以产生了这一些所谓的原因。同时，当时的逃避，也为自己日后的心理安慰提供了方便，保留了一种可能性。当我咀嚼遗憾的时候，就可以相对轻松地想——只是我因为客观原因没有坚持而已，如果坚持下来也会有一个很不错的结果。目的论的好处相比于原因论，目的论是可以充分发挥人的主观能动性，也就是说排除掉一些客观无法改变的外界条件，人是可以自我改变的，并有极大的改变空间。相反，如果陷入原因论，即A->B，B->C,C->D ......,那么就有了一股决定论的意味，反而让人无法摆脱当前的痛苦，让人拥有了各种各样的推辞。目的论的缺点目的论同样也有危险。就是它过分强调了自身，而忽略了客观的世界。这个很容易让我联想到尼采所说的超人（overman），如果真的可以把所有的现状归结为自己的目的，那这个人的精神力量得多么的强大。事实上，我们需要认清，什么是可以改变的，什么是人无法决定的。盲目地将人置于高点，精神的崩溃是必然。认可欲求放弃对他人的认可欲求，其实就契合了本书的书名——被讨厌的勇气。我觉得自己一直活得很痛苦，因为我一直希望满足所有人的期待，得到周围所有人的认可。在亲戚邻居眼里，我努力优秀，在父母眼中，我孝顺懂事；在领导同事眼中，我认真踏实；但只有在无人的内心角落，才知道我是一个什么样的人，我懒惰、贪玩、会吃外卖，喜欢熬夜，一点也不自律，也会做很多不健康不积极的事情，只是无法坦率地在他人面前展现出来。我像是被众人架在火堆中烘烤，逼迫着展现出好的光泽，但我知道，终有一天，我将无法忍受这持久的炙烤，散发出焦糊的气味来。（多希望有那么一个人接受我的缺点，能让我展现出真实的自我，在一起轻松快乐，我也绝不会辜负她）。课题分离简单来说，课题分离就是做好自己的事情，既不去干涉别人的事，也不希望别人来干涉我。这与哲学上的斯多葛主义有异曲同工之妙，区分我们能控制什么与不能控制什么，来减少精神内耗。痛苦和焦虑主要源于我们试图去控制我们无法控制的事情，或者忽视了我们真正能够控制的东西如我们的内心和思想。理论很容易，但执行起来是非常的困难，就以书中孩子教育来举例，如果孩子贪玩，不好好学习，我相信绝大多数家长无法做到课题分离，即把学习这件事当成孩子自己的事情，而不去干涉。想要通过把马迁到河边，让马自己决定是否喝水，对于大部人人来说也是很难的，需要优秀的沟通能力和表达能力。我只做好我应该做的事情，别人怎么样，我不去管。这会让我们更容易专注在自己的事情上，而排除掉心中的杂念。自卑情结与优越情结自卑和优越并不是一体两面，而是在实际中可以相互转化。优越的人是最自卑的，他无法接受一个不完美的自己，所以内心就开始欺骗，幻想出自己的优越性来；自卑的人也是最优越的，因为他自卑产生的根源就是自大地觉得自己应该完美，或者说在某个方面应该不比某些人差。我自己就是一个自卑（自大）的人，别人收获幸福时，即使是自己的朋友，也难免会产生嫉妒的心理。命运共同体阿德勒心理学也被称为个体心理学，但其并不是想让每个人从世界、社会、公司、家庭中独立出去，变成一个自私、无情的人。但如果简单来想，无论是课题分离，亦或是放弃认可欲求，都不是在说，人要自私，要只想着自己，而不必在乎他人？别人怎么样，我不管（课题分离），别人怎么看我，我不管（放弃认可欲求）。事实上，这种是自私自利之人所理解世界的方式，我们并非完全从社会生活中脱离出去。萨特说“他人即地狱”，阿德勒说“一切烦恼全部来自于人际交往”，可是人作为社会性群居动物，无法与他人彻底分割，总是会产生某种联结。在我看来，阿德勒的心理学在让我们独立的同时，也在呼吁结合，我们希望减少人际上的烦恼和痛苦，但也无法放弃交际。课题分离是对他人的尊重，放弃认可欲求是让自己更积极主动。我们灵活地在自我和社会中切换，一切都是为了自己，一切为了社会，一切为了命运的共同体，这些并不冲突矛盾。活在当下我所接触到的很多哲学观点都在阐述这一个道理，人生的意义在于活在当下，我知道要活在当下，每次难过压抑时，我把手放在胸前，感受心脏砰砰跳动，我就会感慨，此刻的我还活着，还好好地活着。可是，我也只有这一小段时间里是在当下，随后我还是会遗憾或者后悔过去，担心或者幻想未来。我会在大脑中模拟着过去没有发生的事情，模拟着未来可能发生的事情（即使这个事情的可能性非常小），随之痛苦、担忧、恐惧就接踵而至了。但换个角度说，这种处理方式，也符合了之前的目的论，完全自洽，我让自己痛苦了也就让自己轻松了。其他思考工作之后看了不少的哲学视频和哲学书籍，了解到很多的观点来指导人生，但生活还是会迷茫，会困惑，无法按照“正确”的方式来对待遇到的各种事情，也就是很难做到知行合一。有时候，我就会想，是否知道的越多，了解的越多，人反倒就会很痛苦呢？我和我姐说这些，她会觉得人生很简单，反倒是我把它想复杂了。我大概能懂她对生活的态度，但我又觉得我不想像她一样糊涂地活着。哲学是一把双刃剑，它一边让人觉得清晰，一边让人觉得痛苦，在拯救人的同时也慢慢地将这个人杀死。
第一章 Git基础1.1 课程综述版本变更管理 VCS的演化目录拷贝--> 集中式VCS（SVN） --> 分布式VCS（Git）Git优点：开源、性能好、存储优、方面备份、易于制定工作流程、支持离线操作1.2 安装Git安装地址：Git官网1.3 使用Git之前需要做的最小配置 最小配置 git config --global user.name 'your_name' git config --global user.email 'your_email@domain.com' config的三个作用域 git config --local 针对某个仓库（可缺省） git config --global 当前所有用的仓库 git config --system 系统所有登录用户 显示config的配置 git config --list --local 1.4 创建第一个仓库并配置local用户信息两种方式1、把已有的项目代码纳入Git管理 cd 项目代码所在的文件夹 git init 2、新建的项目直接用Git管理 cd 某个文件夹 git init your_project #会在当前路径下创建和项目名称同名的文件夹 cd your_project1.5 通过几次commit来认识工作区和暂存区 工作区 ==> 暂存区 ==> HEAD ==> 远端 add commit push/pull(fetch+merge) git add -u：添加文件的修改，文件的删除（只操作跟踪过的文件） git add . ：添加文件的修改，文件的新建 git add -A：添加文件的修改，文件的删除，文件的新建（全部文件） 工作中一般是用到 git add . 或者 git add -A（-all） 1.6 给文件重命名的简便方法 文件重命名： git mv oldName newName 大小写问题： git config core.ignorecase true1.7 通过git log查看版本演变历史ps： 对于git命令参数 如果单字母用-,如果单词使用-- git log --all 查看所有分支的历史 git log --all --graph 查看图形化的 log 地址 git log --oneline 查看单行的简洁历史 git log --oneline -n4 查看最近的四条简洁历史。 git log --oneline --all -n4 --graph 查看所有分支最近 4 条单行的图形化历史。 git help --web log 跳转到git log 的帮助文档网页1.8 gitk:通过图形界面工具来查看版本历史个人日常工作使用souceTree更多1.9 探秘.git目录 .git/ ├── HEAD # 指向当前分支的引用（如 `refs/heads/main`） ├── config # 仓库的本地配置（用户名、远程仓库等） ├── objects/ # 存储所有Git对象（提交、树、文件内容） │ ├── pack/ # 压缩后的对象包（优化存储） │ └── ... # 松散对象（未被压缩的单个对象） ├── refs/ # 存储引用（分支、标签、远程跟踪分支） │ ├── heads/ # 本地分支（如 `main`, `dev`） │ ├── tags/ # 标签（如 `v1.0.0`） │ └── remotes/ # 远程跟踪分支（如 `origin/main`） ├── index # 暂存区（Staging Area）的二进制表示 ├── hooks/ # 客户端/服务端钩子脚本（示例，默认未激活） ├── logs/ # 记录所有分支的提交历史（用于 `git reflog`） └── info/ # 全局排除文件配置（如 `.git/info/exclude`） git cat-file git cat-file -t 查看git 对象的类型 git cat-file -p 查看git 对象的内容 git cat-file -s 查看git 对象的大小1.10 commit、tree和blob三个对象之间的关系blob ==> tree ==> commit 享元模式：一种结构型设计模式，旨在通过共享对象来减少内存使用和提高性能，特别适用于存在大量相似对象的情况。享元模式的核心思想是将对象的内在状态（可共享的部分）与外在状态（不可共享的部分）分离，从而减少对象的数量。 1.11 小练习：数一数tree的个数可以简单的理解为commit是根节点，tree是子节点，blob是叶子节点，其中blob是可以共用的。1.12 分离头指针情况下的注意事项直接git checkout commitId会出现分离头指针的情况，这个时候提交的代码没有与分支关联起来，在切换分支时容易丢失代码（恢复比较麻烦）。应用场景：做测试时，可以用这个方法，不需要则直接丢弃，需要的话则创建新分支 git branch <新分支的名称> commitId1.13 进一步理解HEAD和branchHEAD总结：1、HEAD当和分支挂钩的时候，指向的是该分支的最新提交2、HEAD不和分支挂钩，而是指向某个commit,此时处于分离头指针的状态3、切换分支HEAD的状态:切换分支时，HEAD指向的时branch的最新提交4、HEAD指向branch的时候，指代的是某个具体的commit5、HEAD 代表当前分支最新的提交，HEAD^ 上一个commit，HEAD ^^：上上个commit，HEAD~N:前n个commit第二章 独自使用Git时的场景2.1 怎么删除不需要的分支 git branch -d branch_name 在删除分支前Git会判断在该分支上开发的功能是否被merge的其它分支 git branch -D branch_name2.2 怎么修改最新的commit的message git commit --amend 不只是修改最新commit的message 而是会创建一个将暂存区的内容生成一个commit，再将当前最新的commit替换成新生成的那一个 Linux下 git默认的文本编辑器是nano，很多快捷键不熟悉，执行下面的命令可以将git的文本编辑器改为我们熟悉的vim git config --global core.editor vim2.3 怎么修改老旧commit的message 变基操作 git rebase -i <commit> git rebase -i --root 修改根节点 -r,reword <commit> 使用提交，同时修改提交信息2.4 怎样把连续的多个commit整理成1个 git rebase -i <commit> -s,squash <commit> 使用提交，同时合并到之前的提交中2.5 怎样把间隔的几个commit整理成1个 git rebase -i <commit> -s,squash <commit> 使用提交，其他行加上-s commit id2.6 怎么比较暂存区和HEAD所含文件的差异 git diff --cached2.7 怎么比较工作区和暂存区所含文件的差异 git diff ps: git diff HEAD # 工作区 <===> HEAD git diff # 工作区 <===> 缓存区 git diff --cached # 缓存区 <===> HEAD2.8 如何让暂存区恢复和HEAD的一样 git reset HEAD git reset 有三个参数 --soft 只修改HEAD，暂存区、工作区不变 --hard HEAD、暂存区、工作区均修改 --mixed 默认参数，修改HEAD和暂存区，但工作区保持不变2.9 如何让工作区的文件恢复和暂存区一样 git checkout/git restore -- fileName2.10 怎样取消暂存区部分文件的更改 git reset HEAD -- fileName2.11 消除最近的几次提交 方法一： git rebase -i <commit> 改成 d 方法二： git reset--hard hash值 2.12 看看不同提交的指定文件的差异 git diff commit-id1 commit-id2 path-to-filename2.13 正确删除文件的方法 git rm file name2.14 开发中临时加塞了紧急任务怎么处理 git stash 把当前工作区的内容放入暂存区 git stash pop 把暂存区的内容恢复到工作区，且删除 git stash apply 把暂存区的内容恢复到工作区，且保留2.15 如何指定不需要Git管理的文件 通过.gitignore设置git不用管理文件或文件夹2.16 如何将Git仓库备份到本地 git clone xxx.git第三章 Git与GitHub的简单同步3.1 注册一个GitHub账号已注册 https://github.com/augenstern3263.2 配置公私钥https://github.com/settings/keys3.3 在GitHub上创建个人仓库无3.4 把本地仓库同步到GitHub无第四章 Git与多人单分支集成协作时的常见场景4.1 不同人修改了不同文件如何处理 不受影响，直接提交即可 git add git commit git pull(git fetch+merge) git push4.2 不同人修改了同文件的不同区域如何处理不会产生冲突，但提交前一样git pull拉一下远端代码，保持与远端一致4.3 不同人修改了同文件的同一区域如何处理会产生冲突，手动解决冲突后再进行提交操作4.4 同时变更了文件名和文件内容如何处理当多人修改同一文件的文件名和内容时，Git 会检测到冲突。处理步骤如下：拉取最新代码：先拉取远程仓库的最新代码git pull origin branch-name解决冲突：Git 会提示冲突，手动解决冲突后，将文件添加到暂存区并提交# 解决冲突后 git add <file> git commit -m "Resolved conflict in <file>"推送更改：将解决后的代码推送到远程仓库git push origin branch-name 4.5 把同一文件改成了不同的文件名如何处理拉取最新代码：先拉取远程仓库的最新代码git pull origin branch-name检查文件差异：检查两个文件的内容，决定保留哪个或合并内容。git diff fileA.txt fileB.txt解决冲突：Git 会提示冲突，手动解决冲突后，将文件添加到暂存区并提交假设保留文件A git add fileA.txt git rm fileB.txt推送更改：将解决后的代码推送到远程仓库git push origin branch-name 第五章 Git集成使用禁忌5.1 禁止向集成分支执行push -f操作 git push -f 强制同步远端和本地相同，导致远端修改的内容丢失 可以使用 git reflog 命令查找历史，然后利用 git reset --hard HAED@{n} 的方式恢复。 5.2 禁止向集成分支执行变更历史的操作个人向远端执行变更历史的操作，会导致抹除一些历史提交信息，影响该分支下其他开发者的
起因本来凑数参加江苏金融监管局的金融业网络安全竞赛，但莫名其妙就进了决赛，可我们三个人纯门外汉，啥也不懂，公司领导为了不让决赛成绩太难看，请到了外面的某安全公司给我们培训CTF，当然一天速成，学到的东西估计也很入门偏概念，这里简单做个记录。CTF竞赛指南CTF简介CTF（Capture The Flag，夺旗赛）是一种流行于网络安全技术人员之间的一种信息安全技术竞赛。其前身是传统黑客之间网络技术比拼的游戏，以代替之前黑客们通过互相发起真实攻击进行技术比拼的方式。起源于1996年第四届DEFCON。现在已成为全球范围网络安全圈流行的竞赛形式。通常CTF分为三种赛制：解题赛（Jeopardy）、攻防赛（Attack-Defence）和混合赛竞赛模式基本分为解题模式、攻防模式和混合模式。大多题目的内容基本包括web安全，密码学、逆向、二进制安全编程类题目等国内外有很多CTF比赛。解题赛是线上赛通常采取的赛制，题目通常分为多个类型，如Web，Forensic（取证），Crypto（密码学），Binary（二进制）等。团队或个人可以通过解题获得一串具有一定格式的字符串，也就是flag。将flag提交到竞赛平台可以获得积分。题目的难度越大，分值就越高。当比赛结束后，得分最高者胜出。攻防赛是另一种有趣的赛制，常见于线下决赛。攻防赛中，每个队伍都会被分配一台主机或虚拟机，称为gamebox，队员可以通过网络连接到gamebox。而所有队伍的gamebox通过内网连接在一起。每个队伍的gamebox上都运行着多个相同的服务。参赛队伍需要挖掘服务的漏洞，然后攻击其他队伍的服务来获取flag，并提交给计分服务器来获取积分。与此同时，参赛队伍还需要修补自身服务中的漏洞来防止丢分。攻防赛不仅考验了参赛选手的技术水平，还考验了参赛者的体力，因为通常参赛者需要连续混合赛可能采取解题赛和攻防赛的混合模式，也可能是其他形式。WebOWASP基于web渗透测试选用到的手段，OWASP(开放式Web应用程序安全项目)所给出的web危险Top10基本上涵盖 了大部分，其中包含注入漏洞、中断身份认证、敏感数据泄露、xxe、中断访问控制、安全配置错误、xss、反 序列化、使用含有已知漏洞的组件、不足的记录和监控漏洞。注入漏洞失效的身份认证敏感数据泄露XXE失效的访问控制安全配置错误XXS不安全的反序列化使用含有已知漏洞的组件不足的日志记录和监控CSRFCSRF(Cross Site Request Forgery) 是指跨站请求伪造，是一种挟制终端用户在当前已登录的Web应用程 序上执行非本意的操作的攻击方法。攻击者只要借助少许的社会工程诡计，例如通过电子邮件或者是聊天软件发送的链接，受害者一旦点击链接，攻击者就能迫使受害者的浏览器在已经登录过的网站上去执行特定操作。CSRF攻击原理用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发 送请求到网站A；用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站 A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请 求，导致来自网站B的恶意代码被执行。SSRFSSRF(Server-Side Request Forgery: 服务器端请求伪造)：是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下，SSRF攻击的目标是外网无法访问的内部系统。正是因为它是由服务端发起的，所以它能够请求与它相连而与外网隔离的内部系统。危险函数：fsockopen()file_get_contents()curl_exec()信息泄露信息泄露漏洞是由于web服务器没有正确处理一些特殊请求或者系统管理员对于应用设置及操作不规范，泄露服务器或者应用的敏感信息，如用户名，密码、源代码、服务器信息、配置信息、物理路径信息利用等。 该类信息的泄露容易造成恶意人员的利用，为达到进一步的攻击系统打下基础。目录遍历目录遍历漏洞是攻击者向web服务器发送请求，通过在url中或者在有特殊意义的目录中附加”../“、或者附 加”../“的一些变形（如“..”或“..//”甚至其编码），或类似的跨父目录字符串，完成目录跳转，读取操 作系统各个目录下的敏感文件。导致攻击者能够访问未授权的目录，以及能够在未授权的web服务器的根目录外执行命令文件上传文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行。这里上传的文件可以是木马，病毒， 恶意脚本或者WebShell等。这种攻击方式是最为直接和有效的，部分文件上传漏洞的利用技术门槛非常的低，对于攻击者来说很容易实施。任意文件查看与下载一些网站由于业务需求，往往需要提供文件查看或文件下载功能，但若对用户查看或下载的文件不做限制， 则恶意用户就能够查看或下载任意敏感文件，这就是文件查看与下载漏洞。越权访问顾名思义，这类漏洞是指应用在检查授权（Authorization）时存在纰漏，使得攻击者可以利用一些方式绕 过权限检查，访问或者操作到原本无权访问的代码或内容。水平越权：获取水平层级的权限，比如其他用户的权限信息垂直越权：获取垂直层级的权限，比如说普通用户获取admin权限命令执行没有针对代码中可执行的特殊函数入口做过滤，导致客户端可以提交恶意构造语句提交，并交由服务器端执 行。命令注入攻击中WEB服务器没有过滤类似system(),eval()，exec()等函数是该漏洞攻击成功的最主要原因。Crypto之前的密码学笔记CTF-CryptoMisc信息隐写信息隐写技术（隐写术），也称为信息伪装技术，是一门近年来蓬勃发展，已逐渐的在信息安全领域受到关注的学科。它是将某一机密信息秘密隐藏于另一公开的信息（载体）中，然后通过公开信道传输来传递机密信息。第三方难以从公开信息中判断机密信息是否存在，实现隐秘通信或隐蔽标识，保证机密信息的安全与唯一。文件隐写格式类型文件头标识文件尾标识jpeg/jpgFFD8FFD9gif47 49 46 38 39(37) 61 png89 50 4E 47 0D 0A 1A 0A00 00 00 00 49 45 4E 44 AE 42 60 82bmp42 4D（B M） tiff4D 4D 00 2A / 49 49 2A 00 压缩包破解zip/rar爆破Windows下的神器 ARCHPR：暴力枚举，跑字典，明文攻击明文攻击是一种较为高效的攻击手段，大致原理是当你不知道一个zip的密码，但是你有zip中的一个已知文件（文件大小要大于12Byte）或者已经通过其他手段知道zip加密文件中的某些内容时，因为同一个zip压缩包里的所有文件都是使用同一个加密密钥来加密的，所以可以用已知文件来找加密密钥，利用密钥来解锁其他加密文件。CRC32碰撞CRC 本身是「冗余校验码」的意思，CRC32则表示会产生一个32bit(8位十六进制数)的校验值。由于CRC32产生校验值时源数据块的每一个 bit (位)有一位发生了变化，也会得到不同的CRC32值。CRC32校验码出现在很多文件中比如png文件，同样zip中也有CRC32 校验码。值得注意的是zip中的CRC32是未加密文件的校验值。这也就导致了基于CRC32的攻击手法。文件内内容很少(一般比赛中大多为4字节左右)加密的密码很长我们不去爆破压缩包的密码，而是直接去直接爆破源文件的内容(一般都是可见的字符串)，从而获取有效信息zip伪加密其实不是真的加密，只是修改了加密位数据包分析数据包分析，通常也被称为数据包嗅探或协议分析，指的是捕获和解析网络上在线传输数据的过程。数据包分析过程通常由数据包嗅探器来执行。而数据包嗅探器则是一种用来在网络媒介上捕获原始传输数据的工具。目前市面上有着多种类型的数据包嗅探器，包括免费的和商业的。每个软件的设计目标都会有一些差异。流行的数据包分析软件包括tcpdump、Wireshark等。Reverse逆向分析主要是将二进制机器码进行反汇编得到汇编代码，在汇编代码的基础上，进行功能分析。经过反编译生成的汇编代码中缺失了源代码中的符号、数据结构等信息，因此需要尽可能地通过逆向分析还原以上信息，以便分析程序原有逻辑和功能。逆向分析主要包括静态和动态分析。Pwn利用程序中的漏洞改变程序本来的执行流程Pwn在黑客俚语中代表着攻破，获得权限，由"own"这个词引申而来。在CTF比赛中它代表着溢出类的题目，常见的类型有整数溢出、栈溢出、堆溢出等。主要考察参赛选手对漏洞的利用能力。所需知识：C、OD+IDA、数据结构、操作系统。AWD对抗模式：AWD（attack with defence）攻防兼备模式，AWD模式是一个非常有意思的模式，你需要在一场比赛里扮演攻击方和防守方，攻击成功得分，失守也会扣除相应的分数。在比赛中，评分的关键点是flag，通过漏洞攻击敌方得到flag，可以获取相应的分数；反之，失守flag会被扣除相应的分数。从而模拟现实的网络攻击防御，以此提高选手的网络攻防能力。常见加固方法信息收集密码修改网站备份数据库备份后门查杀可疑服务和端口关闭源码审计漏洞验证漏洞修复文件监控WAF部署
前言最近公司上了数据中台（实际就是阿里的DataWorks私有化部署），给我们做了几次培训，这里把一些简单的概念列一下，对数据引擎有个初步的认识，重要的实操部分因为涉及到公司平台敏感信息，故不做截图演示。采用阿里的DataWorks大数据开发治理平台，基于MaxCompute/EMR/MC-Hologres等大数据计算引擎，提供专业高效、安全可靠的一站式大数据开发与治理平台，实现数据集成、数据开发、数据治理等一系列功能。离线数仓-MaxCompute一、定义MaxCompute（ODPS）是适用于数据分析场景的企业级SaaS（Software as a Service）模式云数据仓库，致力于批量处理结构化数据的存储和计算，提供海量数据仓库的解决方案及分析建模服务。二、优势集成性：支持跨平台数据整合及多组件兼容计算方面：支持大量、复杂批处理存储方面：海量数据存储（PB-EB）,支持弹性扩容三、限制不支持OLTP联机事务处理不支持交互式查询，任务执行延迟较大不持索引，Delete、Update操作受限四、与常见数据库对比MaxCompute技术架构定位与使用场景：MaxCompute，主要服务于批量结构化数据的存储和计算，应用于海量数据仓库建设，不支持事务； MySQL、Oracle等数据库，主打多维分析场景，支持事务；MaxCompute是列式存储，不支持Delete、Update等操作；Hologres是行式、列式存储，Oracle、MySQL是行式存储，可 以对单条数据进行删除、修改等操作；MaxCompute不支持索引、主键约束，无自增字段；Hologres、Oracle、MySQL可以设置约束，以及自增字段；MaxCompute是基于MapReduce进行数据的查询，速度相较于Hologres、Oracle、MySQL来说比较慢。MaxCompute在SQL语法上学习成本均比较低，SQL操作类似于Oracle、MySQL数据库。MaxCompute中的内建函数可兼容Hologres、Oracle、MySQL中的函数，部分存在写法的差异。如时间戳字段的月份、分 钟、小时函数一致，但在取系统日期的时候，MaxCompute可用getdate、 current_timestamp，Hologres中支持 current_timestamp，oracle中支持systimestamp、current_timestamp，MySQL中支持now等一站式实时数仓引擎-Hologres一、定义支持海量数据实时写入、实时更新。实时分析，支持PB级数据多维分析（OLAP）与即席分析（Ad Hoc Analysis是一种数据分析方法，它允许用户根据自己的特定需求和问题，即时地对数据进行查询、分析和探索。与预定义的报告或仪表板不同，即席分析提供了更大的灵活性，使用户能够深入挖掘数据，发现新的见解，并回答那些在分析开始时可能未预料到的问题），支持低延迟的在线数据服务（Serving）,与MaxCompute、Flink、DataWorks深度融合，提供在线一体化全栈数仓解决方案。二、优势：支持准实时快速数据写入及更新；支持OLAP多维分析查询；存算分离架构，支持动态按需扩容三、限制：稳定性上：目前官称99.9%，不如Oracle、OB等数据库稳定；功能上：OLAP分析型数据引擎，无事务保障机制，无触发器机制、无字段级联约束；应用场景上：主打多维分析场景，不建议使用在联机事务处理场景， 查询响应有一定延迟大数据集成调度平台-DataWorks一、定义基于MaxCompute、Hologres、EMR、AnalyticDB、CDP等大数据引擎，为数据仓库、湖仓一体等解决方案提供统一的全链路大数据集成调度平台。二、优势集成性方面：一站式的数据工厂，集数据开发、分析、任务发布、 调度以及运维管理于一体监控管理方面：（1) 完备的数据质量监控体系； （2) 智能的监控告警； （3) 多租户的数据安全管理机制三、限制：调度时效性方面：涉及DataWorks槽位资源及MC资源队列排队 两级调度，对高频调度支持有限，一般建议小时级别以上调度频率数据节点依赖等原因，生产发布手工配置依赖四、模块计算存储引擎模块：MaxCompute、Hologress、OSS数据集成模块：组件全量/增量同步、实时同步数据开发模块：1）离线/实时任务：集成多种组件，支持一站式任务开发； 2）一站式的调度、监控、运维和告警
从零开始的Vue学习前言​ 这个笔记参考了官方文档和多篇文章，虽然是自己一个字一个字手打的，但还是算是转载，并非原创。分享这个笔记的作用一是监督自己，二是希望帮助到和我一样在学习vue的小伙伴。虽说是Vue学习，其实也包含了一些别的前端的东西。​ 同时，我自己照着教程写的程序源码也会在下面分享出来。​ 静心学习，无限进步！​ 学习笔记含代码：https://github.com/Xiaohufight/vue-learning​ 其他在做的vue练手项目：​ https://github.com/Xiaohufight/my-vue-template​ https://github.com/Xiaohufight/my-admin-template学习日志2021-5-06今天无聊翻看github，发现关注的一位大佬上传了自己的prettier配置文件，我就很好奇这个prettier是个啥东东。看了一些文章博客，了解到prettier是一个 Opinionated 的代码格式化工具，具体可以看这一篇文章Prettier看这一篇就行了。我之前自己写的代码是不用ESLint的，因为觉得坑太多了，不如不用。但是，今天也打算之后的项目还是要用用prettier和ESLint的，团队开发，代码风格和规范要做好。2021-4-28~29因为毕设的事情，距离上次学习Vue已经过去十几天了，这俩天主要学习了如何实现侧边导航栏和面包屑，导航栏参考了Vue 实现左边导航栏且右边显示具体内容（element-ui），面包屑和标签切换参考了 作者"@雨点的名字"的 Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能顺便放一下他的github源码，创作不易，欢迎star https://github.com/yudiandemingzi/mall-manage-system2021-4-15今天主要在本地运行了这个项目vue-admin-webapp(就前面正确姿势开发vue后台管理系统中最终实现的项目)，由于作者并没有提供接口，所以在本地运行项目时顺便学习了如何写接口（easy-mock)，掌握了一些写法，但我没有用过mock，如果是用过mock的话，上手easy-mock应该会很容易。不管怎么样，今天收获也是挺多的。2021-4-13还在看vue实现后台管理系统，学习了正确姿势开发vue后台管理系统，自己基础还是很薄弱的，没有看完；重点看了阮神的JSON Web Token入门教程，收获很多。关于之前的手摸手系列之后也要看看，但感觉还需要一些前置基础，就此搁置一下（才不是又菜又懒呢）。2021-4-7学习了Vue的动态路由相关知识，看的这篇文章Vue动态菜单(路由)的实现方案，文章讲得比较好理解，也成功实现了，但离真正项目中的还有差距，太简单了。2021-4-2今天看了很多教程想要实现登录权限问题，都说很简单，但是我就是看不懂，后来看到一篇vue登录并保持登录状态，虽然和自己想要的功能还有差距，但是也算是学习到了，了解了一些vuex。这种方法实现很简单，理解起来也不是很难。代码在vue-login里，主要遇到了两个坑:1、main.js里router.beforeEach()和router.afterEach()要放在Vue对象前面；2、store/index.js 里import vue 和 vuex 时 前后大小写要注意；2021-4-1看了教程的基础篇和登录权限篇，感觉不理解和不了解的东西还有很多（我怎么这么菜啊）;后来又看了阮一峰大神的flex布局语法篇，不难理解，关键在于熟练掌握使用。最后自己用vue+element写了一些页面，虽然简单，但是也算复习了一下。愚人节快乐啊！？2021-3-31看了 花裤衩大佬的开源项目vue-element-admin，佩服的五体投地，推荐去跑跑那个程序，顺便点个star，收藏以后可能用得到。另外，大佬还更新一些教程，写得很好，在项目的README.md里有相关的链接。我这里贴一下,估计后面的很多天里都会看这个了。注意：这教程是2017年的，如有问题请看源码手摸手，带你用 vue 撸后台 系列一(基础篇)手摸手，带你用 vue 撸后台 系列二(登录权限篇)手摸手，带你用 vue 撸后台 系列三 (实战篇)手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)手摸手，带你用vue撸后台 系列五(v4.0新版本)手摸手，带你封装一个 vue component手摸手，带你优雅的使用 icon手摸手，带你用合理的姿势使用 webpack4（上）手摸手，带你用合理的姿势使用 webpack4（下）2021-3-301、学习了BEM思想（CSS命名规范）2、实现了第一个vue+element-ui的项目portal-vue（虽然很简单）2021-3-291、第一次用vue-cli初始化一个项目，并npm run dev运行成功2、修改了一些配置，并看运行结果3、认识一下项目的结构2021-3-29前1、大概看到了cn.vuejs.org教程《深入了解组件前》前2、基本实现了cn.vuejs.org上的例子，在html里写的，共10个lesson.html 参考链接:1、我们为什么要用Vue,它解决了什么问题,如何使用它https://blog.csdn.net/wxl1555/article/details/799648182、Vue教程https://cn.vuejs.org/3、Vue教程--使用官方脚手架构建实例（上篇）https://gitee.com/janking/Infinite-f2e/issues/IDQHW4、初学vue+elementui搭建前台项目教程https://blog.csdn.net/qq_42957424/article/details/1073399935、BEM思想(命名规范)https://blog.csdn.net/eunice_sytin/article/details/833413816、手摸手，带你用vue撸后台 系列一（基础篇）https://juejin.cn/post/6844903476661583880一些概念1、什么是DOMDocument Object Model文档对象模型2、什么是Vue一套构建用户界面的渐进式框架自底向上 增量开发设计响应式的数据绑定3、单页应用程序(SPA)一个页面就是应用,也可以是子应用,交互处理非常多,且页面中的内容根据用户的操作动态变化开始入门1、介绍引入方式 或者 Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统（1）声明式渲染app1、app2（2）条件与循环app3、app4提供一个强大的过渡效果系统v-for 绑定数组的数据来渲染一个项目的列表（3）处理用户输入app5、app6v-on 指令添加一个event listenerv-model 表单输入和应用状态之间的双向绑定（4）组件化应用构建在Vue里,一个组件的本质是一个拥有预定义选项的一个Vue实例app7、app8"prop" 类似于一个自定义attributev-bind 指令将待办项传到循环输出的每个组件中虽然Vue内部没有使用自定义元素,不过在应用使用自定义元素、或以自定义元素形式发布时,依然有很好的互操作性。2、Vue实例（1）创建一个Vue的实例Vue的设计受MVVM模型,在文档中经常使用vm这个变量名表示Vue实例当创建一个Vue实例时,可以传入一个选项对象一个Vue应用由一个new Vue创建的根Vue实例,以及可选的嵌套的、可复用的组件树组成（2）数据与方法当一个Vue实例被创建时,它将data对象中所有的property加入到Vue的响应式系统中,当这些property的值发生改变时,视图将会产生“响应”,即匹配更新为新的值如果晚些时候需要一个property,但是一开始它为空或不存在,可以设置一些初始值data:{ newTodoText:'', visitCount:0, hideCompleteTodos:false, todos:[], error:null }使用Object.freeze(),阻止修改现有的property,这也意味着响应系统无法再追踪变化除了数据property,Vue的实例还暴露了一些有用的实例property与方法,前缀为$,以便与用户定义的property区分开来（3）实例生命周期钩子Vue被创建时经历的初始化过程,设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等,同时在这个过程中也会运行一些叫做生命周期钩子的函数,让我们可以在不同阶段添加自己代码的机会比如有created、mounted、updated、destroyed其中生命周期钩子的this上下文指向调用它的Vue实例注意:不要在选项property或者回调上使用箭头函数,因为箭头函数没有this（4）生命周期示图3、模板语法Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析（1）插值文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本差值Message:{{msg}}通过v-once指令,执行一次性地插值,当数据改变时,插值处的内容不会更新这个将不会改变:{{msg}}原始HTML双大括号会将数据解释为普通文本,而非HTML代码,为了输出真正的HTML,需要使用v-html指令: Using mustaches:{{rawHtml}} Using v-html directive: 属性Mustache语法不能作用在HTML attribute上,遇到这种情况应该使用v-bind指令 ht Button 使用Javascript表达式Vue.js都提供了完全的JavaScript表达式支持{{number+1}} {{ok?'Yes':'No'}} {{message.split('').reverse().join('')}} 这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析,有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效 {{var a=1}} {{ if(ok){return message} }}模板表达式都应放在沙盒中,只能访问全局变量的一个白名单,如Math和Date不应该在模板表达式中试图访问用户定义的全局变量（2）指令指令是带有v-前缀的特殊attribute,指令attribute的值预期是单个JavaScript表达式(v-for是例外情况)指令的职责是,当表达式的值改变时,将对其产生的连带影响,响应式地作用域DOMv-if指令将根据表达式中值的真假来插入/移除元素参数一些指令能够接受一个"参数",在指令名称之后以冒号表示v-bind 响应式地更新HTML attributev-on 用于监听DOMevent动态参数......对动态参数的值的约束动态参数预期会求出一个字符串,异常情况下为null,这个特殊的null值可以被显性地用于移除绑定，任何其他非字符串类型的值都会触发一个警告对动态参数表达式的约束动态参数表达式有一些语法约束,因为某些字符,空格和引号,放在HTML attribute名里是无效的...在DOM中使用模板时，还需要避免使用大写字母来命名键名,浏览器会会强制把attribute名全部改为小写修饰符修饰符是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定例如.prevent修饰符告诉v-on指令对于触发的event调用event.preventDefault() ... （3）缩写v-前缀作为一种视觉提示,用来识别模板中Vue特定的attribute。当在使用Vue.js现有标签添加动态行为时,v-前缀很有帮助对于经常使用的指令比较繁琐,同时在构建Vue管理所有模板的SPA,v-前缀也没有那么重要了v-bind 缩写 ... ... ...v-on 缩写 ... ... ...4、计算属性和侦听器（1）计算属性模板内的表达式非常便利,但是放入太多的逻辑会让模板过重且难以维护例如 {{message.split('').reverse().join('')}} 计算属性缓存vs方法我们可以在表达式中调用方法来达到同样的效果,与前面的区别是,这里是定义了一个方法,而不是一个属性计算属性是基于它们的响应式依赖进行缓存的,只要message还没有改变,就不需要再次执行函数计算属性vs侦听属性Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性计算属性的setter计算属性默认只有getter,但是现在也可以提供一个setter（2）侦听器自定义的侦听器,在数据变化时执行异步或者开销较大的操作时,最有效5、Class与Style绑定（1）绑定HTML Class对象语法可以传给v-bind:class一个对象,以动态地切换class: 上面的语法表示active这个class存在与否取决于数据propertyisActive的truthiness可以在对象中传入更多字段来动态切换多个class,此外v-bind:class指令也可以与普通的class attribute共存绑定的数据对象不一定内联定义在模板中可以绑定一个返回对象的计算属性数组语法把一个数组传给v-bind:class,以应用一个class列表用在组件上当在一个自定义组件上使用classproperty时,这些class将被添加到该组件的根元素上面,这个元素上已经存在的class不会被覆盖（2）绑定内联样式对象语法v-bind:style的语法十分直观,看着像CSS,但实际上是一个JavaScript对象命名可以用驼峰式或者短横线分隔 "data:{ activeColor:'red', fontSize:30 }直接绑定到一个样式对象通常更好,这会让模板更清晰,同样可以结合返回对象的计算属性数组语法v-bind:style的数组语法可以把多个样式对象应用到同一个元素上 自动添加前缀当v-bind:style使用需要添加的浏览器引擎前缀的CSS property时,如transform,Vue.js会自动侦测并添加相应的前缀多重值从2.3.0起,可以为style绑定中的property提供一个包含多个值的数组,常用于提供多个带前缀的值 这样写只会渲染数组中最后一个被浏览器支持的值,在本例中,如果浏览器支持不带浏览器前缀的flexbox,那么就只会渲染display:flex6、条件渲染（1）v-ifv-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值的时候被渲染，也可以通过v-else添加一个“else块”在 元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素，此时可以把一个 元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含 元素。v-else和v-else-if相当于 "else块"和"else-if块"。用key管理可复用的元素。（2）v-show只是简单地切换元素的CSS property display，不支持 元素，也不支持v-else。（3）v-if vs v-showv-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的event listener和子组件适当地被销毁和重建。v-if也是惰性的，如果在初始渲染时条件为假，则什么也不做，一直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多，不管初始条件是什么，元素总是被渲染，并且只是简单地基于CSS进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。（4）v-if与v-for一起使用不推荐同时使用v-if和v-for，正常情况下，v-for比v-if有更高的优先级。7、列表渲染（1）用v-for把一个数组对应为一组元素v-for指令基于一个数组来渲染一个列表，指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item是被迭代的数组元素的别名。v-for块中，我们可以访问所有父作用域的property。v-for还支持一个可选的第二个参数，即当前项的索引。（2）在v-for里使用对象可以用v-for来遍历一个对象的property可以提供第二个的参数为property名称（也就是键名）可以用第三个参数作为索引在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下都一致（3）维护状态当Vue正在更新使用v-for渲染元素列表时，它默认使用"就地更新"的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或者临时DOM状态（例如：表单输入值）的列表渲染输出。（4）数组更新检测变更方法Vue将被侦听的数组的变更方法进行了包裹，所以它们也会触发视图更新push()pop()shift()unshift()splice()sort()reverse()替换数组filter()、concat()、slice()不会变更原始数组，而总是返回一个新数组（5）显示过滤/排序后的结果可以创建一个计算属性来返回过滤或者排序后的数组（6）在v-for里使用值范围v-for也接受整数，在这种情况下，会把模板重复对应的次数（7）在 上使用v-for利用带有<v-for>的 来循环渲染一段包含多个元素的内容（8）v-for与v-if一同使用v-for优先级更高，如果想有条件地跳过循环的执行，可以将v-if置于外层元素或者( )上（9）在组件上使用v-for<my-component v-for="item in items" :key="item.id"></my-component>在2.2.0+ 组件使用v-for时，key是必须的任何数据不会自动传递到组件里，因为组件有自己独立的作用域，为了把迭代数据传递到组件里，使用prop:<my-componet v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> 不自动将item注入到组件里的原因是，这会使组件与v-for的运作紧密耦合。8、event处理（1）监听event可以用v-on指令监听DOMevent，并在触发时运行一些JavaScipt代码（2）event处理方法许多event处理逻辑会更为复杂，所以v-on可以接受一个需要调用的方法名称（3）内联处理器中的方法在内联JavaScript语句中调用方法有时需要在内联语句处理器中访问原始DOMevent，可以用特殊变量$event }//... methonds:{ warn: function (message,event){ if(event){ event.preventDefault() } alert(message) } }（4）event修饰符在event处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在方法中轻松实现这点，但是更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOMevent细节。Vue.js 为v-on提供了event修饰符.stop.prevent.capture.self.once.passive ... ... 使用修饰符时，顺序很重要；相应的代码会以相同的顺序产生。v-on:click.prevent.self会阻止所有的点击v-on:click.self.prevent只会阻止对元素自身的点击2.1.4新增 2.3.0新增Vue还对应addEventListener中的passive选项提供了.passive修饰符 ... 这个.passive修饰符尤其能够提升移动端的性能不要把.passive和.prevent一起使用，因为prevent将会被忽略，同时浏览器可能会向你展示一个警告，.passive会告诉浏览器不想阻止时间的默认行为（5）按键修饰符在监听键盘event时，经常需要检查详细的按键。Vue允许为v-on在监听键盘event时添加按键修饰符 可以直接将KeyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符 处理函数只会在$event.key等于PageDown时被调用（6）系统修饰键可以使用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘event的 listener.ctrl.alt.shift.meta Do something .exact修饰符2.5.0新增.exact 修饰符允许你控制由精确的系统修饰符组合触发的event A A A 鼠标按钮修饰符2.2.0新增.left.right.middle这些修饰符会限制处理函数，仅响应特定的鼠标按钮（7）为什么在HTML中监听event违背了关注点分离，但是因为所有的Vue.jsevent处理方法和表达式都严格绑定在当前视图的ViewModel上，不会导致任何维护上的困难。实际上，使用v-on有几个好处。1、扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法2、无须在JavaScript里手动绑定event，ViewModel代码时非常纯粹的逻辑，和DOM完全解耦，更易于测试3、当一个ViewModel被销毁时，所有的event处理器都会自动被删除，无须担心清理9、表单输入绑定（1）基础用法可以使用v-model指令在表单 、 及 元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的value、checked、selected attribute的初始值而总是将Vue实例的数据作为数据来源，应该通过JavaScript在组件的data选项中声明初始值v-model在内部为不同的输入元素使用不同的property并抛出不同的事件text和textarea 元素使用valueproperty和input事件checkbox和radio使用checkedproperty和change事件select字段将value作为prop并将change作为事件（2）值绑定对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值） ABC 复选框 单选按钮 选择框的选项 123 （3）修饰符.lazy在默认情况下，v-model在每次input事件触发后将输入框的值雨数据进行同步。可以添加lazy修饰符，从而转为在change事件之后进行同步： .number如果想自动将用户的输入值转化为数值类型，可以给v-model添加number修饰符： .trim （4）在组件上使用v-modelVue 的组件系统允许创建具有完全自定义行为且可复用的输入组件,这些输入组件甚至可以和 v-model 一起使用10、组件基础（1）基本示例因为组件是可复用的Vue实例，所以它们与new Vue接受相同的选项，比如data、computed、watch、methods以及生命周期钩子等（除el）（2）组件的复用data必须是一个函数，不能直接提供一个对象，取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝（3）组件的组织两种组件注册类型：全局注册和局部注册Vue.component全局注册Vue.component('my-component-name',{ //...options... })（4）通过Prop向子组件传递数据Prop是可以在组件上注册的一些自定义attribute，当一个值传递给一个prop attribute的时候，它就变成了那个组件实例的一个property。（5）单个根元素每个组件必须只有一个根元素（6）监听子组件event有的时候用一个事件抛出一个特定的值非常有用，用$emit的第二个参数来提供这个值。在组件上使用v-model自定义事件也可以用于创建支持v-model的自定义输入组件 等价于： 当用在组件上时，v-model则会这样<custom-input v-bind:value="searchText" v-on:input="searchText=$event" ></custom-input>为了让其正常工作，这个组件内的 必须：将其value attribute绑定到一个名叫value的prop上在其input事件被触发时，将新的值通过自定的input事件抛出写成代码之后是这样的：Vue.component('custom-input',{ props:['value'], template:` ` })现在v-model就应该可以在这个组件上完美地工作下来了（7）通过插槽分发内容Vue自定义的<slot>元素让这变得非常简单Vue.component('alert-box',{ template:` Error! <slot></slot> ` })（8）动态组件在不同组件之间进行动态切换非常有用可以通过Vue的<component>元素加一个特殊的is attribute来实现 <component v-bind:is="currentTabComponent"></component><currentTabComponent>可以包括已注册组件的名字或者一个组件的选项对象（9）解析DOM模板时的注意事项有些HTML元素(比如 select)对于哪些元素可以出现在其内部有严格限制的，而有些元素(比如 )只能出现在其他某些特定的元素内部 <blog-post-row></blog-post-row> 这个自定义组件会被作为无效内容提升到外部，并导致最终的渲染结果出错，特殊的is attribute给了一个变通的方法 需要注意的是 如果从以下的来源使用模板的话，这条限制是不存在的：字符串（例如：template:'...'）单文件组件（.vue） （3）修改index.js文件添加代码：import Login from '@/views/login/Login'部分代码修改为：export default new Router({ mode:'history', routes: [ { path: '/index', name: 'HelloWorld', component: HelloWorld }, { path: '/', name: 'Login', component: Login } ] })如果界面打开页面空白，请检查路由是否写错了或者有冲突。补充：1、BEM思想(命名规范)BEM: 块(block)、元素(element)、修饰符(modifier).block{} //块 .block__element{} //元素 .block--modifier{} //修饰符其中块也可以使用单个连字符来界定.site-search{} //块 .site-search__field{} //元素 .site-search--full{} //修饰符块：一个独立的，可以复用而不依赖其他组件的部分元素：属于块的某个部分修饰符：用于修饰块或者元素，体现出外形行为状态等特征要求：保证各个部分只有一级B__E--M,同时修饰符需要和对应的块或者元素一起使用，避免单独使用