从零开始 - 网页上位机 - 01

一、环境搭建

• 首先要考虑一下这个网页要怎么部署（我也不知道这个术语对不对），有很多选择，我使用过的有两种，一种是使用pyhton，一种是使用JavaScript。pyhton的相关实现方法可以参考这篇教程：【如何做一个网页送给女朋友做生日礼物】，不是我想介绍的重点，略过。

1、安装Node.js

• 下载安装包；【下载 | Node.js 中文网 (nodejs.cn)】
• 安装软件；下一步…安装地址…下一步…完成。
• 安装模块管理器npm；已集成，默认安装。

默认地址：C:\Users\用户名\AppData\Roaming\npm

• 检查和配置环境变量；我的电脑-属性-高级系统设置-环境变量。

node -v
npm -v

• 修改npm的缓存目录和全局目录路径；（没有的文件夹自己新建）

npm config set prefix "node安装路径\node_global"   	//配置路径
npm config set cache "node安装路径\node_cache"   	//
npm config get prefix			//查看路径
npm config get cache   			//

• 配置npm和nodejs的环境变量；

变量名：NODE_PATH
变量值：node安装路径\node_global\node_modules

• 其实一般也不会安装全局模块，都是安装在项目里的。所以这个路径也很少用到。

2、新建工程

• 新建工程文件夹，在此文件夹路径内打开终端，输入以下指令。可初始化生成模块包管理脚本package-lock.json。

npm install

• 考虑使用什么Web框架，我用过的有koa、nodejs-websocket，下面是之前使用时参考的教程。

• 目前推荐Express框架（因为刚好看到），使用npm在工程文件内安装Express模块。

npm install express --save

• 再新建几个文件夹，存放html、css、js、图片等文件。工程目录参考了：【如何做一个网页送给女朋友做生日礼物】

• 上面可能废话比较多，下面才是正式开始。

二、挂载

• 在工程根目录project下创建脚本，express.js。放在根目录是为了一会方便直接访问本地静态文件。在脚本内输入以下代码。

// express.js 文件
let express = require('express');
let app = express();

// 直接访问本地静态文件
app.use('/',express.static('./'));

// 挂载
let server = app.listen(8080, function () 
{
	let port = server.address().port;
	console.log("访问:http://localhost:%s/templates/main.html",port);
})

• 然后在工程目录project/templates下创建网页文件，main.html。可以随便在网页内输入一些文字。

<!-- main.html 文件 -->
测试

• 运行express.js脚本文件，再点击终端中打印出来的网址，就能打开网页并看到“测试”二字了。

• 至此，已经完成了网页的挂载了。之后部署云端，设置域名等知识，可以参考我另一个教程：【基于Node.js与WebSocket搭建服务器 笔记 - 00 - 初建云服务器_Lovely_him的博客-CSDN博客_nodejs websocket服务器】。这部分不内容不是本课程的重点，重点是网页制作的过程和串口功能的使用。

三、网页的布局