John是橘红-CSDN博客

原创 04. 项目博客之日志

使用 nodejs 进行文件操作，以及入门 stream

2022-07-04 00:12:58 292

原创 03. 开发博客项目之登录

使用原生 nodejs 实现 cookie 和 session 等登录持久化，并使用 Redis 存储 session

2022-07-04 00:11:45 262

原创 01. 开发博客项目之项目介绍

使用原生 node 语法启动服务和处理请求

2022-07-04 00:08:43 972

原创 Nodejs 安装与介绍

看懂 nodejs 和 js 区别，了解 nvm，并初步了解后端

2022-06-27 23:10:58 254

原创 Electron 入门

帮助前端人员快速入门 Electron，看完能达到能看懂 Electron 相关代码并且会改代码的水平。

2022-06-27 23:08:07 955

原创 Nodejs 连接数据库报错：Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol

Nodejs 连接 MySQL 数据库时报错 Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client，解决方法

2022-06-04 00:15:09 1083 3

TypeScript 高级语法1. 类的装饰器装饰器入门装饰器本身是一个函数，装饰器通过 @ 进行调用。要使用装饰器，tsconfig 需要添加允许装饰器的配置： "experimentalDecorators": true, "emitDecoratorMetadata": true, 尝试运行以下代码：function testDecorator(constructor: any) { console.log("decorator"

2022-05-27 11:15:20 349

原创 02.TypeScript 语法进阶

TypeScript 语法进阶1. TypeScript 中的配置文件1.1 初始化 TS 项目和配置项初始化tsc --init执行后会在当前目录生成 TS 配置文件 tsconfig.json。指定文件夹/文件编译只有直接使用 tsc 编译，不指明编译的文件，才会根据配置文件的配置项来进行编译。如果 tsc 指定要编译的文件，如 tsc xxx.ts，就不会去看配置项直接编译。注意下，ts-node 是会看配置项进行编译的。如果要指定编译的文件，又要用配置文件的配置项，在配置文

2022-05-24 18:29:02 496 1

原创 01.TypeScript 基础语法入门

TypeScript 基础语法入门1. 安装使用 npm 安装即可npm install -g typescript2. TypeScript 介绍TypeScript 是 JavaScript 的超集，因此 TypeScript 可以使用 JavaScript 的所有语法的同时，拓展新的语法。这些新语法使得 TS 相比于 JS 而言，可维护性和健壮性更强。TypeScript 需要编译成 JavaScript 代码后才能运行。TS 的优势静态语言：变量类型声明后，该变量的类型不可改变。TS

2022-05-19 16:57:10 379

原创 08.Vue3 中的 Vue-Router 和 VueX

Vue3 中的 Vue-Router 和 VueX先使用 vue create 指令来创建 vue 工程项目，并选择自定义，将 Router 和 VueX 勾上。勾上以后看主入口 main.js，可以看到项目自动帮我们注册了 vue-router 和 VueX。// main.jscreateApp(App).use(store).use(router).mount('#app')1. Vue-Router 路由的理解和使用路由是指根据 url 的不同，展示不同的内容。查看 src 文件夹

2022-05-15 16:44:11 738

原创 07.Vue3 项目开发配套工具 CLI 详解

Vue3 项目开发配套工具详解1. Vue CLI 的使用和单文件组件Vue CLI，人称 Vue 脚手架，就是可以快速搭建起 Vue 项目工程开发环境的工具。官网： Vue CLI安装脚手架npm install -g @vue/cli# ORyarn global add @vue/cli如果是老脚手架需要先删除，然后再安装npm uninstall vue-cli -g# ORyarn global remove vue-cli安装后查看版本，是否有安装成功。vue

2022-05-15 16:42:31 693

原创 06.Vue3 中的 Composition API

Vue3 中的 Composition API为什么要有 Composition API？当一个组价越来越大的时候，data、methods、computed、directives、mixin 等混杂在一起。里面的功能是混杂的，在一堆混杂的逻辑里面查找如 name 相关的逻辑的话，就会有一定的困难。这样的话会造成可维护性降低。Composition API 就是解决这个问题的有效方案。1. setup 函数的使用setup 函数是在 created 时候（实例被初始化前）执行的。里边返回数据或者方

2022-05-15 16:40:31 1938

原创 05.Vue3 中的高级语法: mixin, plugin, render, 自定义指令等

Vue3 高级语法1. Mixin 基础语法mixin 是混入的概念。从外部带来一些数据给组件使用。1.1 使用方法定义一个 mixin 对象，然后在组件的 mixins 里加入自己定义的 mixin 对象即可。const myMixin = { data() { return { number: 2, count: 222, } }, created() { console.log("mixin created") },}co

2022-05-09 18:15:43 1527

原创 04.Vue3 过渡与动画

Vue3 过渡与动画1. 使用 Vue 实现基础的 CSS 过渡与动画效果过渡与动画的差别过渡：元素状态缓慢改变的过程动画：一个元素运动的情况1.1 vue 实现动画效果用 class 类名实现动画效果先写一个动画样式 <style> @keyframes leftToRight { from { transform: translateX(-100px); } to { transform

2022-05-07 15:59:43 948 1

原创 03.Vue3 组件的概念，组件通信，插槽，动态组件与异步组件

Vue3 探索组件的理念1. 组件的定义及复用性，局部组件和全局组件用树来表达一个网页的结构，将一个网页拆成小组件，会更容易维护。例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。全局组件简单实现组件化：<script> const app = Vue.createApp({ template: ` <div> <Hello /> <World /&gt

2022-05-06 18:05:18 850

原创 02.Vue3 基础语法：常用语法、列表渲染、事件绑定和表单双向绑定

Vue3 基础语法1. Vue 中应用和组件的基础概念createAppcreateApp 表示创建一个 Vue 应用，存储在 app 变量中。传入的参数表示，这个应用最外层的组件，应该如何展示。const app = Vue.createApp({ data() { return { message: "hello world" } }, template: "<div>{{ message }}<

2022-05-05 17:17:15 1069

原创 06.简书项目实战三：详情页面和登录功能实现

简书项目实战三：详情页面和登录功能实现1. 详情页面布局这部分的布局比之前的简单多了，就一个标题加上主要内容而已。export default class Detail extends Component { render() { return ( <DetailWrapper> <Header>你听过婚姻式扶贫吗</Header> <Content> 内容 &l

2022-05-03 17:42:32 464

原创 05.简书项目实战二：首页开发

简书项目实战二：首页开发本文是 React 的仿写简书项目开发学习笔记。代码仓库：https://github.com/shijuhong/jianshu1. React 路由路由就是根据 url 的不同来显示不同的内容。安装 react 路由yarn add react-router-dom创建 pages 文件夹来放页面。然后创建两个文件夹，见名知意，Home 文件夹和 Detail 文件夹。然后写最基础的类组件。现在想要的效果是，根据不同的 url 来分别加载 Home 和 Detai

2022-05-02 15:05:03 583

原创 04.简书项目实战一：Header组件开发

简书项目实战一：Header组件开发1. 项目目录搭建，Styled-Components 与 Reset.css 的结合使用create-react-app jianshucd jianshuyarn start1.1 Styled-Components 的使用css 文件在全局是生效的，这个就会造成一个问题，因为有多个 css 文件，可能会造成相互冲突，因此使用一个第三方模块 styled-components安装yarn add styled-components在 src

2022-04-30 18:55:18 748

原创 01.React 使用

React 使用1. JSX 基本使用变量、表达式class style子元素和组件在 render 函数中举例子获取变量，插值语法const pElem = <p>{this.state.name}</p>return pElem表达式大括号里都是 js 表达式const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>return exprElem子元素co

2022-04-19 01:44:37 199

原创 06.基于 HTTP 的功能追加协议

基于 HTTP 的功能追加协议1. HTTP 协议的瓶颈HTTP 虽然简单快捷，但是有一些问题。在建立 HTTP 标准规范时，制订者主要想把 HTTP 当作传输 HTML 文档的协议。随着时代的发展，Web 的用途更具多样性。若想在现有 Web 实现所需的功能，以下这些 HTTP 标准就会成为瓶颈。一条连接上只可发送一个请求。请求只能从客户端开始。客户端不可以接收除响应以以外的指令。请求/响应首部未经压缩就发送。首部信息越多延迟越大。发送冗长的首部。每次互相发送相同的首部造成的浪费较多。可

2022-04-05 20:11:31 2504

原创 05.安全的 HTTPS

安全的 HTTPS1. HTTP 与 HTTPS如果在 HTTP 协议通信过程中使用未经加密的明文，比如在 Web 页面中输入信用卡号，如果这条通信线路遭到窃听，那么信用卡号就暴露了。另外，对于 HTTP 来说，服务器也好，客户端也好，都是没有办法确认通信方的。因为很有可能并不是和原本预想的通信方在实际通信。并且还需要考虑到接收到的报文在通信途中已经遭到篡改这一可能性。为了统一解决上述这些问题，需要在 HTTP 上再加入加密处理和认证等机制。我们把添加了加密及认证机制的 HTTP 称为 HTTPS

2022-04-05 11:04:04 4193

原创 03.深入认识 HTTP 的特性

深入认识 HTTP 的特性1. HTTP 协议中的编码和解码1.1 字符集与解码字库表（character repertoire）：相当于一个所有可读或者可显示字符的数据库（可读的字符不一定能够直观的显示出来，如回车）。其决定了编码字符集能够展示的字符的范围。每一种编码字符集，应该都对应着一个字库表。例如 ASCII 字符集，对应的字库表就是由换行、回车等控制字符，和数字、大小写字母、英文标点符号等 128 个字符组成的。且这 128 个字符，是按照一定顺序来排列的。这里需要注意，字库表本身只包含

2022-04-04 12:11:52 1987

原创 02.熟悉 HTTP 协议结构和通讯原理

熟悉 HTTP 协议结构和通讯原理1. HTTP 协议特点1.1 支持客户/服务器模式客户/服务器模式工作的方式是由客户端向服务器发出请求，服务器端响应请求，并进行相应任务。HTTP 规则规定了请求从客户端发出，然后服务端发出响应，因此是客户端先发出请求。1.2 简单快速客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有 GET、POST。每种方法规定了客户与服务器联系的类型不同由于 HTTP 协议简单，使得 HTTP 服务器的规模程序规模小，因而通信速度很快。1.3

2022-04-02 20:57:47 863

原创 01.Vue3 语法初探

Vue 语法初探1. 用 vue 编写定时器最原始形态，把 app 挂载到 id 为 root 的元素上，然后 template 展示相关的内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c

2022-03-30 22:53:49 555

原创极简入门 SQL

# 极简入门 SQL下面的例子都是在 MySQL 数据库系统中运行的。1. 进入数据库相关 SQL (懒得记可以不记)1.1 show databases 展示所有数据库show databases;+------------------------+| Database |+------------------------+| information_schema || db_account || hrs

2022-03-29 11:16:17 1085

原创 01.了解 HTTP 协议

了解 HTTP 协议1. 浏览器背后的故事网站上的域名其实对应的是服务器的 IP。因为 IP 比较难记，所以就先访问 DNS 服务器来获取域名所映射的 IP，然后发送请求到 Web 服务器。HTTP 协议超文本传输协议（HTTP）是一种通信协议，它允许将超文本标记语言（HTML）文档从 Web 服务器传送到客户端的浏览器。土话：传输 HTML 需要遵守的规则。HTTP 是一个属于应用层的面向对象的协议，由于其便捷、快速的方式，适用于分布式超媒体信息系统。它于 1990 年提出，经过几年的使用与发

2022-03-27 23:54:32 4706

原创手写 Promise

手写 Promise需要实现的功能初始化 & 异步调用// Promise 的参数是个函数，函数里有两个参数，一个是成功回调，一个是失败回调const p1 = new Promise((resolve, reject) => { resolve(100) // 也支持异步 // setTimeout(() => { // resolve(100) // }, 500)})then、catch 链式调用p.then((data) =>

2022-03-22 01:25:37 156

原创 03.Redux 进阶

Redux 进阶6.1 UI 组件和容器组件UI 组件负责渲染，容器组件负责页面逻辑。UI 只负责页面的组件（傻瓜组件）。容器组件里的代码都是业务逻辑代码（聪明组件）。示例：// TodoList.js 只负责业务逻辑import React, { Component } from "react";import "antd/dist/antd.css";import store from "./store";import { getInputChangeAction, get

2022-03-21 21:11:15 223

原创 02.Redux 入门

Redux 入门5.1 Redux 概念简述单单靠组件间传值太麻烦了，因此 Redux 应运而生。Redux 是数据层框架，把数据放在 store 这个共用存储空间里。其他组件取数据也在 store 里取。Redux = Reducer + Flux5.2 Redux 的工作流程下面一个形象的比喻来解释 Redux Flow 工作流程：图书馆借书React Component: 借书的用户Action Creators: 借书所说的话Store: 图书馆管理员Reducers: 管理员

2022-03-17 01:12:43 825

原创 01.React 基础

React 基础0. 构建项目Create React App1. 代码优化1.1 构造器里使用 bind 绑定 thisconstructor(props) { super(props); this.state = { inputValue: "", list: [], }; this.handleInputChange = this.handleInputChange.bind(this); this.handleBtnC

2022-03-14 23:05:36 1111

原创使用sklearn出现错误：ValueError: Expected 2D array, got 1D array instead 解决方法

当使用训练出来的模型进行预测的时候，如果输入的需要预测的数据只有一条，会报错：ValueError: Expected 2D array, got 1D array instead:array=[8.09360732 3.36573151].Reshape your data either using array.reshape(-1, 1) if your data has a single feature or array.reshape(1, -1) if it contains a singl

2021-09-04 16:15:30 5180 3

原创【CSS】flex布局使得一个元素向左靠齐，两个以上元素向右靠齐

场景一个li父节点，里边有input元素和两个button元素。要求input放在左边，两个button放在最右边解决方法先将布局设置为flex，并向右靠齐li { display: flex; justify-content: flex-end; ...}设置input的右边距为autoli button { margin-right: auto; ...}设置完后效果如下：...

2021-08-31 16:17:09 2709

原创 PostgreSQL添加不了字段就更新：用on conflict来upsert

背景阐述在数据库表里，一般都有主键，主键是不能重复的，因为是唯一标识。假设这个时候需求来了，需要插入一组数据，这些数据中有些是完全新的，可以直接插入（insert），但有些主键内容是和原本表内的数据主键内容是一致的，这些就无法直接插入了，而是执行更新（update）操作。这时候就比较麻烦了，因为如果全部都是通过insert操作，必然会因为发现有重复唯一主键而报错。一般来说，这时候需要通过业务代码来进行判断：有重复的主键值就执行更新操作，没有就插入操作。但是PostgreSQL就提供了很好的解决方法，

2021-08-19 09:40:33 988

空空如也

空空如也