Lovely Ruby 的手账

来起步，代码量还是比较少的，阅读没什么问题，前面几个步骤都是根据官网的说明做过来的，实现的效果如下图所示。提示：官网上的例子有可能不正确，比方说这个。脚手架搭建一个空的项目，然后依赖安装。的话，即使编辑了，也不会生效，因为。是依赖某些数据的，比方说这里的。我当前各个依赖的版本如图所示。在允许编辑的列对象中，添加。可以直接拿文本最下面的。

文章目录React 脚手架基础创建项目并启动React 脚手架基础xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建项目并启

文章目录React事件处理非受控组件React事件处理(1).通过onXxx属性指定事件处理函数(注意大小写) a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性 b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了更高效(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref非受控组件...

文章目录React 组件创建组件函数式组件类组件组件三大特征statesetStateprops对 Props 进行限制React 组件创建组件组件分为两类，分别是函数式组件，以及类组件函数式组件函数式组件中的 thisbabel 官网的试一试，可以把函数复制进来看一看类组件类中的一般方法放到了类的原型对象上<script type="text/babel"> //1.创建类式组件 class MyComponent extends React.Component

文章目录前言什么是 React编程方式React 特点React 高效的原因Hello-React引入框架虚拟 DOM 创建的两种方式虚拟DOM 与 真实DOM前言什么是 React用于动态构建用户界面的 JavaScript 库(只关注于视图)编程方式通常的编程方法有两种：命令式编程：写明每一步都做什么声明式编程：告诉程序我最后想要什么样的效果，至于步骤，让框架去帮我们实现React 就是一个框架，声明式编程的写法React 特点声明式编码组件化编码React Nativ

文章目录Angular结构型指令属性绑定点击事件Angular结构型指令大多数的指令都是 *ng 加上相应的指令，比方说官网上的 for 循环属性绑定点击事件在标签上用(click) 来创建点击事件

文章目录Vue3intro什么是 DOM为什么会有虚拟 DOM渲染函数初识Vue 三大核心模块组件的执行过程Vue3学习视频 做的笔记intro什么是 DOM全程为：Document Object Model为什么会有虚拟 DOM因为搜索和更新真实的 DOM 会很慢虚拟DOM 是用 javascript 对象来表示 dom 的一种方式渲染函数初识我们写的 template 首先会通过 vue 处理成渲染函数，渲染函数返回虚拟 DOM当组件中的数据更新之后，会重新执行渲

文章目录React 入门介绍新建并启动项目create-react-app 项目结构React 和 ReactCreateJSX语法基本使⽤函数jsx 对象条件表达数组属性src 属性元素类名行内 Style模块化React 入门介绍官方介绍来源于 facebook新建并启动项目在命令行里输入如下命令npx create-react-app hello-react什么是 npx 呢? 可以看一下阮一峰的教程主要点：Node 自带 npm 模块，所以可以直接使用 npx 命令。万

文章目录Vuex简介Vuex简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。

文章目录Vue Router安装Vue Router安装在终端中输入 vue add router 即可安装 router 插件安装过程中会让你选择 Use history mode for router，两者有些差别，具体请参阅这篇博文安装过程如下：

文章目录工程化 Vue cli简介快速开发全局安装 vue/cli-service-global启动 vue serve创建项目命令行创建Vue UI工程化 Vue cli简介它的全称叫做：command line interface缺乏系统性的工程管理，优化，压缩如果是单文件的话，如果是团队开发，那么单文件就会引发很多次冲突快速开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发全局安装 vue/cli-service-gl

文章目录Vue 中的 过渡 & 动画transition 组件使用 Animated.css 动画库JavaScript 钩子Vue 中的 过渡 & 动画有以下几个方式去添加过渡 & 动画：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.jstransition 组件Vue

Vue前言之前学的 Typescript 愣是给我整放弃了，根本学不动啊，因为工作上又用不到，而且前几天因为写组件卡了好几次，所以想要重新学习 VueVS CodeChrome 调试的配置如果 在 code 编辑器写一段 html 后，想要用 Chrome 浏览器调试的话，需要做一些配置...

文章目录TypeScript类型系统动态类型语言 & 静态类型语言静态类型语言的优缺点类型标注类访问修饰符:publicTypeScript类型系统动态类型语言 & 静态类型语言动态类型语言：程序运行期间才做数据类型检查的语言，如：JavaScript静态类型语言：程序编译期间做数据类型检查的语言，如：Java静态类型语言的优缺点优点程序编译阶段（配合IDE、编辑器甚至可以在编码阶段）即可发现一些潜在错误，避免程序在生产环境运行了以后再出现错误编码规范、有利于团队开

# TypeScript## 接口 interface用来**约束**对象的结构### 基本使用简单的使用方法如下![在这里插入图片描述](https://img-blog.csdnimg.cn/47b661409ff24be584545bc229fbbce4.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAyNjM0MjM=

文章目录为什么要用 TypeScript静态类型语言的优点类型系统类型标注类型检测小结所有类型基本类型空、未定义类型为什么要用 TypeScript先介绍两个概念哈：动态类型语言：程序运行期间才做数据类型检查的语言，如：JavaScript静态类型语言：程序编译期间做数据类型检查的语言，如：Java静态类型语言的优点程序编译阶段（配合IDE、编辑器甚至可以在编码阶段）即可发现一些潜在错误，避免程序在生产环境运行了以后再出现错误编码规范、有利于团队开发协作、也更有利于大型项目开发、项目重构

typescript检测：数据安全let inputs = document.querySelectorAll('input');let button = document.querySelector('button');let span = document.querySelector('span');button.onclick = function () { // 数据的类型安全 let result: number = Number(inputs[0].value) + Numb

文章目录前后端交互jwt (JSON web token)简介知识点补充实现方式签发 Token鉴权网络拦截提出问题前后端交互jwt (JSON web token)简介判断你是否有权限和服务器进行交互，相当于一个门禁吧，过程如下知识点补充token：服务端登录成功后进行签发哈希：对复杂的数据进行摘要，10G 的内容，如果改了1kb ，那么它的哈希值也会改变的实现方式流程：我们以登录过程为例子，登录成功后签发 token，访问接口时携带 token签发 Token可以通过 json

文章目录跨域JSONP跨域报错类似如下Access to XMLHttpRequest at ‘http://localhost:4000/getAjax’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.JSONP...

Ajax 的基础，上传文件的基础

cookie动手做：cookie 实现记住登录思路：在访问 login 页面的时候判断是否存在 cookie ，如果存在 cookie 并且内容和数据库的内容一致，那么就去重定向页面。这个需求就很适合用 cookie 来实现步骤一：起服务，安装依赖const Koa = require("koa");const Router = require("koa-router");const Views = require("koa-views");const Static = require("k

文章目录目标前端轮询后端轮询：SSE踩坑static 文件夹下的 index.htmlasync awaitform 按钮阻止页面刷新koa-body目标目标是做一个实时聊天的工具前端轮询实现这个目标的话，可以有多种思路，比较低级的做法就是前端来不断的发送请求给后端后端轮询：SSE全称 server send event客户端不断的发送数据，建立长链接踩坑static 文件夹下的 index.html如果你在 static 文件夹下 有 index.html 的话，那么当你在浏览器

MVC简介model：模型层view：视图层controller：控制层项目管理主入口文件，原先把路由之类的都写在一起了，现在要根据MVC 的思想进行拆分一下。拆分路由根据需求拆分，逻辑不变，把功能抽离出来，方便以后管理拆分 controller控制 controller 负责调度，就是相当于一个 leader ，告诉手下谁谁谁去做什么。...

文章目录数据库为什么要用数据库数据库为什么要用数据库数据持久化保存，如果用文件保存的话，增删查改的话会比较费劲

文章目录模板引擎pug安装服务器脚本标签声明内部样式定义 & 使用变量循环Case / when定义 & 调用函数引入模板引入脚本nunjunks服务器脚本变量判断语句循环语句过滤器模板引擎动态生成 html 的工具，模板引擎有很多，这里介绍几个，其他的类似，原理都类似的。pug安装我们可以通过 npm i pug 来安装服务器脚本// index.jsconst Koa = require("koa");const Router = require("koa-router

又来写点了，之前玩物丧志，然后跳槽，搬家，安顿，比较折腾了，没怎么学习和记笔记，哈哈哈哈

Nodenpm 上传自己的模块首先需要登录在 npm官网上注册帐号，然后在你创作的模块项目中 键入npm adduser，然后根据提示，输入账号名字、密码和邮箱，之后如果显示 Logged in as 你的账户名 on https://registry.npmjs.org/.，说明登录成功了然后cd到你所创建的模块路径中，npm publishPS D:\Study\Front\htmlPractice\node直播课\require> npm publish npm notic

Node.js起步安装注意：需要配置环境变量查看是否安装好node：终端运行 node -v，如果出现版本号，说明安装成功普通js和node.js看这个js在哪里执行了，如果在node里执行了客户端/服务端启动服务的叫服务端，访问的叫客户端服务端改东西的话需要重启服务。nodemon 热更新 npm install nodemon - g...

同步、异步概念同步和异步：同步不等于阻塞异步也不等同于非阻塞同步/异步是一种消息通知机制同步没有通知异步有消息的通知阻塞和非阻塞的主体是小明同步和异步的主体是：消息回调函数回调函数就是被当作参数传递的函数百度百科：回调函数方块的运动动画window.requestAnimationFrame(fn)：调用gpu，节约内存setTimeout：promise 期约我们先通过 new 方法创建一个 promise 对象，然后打印它let promise =

文章目录面向对象实例：选项卡一个选项卡多个选项卡优化工厂模式new 运算符简化工厂模式 ---> 构造函数仿写 new面向对象实例：选项卡一个选项卡举例子主要是为了把原先面向过程的思想转变为面向对象的思想，思路可以慢慢改变。先写一个选项卡<body> <div class="tab1"> <button style="background: red">按钮一</button> <button&g

正则为什么要学正则，正则这东西可真的太神奇了，可以说你想要啥就可以整啥示例：提取数字给你一串字符串 123jkh123hjk213h213jk43bmnb，请把这里的数字提取出来判断字符串中是不是数字可以用isNaN()正常...

ECMAScript 6 基础简介let 和 const解构赋值展开运算符Set 对象Map 对象函数新增内容箭头函数与原函数的区别：不定参与原函数的区别：this 的指向参数默认值数组新增方法Array.from()Array.of()Array.isArray()arr.find()arr.findIndex()arr.flat()arr.flatMap()简介JavaScript 三大组成部分ECMAScriptDOM：文档对象模型BOM：浏览器对象模型ECMAScript 发展

Vue 3 初体验起步参考本笔记参考开课吧的web全栈课进行记录的，有兴趣可以看看那边的课程（资深白嫖党，不过有工资的话会考虑买一个学学）安装 vue3# 全局安装cnpm i -g create-vite-app#create-vite-app vue3-campcd vue3-campcnpm i# 用 vscode 打开code ./ -a # 运行项目运行程序：cd 到新建的项目根目录下（我这里就是vue3-camp），终端输入npm run server 就可

文章目录非关系性数据库：MongoMongo介绍操作连接数据库查看所有数据库切换数据库展示数据库中的集合展示集合中的所有文档删除集合中的所有文档举个栗子：教学Mongoose 插件建立文档结构 Schema操作添加数据删除数据查数据修改数据非关系性数据库：MongoMongo介绍是一种非关系性数据库，不像MySQL那样有很多条条框框的约束，想怎么存就怎么存。操作连接数据库mongo查看所有数据库show dbs切换数据库use 数据库名称展示数据库中的集合show col

Vue-cli 脚手架介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。就是说我们在开发的时候，前期需要配置很多东西（网络组件，路由组件，打包组件等等），有了Vue-cli脚手架，他会帮我们集成这些功能安装可以通过以下命令，在命令行里敲npm install -g @vue/cli# ORyarn global add @vue/cli创建一个项目创建项目有两种方法1. 代码2. 图形界面GUI代码创建找到想要创建项目的文件夹，在此文件夹下打开cmd，（按住s

Svn & Git介绍他们两个都是代码管理工具

Webpack 自学介绍Webpack是一种前端资源构建工具（把一些小的工具打包成大的工具），一个静态模块打包器在 Webpack 看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源bundle核心概念Entry：入口Output：出口Loader：这个webpack自身只理解javascript，loader相当于翻译官，把css，img这些内容进行webpack能识别的Plugi

文章目录Node.js介绍为什么要学Node.jsNode.js是什么Node.js能做什么要学会的起步安装NodeHello WorldNPM安装命令语义化版本命令行工具npm常用命令npm镜像自定义工具包API核心模块读取文件写文件创建个简单的服务器设置编码读取目录模块化简单的模块化模块作用域模块间的通信Express 模块指定公开路径模板引擎热启动端口号其他Node.js介绍为什么要学Node.js废话，你学前端得知道这个，招聘信息里xx没写么（具有服务端开发经验，拥有基本的网站开发能力，

文章目录Javascript 进阶封装提出问题分析问题步骤总结问题Javascript 进阶封装提出问题问题描述：假如我是一个推销产品的应用开发经理，有很多的用户在我的平台上订阅些内容，我如何通过用户订阅的信息，准确的发送产品给需要它的客户们呢？分析问题首先我是卖家，我需要提供一个添加订阅信息和对应的用户功能函数当我发布一个产品的时候，我需要精准的发送给需要它的用户步骤// 我们先创建一个卖家var seller = {};// 添加一个列表list，用于存储订阅者sel

文章目录Vue 的Vue 的因为我之前曾接触过小程序的开发，所以 入手 Vue 相对容易了一些，因为思想都是数据绑定，Vue是华人尤雨溪开发的，这可是个大佬，B站上有个关于大佬的纪律片，是 Up主：鱼C-小甲鱼 翻译的，有兴趣的话可以看看。https://www.bilibili.com/video/BV1dT4y1V7Dn...