Threejs基础环境搭建（一）静态服务器

由于后期threeJs需要使用各种外部资源，所以需要搭建服务器，nginx，apache，iis等都可以。

本人则使用nodeJs的koa搭建一个简单的服务器

开发工具使用VSCode

首先需要确保电脑上已经按装了node.js

如果使用VSCode：

Koa是基于Node.js的下一代web框架，由Express团队打造，特点：优雅、简洁、灵活、体积小。几乎所有功能都需要通过中间件实现。

即便没有给ctx.body 设置响应数据，或访问不存在的路由，页面也会显示Not Found，这是koa底层做了处理，不像原生Node或Express一样页面会一直处于响应状态。

Koa将Node的request 和 response对象都封装到了context中，每次请求都会创建一个ctx，并且在中间件中作为接收器使用。

以下是刚才访问时的ctx对象

即便使用ctx.res.write()也不会得到预期结果，比如：ctx.res.write('hello')，结果是hellook，会把message的值拼接上。

有关cookie和session单独介绍用法。

Koa中的路由和Express不同，Express是把路由集成在Express中，Koa则需要通过kao-router模块使用。

Koa最大的特色和最优的设计就是中间件，就是在匹配路由之前和匹配路由之后执行函数。

使用app.use()加载中间件。每个中间件接收两个参数，ctx对象和next函数，通过调用next将执行权交给下一个中间件。

中间件分为：

对于诸如js、css、img等静态资源采用koa-static中间件处理。

比如静态目录为static：

在模板中即可访问：

koa生态的模板引擎挺多的，比如ejs、art-template等。

使用方式和ejs一样。

性能上相比，art-template比ejs快很多，开发中用的最多的还是art-template。

http是无状态、无连接的。不会对之前发生过的请求和相应状态进行管理。也就是说，无法根据之前的状态进行本次的请求处理。

比如访问淘宝首页并登录账号后，当再打开淘宝其他页面时，因为每一次的访问都是独立的，服务器并不知道你已经登录，所以还是不能下单或者加购物车之类的操作。

cookie是客户端第一次访问服务器的时候，服务器在下行HTTP报文时通过响应头的 set-cookie 字段给浏览器分配的一个具有特殊标识的文本信息，此后当客户端再次访问同一域名时，便会将该字段通过请求头携带到服务器。注意： 第一次访问服务器是不可能携带cookie的。

缺陷： 1、cookie的数据存放在客户端，不安全，容易被（CSRF）跨站请求伪造。攻击者可以借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。2、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

通过 options 获取 cookie name:

通过 options 设置 cookie name 的 value:

通过buffer转成base64存进去，取出来是再转回中文。

session是另一种记录客户状态的机制，不同的是cookie保存在客户端浏览器中，而session保存在服务器上。

前面说过，cookie 是存放在客户端，不是很安全，用户可以自己手动把cookie种在客户端以欺骗服务器。而session是存储在服务端的，所以对于较重要的数据存储在session。

缺点： session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。

当浏览器第一次请求服务器时，服务器端会创建一个session对象，生成一个类似于key-value的键值对， 然后将key(cookie)下发到客户端，当客户端再访问时，携带key(cookie)，找到对应的session(value)。 生产中用户的信息都保存在session中。

以上配置选项常用的就是key、maxAge、httpOver。

renew应用：比如我们登录账号写一篇博客，写了一半cookie过期了，当我们提交的时候就会退出登录，体验很不好，而且写好的博客丢失。

301和302重定向状态码区别。302为临时重定向，301永久重定向。Koa中默认为302。详细信息查看这篇博客 301和302重定向介绍

字符串 “back” 是特别提供Referrer支持的，当Referrer不存在时，使用 alt 或“/”。

要更改 “302” 的默认状态，只需在该调用之前或之后分配状态。要变更主体请在此调用之后:

解决跨域的方式有很多种，个人认为最好的方案是在服务器端设置支持跨域。

下面详细说明在koa2中设置具体的请求头信息：

在koa2中，解决跨域请求还可使用中间件 koa2-cors

node 发送邮件可以使用 nodemailer 三方模块。

安装：

使用说明：

更多详细配置信息及功能参照 官网

启动项目时，则是启动一个koa服务器，服务器拦截浏览器的es module的请求，服务器直接将 ESM 模块内容处理后，通过 path 找到目录下对应的文件做一定的处理最终以 ES Modules 格式返回给客户端。接着，现代浏览器通过解析 script module，对每一个 import 到的模块进行 HTTP 请求，服务器继续对这些 HTTP 请求进行处理并响应。（热更新）

图中的目标项目即我们开发时的项目，vite服务在解析模块路径以及读取文件内容时需要访问目标项目中的模块内容或者配置文件等。

从其他请求中我们也可以看出每一个.vue文件都被拆分成了多个请求，并通过type来标识是template还是style。

在项目根目录创建bin目录，并在bin目录下创建一个 www.js 文件，文件内容如下：

在创建 www.js 文件中引入了index.js文件，主要是使用了koa启动了一个简单服务以及实现vite的功能

serverPluginServeStatic.js文件 :使用koa-static中间件来托管静态资源，同时我们需要拿到koa实例（app），其次需要获取到目标项目的根目录路径（root），将目标项目进行整体托管，同时对于目标项目的 public目录也进行托管，这样，我们需要处理的静态文件基本完成了。

为什么要重写模块路径呢？

这是因为我们在使用import方式导入模块的时候，浏览器只能识别./、../、/这种开头的路径，对于直接使用模块名比如：import vue from 'vue'，浏览器就会报错，因为它无法识别这种路径，这就是我们需要进行处理的地方了。

serverPluginModuleRewrite.js文件：

在处理完所有的模块路径之后，我们就需要在服务端来解析模块真实位置。

当 Vite 遇到一个 .vue 后缀的文件时。由于 .vue 模板文件的特殊性，它被拆分成 template , css ,script 模块三个模块进行分别处理。最后会对 script ,template, css 发送多个请求获取。

---