全栈开发技能1：快速搭建开发环境
目标：
在本地搭建一个Web网站，能够提供静态网页以及基于模拟数据的API服务
技能测试：
1、能够阐述一个Web项目的全部开发过程，包括哪些工作，先做什么，后做什么
2、前端与后端的区别是什么？各自要求的技能是什么？
3、如何搭建一个Web网站，后台服务环境应该如何搭建？
4、如何搭建一个静态Web网站，用于快速前端开发？
3、如何快速搭建真实的后台API或者模拟API？
知识点：
前端后端是怎么划分的？各自的职责是什么？
-
后端：当前Web应用分为前端与后端，后端主要提供应用逻辑处理、数据管理、API接口，是核心逻辑实现的地方，是应用的核心；后端的难点与挑战是数据处理逻辑、数据安全、大规模网络应用的体系架构（分布式、高并发、速度、容量等）。后端的开发环境与系统选型：Java + Spring、C# + .NET、PHP（Hack，Facebook改良版）、Go、NodeJS（deno是Node的分枝）、Rust ，Python等语言也有各自的Web服务开发框架
-
前端：为用户提供交互界面、接收输入、通过API与后端交互。核心是 JavaScript 语言，主要应用于 Web 环境。大前端包括 Android设备与iOS的设备（手机、平板、电视、手表），移动设备的开发叫 Native 开发，Android使用Java语言，iOS使用 Object-C 与 swift 语言。JavaScript 也有框架，可用于开发 Android与iOS的应用。
-
模拟Web服务器：创建模拟服务器、API服务器、生成模拟数据
1. Web应用系统如何开发
进行案例分析与讨论
- 设计可用 Mockplus 来做
- 简单演示 Mockplus
- HelloBD 应用，以 极客时间、得到App为样本，不再单独做设计（展示两个App的界面）
- App界面设计：
- 发现（显示全局最新的课程、预告等）
- 课程（显示所有课程列表）
- 社区（用户发送的信息，相互讨论、类似朋友圈）
- 学习（用户已经参加的课程，会加载用户的进度）
- 我的（显示用户账号、积分等信息）
- 数据库设计
- 应用通告（公众号推文帖子流）
- 课程数据库
- 课程基本信息
- 课程内容表（章节）
- 社区讨论帖子
- 用户学生（包括进度）
- 用户表
思考题：一个项目的完整的正规开发流程是什么？都有哪些阶段，应该是谁（哪些角色）来负责，做什么？重点是什么？常用工具是什么？
2.搭建 Web 服务器
一个Web网站，就是一个文件夹，包含了静态文件（html、js、css、image、video...文件直接发送给用户) 与程序脚本（由服务器解释，解释结果发送给用户）
负责文件发送、脚本解释的是 Web 服务器（如 Windows上的 IIS，以及跨平台的 Apache、Tomcat、NGinx、Resin 等）
前端开发，可以利用以下技术，快速将本地的文件夹映射为 Web 网站：
- C# + Windows平台：IISExpress
// 命令行下
iisexpress /? // 帮助很简明详细
iisexpress /path:c:\myapp\ /port:80
- PHP 环境
// 命令行下
php -help //获得帮助
php -S localhost:8080 //在当前目录中启动web服务器
php -S localhost:8888 -t d:/StaticWeb/dist/ //指定目录与端口
npx http-server //一次性启动Web服务，在当前目录提供Web服务，好处是它提供了目录浏览
- Python环境
// Cmd 下进入本地网站目录
python -m http.server // python 3.0
python -m SimpleHTTPServer //python 2.x 启动后会将当前目前作为网站，启动服务
- http-server
// nodejs 已经安装
npm install http-server -g // 全局安装
http-server // 在当前目录启动web
http-server -c-1 // 不需要缓存（马上体现文件改动）
http-server --port 8000 -c10 // 在端口8000监听web服务，文件缓存时间为10秒
3. 模拟 API 与数据
- JSON-Server
可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。
项目官方： https://github.com/typicode/json-server
深入学习：
npm install -g json-server // 全局安装
// 创建本地目录，cd 进入 ( D:\HelloBDWeb )
// 准备一个json文件，模拟后台数据库，可以命名为 db.json
// 准备一个 config 文件，json格式
// 准备一个route.json 文件做路由（可暂时留空，逐步添加）
json-server -c config.json db.json // 启动 Mock API 服务
// db.json
{
"products":[{...},{...}],
"species":[{...},{...}]
}
// config.json
{
"port": 53000, // 端口
"watch": true, // 监视文件变化自动刷新
"read-only": false, // 允许写入
"no-cors": false, // 允许跨域调用
"no-gzip": false, // 允许gzip压缩
"routes":"route.json"
}
// route.json 完整的路由设置案例
{
"/API/naturenoteServ.ashx?a=getproduct&id=:id": "/products?id=:id",
"/API/naturenoteServ.php?a=getsplist&pid=:id": "/splist?productId=:id",
"/API/naturenoteServ.ashx?a=getsp&name=:name": "/species?name_zh=:name",
"/API/naturenoteServ.ashx?a=posts&pid=:pid": "/posts?productId=:pid",
"/API/naturenoteServ.ashx?a=getbyname&name=:name":"/app?Name=:name",
"/API/userole.ashx?a=checklogin":"/users?username=chinaontology"
}
GET /posts?_sort=user,views&_order=desc,asc 指定排序
- 数据分页
GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10
- 路由练习
json-server是通过一个json文件模拟数据的，其API模拟与路由功能配合起来，可以很好完成常规模拟工作。
经过使用，发现的缺点是：
- API 模拟可以支持添加新纪录，也能写入json文件中
- 对delete、update的支持似乎有问题，bug一直未曾修复
- 支持的是标准的 REST 风格，因此删除必须用 delete、更新要用 put，但是常规的网站开发，为了保证穿过防火墙安全，一般只支持 GET、POST
4. Web服务器练习
-
nginx 服务器
-
TODO：补充nginx基础知识，参考网址
-
Nginx 可以充当Web服务器，并且可以映射多个后台网站，还可以用做大规模分布式应用作为复杂均衡，反向代理等
-
下载 nginx ，解压
-
编辑 hosts 文件，模拟域名
// 编辑 hosts 文件，添加自定义的域名的解析
192.168.1.4 flower365.com
127.0.0.1 main.com
127.0.0.1 HelloBD.org
- 编辑 nginx.conf , 添加 server 小节，增加虚拟服务器
// nginx.conf 实例
server {
listen 80;
server_name flower365.com;
location / {
proxy_pass http://localhost:53000/;
}
}
server {
listen 80;
server_name main.com;
location / {
root D:/StaticWeb/dist;
index index.html index.htm;
}
}
nginx // 启动
nginx -s reload // 重启
nginx -s stop
nginx -s quit
- IIS 服务器架设练习