HTML+CSS+JavaScripts学习 实现IO与Web通信

《21天学通web开发》差不多看完啦
主要是需要 修改安徽创世的后台界面,做一个我们自己的web界面,主要一个技术难点是 实现串口与web端的通信,所以跟师兄同学在CSDN网页上下载了很多别人做的样例,但是都存在一些问题,最后是找到了一个能运行的,用的是基于node.js的web开发框架express
关于express的介绍可以看这个链接
https://www.cnblogs.com/mq0036/p/5243312.html

  下载项目的介绍:
  通过使用serialport包调用底层的串口,完成串口的收发。和桌面软件的串口调试助手功能类似。
  前端使用ejs模板引擎开发,通过jquery发起ajax请求与后端的nodejs进行交互。

ejs模板和html比较类似
在这里插入图片描述
安装nodejs ,npm
注意版本,这里用的node_modules是V57的,所以我的版本比较高,后面也是把node和npm版本降下来
在这里插入图片描述
这是版本对应的图
然后运行 node app.js
注意文件serialdata.js文件里有一个错误 要把baud改成具体数字,我改成了9600以后才可以运行在这里插入图片描述
运行效果 串口一和串口二是互相连接的,可以实现io与web之间的通信
在这里插入图片描述

改动后的代码
链接:https://pan.baidu.com/s/1cCymMCNbhufcY74cc59o0A
提取码:38lb
—————————————————————————————————————————————————
学习过程记录:

使用的编辑器:visual studio code 跟VS不是一个东西但是是一个公司的,后面发现dreamweaver更好用,嗯!
想要运行html文件
需要把文件放在一个文件夹中,打开它,注意修改之后要随时保存,这样运行才会发生改变(是不是很辣鸡!)
vscode 运行html的方法是下载一个插件 view in browser
然后右键就可以预览了

html是架构,css是美工,js是行为
https://www.cnblogs.com/dreamingbaobei/p/5062901.html
可以看这个博客的理解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题</title>
<link rel="stylesheet" type="text/css" href="mycss.css" />
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

//原作者的解释
这是一个最简单的HTML文档,文档说的是,浏览器啊,我是遵循W3C标准XHTML1.0过渡版本规范(文件类型声明),我采用的编码是utf-8,我的标题是“网页标题”,描述我的模样的样式表是我同目录的mycss.css文件,与我有关的javascript代码在我同级的myks.js文件中,我的内容有一个段落,段落的内容是“这是一个段落”。
所以只需要把我们要用到的css和js文件插入html中就可以运行了

这里我用的示例是
http://www.runoob.com/w3cnote/htmlcss-make-a-website.html
这个界面做的蛮好看的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值