前端交互
2021-01-15 13:39:06 136 举报AI智能生成
个人学习笔记整理的前端开发知识点之前后端交互（含git、GitHub、node、gulp、ajax、express、MongoDB）
作者其他创作
大纲/内容
powershell
cd 切换路径有空格要用''
无法加载文件 ******.ps1，因为在此系统中禁止执行脚本
set-ExecutionPolicy RemoteSigned
Node
为何要做服务端
实现网站的业务逻辑
数据增删改查
持续增加“新鲜事”
web服务器请求
事件驱动
非阻塞
高并发（high concurrency）在的轮询（Polling）和comet构建的应用
生态系统活跃，大量开源库
大量前端开发工具基于
node.js
ECMAScript
Node模块化API
概念
因为JS的弱语言特性
需要设置类似作用域的开闭
一个js文件即模块，定义好变量属性和函数
node.js模块
加载机制
exports.导出
model.exports.导出
require引入
系统模块
fs文件操作
读取
const fs = require('fs')
fs.writeFile( '文件路径/文件名 [，'字符编码']，callback => { } )
写入
fs.writeFile( '文件路径/文件名 ，'要写入的内容字符串'，err => { } )
拼接路径
Windows可以“/ \”、用于网站服务器Linux“/”
path.join('C'，'user'，'download' )
__dirname获取当前目录绝对路径
http创建网站服务器
createServer()
.on()发送请求
.end()响应页面
.listen()监听端口
第三方模块
多文件组成的一个文件夹“包”
以js文件形式存在
技术社区开发，非官方
以命令行工具形式存在
获取安装
npm（node package manager）
npm install/uninstall 模块名（创建一个node_model文件夹）
库文件：本地安装
Gulp
命令行工具：全局安装-g
ctrl+C终止当前命令
nodemom
nrm
nrm ls（获取可换下载地址列表）
nrm use taobao（切换下载地址为taobao）
package.json文件
package-lock.json
async异步编程
同步API
异步API与callback回调函数
代码执行区与回调函数队列
依次读取，嵌套异步API（回调地狱）
异步API与结果处理分离，Promise
封装异步API函数并返回promise
调用函数then继续获取下一个API
异步函数
await关键字
promisify()对象化
顶级对象
global
打开执行环境
间接打开
cd..（返回上级目录）
cd 目录（切换至目标目录）
直接所在根目录按住shift+右键
所在根目录运行结果
node +文件开头+Tab（快速捕捉文件）
全局安装nodemon后，直接用nodemon
修改保存可看结果输出
网站组成
电脑客户端browser
网址（统一资源定位符URL）
请求Request
端口port
服务端node
本机IP：127.0.0.1
本机域名：localhost
HTTP请求与响应处理
get请求解析url地址
post
router路由
静态文件static
动态文件
Vue
根目录安装node_model
npm install --registry https://registry.npm.taobao.org
Gulp
how do
本地安装局部构建工具包npm install gulp
根目录建立gulpfile.js编写任务
API
gulp.src()获取要处理文件
gulp.dest()输出文件
.pipe()
gulp.task()建立任务
gulp.watch()监控文件
插件
gulp-htmlmin、gulp-csso、gulp-uglify压缩及混合压缩
['src/css/*less','src/css/*css']
browsersync浏览器实时同步
gulp-babel、gulp-less语法转换
gulp-file-include公共文件包含
命令行工具gulp-cli
目录结构
dist放构建后文件，src放源代码→common放公共代码，css放及其预处理
前端构建工具for what
项目上线，文件合并和压缩
语法转换（es6、less）
公共文件抽离，组件化html头部底部
去缓存，浏览器自动更新
vendor前缀css3特性
单元测试，代码分析
AJAX
概识
node创建网站服务器作为运行环境
请求与响应代理人，形成可控
应用场景
页面，无刷新更新数据
搜索框，提示文字下拉列表
实现步骤
创建实例对象XMLHttpRequest()
open请求方式和地址
send发送请求
onload()响应事件
JSON.parse()字符串转对象数据格式
JSON.stringify()对象转字符串数据格式
参数传递
setRequestHeader()
readyState状态码
onreadystatechange()响应事件
错误处理
异步
封装
低版本IE缓存
Express
概识、npm安装包与调用模块
{{art-template模板引擎}}
概识、npm安装包与调用模块
用于拼接字符串
{{数据}}
页面骨架和头尾部的模板继承
模板配置template.defaults.
导入模板变量
设置模板根目录roo(__dirname,file)
配置模板的默认后缀
express-art-template安装
使用模板app.engine()
配置路径和后缀app.set()
渲染res.render()
公共数据app.locals
框架特性
对模板引擎支持程度高，方便渲染动态HTML页面
简化http请求处理
构建模块化路由
创建路由对象
将请求路径和路由进行匹配
一级路由对象下的二级路由
参数获取
req.query
req.params
第三方包body-parser
express.static()静态资源访问
提供了中间件机制有效控制HTTP请求
中间件
方法
拦截请求和做出响应
app.get/post/use()
处理函数
next()下一个中间件
app.send()响应客户端
try{}catch()错误捕获异步API和同步API
应用案例
验证登录状态
网站维护公告
自定义404页面
MongoDB
概述与环境搭建
数据库概识
收集动态网站表单等数据
对数据进行管理
MongoDB安装、启动与连接
环境变量配置
第三方包mongoose
在MongoDB中不需要显式创建数据库，如果正在使用的数据库不存在，会自动创建
异步API
Promise对象
回调函数
增删改查
new 实例化对象
规则Schema()
保存save()
查询find()、select()
升/降序sort(+/-)
跳过前?条skip()、限制?条limit()
增加.create()
删除单/多findOneAndDelete()/deleteMany()
更新单/多updateOne()/updateMany()
mongoose字段验证
type: String
require: [ture,'请输入内容']
minlength: [3,'字符串长度不少于3']
trim: true去除两边空格
enum: 枚举规定
validate: 自定义验证器
集合关联
通过属性ID用ref将集合关联
联合查询属性.find().popllate('')
用户的增删改查案例
Git
初识
分布式版本管理软件
控制代码更新与撤回
多人协作，同时开发
①打开bush直接代码配置 git config
--global user.name ZhangSan
--global user.email ZhangSan@qq.com
--list 查看信息
工作流程
②工作目录文件
git init（初始化git仓库）
③本地暂存区
git checkout 文件（覆盖还原目录文件）
git commit -m 提交信息（-m是主分支）
④git仓库
git log（查看提交记录）
git rm --cached 文件（删除）
⑤删除文件
⑤恢复指定记录
git rest --hard commitID（覆盖暂存区和工作目录）
分支
master主分支
develop开发分支
feature功能分支
常用命令
git branch（查看分支）
git branch 分支名（创建分支）
工作流程跟踪文件
git add develop.html
git checkout 分支名（切换分支）
git merge 来源分支名（合并分支）
git branch -d 分支名（删除分支）
暂时保存命令
git stash（保存）
git stash pop（恢复）
Git Hub
远程仓库
创建推送到远程（需要身份验证）
git push（推送）
git remote
本地仓库
克隆到本地
git clone 仓库地址（默认master）
cd 文件名（改变目录）
git pull 仓库地址 分支名（拉取最新版本）
若远程>本地版本，不能提交需先拉取
解决冲突conflict
多人修改同一地方
前者顺利，后者解决冲突
拉取最新版本
冲突地方：《前者==后者》
去掉《==》后保存
非主管推送
主管发送邀请权限
主管审核通过
Fork派生仓库
克隆到本地
推送到自家派生仓库
Pull requests（创建合并请求）
更改说明
ssh免登陆
rsa非对称加密方式
忽略清单
git add .（一次性全添加）
去掉不需要管理的文件
根目录写一个文件.gitignore
里面写去掉的目标文件
文件夹名、文件名及其后缀
Markdown添加仓库说明
名“Readme.md”
Typora
标题
详细说明
职业：本科
0 条评论
下一页
