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

Posted 2022-02-20 L建豪 忄YH

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

前言：

• 寒假开始后就立刻上班当社畜了，工作后接收的第一个项目就是将一个本地上位机弄成网页版。本地上位机是使用C++和Qt库编写的，我之前也有使用过Python和Qt库编写上位机，用于接收单片机摄像头的图像数据。本来也想整个教程的，当时懒得弄，现在更加不想弄。源代码在我的GitHub仓库里有，感兴趣的可以拷贝下来运行：【传送门】。
• 现在是打算使用javascript编写网页版上位机，因为之前有过一点经验。这个有过教程：【基于Node.js与WebSocket搭建服务器 笔记 - 00 - 初建云服务器】。这次整个完整一点的，因为之前弄的时候其实我也是一知半解，js语言都不熟。虽然现在也不怎么熟，但是写简单代码还能用。记录下学习过程。

一、环境搭建

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

我本来想解释解释node.js和js，比如：js代码还能在浏览器的控制台中直接允许，不需要安装nodejs……刚下笔就感到心拙口夯、词不达意，变放弃了。我还是直接放别人的科普文章吧：【传送门】。我就负责记录流程吧。

1、安装Node.js

推荐教程：【Nodejs+npm详细安装_Gilagamesh的博客-CSDN博客_node安装npm】

• 下载安装包；【下载 | 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，下面是之前使用时参考的教程。

【nodejs-websocket创建websocket服务器_猫儿念你的博客-CSDN博客_nodejs websocket服务器搭建】

【koa入门 - 廖雪峰的官方网站 (liaoxuefeng.com)】

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

npm install express --save

【Node.js Express 框架 | 菜鸟教程 (runoob.com)】

【Express 框架的使用（详细）_雨的印记的博客-CSDN博客_express框架使用】

【使用 npm安装模块方法_勤动手多动脑少说多做厚积薄发-CSDN博客_nodejs安装模块】

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

|-- project

​ | – node_modules // 模块包

​ | – static // 静态文件

​ | | – css // css文件

​ | | – image // 图片文件

​ | | — script // js文件

​ | – templates // html文件

​ | – package-lock.json // 模块包注册表

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

二、挂载

代码参考：【Express中app.use()用法 - 简书 (jianshu.com)】

• 在工程根目录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服务器】。这部分不内容不是本课程的重点，重点是网页制作的过程和串口功能的使用。

三、网页的布局

留个坑，等待更新。