node.js学习一:利用express搭一个静态网站

3,984次阅读
没有评论

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

正文完
 0
评论(没有评论)