[toc]
万丈高楼平地起。开课第一周，我们将以轻松幽默的方式，从实际工作中的开发痛点出发，以项目全生命周期为主线，对全栈有全局的认识。从整体项目分析开始，培养您的项目架构思维。 课程安排：
后台：
小程序：
前端基础：
- 有扎实的 Javascript（ES6）/HTML/CSS 前端功底
- 有 Node js、Vue 基础，并开发过 Demo 项目
- 不少于 1 年的 Web 前端开发经验
理解大前端的定义，让您不再迷茫。
-
项目定义阶段（了解）
- 没有明确项目的目标、资源、工期
- 没有进行合理的评估与预算
- 客户沟通不及时、不充分、不具体
-
项目需求分析阶段（了解）
- 详细的需求分析，项目预算
- 资源计划与合理的分工
- 客户沟通不及时、不充分、不具体
-
项目开发阶段（重点）
-
项目收尾（了解）
- 没有规范的收尾流程，草草结束
- 没有对文档进行归档，对项目进行总结，形成组织资产
- 资源回收不及时，造成资源浪费
-
解决方案
- 对组织人员培训，转变思维向自动化/规范化转型
- 配合效率工具（自动化）对流程进行简化/标准化
- 全员参与并实践
-
Devops 内容介绍（重点）
-
敏捷流程
-
整体开发流程
-
-
如何快速提升？
- 入门级学习方法
- 兴趣
- 量变到质变：从基础开始，从简单的开始：菜鸟教程；技术需要沉淀
- 总结和分享
- 进阶学习
- 知识是无边界的，术业要有专攻。踏实、谦虚的心态
- 从单纯的做事，到对业务对需求的思考。机会会给有准备的人
- 与同行业同年龄的人对比，补足自己的不足。木桶理论
- 高阶提升方法
- 成为两（多）方面专家
- 勇于承担与挑战，合理分配自己的时间
- 参加交流会/技术分享大会，了解最新的知识架构
- 入门级学习方法
-
如何选择练手的项目？
- 找准资源/资料，规划成片的学习时间
- 从大纲/目标清晰的了解自己将要学习的知识，并重点看感兴趣的
- 学会使用社区的力量
- 初级/入门级
- 系统的视频学习：慕课网
- 从临摹开始；从 W3 School、菜鸟教程开始
- 从折腾博客开始（Hexo，Jekyll，Wordpress）
- 中高级
- 微信 cools 从兴趣入手，定向发展（算法：Leetcode，基础知识：印记中文）
- 加入开源社区，github 上的开源项目（Docker，Nodejs，AI 等）
- 着眼中国与世界（活动日历：Google，微软，AWs，TED）
- 找准资源/资料，规划成片的学习时间
-
前端面试中的坑
- 是否一份简历通发？
- 是否对公司的职位及业务有所了解？
- 是否有过模拟自测/试？
- 反例中的向题
- 无重要的基本信息（学历/联系方式/年龄/性别）
- 专业技能太空泛
- 项目描述不具体
- 面试技巧
- JD 描述
- 简历
- 面试
- 总结
- 可靠的渠道
- 内推/校招/实习
- 同学/师兄（姐）朋友关系介绍
- 职业猎头
- 是否一份简历通发？
-
如何选择行业与公司？
行业：
- 看前景
- 看同行业的评价（薪酬、晋升、转行）
- 看生态（上游公司、下游公司 易跳槽）
公司：
- 确定自己的定位（高薪水/高福利/高自由）
- 了解企业/公司团队文化
- 从现有的产品/岗位，了解预期的需求与发展
-
做好自我提升规划
- 现在的迷茫
- 基础很差，背景不好，文凭不高
- 家庭情况复杂，浑浑噩噩度日也可以！高不成，低不就的工资！
- 年龄是一道坎，我该怎么办？性格合格吗？没有天赋可以吗？
- 迈出第一步
- 与行业内的人进行交流，从基础的尝试开始
- 了解进升的途径，设计自己的 3-5 年的规划
- 找准实践/实习的机会，做一点东西
- 自我提升规划
- 我会有一个 TodoList
- 我会给自己的手机设置待办事项与学习提醒
- 我会加入社区/写博客/组建团队，总结分享我的知识
- 了解自己学习的进展速度，及时调整，抓重避轻
- 给自己一点点暗示，或者找一个志同道合的人（男/女朋友？）
- 培养一点兴趣与爱好，对自己好一点
- 现在的迷茫
- 重点知识内容
- 项目全局思维，需求分析重难点
- 案例项目需求分析，业务拆解、功能拆解
- 需求分析的工具及使用场景
- 项目需求分析
- 需求分析分析内容（从哪里来）
- 需求分析中重点的内容（抓痛点）
- 需求分析文档及工具（怎么做）
- 需求分析前置考虑
- 业务型：无纸化带来的效率提升
- 痛点型：市场决定的风声浪口
- 功能型：企业&客户需求、解决流量入口
- 需求分析痛点
- 不想就做
- 照单全收
- 未沟通/确认
- 放羊式管理
- 需求分析的难点
- 除了考虑功能实现，还要考虑时间/成本
- 形成需求文档，用户回馈确认
- 引导用户的需求，创造用户需求
- 需求分析组成部分
- 业务需求
- 用户需求
- 项目需求
-
项目要求
- 全栈项目
- 前端痛点
- 企业对接
- 开发周期
- 跨端应用
- 多场景
-
业务需求
- 社区应用（通用性强）
- 登录鉴权
- 用户体系
- 积分系统
- 发贴收藏
- 点赞回复
- 内容管理
-
用户需求
- 交互简单
- 界面美观
- 运行流畅
- 功能实用
- 定制需求
- 其他需求
-
具体产出
- 需求文档
- 项目选型
- 技术栈选型
- 开发周期预估
- 项目进度预估
- 分项原型图
- 分项流程图
-
项目需求变更
- 考虑是否合理
- 是否是项目范围内的变更，对主体业务是否有影响
- 明确需求变更的流程，确定需求变更
-
产品需求变更
- 沟通是王道
- 会哭有奶吃
- 引导需求
- 自我挑战
-
核心业务需求分析
- 前端
- 页面/交互 → 组件化
- 代码复用 → 工程化
- 接口定义 → 标准化
- 后端
- 接口开发 → 自动化
- 管理后台 → 模块化
- 缺陷管理 → 流程化
- 业务
- 登录鉴权 → 前后分离
- 内容展示 → 多场景
- 个人中心 → 用户体系
- 功能
- 筛选 → 搜索
- 统计 → 积分系统
- 评论 → 消息
- 整体需求分析
- 前后端分离->接口鉴权->数据通用性->数据库设计
- 内容管理->搜索->筛选->积分管理体系
- 社区业务->权限->积分->用户体系
- 前端
-
原型设计
-
原型：用线条、图形描绘出的产品框架，也称线框图
-
设计：综合考虑产品目标、功能需求场景、用户体验等因素，对产品的各版块、界面和元素进行的合理性排序过程。
-
产品阶段：想法 → 需求采集 → 功能结构 → 原型设计 → 产品需求文档
-
原型设计是清晰的表达系统的构想
-
-
原型设计的目标
- 展现布局逻辑结构
- 表明状态关系与跳转关系
- 低成本的快速修改
- 内容展示
- 回复/点赞
- 积分与用户体系
- Axure 实现原型图
- PC 端文档产出
- PC 端重要页面原型图
- PC 端主体页面流程图
- 说明文档
.md（MarkDown 文件）
- 用户、权限管理
- 内容管理、首页管理
- 其他功能（日志、多语言等）
-
主体功能
- 重 PC 端，手机端功能少
-
技术实现/交互体验
-
用户数据与流量入口
-
原型设计
- 墨刀
- WebApp，小程序文档产出
- 重要页面原型图
- 主体页面流程图及跳转逻辑
- 说明文档
.md（MarkDown 文件）
- 团队技术实力与业务需求结合
- 能够复用，坚决不造轮子；需要造轮子，坚决不牵强
- 怎么简单怎么来，多考虑时间、进度、质量因素
- 原型类：Axure，Ps，墨刀，蓝湖
- 思维脑图：Xmind，Mindnode（Mac），MindManager
- 流程图：Visio（win）/OmniGraffle（Mac）/processOn
- 类似于矢量设计软件，内置了浏览器相关操作，需要安装插件。
- https://www.axure.com/downloadthanks
- 在线操作，在线分享，收费。可免费简单使用。
- 相比 Axure，模板多。支持手机模板。
- https://modao.cc/downloads
- 操作简单，已熟练。
- https://www.xmind.net/download/
- 在线流程图，收费。可免费简单使用。
- https://www.processon.com/
工欲善其事，必先利其器。学习最火的 Docker 容器技术，快速搭建测试环境。深入讲解前端必会的 Mock 接口与工具，并专门设计了调试技巧&真机调试讲解，与实际工作开发完美契合。 课程安排：
无法访问 GitHub 问题：
sodu vim /etc/hosts
dns1.p08.nsone.net github.com
185.199.108.133 raw.githubusercontent.com
11 185.199.108.133 user-images.githubusercontent.com
12 185.199.108.133 avatars2.githubusercontent.com
13 185.199.108.133 avatars1.githubusercontent.com
-
Node.js（npm/yarn）+ nvm（Node.js 版本管理）
-
npm install -g cnpm --registry=https://registry.npm.taobao.org -
因为在此系统上禁止运行脚本。
get-executionpolicy： Restricted 执行策略不允许任何脚本运行。- 以管理员身份打开 PowerShell 输入
set-executionpolicy remotesigned
-
Linux 换源：
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node/ -
设置 Github hosts：
dns1.p08.nsone.net github.com 185.199.108.133 raw.githubusercontent.com 185.199.108.133 user-images.githubusercontent.com 185.199.108.133 avatars2.githubusercontent.com 185.199.108.133 avatars1.githubusercontent.com -
wsl:
export ALL_PROXY="http://127.0.0.1:8000"
#!/bin/bash
host_ip=$(cat /etc/resolv.conf |grep "nameserver" |cut -f 2 -d " ")
export ALL_PROXY="socks5://${host_ip}:1080"
git config --global http.proxy ${ALL_PROXY}
git config --global https.proxy ${ALL_PROXY}
//设置全局代理
//http
git config --global https.proxy http://127.0.0.1:1080
//https
git config --global https.proxy https://127.0.0.1:1080
//使用socks5代理的 例如ss，ssr 1080是windows下ss的默认代理端口,mac下不同，或者有自定义的，根据自己的改
git config --global http.proxy socks5://127.0.0.1:1080
git config --global https.proxy socks5://127.0.0.1:1080
//只对github.com使用代理，其他仓库不走代理
git config --global http.https://github.heygears.com.proxy socks5://127.0.0.1:1080
git config --global https.https://github.heygears.com.proxy socks5://127.0.0.1:1080
//取消github代理
git config --global --unset http.https://github.heygears.com.proxy
git config --global --unset https.https://github.heygears.com.proxy
//取消全局代理
git config --global --unset http.proxy
git config --global --unset https.proxy
https://docs.microsoft.com/zh-cn/windows/wsl/wsl-config#example-wslconfig-file
windows 要打开防火墙！
scp [参数] <源地址（用户名@IP地址或主机名）>:<文件路径> <目的地址（用户名 @IP 地址或主机名）>:<文件路径>
举例：
scp /home/work/source.txt work@192.168.0.10:/home/work/ #把本地的source.txt文件拷贝到192.168.0.10机器上的/home/work目录下
scp work@192.168.0.10:/home/work/source.txt /home/work/ #把192.168.0.10机器上的source.txt文件拷贝到本地的/home/work目录下
scp work@192.168.0.10:/home/work/source.txt work@192.168.0.11:/home/work/ #把192.168.0.10机器上的source.txt文件拷贝到192.168.0.11机器的/home/work目录下
scp -r /home/work/sourcedir work@192.168.0.10:/home/work/ #拷贝文件夹，加-r参数
scp -r /home/work/sourcedir work@www.myhost.com:/home/work/ #使用主机名
scp -r -v /home/work/sourcedir work@www.myhost.com:/home/work/ #显示详情，加-v参数-
支持在线安装、离线安装，更快。
-
npm install --global yarn yarn config set registry 'https://registry.npm.taobao.org/'
设置代理
npm和yarn转换淘宝源和官方源
npm config set registry http://registry.npm.taobao.org/
npm config set registry https://registry.npmjs.org/
yarn config set registry http://registry.npm.taobao.org/
yarn config set registry https://registry.npmjs.org/
npm config set proxy http://127.0.0.1:8080
npm config set https-proxy http://127.0.0.1:8080
npm config delete proxy
npm config delete https-proxy
yarn config set proxy http://127.0.0.1:8080
yarn config set https-proxy http://127.0.0.1:8080
yarn config delete proxy
yarn config delete https-proxy
V2rayN 自动设置系统代理后，可接收 http/https://127.0.0.1:1081
无需设置socks5代理
# 假设本地socks5代理端口为1080
# 首先安装转换工具
npm install -g http-proxy-to-socks
# 然后使用这个工具监听1088端口,支持http代理，然后所有1088的http代理数据都将转换成socks的代理数据发送到1080上
hpts -s 127.0.0.1:1080 -p 1088
# 最后设置npm代理为8080
npm config set proxy http://127.0.0.1:1088
npm config set https-proxy http://127.0.0.1:1088
yarn config set proxy http://127.0.0.1:1088
yarn config set https-proxy http://127.0.0.1:1088
-
IDE
- IDE（Webstorm/Vscode/Atom）
-
Vue-CLi
- 安装命令：
npm install -g @vue/cli - 快速原型开发：
npm install -g @vue/cli-service-global
- 安装命令：
-
测试环境
- 虚拟机自建环境（Parallels/Vmware/Hyperv）
- Linux
- 查看 Linux 内核版本信息
- 方法 1：登陆 Linux，在终端输入 cat /proc/version
- 方法 2：登陆 Linux，在终端输入 uname -a
- 方法 3：登陆 Linux，在终端输入 uname -r
uname -srm
- 查看 Linux 系统版本信息
- 方法 1：登陆 Linux，在终端输入 cat /etc/issue
- 方法 2：登陆 Linux，在终端输入 cat /etc/lsb-release
- 方法 3：登陆 Linux，在终端输入 lsb_release -a
- 查看 cpu 信息
- 输入命令：more /proc/cpuinfo
- 查看 Linux 内核版本信息
-
泊坞窗的旧版本被称为
docker，docker.io或docker-engine。如果安装了这些，请卸载它们：$ sudo apt-get remove docker docker-engine docker.io containerd -
-
更新
apt包索引并安装包以允许apt通过 HTTPS 使用存储库：$ sudo apt-get update $ sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ gnupg \ lsb-release -
添加 Docker 官方的 GPG 密钥： 必须！
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg -
使用以下命令设置稳定存储库。要添加 每晚或测试存储库，请在以下命令中的单词后添加单词
nightly或test（或两者）stable。了解nightly和test频道。echo \ "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \ $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
-
-
-
更新
apt包索引，安装最新版本的 Docker Engine 和 containerd，或者到下一步安装特定版本：$ sudo apt-get update $ sudo apt-get install docker-ce docker-ce-cli containerd.io有多个 Docker 存储库？
如果您启用了多个 Docker 存储库，则在
apt-get install或apt-get update命令中未指定版本的情况下安装或更新始终会安装可能的最高版本，这可能不适合您的稳定性需求。 -
要安装特定版本的 Docker Engine，请在 repo 中列出可用版本，然后选择并安装：
一种。列出您的存储库中可用的版本：
$ apt-cache madison docker-ce docker-ce | 5:18.09.1~3-0~ubuntu-xenial | https://download.docker.com/linux/ubuntu xenial/stable amd64 Packages docker-ce | 5:18.09.0~3-0~ubuntu-xenial | https://download.docker.com/linux/ubuntu xenial/stable amd64 Packages docker-ce | 18.06.1~ce~3-0~ubuntu | https://download.docker.com/linux/ubuntu xenial/stable amd64 Packages docker-ce | 18.06.0~ce~3-0~ubuntu | https://download.docker.com/linux/ubuntu xenial/stable amd64 Packages湾 使用第二列中的版本字符串安装特定版本，例如
5:18.09.1~3-0~ubuntu-xenial.$ sudo apt-get install docker-ce=<VERSION_STRING> docker-ce-cli=<VERSION_STRING> containerd.io -
通过运行
hello-world映像验证 Docker Engine 是否已正确安装。$ sudo docker run hello-world此命令下载测试映像并在容器中运行它。当容器运行时，它会打印一条消息并退出。
-
-
-
运行此命令以下载 Docker Compose 的当前稳定版本：
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose要安装不同版本的 Compose，请替换
1.29.2为您要使用的 Compose 版本。如果您在安装时遇到问题
curl，请参阅 上面的替代安装选项选项卡。 -
对二进制文件应用可执行权限：
$ sudo chmod +x /usr/local/bin/docker-compose
注意：如果
docker-compose安装后命令失败，请检查您的路径。您还可以/usr/bin在路径中创建指向或任何其他目录的符号链接。例如：
$ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose-
或者，安装命令完成了
bash和zsh外壳。 -
测试安装。
$ docker-compose --version
-
数据库服务
-
docker pull mongo- 换源：
https://docs.docker.com/registry/recipes/mirror/#configure-the-docker-daemon
- 换源：
-
Robo 3T
robomongo.org/download
-
$ docker run --name some-mongo -d mongo:tagsome-mongo您要分配给容器的名称在哪里，是tag指定您想要的 MongoDB 版本的标签。 -
镜像中的 MongoDB 服务器侦听标准 MongoDB 端口
27017，因此通过 Docker 网络连接将与连接到远程mongod. 以下示例启动另一个 MongoDB 容器实例，并mongo针对上述示例中的原始 MongoDB 容器运行命令行客户端，从而允许您针对数据库实例执行 MongoDB 语句：$ docker run -it --network some-network --rm mongo mongo --host some-mongo test...
some-mongo原始mongo容器的名称在哪里。- 教程使用：
docker run -d --name some-mongo -p 10050:27017 mongo:latest - 删除：
docker rm some-mongo - 停止：
docker stop some-mongo
- 教程使用：
-
关闭防火墙
- Ubuntu：service ufw stop
- 添加到放行规则：ufw allow Port 端口号
firewall-cmd --reload
- Centos：service firewall stop
- Ubuntu：service ufw stop
- Windows
- Vmware
- Hyper-V
- Mac OS
- Parallels
- Linux
- Centos 虚拟化模块
- 版本
lsb_release -auname -a
- 目录结构
- 以 Mb 为单位查看磁盘空间：
df -Th cd /ls -la
- 以 Mb 为单位查看磁盘空间：
- 文件权限
drwxr-xr-x 19 root root 4180 Aug 8 00:24 dev- 目录读写执行：d 用户权限 组权限 其它权限
- root 用户 root 组 文件大小 时间 文件名
- 硬件/性能
- 根目录
/bin- 可执行二进制文件
/etc- 配置文件
/home- 用户文件主目录
home/user- user 用户的主目录
/usr- 系统应用目录
/usr/local/- 管理员安装的软件目录
/usr/local/bin- 二进制可执行文件
/usr/local/etc- 用户安装的软件配置目录
/opt- 额外安装的可选应用程序包所放置的位置
/proc- 虚拟文件系统, 系统内存映射, 系统所有信息, Linux 一切皆是文件
- 数字是进程
- 设备/软件等进程
- 虚拟文件系统, 系统内存映射, 系统所有信息, Linux 一切皆是文件
/dev- 用于存放设备文件
/mnt- 系统管理员安装临时文件系统的安装点，系统提供这个目录是让用户临时挂载其他的文件系
/lib- 存放跟文件系统中的程序运行所需要的共享库及内核模块
/var- 用于存放运行时需要改变数据的文件
/boot- 存放用于系统引导时使用的各种文件
/sbin- 存放二进制可执行文件，只有 root 才能访问
/root- 超级用户（系统管理员）的主目录
- 创建
- 创建文件
touch [文件名]
- 创建文件夹
mkdir [文件名]
- 创建文件
- 查看
ls -al查看当前目录详情cat [文件名]查看文件
- 删除
rm [文件名]- 删除文件夹
rm -r [文件夹]递归删除rm -rf [文件夹]递归强制删除
- 写入
vim [文件名]echo "内容" >> [文件名]追加内容echo "内容" > [文件名]覆盖内容
- 下载
wget [url]
- 解压
tar [操作] [文件名]tar zxvf linux-gtk.tar.gzz：gz 压缩包x：解压缩v：显示过程f：用包名作为文件夹名
- 压缩
tar [操作] [文件名] [目录]tar zcvf linux-gtk.tar.gz linux-gtkc：压缩
-
只显示过滤的进程。
-
ps [options] | grep [options] -
ps -ef|grep docker
-
-
实时显示进程
topm：内存占用c：cpu 占用
-
停止进程
kill 9 [pid]
-
查看服务状态
service sshd status- 关闭
service sshd stoprestart
systemctl status sshd
mkdir 命令使用格式
格式： mkdir [选项] DirName
-
通过 mkdir 命令可以实现在指定位置创建以 DirName(指定的文件名)命名的文件夹或目录。要创建文件夹或目录的用户必须对所创建的文件夹的父文件夹具有写权限(了解 Linux 文件-文件夹权限请点击这里)。并且，所创建的文件夹(目录)不能与其父目录(即父文件夹)中的文件名重名，即同一个目录下不能有同名的(区分大小写)。
-
mkdir 777 /home/cc/it.dengchao.orgcp 命令使用格式
语法： cp [选项] 源文件或目录 目标文件或目录
- 该命令的功能是将给出的文件或目录拷贝到另一文件或目录中，就如同 DOS 下的 copy 命令一样，功能非常强大。
-r若给出的源文件是一目录文件，此时 cp 将递归复制该目录下所有的子目录和文件。此时目标文件必须为一个目录名。
mv 命令使用格式
语法：mv [选项] 源文件或目录 目标文件或目录
-
用户可以使用 mv 命令来为文件或目录改名或将文件由一个目录移入另一个目录中。该命令如同 DOS 下的 ren 和 move 的组合。
rm 命令使用格式
语法：rm [选项] 文件
- 在 linux 中创建文件很容易，系统中随时会有文件变得过时且毫无用处。用户可以用 rm 命令将其删除。该命令的功能为删除一个目录中的一个或多个文件或目录，它也可以将某个目录及其下的所有文件及子目录均删除。对于链接文件，只是删除了链接，原有文件均保持不变。
-r指示 rm 将参数中列出的全部目录和子目录均递归删除。
-
#客户机： ssh-keygen -t rsa -b 4096 -C "your_email@domain.com" Enter file in which to save the key (/home/yourusername/.ssh/id_rsa): Enter passphrase (empty for no passphrase): ls ~/.ssh/id_* #您已经在Ubuntu客户端计算机上成功生成了SSH密钥对。 #将公钥复制到远程服务器： ssh-copy-id remote_username@server_ip_address remote_username@server_ip_address's password: #如果由于某些原因您的本地计算机上没有ssh-copy-id实用程序，请使用以下命令复制公钥： cat ~/.ssh/id_rsa.pub | ssh remote_username@server_ip_address "mkdir - p ~/.ssh && chmod 700 ~/.ssh && cat >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys"
ubuntu git 环境搭建以及通过 SSH 连接 Github（免密码）配置
通过 yarn global add xxx 安装的模块，命令无法识别
解决：
- 使用
yarn global bin命令，获得命令所在目录 - 将获得的目录路径加入到环境变量中
Linux:
echo export PATH="\"\$PATH:$(yarn global bin)\"" >> ~/.bashrc
source ~/.bashrc或者：
# 加到PATH末尾
export PATH=$PATH:/path/to/your/dir
export PATH=$PATH:/home/ubuntu/.yarn/bin
# 加到PATH开头
export PATH=/path/to/your/dir:$PATH新的环境变量
也可以直接命名一个新的环境变量，用于其它程序引用：
export VAR_NAME=value如果只需要添加的环境变量对当前用户有效，可以写入用户主目录下的.bashrc文件：
vim ~/.bashrc要使环境变量对所有用户有效，可以修改profile文件：
sudo vim /etc/profile添加语句：
export CLASS_PATH=./JAVA_HOME/lib:$JAVA_HOME/jre/lib注销或者重启可以使修改生效，如果要使添加的环境变量马上生效：
source /etc/profile**现象描述：**Ubuntu 网络图标消失，无法联网
整体思路：
已经尝试过删除 network-manager 的缓存文件，没有解决问题。
1、删除 NetworkManager 缓存文件
service NetworkManager stop
sudo rm /var/lib/NetworkManager/NetworkManager.state
service NetworkManager start
2、修改/etc/NetworkManager/NetworkManager.conf
managed=true
3、重启 NetworkManager
sudo service network-manager restart
- 文件、资源、网络隔离
- 变更管理、日志记录
- 写时复制
- 快速部署
- 命令
docker --helpdocker logs -f [name]docker run --name imooc-mysql -e MYSQL_ROOT_PASSWORD=123456 -p 28001:3306 -d mysql- 会自动拉取镜像，忽略 tag 为最新版。
-
借助 Compose，您可以使用 YAML 文件来配置应用程序的服务。然后，使用单个命令，从配置中创建并启动所有服务。要了解有关 Compose 的所有功能的更多信息，请参阅功能列表。
-
使用 Compose 基本上是一个三步过程：
- 使用 定义您的应用程序的环境，
Dockerfile以便它可以在任何地方复制。 - 定义组成您的应用程序的服务，
docker-compose.yml以便它们可以在隔离的环境中一起运行。 - 运行
docker compose up和 cli-command 命令启动并运行你的整个应用程序。您也可以docker-compose up使用 docker-compose 二进制文件运行。docker-compose up -ddocker-compose stopdocker-compose rm
docker-compose.yml看起来像这样：
version: "3.9" # optional since v1.27.0 services: web: build: . ports: - "5000:5000" volumes: - .:/code - logvolume01:/var/log links: - redis redis: image: redis volumes: logvolume01: {}有关 Compose 文件的详细信息，请参阅 Compose 文件参考。
Compose 具有用于管理应用程序整个生命周期的命令：
- 启动、停止和重建服务
- 查看正在运行的服务的状态
- 流式传输正在运行的服务的日志输出
- 对服务运行一次性命令
- 使用 定义您的应用程序的环境，
- 注册账号
- 提交：
docker commit [container ID] [userID/tagName:tag] - 推送：
docker push [userID/tagName:tag] - 拉取：
docker pull [userID/tagName:tag]
- 提交：
- 复制文件进去
sudo docker cp ./config.json d00f6e409ca3:/app/appdata/config/- 注意这个d00f6e409ca3是docker ps -a 获取的container id
- 免费、开源、跨平台（Windows、Linux、Mac OS X，etc）
- 服务器上的 Javascript 运行环境
- 基于 Chrome v8 引擎，事件驱动、非阻塞式 I/O
npm initnpm addusernpm whoaminpm publish
- npm 常用命令和换源
新版的 nodejs 已经集成了 npm，所以之前 npm 也一并安装好了
$ npm -v
#升级
$ sudo npm install npm -gnpm 安装 Node.js 模块语法格式如下：
$ npm install <Module Name>
$ npm install express全局安装与本地安装
npm install express # 本地安装
npm install express -g # 全局安装
# 设置代理为空
$ npm config set proxy null通过 require() 来引入本地安装的包。
查看所有全局安装的模块：
$ npm ls -g
卸载 Node.js 模块：
$ npm uninstall express
更新模块：
$ npm update express
搜索模块：
$ npm search express
创建模块：
$ npm init
$ npm adduser
$ npm publish
- name - 包名。
- version - 包的版本号。
- description - 包的描述。
- homepage - 包的官网 url 。
- author - 包的作者姓名。
- contributors - 包的其他贡献者姓名。
- dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
- repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
- main - main 字段是一个模块 ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后 require("express")。
- keywords - 关键字
npm install 在安装npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件
{
"dependencies": {
"vue": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.2.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}dependencies是运行时依赖，devDependencies是开发时的依赖。
默认安装到运行时依赖。 -D 重新安装会自动移动到devDependencies，再 -S 无法移动回去，需要先卸载。
npm install name -save-dve 简写（npm install name -D） 自动把模块和版本号添加到devdependencies。
npm install name -save 简写（npm install name -S） 自动把模块和版本号添加到dependencies。
- REST--REpresentational State Transfer 英语的直译就是“表现层状态转移”。
- Resource-based：资源，即数据。
- Representational：某种表现形式，比如用 SON，XML，JPEG 等
- StateTransfer：状态变化。通过 HTTP 动词实现
- 客户端 - 服务端
- 通过将用户界面，让数据与存储分开，通过简化服务器组件来实现跨多平台的应用
- 无状态，可缓存
- C->S 包含理解请求所需的所有信息。
- 统一接口
- 语义化接口
- 定义数据类型
- RESTful api 即为 REST 风格的 /REST 特点的应用接口。
- 插件类
- Postman，dhc，rest client
- 平台类
- Yapi，DOClever，RAP2，Easy Mock，Swagger
- 终端类
- Postman，SoapUI，doclever
- 模拟真实接口
- 实现效率开发，前后台同步，特别是分布式的系统
- 虚拟业务场景
- 某些开发场景非常难触发，还有一些异常逻辑、交互逻辑
- 压力测试
- Mock 数据开发流程介绍
- 前端定义接口
- 完成静态页面
- 完成 UI 交互
- 对接真实接口
- 页面/逻辑测试
- 线上部署
建议使用docker-compose进行容器的管理
version: "2"
services:
DOClever:
image: lw96/doclever
restart: always
container_name: "DOClever"
ports:
- 10000:10000
volumes:
- /本地路径/file:/root/DOClever/data/file
- /本地路径/img:/root/DOClever/data/img
- /本地路径/tmp:/root/DOClever/data/tmp
environment:
- DB_HOST=mongodb://mongo:27017/DOClever
- PORT=10000
links:
- mongo:mongo
mongo:
image: mongo:latest
restart: always
container_name: "mongodb"
volumes:
- /my/own/datadir:/data/db
对上面代码的说明：
volumes：代表着把容器中的数据挂载到你本地路径，本地路径
environment: 环境变量。 (1)DB_HOST：可以使用自定义数据库地址，或者使用容器中的mongodb (2)PORT：中设置的端口号10000为容器中的端口（尽量不变，只修改容器暴露的端口号，即ports下面的端口），而外部的端口可以自定义。
ports:容器暴露的实际端口 比如： ports:
自己想设置的端口:10000
- 启动命令
docker run -it -d --name doclever -p 10000:10000 \
-e DB_HOST=mongodb://localhost:27017/DOClever \
-e PORT=10000 \
-e DB_FILE=/root/DOClever/data/file \
-e DB_IMG=/root/DOClever/data/img \
-e DB_TEMP=/root/DOClever/data/tmp \
-v /srv/doclever/file:/root/DOClever/data/file \
-v /srv/doclever/img:/root/DOClever/data/img \
-v /srv/doclever/tmp:/root/DOClever/data/tmp \
lw96/doclever:latest-ubuntu
- 配置文件
1 rersion: "3.9" # optional since v1.27.0
2 services:
3 DOClever:
4 image: lw96/doclever
5 restart: always
6 container_name: "DOClever"
7 ports:
8 - 10000:10000
9 volumes:
10 - /srv/doclever/file:/root/DOClever/data/file
11 - /srv/doclever/img:/root/DOClever/data/img
12 - /srv/doclever/tmp:/root/DOClever/data/tmp
13 environment:
14 - DB_HOST=mongodb://mongo:27017/DOClever
15 - PORT=10000
16 links:
17 - mongo:mongo
18 mongo:
19 image: mongo:latest
20 restart: always
21 ports:
22 - "27017:27017"
23 container_name: "mongodb"
- 防火墙开放端口
- 管理总后台登录：默认密码：
DOClever - 使用方法：
- postman 测试：
- DOClever 中 Mock 数据开发使用简介
- 拦截 Ajax 请求，按要求生成随机数据
- 安装和使用-官方文档
- 引入文件，写在 JS 代码里拦截。
集成开发环境（IDE，Integrated Development Environment）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。
- 外观
- 智能
- 插件
- 设置
- VScode 快捷键：ctrl+p, >key, 快捷键参考
- 调试
快捷方式和终端启动：
- Chrome +Android/ Safari iOS
- 真机连接调试
- Fiddler（win） /Charles（mac）
- 劫持调试
- 类似于控制台 Network
- Weinre, Spy-Debugger, vConsole
效率是检验工程师的重要指标之一，如何提高开发效率，从前端工程化工具着手。本周学习实际工作中两大利器 Webpack 与 Gulp，并使用 Yeoman 搭建自己的脚手架工具，让自己和团队的开发效率翻倍。 课程安排：
- 前端工程化是指将前端开发的流程规范化、标准化，
- 包括开发流程、技术选型、代码规范、构建发布等，
- 用于提升前端工程师的开发效率和代码质量。
- 复杂度高：前端项目的多功能、多页面、多状态、多系统
- 规模大：团队开发，多人协作，代码质量管理
- 要求高：页面性能优化（CDN 异步加载/倩请求合并），CSS 兼容性、单页面应用、服务端渲染...
-
从业务着手
- 简单的单页面应用，使用 gulp 打包+同步工具实现开发全流程
-
从复杂度考虑
- jenkens git/gitlab webpack React/Vue/Angular
-
从已知向未知扩展
- 不同的技术有不同的适应点，选择适合的才是最好的
-
考虑
- 前后端技术是否更好的融合
- 前后端分离，接口安全性
- vue 或 react 是否适合制作静态页面
- php 是否更好的集合
-
最佳实践
- 组件化/脚手架/工程 Cli 工具
- Git flow
- webpack
- Jenkins+docker
打包工具：
- 入口
- 输出
- Loader
- babel
- 处理非 JS 文件
- 插件
- HtmlWebpackPlugin
- 模式/兼容性
- webpack 支持所有符合 ES5 标准的浏览器（不支持 I8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。
- 如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要提前加载 polyfill
- 在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用
npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用npm install --save-dev。
mkdir webpack-demo
cd webpack-demo
npm init -y # 快速创建 node.js 项目
npm install webpack webpack-cli --save-dev
# npm install webpack webpack-cli -D # -D --save-dev 开发模式，不会打包
# 全局安装
npm install webpack webpack-cli -g # -g 全局安装
yarn add webpack -webpack-cli -D
yarn global add webpack -webpack-cli -D-
全局安装可直接使用
webpack -
在
package.json输入，使用npm run build运行 webpack{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^5.50.0", "webpack-cli": "^4.7.2" } }
npx会帮你执行依赖包里的二进制文件。npx webpack --version
# 项目的根目录下执行
$ node-modules/.bin/mocha --version
# npx 就是想解决这个问题，让项目内部安装的模块用起来更方便
$ npx mocha --version
# 由于 npx 会检查环境变量$PATH，所以系统命令也可以调用。
# 等同于 ls
$ npx ls
# 除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。
$ npx create-react-app my-react-app
# 上面代码运行时，npx 将create-react-app下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。VSCode Remote-SSH 连接远程服务器完成开发/编辑文件
Linux 环境下的 VSCode，执行命令为code
打开文件 code file_name
打开文件夹 code dir_name，不过会在新的 VSCode 窗口打开。
在本地终端输入一行指令即可打开远程文件。具体为
code --remote ssh-remote + <remote_name> <remote_path>其中，remote_name为在.ssh/config中配置的远程服务器别名，remote_path为要打开的远程服务器上的绝对路径。
-
入口
-
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是
./src/index.js，但你可以通过在 webpack configuration 中配置entry属性，来指定一个（或多个）不同的入口起点。 -
webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js', }
-
-
输出
-
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是
./dist/main.js，其他生成文件默认放置在./dist文件夹中。你可以通过在配置中指定一个
output字段，来配置这些处理过程：webpack.config.js
const path = require('path') module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js', }, }
-
-
关键词 entry，output
- webpack 配置文件
webpack.config.js
- webpack 配置文件
-
Node 的路径相关：
- Path 模块的使用使用 require 进行引入，
- webstorm 配置 node core
-
Output 中的
path需要使用绝对路径path.join去拼接路径，Nodes 全局变量__dirname
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。
loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
注意，loader 能够
import导入任何类型的模块（例如.css文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中，loader 有两个属性：
test属性，识别出哪些文件会被转换。use属性，定义出在进行转换时，应该使用哪个 loader。
webpack.config.js
const path = require('path')
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
}以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：
“嘿，webpack 编译器，当你碰到「在
require()/import语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先 use(使用)raw-loader转换一下。”
首先安装相对应的 loader：
npm install --save-dev css-loader ts-loader
然后指示 webpack 对每个 .css 使用 css-loader，以及对所有 .ts 文件使用 ts-loader：
webpack.config.js
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
],
},
};
$ npm install css-loader style-loader -D
$ npm install sass-loader node-sass -D
# npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs- 浏览器缓存了脚本，导致看不到修改：
<script src="main.js"></script>- 在控制台 network 里禁用缓存
webpack 最出色的功能之一就是，除了引入 JavaScript，还可以通过 loader 或内置的 Asset Modules 引入任何其他类型的文件。也就是说，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。
模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。
-
打包优化，资源管理，注入环境变量。
-
想要使用一个插件，你只需要
require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。 -
你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用
new操作符来创建一个插件实例。
html-webpack-plugin
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
index: './src/index.js',
print: './src/print.js',
},
plugins: [
new HtmlWebpackPlugin({
title: '管理输出',
filename: 'index.html',
template: './src/template.html',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
}package.json
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"serve": "webpack serve"
},HMR 的启用十分简单，一个带有热更新功能的 webpack.config.js 文件的配置如下：
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
index: './src/index.js',
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
hot: true,
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/template.html',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
}src/index.js
if (module.hot) {
module.hot.accept()
}mode: 'development',
$ yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
$ yarn add @babel/runtime -S-
- 清除构建文件
- 已经不需要，使用：
clean: true,
output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), clean: true, },
-
- 复制资源文件
- 已经不需要，webpack5 默认自动复制
webpack v4+ will minify your code by default in
production mode.
注意，虽然生产环境下默认使用 TerserPlugin ，并且也是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件：
如果决定尝试一些其他压缩插件，确保新插件也会按照 tree shake 指南中所陈述的具有删除未引用代码(dead code)的能力，并将它作为 optimization.minimizer。
- 如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。webpack v5 自带最新的
terser-webpack-plugin。如果使用 webpack v4，则必须安装terser-webpack-pluginv4 的版本。
CSS 生产模式压缩
$ yarn add css-loader style-loader sass-loader sass -D
$ yarn add mini-css-extract-plugin css-minimizer-webpack-plugin -D-
为了压缩输出文件，请使用类似于 css-minimizer-webpack-plugin 这样的插件。
就像 optimize-css-assets-webpack-plugin 一样，但在 source maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。
-
首先安装
mini-css-extract-plugin
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
hot: true,
},
optimization: {
minimize: true, // 开发环境下启用 CSS 优化
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
new CssMinimizerPlugin(),
new TerserPlugin(),
],
},
module: {
rules: [
{
test: /.s?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
loader: 'babel-loader',
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/template.html',
}),
// 生成css文件
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
}易于使用 构建快速 插件系统 易于学习
- 或者 gulp-clean
npm install -D browser-sync- gulpfile.js
const { src, dest, series, watch } = require('gulp')
const browserSync = require('browser-sync').create()
// 压缩js
function js(cb) {
console.log('Hello scripts!')
// [gulp-uglify]
src('js/*.js')
.pipe(dest('./dist/js'))
.pipe(browserSync.reload({ stream: true }))
cb()
}
// 压缩scss
function css(cb) {
// gulp-sass
console.log('Hello styles!')
src('css/*.css')
.pipe(dest('./dist/css'))
.pipe(browserSync.reload({ stream: true }))
cb()
}
// 监听文件变化
function watcher(cb) {
watch('js/*.js', js)
watch('css/*.css', css)
cb()
}
// 删除dist目录内容
function clean(cb) {
// gulp-dest-clean
console.log('clean!')
cb()
}
// server 任务 // Static Server + watching scss/html files
function serve(cb) {
browserSync.init({
server: './',
})
cb()
}
exports.scripts = js
exports.styles = css
exports.clean = clean
exports.default = series([clean, js, css, serve, watcher])npm install -g yo
- 生成脚手架项目
npm install -g yo generator-generatoryo generator
- 已经上传到 npm 的脚手架
全局 yo 命令安装，安装命令 yo< package>
- 脚手架的名称是 generator-打头，如：yo brian-imooc
使用 generator-generator 快速创建脚手架生成项目
-
全局安装
npm install-g generator-generator -
bower=false
使用 npm 进行发布
- link 命令本地测试，发布时设置 npm registry
跟上企业需求的步伐，本周从 MVVM 框架基础讲起，让您拥有组件化思想，掌握目前流行的 Vue 框架进阶应用。重点不仅在于应用，也在于原理，做到知其然，知其所以然。 课程安排：
- 定义
- MVVM（Model-view-viewmodel）是一种软件架构模式
- 双向绑定的原理，使用到 Object.defineproperty
- 组成部分
- 模型、视图、视图模型
- MVVM（Model-view-viewmodel）是一种软件架构模式
npm install -g @vue/cli
# OR
yarn global add @vue/cli
npm install -g @vue/cli-service-globalvue create hello-world
# 空格键选择
vue create vue-begin # 使用上次保存的预设模板可视化创建项目
chrome 打开网页默认显示中文：
chrome://settings/?search=%E8%AF%AD%E8%A8%80
中文→移到顶部
-
链式操作 (高级)
- 修改 Loader 选项
// vue.config.js module.exports = { chainWebpack: (config) => { config.module .rule('vue') .use('vue-loader') .tap((options) => { // 修改它的选项... return options }) }, }
- 添加一个新的 Loader
// vue.config.js module.exports = { chainWebpack: (config) => { // GraphQL Loader config.module .rule('graphql') .test(/\.graphql$/) .use('graphql-tag/loader') .loader('graphql-tag/loader') .end() // 你还可以再添加一个 loader .use('other-loader') .loader('other-loader') .end() }, }
- #替换一个规则里的 Loader
如果你想要替换一个已有的基础 loader，例如为内联的 SVG 文件使用
vue-svg-loader而不是加载这个文件：// vue.config.js module.exports = { chainWebpack: (config) => { const svgRule = config.module.rule('svg') // 清除已有的所有 loader。 // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear() // 添加要替换的 loader svgRule.use('vue-svg-loader').loader('vue-svg-loader') }, }
- #修改插件选项
// vue.config.js module.exports = { chainWebpack: (config) => { config.plugin('html').tap((args) => { return [ /* 传递给 html-webpack-plugin's 构造函数的新参数 */ ] }) }, }
告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 <url>。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true,
},
'/foo': {
target: '<other_url>',
},
},
},
}Vetur can't find tsconfig.json or jsconfig.json in /home/ubuntu.
简要说明
main.js主入口，router.js路由划分plugins自己或第三方插件,包括但不限于 components、directives、filters、third libpages所有路由页面。原则：轻 page，重 componentcomponents所有组件。包括原子组件、业务公用组件、页面独有组件serverapi 引入入口assetssass、图片资源入口，不常修改数据utils工具文件夹store标准 vuex 格式，非必须
#详细说明
project
└───src
│ │ app.vue // 主页面
│ │ main.js // 主入口
| | router.js // 所有路由
│ │
│ |____assets // css、image、svg等资源
│ | |____css // 所有sass资源
| | | | reset.scss // 兼容各浏览器
| | | | global.scss // 全局css
| | | | variable.scss // sass变量和function等
│ | |____img // image图标库
| | |____svg // svg图标库
| |
| |____components // 组件
│ | |____common // common自注册组件
│ | |____base // 原子组件(如果是引入第三方，该文件夹可省略)
│ | | ... // 业务公用组件
│ | |____entity // entity页面组件
│ | |____about // about页面组件
| |
| |____pages // UI层(原则：轻page，重component)
| | |____entity
| | | | list.vue // 列表页
| | | | create.vue // 新增页
| | | | edit.vue // 修改页
| | | main.vue
| |
| |____plugins // 自己或第三方插件
| | | index.js // 插件入口文件
| | | directives.js // 所有Vue指令
| | | filters.js // 所有Vue过滤
| |
| |____server // 接口层
| | | index.js // 所有接口
| | | http.js // axios二次封装
| |
| |____store // vuex数据
| | | index.js
| |
| |____utils // 工具层
| | | config.js// 配置文件，包括常量配置
|
└───public // 公用文件，不经过webpack处理
│ │ favicon.ico
│ │ index.html
│ vue.config.js // vue-cli3主配置
│ babel.config.js// babel配置
│ .eslintrc.js // eslint配置
│ .prettierrc.js // perttier配置
│ package.json // npm配置
│ README.md // 项目说明
在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。
如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool property：
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
}// launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
{
"type": "firefox",
"request": "launch",
"name": "vuejs: firefox",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
}
]
}不能同时使用 VSCode 调试和 devtool
控制台输入
this.msg
"Welcome!"
Autoload vuex state on
- 组件化是指将页面的功能模块进行拆分，封装。
- 组件代码包含了组件所有的功能代码与样式。
- 组件化的作用是复用、高可维护；
- 组件化不局限于前端代码，而是一种设计思想。
- 独立功能模块（松耦合、扁平化、提炼精华）
- 独立的状态变化（统一的状态管理）
- 从上而下的逻辑思考，从下而上的组件拆分
- 传统开发 vs 单页面应用
- 代码维护&代码管理&代码规范
- 组件通信、组件传参
- vue.js 组件组成 （template，script，style）
- 模板语法（文本、属性）、条件渲染 v-if、列表渲染 v-for
- 事件处理 v-on（@简写）、计算属性 computed
Vue.js 核心组件
- 路由组件 Vue-Router
官方文档+vue 基础应用教程
单向数据流及状态管理 Vuex
是否还在为选择使用什么框架而苦恼？是否还在为学习哪个前端框架而纠结？本周将给您满意的答案，有 UI 和 JS 框架对比与选型，有 Node.js 进阶使用、Web 框架如何开发 RESTful 接口等。 课程安排：
- 类库：JQuery，Lodash（Underscore）
- JS 库： React, Vue, Angular, Ext JS, Backbone
- 工具：Webpack（Build），Jest（Test），EsLint（Lint）， Template（ES）
- 应用类：（Echarts/D3/three）
框架与库的区别
- 框架：框架主动调用用户代码，包含库
- 库：功能模块集合，需用户主动调用
- 判断使用场景（PC，移动 Web，小程序，响应式）
- 组件丰富，成熟的模板，方便集成
- 成熟的社区，成熟的生态
已淘汰
更新频率低，部分收费
企业推荐使用，内容丰富
https://antdv.com/docs/vue/introduce-cn/
推荐使用，较轻量
https://element.eleme.cn/#/zh-CN
Vuetify 是建立在 Vue.js 之上的完备的界面框架。
个人项目推荐
Mint UI
Cube UI
Vant
推荐使用
https://vant-contrib.gitee.io/vant/#/zh-CN/
- 团队的技术能力
- 应用场景（后台？性能要求？时间要求？）
- 成熟的社区，成熟的生态
Vue 的 Star 数量最多，成长最快，但是主要还是国内使用的多
主要原因：方便集成、学习成本低
- 根据团队技术能力选择框架，按需取用
- 了解框架背后的原理，并思考如何自己实现一个 JS 框架
- 多读文档，求助社区，高效开发
$ npm i koa -S
$ npm i koa-router -S
洋葱模型
- 路由：koa-router
- 协议解析：koa-body
- 跨域处理：@koa/cors
格式化返回的 JSON 数据
npm i koa-json -S
- 常见的 GET/POST
- 统一的数据处理
- 接口调试及日志输出
- 按照功能模块进行区分
- 路由压缩（合并，避免多次 use）：
koa-combine-routers - 静态资源：
koa-static - 安全请求头：
koa-helmet
-
热加载，监视文件变化，自动刷新：
npm install -g nodemon- 配置 package.json -> script ->
nodemon index.js
- 配置 package.json -> script ->
-
安装 Webpack，见前面章节
npm i -D webpack-node-externals babel/core babel/node babel/preset-env babel-loader cross-env
-
配置完就可以使用 ES6 语法，由 babel 转换为 ES5
-
nodemon 默认 common.js 语法，ES6：
nodemon --exec -
配置 webpack.config.js -> script ->
{ "start": "nodemon --exec babel-node src/index. js", "webpack:debug": "node --inspect-brk ./node_modules/bin/webpack --inline --progress" // chrome调试webpack配置 } -
可以在 VSCode 里调试 webpack 配置，或者 node.js 代码
-
-
检查更新包：
npm-check-updates- 查看可更新：
ncu - 更新：
ncu -u to upgrade package.json - 删掉 nodemodules 文件夹，再安装。或者卸载更新过的包。
- 查看可更新：
-
整合中间件：
koa-compose- 传中间件数组
-
代码压缩：
koa-compress -
设置不同环境的 webpack 配置：
webpack.config.base.js webpack.config.dev.js webpack.config.prod.js- 根据环境变量，自动切换配置插件：webpack.DefinePlugin()
- 合并配置文件：
webpack-merge- 设置合并条件
-
压缩 JS 代码：TerserWebpackPlugin，生产环境默认，见前章。
-
避免重复依赖插件：SplitChunksPlugin
// package.json
"scripts": {
"start": "nodemon --exec babel-node src/index. js",
"webpack:debug":"node --inspect-brk ./node_modules/bin/webpack --inline --progress",
"build": "cross-env NODE_ENV=prod webpack --config config/webpack --config.prod.js"
}
可以不使用 webpack，只用 babel 兼容新语法。
不需要整合成一个 JS 文件。
后端不一定需要压缩。
- 布局：
- flex
- float
- vue 框架
- 路由
- 懒加载
- 组件拆分
- 路由
- 业务模块：
- 登录
- 输入验证
- 拦截非正常请求
- 注册
- 输入验证
- 拦截非正常请求
- 用户基本信息
- 找回密码
- 邮件服务
- NodeMailer
- 短信
- 密码提问
- 邮件服务
- 登录
- 功能需求，需求拆解
- 用户输入验证
- 拦截非正常的登录请求
- 登录验证（验证机制）：token
- 流程图及原型图的绘制
- 形成文档
流程图：
原型图：
使用其它框架
npm i svg-captcha
- Vue 使用 axios 请求验证码
https://github.com/produck/svg-captcha/blob/HEAD/README_CN.md
npm install vuelidate --save
或者
VeeValidate // 这个更好用
https://vee-validate.logaretm.com/v4/
npm i nodemalter
- 邮件服务注意
- 使用客户端授权码，QQ 邮箱 14 天限制
- 公共邮箱限制了发送频次、数量、群发
- 邮件服务：阿里云/亚马逊/SES/Sendcloud
npm install moment
前章 webpack 相关内容，使用 vue.config.js 配置 webpack
devserver: {
proxy: "http://locathost:3000"
}
前端解决跨域
总结：
- 公共邮箱限制，使用授权码
- 开发接口 Api：业务->路由->测试接口->前端页面
- devServer 处理开发过程中的跨域问题
项目开发过程中，少不了团队协作，那团队协作有哪些可以提升效率？团队协作第一弹：从文档管理、版本控制开始，我们了解 Git flow 和文档的管理办法，搭建团队的文档管理工具，提升工作效率。 课程安排：
- 文档管理
- 文档分类
- 接口
- 项目
- 需求
- 标准类（规范）
- 文档管理工具
- 协同工具
- 国内（GoogleDoc）
- 国外（石墨）
- 接口文档
- ShowDoc（本地部署）
- 其它
- gitbook
- blog（hexo）
- 注释产出 Api 文档（swagger、apidoc）
- mock（rap、apijson）
- 功能分类
- 协同
- 版本控制
- 在线编辑
- 文件保存
- 分享
- 本地化部署
- 协同工具
- MarkDown
- 语法
- 工具
- Typora
- 文档分类
- 版本管理
- 缺陷控制
- 自动化
- 接口模板、分组
- 权限控制、团队协作
- 版本控制、本地部署
推荐使用
- 数据字典、接口模版
- 团队协作
- 免费开源
本地化部署：https://showdoc.cc
Docker 方式安装
- 搭建自己团队的接口管理平台
笔记：git_notes
- 从零配置 github 到 SSH 秘钥克隆仓库
- 必须使用 dev 分支
- 复杂度高：hotfix 与 release 分支
- 多次 Merge 合并
- 适用于持续集成多环境场景
- 上游分支向下游发展
- 流程：Bug-> New branch-> master->pre branch->target branch
- 适用于版本项目
- 稳定版本从 maste 检出 bug 修复在分支
- 流程：master-> Stable->new branch->bug fix->version
- Docker，Docker-compose 快速创建
- 两份 gitlabl 的 docker-compose 配置文件（官方/github）
- 配置 gitlab，备份/还原
- 其他：邮件配置、Https 配置
- 以组为单元，设置管理员
- 熟悉 Merge Request，写好 git commit
- 及时回收权限，或者设置过期时间
项目质量决定了项目的命运，如何做好缺陷控制，是每个团队非常头疼的问题。本周学习团队协作第二弹：缺陷控制及前端自动化流程，使用容器技术配置自动化/持续集成环境，进一步提升团队效率。 课程安排：
- 缺陷控制概念及基本方法（方法论）
- 常见问题
- 需求变更频繁
- 无代码 Review
- 团队各自为战
- 工期太紧
- 最佳实践
- 路径
- 质量
- 成本
- 人工
- 时间
- 资源投入
- 进度
- 分析原因
- 解决办法
- 成本
- 质量
- 改进
- 返工
- 沟通
- 进度
- 赶工
- 资源协调
- 客户沟通
- 压缩工期
- 路径
- 常见问题
- 项目质量/进度管理工作流（扩展视野）
- 需求阶段
- 开发阶段
- 运维阶段
- 三类缺陷控制工具介绍（具体做法）
- teambition
- Trello
- worktfile
- Jira
- 软件开发
- 需求不明确（返工）：沟通/督办
- 需求经常变化
- 需求文档不清晰
- 客户未确定需求
- 内部反推动的工作风气
- 功能模块未讨论清楚，分工不具体，人员未指定。
- 进度有超期（加班）：缺陷跟踪
- 经常项目上线加班
- 经常前期推不动，重度依赖 UI 设计、产品经理
- 无人 Push 放风式管理
- 自驱力不足
- 工程有 Bug（难维护）：代码 Lint/规范
- 无代码风格指南
- 无代码质量监测
- 测试流程紊乱
- 没有自动化测试闭环
- 发布环境/测试环境
- 协同有问题（效率低）：清单/待办
- 项目经理太忙
- 项目经理经验不足
- 有想法的人太多
- 没有具体的分工
- 缺少协同工具，人员的协同能力不同
- 需求不明确（返工）：沟通/督办
- 缺陷控制就是在项目全生命周期中，保障项目质量的一系列行为。
- 缺陷跟踪系统/软件是被设计用来帮助质量保证和程序员在工作中维护软件缺陷的跟踪报告，或者称作问题跟踪管理系统。
- 主要的作用是提供集中概览、开发状态、提供报告。
- 案例分析
- 小公司团队/扁平管理/项目外包/业务多样简单
- 无章办事/代码优化/代码质量
- 传统团队/二级公司/流程冗长/务多样复杂
- 督办意识/工具看板/经轻重缓急
- 中大型公司/KP 驱动/技术单一/业务重复度高/技术深入
- 意识薄弱/形同虚设/领导意识/团队意识
- 小公司团队/扁平管理/项目外包/业务多样简单
- 流程介绍
- 代码
- 自检代码
- 质量监控
- 版本控制
- 代码风格
- Snippets
- 团队
- 互相监督
- 意识形态
- 定期培训/自检
- 分工明确
- 协同待办
- 代码 Review
- 项目
- 制定计划
- 项目经理 Push
- 版本控制
- 协商沟通
- 定期检验
- 纠正措施
- 备选方案
- 公司
- 缺陷管理软件
- 公司流程
- 奖惩有度
- 抽样检查
- 质量改进
- 总结推演
- 代码
-
代码类：ELint、JSLint、StyleLint
-
流程类：Jira、禅道、Redmine
-
工具类（协同）：Trello、Teambition、钉钉、石墨
- 分析：功能模块->开源解决方案->业务闭环
- 资源配备：初步需求->产品经理+U 设计+程序员->开发系统
- 运营维护：公司级的运营->专门团队->运维
是个看板 todolist
都收费。
Trello 轻量
Teambition 更复杂、功能多
禅道是专业的研发项目管理软件
Jira 本地部署
ESLint 安装&初始化
参考官网
http://eslint.cn/docs/user-guide/getting-started
- Nodes 版本>6.14，npm 版本>3
npm install -D eslint，然后npx eslint--init- 初始化配置文件基本概念：
- env、extends、globals、rules 等
ESLint 规则及配置方法
参考官网
http://eslint.cn/docs/user-guide/configuring
- 规则分三种等级：off（0）关闭、warn（1）警告、error（2）强制
- 在 eslint 配置文件中配置 rules，对应不同类型的规则
- 在行內书写规则，需要写在
/*eslint…*/
ESLint 配合 IDE 进行使用（VSCode&Webstorm）
- VSCode 需要下载插件+ ELInt 库使用，Webster 不用
- VSCode 设置 Autofⅸx 自动修复/Webstorm 使用全文修复
- VSCode 使用 sync 插件同步
3、4、5、6、7 缺失，第 8 周缺失
Docker 仓库的进阶使用，搭建私有 Docker 仓库，并配置 Jenkins 的前后端自动化流程，感受自动化构建的魅力。 课程安排：
本周带您解开数据之谜，学习 NoSQL 数据库与数据库设计原则。让您带着设计思维去设计项目数据库，搞定 Redis 服务搭建与集成，完成具备鉴权功能的登录页面后端开发，综合应用 Koa 中间件。 课程安排：
- NoSQL 数据库设计
- 错误的设计
- 冗余记录
- 糟糕的索引
- 所有域值
- 错误的命名约定
- 糟糕的文档
- 用字符来存日期
- 设计原则
- 设计工具
- 错误的设计
- MongoDB 安装、配置、GU 具
- Nodejs 中的 Mongoose 库
- 易扩展，高性能，高可用
- 较容易映射复杂数据（key-value）
- 无事务特性要求（ACID 特性）
- 原子性
- 一致性
- 隔离性
- 持久性
数据库相关概念
- 关系型数据库，是指采用了关系模型来组织数据的数据库。
- NoSQL 是对不同于传统的关系数据库的数据库管理系统的统称。
- 常见场景及设计方法（内嵌、父/子引用、反范式）
- 双向关联的场景及设计原则
内嵌
内嵌是指存在关联关系的文档，放在同一文档中，以数组的形式存放。
JSON 格式
- 内嵌设计
- 减少了关联查询
- 适合于单类需要描述的属性
- 不经常变化的属性（扩展、嵌套关联）
父/子引用
父引用是指存在一对多的情况中，放在同一文档中，以数组的形式存放。
子引用是指存在一对非常多的情况中，由于数据库文档存放限制，这个时候进行反向引用。
- 父子引用设计
- 引用数据内容是否非常多
- 引用数据量是否非常庞大，而且在增加
- 数据是否需要单独访问
反范式
范式是指按既定的用法，范式就是种公认的模型或模式。
反范式->不走寻常路
- 反范式设计
- 是否有提升性能的区间
- 数据量的变化是否非常庞大，庞大到更新会异常低效
- 先考虑读写比，才考虑反范式
- 备份方式：docker cp，mongodump
- 恢复方式：docker cp，mongorestore
var mongoose = require('mongoose')
//连接数据库
mongoose.connect('mongodb://localhost:27017/mongo')
//使用模型
var Schema = mongoose.Schema
//设计集合结构
//字段名称就是表结构中的属性名称
//约束是为了文档完整性
var blogSchema = new Schema({
title: String,
author: String,
body: String,
comments: [{ body: String, date: Date }],
date: { type: Date, default: Date.now },
hidden: Boolean,
meta: {
votes: Number,
favs: Number,
},
})
var userSchema = new Schema({
username: {
type: String,
required: true, //必须有
},
password: {
type: String,
required: true,
},
email: {
type: String,
},
})
//将文档架构发布为模型
//mongoose.model 是架构发布模型
//第一个参数: 传入一个大写名词单数 字符串来表示你的数据库名称
//第二个参数： 架构Schema
//返回值： 模型对象、模型构造函数
var User = mongoose.model('User', userSchema)
//使用这个模型构造函数操作 users 集合中的数据--增删改查
//********************
//新增数据
var admin = new User({
username: 'admin',
password: '123',
email: 'ads@admin.com',
})
admin.save(function (err, ret) {
if (err) {
console.log('保存失败')
} else {
console.log('保存成功')
console.log(ret)
}
})
//********************
//********************
//查询所有数据
User.find(function (err, ret) {
if (err) {
console.log('查询失败')
} else {
console.log('查询成功')
console.log(ret)
}
})
//查询所有指定条件数据
User.find(
{
username: 'sda',
password: '789',
},
function (err, ret) {
if (err) {
console.log('查询失败')
} else {
console.log('查询成功')
console.log(ret)
}
}
)
//查询单个指定条件数据
User.findOne(
{
username: 'admin',
},
function (err, ret) {
if (err) {
console.log('查询失败')
} else {
console.log('查询成功')
console.log(ret)
}
}
)
//********************
//********************
//删除数据
User.remove(
{
username: 'admin',
},
function (err, ret) {
if (err) {
console.log('删除失败')
} else {
console.log('删除成功')
console.log(ret)
}
}
)
//********************
//********************
//修改、更新数据 #region
User.findByIdAndUpdate(
'5c3732d30585fd1de0843b50',
{
password: '456',
},
function (err, ret) {
if (err) {
console.log('修改失败')
} else {
console.log('修改成功')
console.log(ret)
}
}
)
var q = { username: 'admin' }
User.findOneAndUpdate(
q,
{
$set: {
password: 'admin',
},
},
{
returnNewDocument: true,
},
function (err, doc) {
if (err) {
console.log('修改失败2')
} else {
console.log('修改成功2')
console.log(doc)
}
}
)
//********************Redis 是完全开源免费的，遵守 BSD 协议，是一个高性能的 key-value 数据库。 Redis 与其他 key-value 缓存产品相比：支持数据的持久化，多数据结构 list，set，zset，hash 等的存储支持数据备份。
- 高性能，可持久化
- key-value 结构，支持多种数据类型
- 支持事务，数据的原子性（要么不做/做）
Redis 应用场景
- 缓存（读写性能优异）
- 计数&消息系统（高并发、发布/阅阻塞队列功能）
- 分布式会话 session&分布式锁（秒杀）
Redis vs Mongo
- 存储方式不一样：key-value vs Document
- 使用方式&可靠性不一样：MongoDB SQL&ACID 支持
- 应用场景不一样：高性能缓存 ⅴs 海量数据分析
docker 内安装
参考 docker hub
- 手动方式安装（适合不熟悉 Docker/无 Docke 环境）
- Docker 方式安装（推荐）
- 配置 redis.conf，缓存 Fredis 数据（生产需要）
http://www.redis.cn/documentation.html
select 多个数据库
命令查询：http://doc.redisfans.com/
常见命令
- 设置/取值（String，Hash，List，Set）
- 发布者/阅者
- 服务器相关（config，client list，slowlog）
GUI 工具
- RediS gui 具推荐：Another Redis DeskTop Manager（免费）
- Medis（收费，可自构建）
- Redis desktop Manager（收费）
使用笔记：
https://github.com/Eished/node_blog_notes#redis
- 超时设置 retry
- 自动根据数据类型使用 set、get 和 hset、hget
导学
- 核心概念（鉴权方式，加密/解密，Https）
- jwt
- session/cookie
- oAuth2.0（第三方登录）
- JWT 工作原理
- Nodejs 集成 JWT
章目标
- 理解鉴权/加密/Https 等核心概念
- 熟悉常见的鉴权方式（JWT、session）及优缺点
- 使用 JWT 方式开发登录鉴权模块，设计相应接口
Session/Cookie
- 优点：
- 较易扩展
- 简单
- 缺点：
- 安全性低
- 性能低，服务端存储
- 多服务器同步 session 困难
- 跨平台困难
JWT
- 优点：
- 易扩展
- 支持移动设备
- 跨应用调用
- 安全
- 承载信息丰富
- 缺点：
- 刷新与过期处理
- Payload 不宜过大
- 中间人攻击
Oauth
- 优点：
- 开放
- 安全
- 简单
- 权限指定
- 缺点：
- 需要增加授权服务器
- 增加网络请求
JWT 的全称是 JSON Web Token。
JWT 由三部分构成：
- Header：加密方式，token 类型
- Payload：用户信息
- Signature：base64 值
JWT 特点
- 防 CSRF（主要是伪造请求，带上 Cookie）
- 适合移动应用
- 无状态，编码数据
好处：
- 易于水平扩展
- 易于使用
- 更加灵活
- 更加安全
- 内置过期时间功能
- 无需询问用户「本网站使用 Cookies」
- 防止 CSRF 攻击
- 更适用于移动端
- 适用于阻止 Cookies 的用户
无状态 JWT Tokens 无法被单独地销毁或更新，取决于你如何存储，可能还会导致长度问题、安全隐患。有状态 JWT Tokens 在功能方面与 Session cookies 无异，但缺乏生产环境的验证、经过大量 Review 的实现，以及良好的客户端支持。
在本文之初，我就提到 JWT 虽然不适合作为 Session 机制，但在其它方面的确有它的用武之地。
该主张依旧成立，JWT 特别有效的使用例子通常是作为一次性的授权令牌。
以这种方式使用 JWT，具备几个明确的特性：
- Tokens 生命期较短。它们只需在几分钟内可用，让客户端能够开始下载。
- Tokens 仅单次使用。应用服务器应当在每次下载时颁发新的 Token。所以任何 Token 只用于一次请求就会被抛弃，不存在任何持久化的状态。
- 应用服务器依旧使用 Sessions。仅仅下载服务器使用 Tokens 来授权每次下载，因为它不需要任何持久化状态。
———————————————— 原文作者：Wi1dcard 转自链接：https://learnku.com/articles/22616 版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请保留以上作者信息和原文链接。
JWT 验证网站：https://jwt.io/
典型的 JWT：
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.gAO1L7tnBQa8VcR68IFWhJwbN4MdtA2CtXYCH6p_XXw
工作原理
算法中的指令描述的是一个计算，当其运行时能从一个初始状态和初始输入（可能为空）开始，经过一系系列有限而清晰定义的状态最终产生输出并停止于一个终态。
数据加密的基本过程，就是对原来为明文的文件或数据按某种算法进行处理，使其成为不可读的一段代码，通常称为“密文”。通过这样的途径，来达到保护数据不被非法人窃取、阅读的目的。
Https（HyperText Transfer Protocol Secure）超文本传输安全协议，常称为 Http over Tls、Http over SSL 或 Http Secure）是一种通过计算机网络进行安全通信的传输协议。
- 通信信道加密：使用 Https
- 通信数据加密：密文+加密关键数据
- 通信安全策略：授权中间层、尝试次数、过期策略
功能拆解
- 使用验证码防止暴力登录
- 登录/注册，用户注册数据保存（bcrypt 加密敏感数据）
- 鉴权方式：jwt，采用 koa-jwt
封装 axios 的请求，返回重新封装的数据格式
https://axios-http.com/docs/api_intro
对错误的统一处理
要点
- 公共配置内容，注意目录结构
- Axios 拦截器（请求拦截/响应拦截）使用
- 错误日志收集
Redis 存储唯一验证码，设置时效性（auto expire）和 UUID（key）。
cookie 移动端支持不好，localStorage 存储数据。
提高安全性
- 使用 Https
- 服务端存储 Secret，动态 Secret
- 设置短期的 Token 有效，设置刷新 Token
VSCode 插件：korofileheader ，生成注释。
vee-validate 校验方法：
- 接收用户的数据
- 验证图片验证码的时效性、正确性
- 验证用户账号密码是否正确
- 返回 token
鉴权功能：
鉴权生成、校验：
用 Bearer 前缀+ jwt 测试
同步/串行 执行 package.json -> script：
VSCode NPM 调试：
package.json -> script：
"scripts": {
"start": "nodemon --exec babel-node src/index.js",
"webpack:debug": "node --inspect-brk ./node_modules/.bin/webpack --inline --progress",
"build": "cross-env NODE_ENV=prod webpack --config config/webpack.config.prod.js",
"clean": "rimraf dist",
"watch": "cross-env NODE_ENV=dev webpack --watch --progress --hide-modules --config config/webpack.config.dev.js",
"debug": "nodemon --inspect ./dist/server.bundle.js",
"dev": "npm-run-all -p watch debug"
},launch.json
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"restart": true,
"console": "integratedTerminal",
"runtimeArgs": ["run-script", "dev"],
"port": 9229
},
{
"type": "node",
"request": "launch",
"name": "nodemon",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
"program": "${workspaceFolder}/src/index.js",
"restart": true,
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"runtimeArgs": ["--exec", "babel-node"]
}
]koajs/koa/wiki/Error-Handling
VSCode 插件：Node modules resolve 跳转到引入模块（和查看定义类似）
配置 jsconfig.json
code.visualstudio.com/docs/languages/jsconfig
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}路由守卫，强制转发
密码加密:
本周综合前面的知识进行实战，从前端到数据库、接口设计再到组件拆分，最后核心功能实现，进一步加深 Vue-router、Vuex 进阶应用，实现前&后端全栈页面开发。 课程安排：
[本项目需求分析](#6. 本项目需求分析：从原型设计、接口设计到技术栈的宏观项目架构思维。)
- 登录模块
- 首页
- 分类
- 综合
- 未结
- 已结
- 精华
- 状态
- 类型
- 评论数量
- 标签
- VIP
- 用户名
- 时间
- 积分
- 分类
- 发贴、编辑
- 用户中心
章目标
-
熟悉开发流程：从原型->业务实现
-
组件化的思想，如何进行组件的拆分
-
掌握业务接口的设计、数据库设计原则
SEO（Search Engine Optimization）搜索引擎优化。
网站 SEO 重要的一个部分是网站的性能优化：
- 资源压缩，请求压缩
- 设置缓存，设置 DNS 预处理
- 使用 CDN
ShowDoc + Axure 设计接口
- 接口设计原则
- 简单：高内聚，与业务对应
- 高效：属性设计、数据结构、方法抽象
- 兼容：尽量保证兼容，进行版本与状态控制
- 组件拆分
- 页面头、尾通用结构-> Header，Footer
- 列表->列表元素->方便后续扩展->List
- 侧边栏按功能进行组件拆分-> Links，Sign
前端库：qs
支持嵌套和数组的请求字符串解析器，具有深度限制。对象、数组转换为请求格式字符串。
长列表请求分析：重复请求拦截；尾页状态码；
axios cancelToken
继续进行核心模块开发，本周将会开发 PC 用户中心模块，从数据库与接口设计，到消息中心、我的主页、帖子、收藏、用户信息等功能开发，用实战去检验学习效果。 课程安排：
性能是评判项目好坏标准之一，本周将带着大家进入性能优化环节，学习配置服务器端渲染思想及 Nuxt.js 使用，并对前面项目进行改造，让项目的性能更优。 课程安排：
-
了解 SEO 优化方法
-
前端性能优化思想
-
前端性能优化之服务端渲染
本周开始进入后台管理系统开发，第一步：从需求分析、界面设计、接口设计、数据库设计，到发帖管理功能模块开发，及发帖管理接口对接，让项目开始具备完善的管理系统。 课程安排：
本周进行后台管理系统开发第二步：从需求分析、接口与数据库设计，到文章与用户管理两大重要功能模块开发，与 Node 的后台进行接口对接，轻松实现文章和用户管理，系统功能进一步升级。 课程安排：
继续学习，后台管理系统开发第三步：完成后端管理平台的首页管理，对首页统计功能进行定制开发，并增加日志服务，对后台接口的调用增加日志管理，实现系统功能完善与监管。 课程安排：
只停留在开发还远远不够，如何进行前后端联调，并正常运行很重要。本周学习前后端联调及细节优化，定制 Jenkins 任务及配置前后端自动化任务。并学习移动端应用开发的痛点问题及开发基础。 课程安排：
随着终端设备的发展，在移动端浏览 Web 已成主流。本周继续进行 WebApp 功能模块开发：登录页面、首页及个人中心开发，学习了解消息机制，移动端消息开发。 课程安排：
WebApp 页面开发只是第一步，如何和后端对接，掌握从后台管理到前端展现的整体解决方案，提升技能和解决实际问题的能力更为重要。 课程安排：
本周介绍小程序的开发适用场景，实操小程序的注册流程，掌握开发中的注意事项、学习小程序原生框架基本用法，快应用开发框架的使用，并且能够独立调试开发小程序。 课程安排：
学习如何配置小程序、小程序的生命周期，以及如何使用第三方的组件库，提升小程序的应用能力。 课程安排：
小程序开发实战第一部分，学习首页的列表开发、菜单定制的开发、微信接口及数据库的设计。 课程安排：
小程序开发实战第二部分，学习个人中心、详情页面、编辑发帖等业务模块的功能开发，以及如何与后台接口进行对接，完成页面的整体功能调试。 课程安排：
介绍云服务器、域名及 HTTPS 服务、项目运维及 Linux 相关自启脚本介绍、项目更新及日志处理、如何发送报警通知及应急策略的制定。 课程安排：
课程整体重要知识点回顾，全周期流程回顾，以及未来技术展望，如 TypeScript 进行项目重构与 vue3.x 进行兼容对接；混合应用框架；跨端应用框架；桌面应用 Electron 等，做好未来发展指引。 课程安排：