任务目标为可以通过浏览器访问到相应的 html 以及 js css 文件.
所有代码都是参考的官方的教程修改:http://expressjs.com/zh-cn/
首先还是从 hello world 开始
var express = require('express');
var app = express();
app.get('/', function (req, res) {res.send('Hello World!');
});
app.listen(8081, function () {console.log('Example app listening on port 8081!');
});
这样通过浏览器访问 localhost:8081 时就会收到 hello world.
访问自已的 html
上面的 hello world 虽然浏览器能访问到, 但离自已的 HTML 还有一段距离要走, 并且只是 exppress 也达不到此功能, 如果自已来一个一个添加代码的话工作量就大了, 还好可以利用自动生成 express 工具. 安装 npm install -g express-generator, 然后再运行express myproject 即可以当前 cmd pwd 目录生成一个以 myproject 为命名的项目, 然后我们要做的事情就是在这个项目上进行修改.
由于自动生成的项目使用了 jade 来生成 HTML, 对我这种啥都不懂的人来说学习成本有些高, 我更喜欢所见即所得, 即在客户端看到的就是我们程序里有的, 所以抛弃了网上的教程, 自已根据别人的项目修改而来.
修改 package.json
我是直接复制 express 自动生成器里的 package.json 到新的目录, 然后修改成下面这个样子
{
"name": "myweb",
"version": "0.0.0",
"private": true,
"scripts": {"start": "node app.js"},
"dependencies": {
"debug": "~2.6.0",
"express": "~4.14.1",
"serial": "*"
}
}
app.js
首先准备好 index.html 文件以及它的 jpeg css js 文件,css 与 js 等文件放到 public 文件夹, 然后编写
var express = require('express');
//var SerialPort = require("serialport"); // 引入串口模块
var path = require('path'); // 引入 path 模块
var fs = require('fs'); // 引入 fs 模块
var app = express(); // 创建 express 实例
app.use(express.static(path.join(__dirname, 'public'))); // 设置 public 文件夹为静态资源文件夹, 必须建立否则 js 和 css 无法加载
app.get('/', function (req, res) {res.sendFile(__dirname + '/index.html');
}); // 设置路由，当客户端请求 '/' 时，发送文件 index.html
app.listen(8081, function () {console.log('Example app listening on port 8081!');
});
然后 npm start 就可以通过浏览器访问到我们创建的 html 文件了
正文完
