任务目标为可以通过浏览器访问到相应的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文件了
正文完
