基于node.js的本地文件读取显示(express + node.js + jquery + hbs)

项目目录结构

主要技术点简介:

express: node的一个web框架(默认设置访问localhost:3000)

 app.get('/', function (req, res) {
  res.send('hello world')
})

• 设置路由,此处设置的是根路由,当浏览器访问localhost:3000时返回hello world

//设置静态文件目录
app.use(express.static(join(__dirname, 'public')));

• 此处设置静态文件的目录,当发送get请求或者直接访问网址,返回一个HTML模板(views下面的文件)时,模板中引入的js文件必须是在public目录下的(模板中引入js文件的路径为)注意此处:由于注册静态文件在注册目录时已经指明了绝对位置在public下面,所以不能写为"./tool.js".应该是在public目录下,写成"/tool.js"
  疑问解答:为什么要设置静态文件目录,返回一个模板HTML文件时,文件中引入了js文件,但是返回的模板是在浏览器中运行的,如果不设置静态文件目录,js文件是没法加载到浏览器中的

//设置模板引擎
//默认设置模板引擎的位置在./views目录下面,也可以设置到别的目录中
//app.set('views', './views');
app.set('view engine', 'hbs')
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);

• 所有的模板引擎都会默认经过views下的layout.html文件进行渲染.在此文件中使用{{{ body}}},当返回其他文件的模板时,就会将该模板代替为body中的内容,所以,公共的部分(比如header,footer等可以写在layout.html文件中)

启动监听
app.listen(port, function () {
  console.log('server listen on 127.0.0.1:3000')
})

补充知识点

1.JavaScript是解释型语言,运行在浏览器的环境中,不同于编译型语言,JavaScript不能直接读取本地文件(fileRead方法可以有限制的实现),最好使用node.js进行文件的操作.
2.hbs:Handlebars的模板引擎
3.为什么在public中引入jquery-3.1.1-min.js等文件
因为在项目中使用了jquery中的ajax方法.而jquery-3.1.1-min.js封装了jquery中的方法.此种方法直接返回浏览器.浏览器是看不懂的,因为浏览器中没有这些方法,和自己封装了一个方法一样.jquery中的方法也是利用浏览器提供的方法进行封装的.
4.这种方法和使用npm导入包的方法是一样的只是一个是使用了包管理工具,此时如果使用这个方法不行.因为,npm导入的包不在静态目录下.无法返回到浏览器中,接下来会介绍webpack打包程序,就可以实现这个方法,而放在public静态目录下的文件,只能使用这个方法进行导入html模板,不能导入到打包后的文件或者静态文件的其它.js文件中(原因还在探索中)