为期一周的中级软件实作结束了。这一周以来，我们跟着老师的步伐，前端使用Bootstrap，后端使用Express框架完成了一个购物商城注册、首页的页面和功能。整个项目的下载地址在这里（因为项目只做DEMO，因此就不放上GitHub了），以下是我关于这一周笔记的总结

后端笔记总结

我的观点

这次的中级软件实作和以往不一样，我们首次使用了Node.JS作为后端开发语言，相比于老一代的后端开发语言Java/PHP/.NET，新生代的后端开发语言Node.JS/GO/Python语法更加简单，配置十分简易，上手难度低

我认为，新生代的后端语言能够用于中小型项目的开发，随着第三方库的发展，越来越多的人能够上手开发属于自己的小项目

对于大型的项目，我认为目前还是老一代后端开发语言比较适合，经历了这么长时间的技术沉淀，老一代后端开发语言已经形成了许多应用于不同场景的技术框架，稳定性可靠性相对较高，但对于新手来说，了解学习这些框架需要一定的时间

关于Node.JS

Node.JS不是前端框架，是后端技术，遵循CommonJS规范。可用于在特定场合下取代PHP、Java等技术，实现文件IO、网络访问、数据库操作等

Node.JS特点：

语法基于JavaScript，但是功能是后台技术，可以实现IO、Network、DB等操作
单线程模型，避免了多线程并发的问题
异步的回调函数，避免了线程阻塞的问题
适合于IO密集型应用，不合适于CPU密集型应用

创建Node.JS项目的基本步骤：

在项目根目录下使用npm create创建项目描述文件package.json和package-lock.json
使用npm install <package>下载项目所需要的第三方包
代码的编写。如果是Web项目，需要创建Web服务器，监听端口，提供响应消息

一问一答：

为什么数据库中的日期要用bigint储存？

答：因为不同国家地区使用的日期制式和时区不一样，单纯地使用”Date”或”DateTime”会导致日期格式固定单一，不利于国际化

HTTP协议中，请求消息的格式：

GET请求：

请求参数放在req.query中，浏览器地址栏可见

GET /url?para1=1&para2=2 HTTP/1.1

Content-Type: xxx
POST请求：

请求参数放在req.body中，浏览器地址栏不可见

POST /url HTTP/1.1

Content-Type: xxx

para1=1&para2=2

ES6中的部分新特性：

反引号字符串，字符串可以换行
使用${}替换变量

前端笔记总结

我的观点

上个学期的期末大作业中，我第一次用到了Bootstrap。当时的我也了解到了栅格系统，但是并不会使用Bootstrap CSS。我还是傻乎乎地自己手写CSS文件，一开始还能保证页面是响应式的，一切的样式都使用%，但随着页面越来越复杂，以及没有清除默认样式导致的各种奇怪的问题，后面的代码就写烂了。到现在回看当初写的代码，根本就不想去修改哪怕是一行代码，再联想一下企业开发中，历史遗留下来的HTML页面，那简直就是陨石坑。因此我认为，即使HTML是标记性语言，我们也应该用工程化的思想和方法，去制定一些编写的规范，搭建开发的框架。这样不仅能降低开发维护的难度和成本，还能延长项目的生命周期

关于Bootstrap

前端可用的技术栈：

HTML/CSS/JS
Bootstrap/jQuery/AJAX
Vue.js/Vue-Router/MintUI/Axios
Angular.js/Router/lonic/HttpClient
React/React-Native/Fetch

响应式网页：

也称为自适应式网页，一个页面可以根据不同浏览器设备而呈现不同的布局和外观
所有的尺寸都使用相对值（%,em），而不是绝对值（px）
布局容器宽度使用百分比，内部都使用百分比，浮动或者是弹性的
图片宽度都使用max-width:100%，防止图片失真
使用CSS3 Media Query（媒体查询技术），针对不同尺寸的设备使用不同尺寸的图片，以及不同的样式

网页尺寸的定义：

PC：>=992px
Pad：768~992px
Phone：<768px

对于大型页面的CSS，我们使用以下方法降低开发维护难度：

样式重置（CSS Reset）：Normalize.css，一个重置页面默认样式的CSS文件
样式脚手架，例如Bootstrap
栅格布局系统
常用组件的复用：轮播、下拉、弹框
当前页面专有的头部、主体、尾部

关于Bootstrap框架：

Bootstrap是一个由Twitter维护的CSS框架，可用于编写响应式网页
Bootstrap把屏幕分为4类：

lg：Large，size>=1200px，适用于PC

md：Medium，992px<=size<1200px，适用于高分辨率平板电脑

sm：Small，768px<=size<992px，适用于平板电脑

xs：Extra Small，size<768px，适用于手机屏幕

Bootstrap栅格系统的示例：

<div class="container/container-fluid">
    <div class="row">
        <div class="col-xx-x">
            内容或者".row" ".col-xx-x"
        </div>
    </div>
</div>

跨域问题

前后端都有一个共同的问题，那就是跨域请求的问题

什么是跨域访问？

假设现在有2个资源：
- 资源1: http://localhost:5500/index.html
- 资源2: http://localhost:8888/user/register
浏览器中，如果访问的两个资源的协议、主机名或端口号三者之中只要有1项不同，就是跨域访问。注意：localhost和127.0.0.1是不同的域名，也属于跨域访问
默认情况下，有些内容默认允许跨域，如：<img>、<script>、<link>、<a>
默认情况下，浏览器默认禁止XHR跨域访问
如何解决浏览器对XHR的跨域请求限制？（每种方法详细解析）
- JSONP
- CORS
- PostMessage
- WebSocket
- Node中间件代理
- Nginx反向代理
- window.name + iframe
- location.hash + iframe
- document.domain + iframe