任务目标为可以通过浏览器访问到相应的html以及js css文件.
所有代码都是参考的官方的教程修改:http://expressjs.com/zh-cn/
首先还是从hello world开始
|
1 2 3 4 5 6 7 8 9 |
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到新的目录,然后修改成下面这个样子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "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文件夹,然后编写
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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文件了