【后端】Express快速入门
Express
官网传送门
基于 Node.js 平台，快速、开放、极简的 Web 开发框架
Express 的作用和Node.js内置的http模块类似，是用于快速创建Web服务器的第三方模块。
Express的作用：
对于前端程序员来说，最常见的两种服务器，分别是：
Web 网站服务器：专门对外提供 Web 网页资源的服务器。
API 接口服务器：专门对外提供 API 接口的服务器。
使用 Express，我们可以方便、快速的创建 Web 网站的服务器或 API 接口的服务器。
Express 初体验
基本使用
安装 Express：
1npm install express
创建服务器，监听客户端请求，并返回内容：
12345678910111213141516171819202122232425262728const express = require('express')// 创建 web 服务器const app = express()// 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容app.get('/u ...
【后端】Node.js快速入门
Nodejs 基础
官网传送门
初识 Nodejs
Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境
基于 Express 框架 ，可以快速构建 Web 应用
基于 Electron 框架，可以构建跨平台的桌面应用
基于 restify 框架，可以快速构建 API 接口项目
读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…
Buffer 缓冲区
Buffer 缓冲区文档
Buffer 的结构与数组类似，操作方法也与数组类似
数组不能存储二进制文件，Buffer 是专门存储二进制数据的
Buffer 存储的是二进制数据，显示时以 16 进制的形式显示
Buffer 每一个元素范围是 00~ff，即 0255、0000000011111111
每一个元素占用一个字节内存
Buffer 是对底层内存的直接操作，因此大小一旦确定就不能修改
Buffer 常用方法：
Buffer.from(str[, encoding])：将一个字符串转换为 Buffer
Buffer.alloc(size)：创建指定大小的 Buffer
...
【Python】FastApi快速入门
FastApi快速入门
开启服务和访问接口
1.首先在Terminal终端中进入/venv/scripts/activate.bat，安装pip install fastapi[all]
[all]相当于安装了主要的fastapi+服务器uvicorn+其它
2.配置python解释器
3.导入fastapi，from fastapi import FastAPI
4.初始化app对象，app = FastAPI()
5.运行文件
①填入下方代码，并输入python test.py
1234import uvicornif __name__ == '__main__': uvicorn.run(app)
②uvicorn test:app --reload 常用命令
6.添加首页接口，当页面中打开"/"页面时，运行index()函数
12345@app.get("/") # Python装饰器def index(): return "This is Home Page."
返回json数据和文档自动生 ...
【前端】Vue3.2实现后台管理系统（一）
登录功能
创建Vite项目
官方文档：Vite
Vite是一个web开发构建工具，由于其原生ES模块导入方式，可以实现闪电般的冷服务器启动，
通过在终端中运行以下命令，可以使用Vite快速构建Vue项目。
12345678# npm 7+npm init vite@latest <project-name> -- --templatecd <project-name>npm installnpm run dev
引入element-plus组件库
官方文档：element-plus
1.在vscode中打开命令行终端输入npm install element-plus --save引入组件库
2.在src文件下的main.js中引入
12import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'
引入后结果：
1234567891011import { createApp } from 'vue' ...
【前端】实用的JavaScript开发技巧
Number使用技巧
取整
代替正数的Math.floor()，代替负数的Math.ceil()
1234const num1 = ~~3.14;const num2 = 3.14 | 0;const num3 = 3.14 >> 0;console.log(num1, num2, num3); // 3 3 3
补零
123const FillZero = (num, len) => num.toString().padStart(len, "0");const num = FillZero(688, 5);console.log(num); // 00688
转数值
只对null、""、false、数值字符串有效
12345const num1 = +null;const num2 = +"";const num3 = +false;const num4 = +"688";console.log(num1, num2, num3, num4); // 0 0 0 688
时间戳 ...
【前端】JavaScript核心基础和常用方法
Js核心方法总结
字符串的常用方法
方法名称
描述
charAt()
获取指定位置的字符
substring()
提取字符串中，介于两个指定下标之间的字符
substr()
在字符串中指定的位置处，提取指定数目的字符
slice()
提取字符串的某个部分，类似于 substring() ，不同之处： 1、substring() 可以自动交换参数的位置，而 slice()不行 2、slice()的第一个参数可以是负数，而 substring()不行
toUpperCase()
把字符串转换为大写
toLowerCase()
把字符串转换为小写
indexOf
返回字符串中指定字符首次出现的索引
数据类型转换
方法名称
描述
Number()
将其他类型的值转换为数字
parseInt()
可以将参数转成整数
parseFloat()
可以将参数转成浮点数
String()
将其他类型的值转换成字符串 例如：String(123)
toString()
将其他类型的值转换成字符串 ，例如：(5).toString() ...
【前端】CSS/CSS3样式基础知识
CSS 4种书写位置特点与区别
引入方式
书写位置
作用范围
优先级
使用场景
内嵌样式
写在<style>标签中
当前页面
由书写位置和选择器优先级来共同决定
小案例 对网站首页首次打开速度要求很高的网页需要 如：百度、腾讯首页
行内样式
css 样式写在标签的 style 属性中
当前标签
最高
配合 JS 或特殊需求
外链样式
css 样式写在单独 css 文件中，通过 link 标签引入
多个页面
由书写位置和选择器优先级来共同决定
项目开发中高频使用
导入式样式
把@import 放在style标签中或 CSS 文件中，用于导入外部 CSS 样式文件
被导入的页面
最低
项目开发中几乎不用（用作了解即可）
CSS选择器的权重计算
层叠性
TIP
CSS 全名叫 层叠式样式表 ，层叠性是它很重要的性质
层叠性：多个选择器可以同时作用于同一个标签，效果叠加
层叠性的冲突处理
TIP
多个选择器定义同一元素的冲突问题
CSS 有严密的处理冲突的规则
id 权重 > class权重 > 标签权重 > 通配符权 ...
【前端】CSS易忘样式记录
盒模型
box-sizing：规定计算一个元素实际宽高的方式
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
值
描述
content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit
规定应从父元素继承 box-sizing 属性的值。
CSS的书写位置
属性名称
描述
style
① 内嵌式，书写在 head 标签对中，使用<style></style>标签对，里面书写 css 样式。例如： <head> <style type="text/css"> h1 {color:red;} p {color:blue;} ...
【前端】Git项目管理快速入门
Git是什么
Git的理解：
Git 是目前世界上最先进的分布式版本控制系统（没有之一），用于敏捷高效地处理任何或小或大的项目。
简单理解就是代码管理工具。使用 Git 一般处于以下 3 中原因：
1、代码管理
在本地写完代码后需要将代码备份到一个地方，Git 就给我们提供了一个仓库来进行存储和管理；
2、版本控制
如：我们开发一个项目，发布了很多个版本，想要查看之前某一个版本都更新了哪些内容 或 做版本回滚，就会非常的方便和快捷；
3、团队协作
当项目达到一定规模，会有多个人一起开发同一个项目（UI，前端，后端，运维），文件或代码都是放到同一个仓库的，这么多人同时操作仓库里的文件很容易造成混乱，Git 也提供了团队协作的支持。
Git的安装配置
在使用 Git 前我们得需要先安装 Git
Git 目前支持 Linux/Unix、Solaris、Mac 和 Windows 平台上运行。
Git 各平台安装包下载地址为：http://git-scm.com/downloads(opens new window)
完成安装之后，就可以使用命令行的 git 工具（已经自带了 ssh ...
【面试】HTML5经典面试题汇总
高频重点
HTML语义化
非语义元素例子：<div> 和 <span>
语义元素例子：form、table、<nav> 和 <header>有明确定义其内容
语义化的作用：
更好的内容结构，当页面在没有 CSS 的情况下也能呈现出很好地代码结构，易于阅读；
提升用户体验，如 title、alt 属性用于名词解释或图片内容说明，以及 label 标签的灵活运用等；
有利于SEO优化，与搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重；
可访问性：帮助屏幕阅读器等辅助技术更好的阅读和转译网页，利于无障碍阅读；
国际化：遵循 W3C 标准通用的语义化标签可以让各国开发者更容易弄懂你网页的结构；
可维护性：增强可读性，减少网页间的差异性，方便后期开发和维护；
语义化时注意事项：
少使用无语义的标签 div 和 span；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p，因为 p 在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u 等，改用 c ...
