[1] 基础篇 第一章 项目简介 / 第二章 前后端数据打通

前言传送门: [0] hiWeather 项目简介与启动

0x00 写在前面

第一章主要介绍了项目的主要开发工具和内容，视频已经有详细介绍，这里不再赘述。以下主要为文字内容。

第一章 PPT 传送门: Node + MongoDB 天气小站 快速建站指南 PPT

0x01 项目介绍

不知大家在软件开发时是否有这样的困惑：有时空有想法却无法快速实现，尤其是苦恼传统复杂的 UI 设计时，那你就是时候学习前端开发了。那么我们讨论的前端开发到底是什么呢？

大体来讲，前端开发主要由前端三剑客构成：HTML，CSS，还有不可或缺的 JavaScript。JavaScript 作为前端浏览器用户交互语言，其分量绝对是前端开发之中的重中之重，但由于 JavaScript 只能运行在浏览器环境下所带来的种种限制，由此又催生了能够运行在服务器环境下的 Node.js。

我们谈论 Node.js 开发时，通常指的是使用 JavaScript 语言编写的 Node.js 应用程序。简单来说，Node.js 是就一个 JavaScript 后端运行时环境，它由 Chrome V8 引擎改写而成，使用了一套事件驱动、非阻塞的I/O模型，并集成了一个包管理器 npm，为我们在服务器环境开发、运行、部署 JS 程序提供了极大的便利。

在这个项目中，我们使用了以下的几种开发工具。后端逻辑使用 Express 开发，能方便地搭建 Web 应用；请求到的页面使用 Cheerio 进行分析；数据库选择的是 MongoDB，以及对 MongoDB 快速建模的 mongoose；前端选用 jQuery 和 Bootstrap 这两个类库；jQuery 和 Bootstrap 都是前端静态资源，前端静态资源使用 bower 这个工具进行安装；
本地环境在开发后期会加入 mocha 单元测试、服务自动重启等，这些都由 gulp 驱动集成，这些会在进阶篇中加以介绍。以上这些模块都通过 npm 包管理工具进行安装，npm 在 node 安装时已经进行了集成。

简单了解这些模块后，让我们话不多说，开始进行编码的准备吧。我将这个项目的开发流程简单分为以下 9 点：首先进行需求分析，对页面进行简单了解；然后安装项目依赖和初始目录的创建；然后创建入口文件，并进行编码；接着就可以创建页面视图，先使用伪造的数据跑通前后端流程；页面完成后，就可以根据页面内容进行抽象，提取数据库模型，并开发后端逻辑，至此完成前后端逻辑设计。最后生成前后端配置文件，整个网站就算开发结束了。

然后一起来看一下网站的页面结构，我简单绘制了两个页面的原型图：左边是首页，或者叫搜索页，右边是结果页。可以看到首页内容很简单，主要构成元素仅仅为一个标题（title）和一个搜索框，再加上一个按钮；结果页稍复杂，主要构成有一个“城市+省份”构成的标题，和一个前期详情列表，内容为当前天气的相关信息。城市的相关信息就是存储在数据库里的内容，天气信息由后端服务器发起请求，爬取墨迹天气相关信息生成。由于天气具有实效性，就不一一进行入库处理。

0x02 项目结构初始化

为了方便小伙伴们从零开始看我编码的过程，我们首先来简单过一下项目初始化的步骤，也就是2，3，4，5步中的内容。

首先是项目结构的初始化，我们在根目录下首先要安装这些模块。然后编写入口文件，等下在实际编码中详细讲解。接着来看一下网站的初始时的目录结构，node_modules 是安装 npm 模块的路径，bower_components 是 bower 前端框架安装的默认路径，views 下面是我们的视图模版文件，app.js 就是我们的入口文件。测试前端流程就通过两个简单的 url 来进行，localhost:3000 就是我们网站运行的地址，也是首页根路径的地址， localhost:3000/info?city=jingzhou 访问的是城市天气的详情，用来测试后端服务器能否正常返回数据。

0x03 B 站视频 1.1-2.1 项目介绍 & 结构初始化

id="b" class="b video_pc" src="https://www.bilibili.com/html/html5player.html?cid=31161079&aid=19103660&pre_ad=0" allowfullscreen="true" width="100%">


不能播放请移步B站链接