Nodejs学习笔记(四)--- Express安装与模版引擎ejs

简介及资料

Node.js提供了http模块,这个模块中提供了一些底层接口,可以直接使用,可以看看这个
http://nodejs.org/api/http.html
Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架,它基于Node.js原有进行了很多Web开发所需的功能封装
http://expressjs.com/
https://www.npmjs.org/package/express

安装

官网http://expressjs.com/
express4.X的有一些变化,4.x版本中将命令工具单独分出来了(https://github.com/expressjs/generator),所有要先按装express-generator,否则创建项目时,会提示express命令没找到

npm install -g express-generator

https://github.com/expressjs/express#quick-start

Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第1张图片
image.png
npm install -g express
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第2张图片
image.png
查看express版本
express --version
image.png

这边存在一个误区,网上很多都是直接用express -v (express -V) 这个指令,我不是很清楚是不是4.0版本之前的是识别的,但是这个指令出来是这样的。

express -v
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第3张图片
image.png

这里所指的 -v 是 --view.

运行第一个基于express框架的Web

1.创建一个expressWebApp

到指定工作目录下执行

Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第4张图片
image.png

可以看到此时的package.json


Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第5张图片
image.png
2.安装依赖项

我们看下这个指令,他自动生成了一个新的package.json。

npm init
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第6张图片
image.png
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第7张图片
image.png

注意上一步安装成功后的提示,需要cd到网站目录,并执行npm install命令安装项目依赖项(可以在项目的package.json文件的dependencies节点下看到需要哪些依赖)

npm install
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第8张图片
image.png
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第9张图片
image.png
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第10张图片
image.png
3.运行app.js文件,添加监听启动服务。

在expressWebApp根目录下找到app.js并增加端口监听,在sublime中Ctrl+B运行

app.listen(3000,function(){
    console.log("Server Start!");
});

Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第11张图片
image.png
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第12张图片
image.png
4.浏览器访问效果
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第13张图片
image.png

相关提示:
  1.在sublime中运行过后,如果想要关闭,去任务管理器中结束node.exe进程
  2.不在sublime中运行,可以在cmd中执行node app,关闭使用快捷键Ctrl+C

模版引擎 ejs

ejs:Embedded JavaScript
  https://github.com/visionmedia/ejs

1.创建一个express + ejs的项目

生成环境

express -e ejsWebApp
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第14张图片
image.png

安装依赖

cd ejsWebApp
npm install

express参数

Usage: express [options] [dir]

  Options:

    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
    -H, --hogan         add hogan.js engine support
    -c, --css   add stylesheet  support (less|stylus|compass) (d
efaults to plain css)
    -f, --force         force on non-empty directory
2.创建成功后,打开app.js,添加3000端口监听
app.listen(3000,function(){
    console.log("ejs Server Start!");
});
3.打开routes文件夹下index.js,并修改代码如下
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: '

Express

' ,users:[{username: 'Tiany'}, {username: 'Tiany Zhong'}, {username: 'Zhong Dian'}] }); }); module.exports = router;
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第15张图片
image.png
4.打开views文件夹下index.ejs,并修改代码如下


      
    
  
  

    <%= title %>
    <%- title %>
    <% users.forEach(function(user){ %>
        
<%= user.username %>
<% }) %>
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第16张图片
image.png
5.浏览器结果
node app
image.png
Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第17张图片
image.png

当我们访问 http://localhost:3000时,app.js 中 app.use('/', index); 会转到index.js,而index.js而index.ejs传递了title和users对象作为参数,细节以后我们再探讨。

这里重点看看index.ejs
ejs结尾的文件就是模版文件,可以看到在文件中我们用了三种标签方式(这种标签方式有过其它web开发经验的应该很好看懂)
  1.<%= %>
  这个标签在接到收到title: < h1 >Express< /h1 >时,从显示效果来看,他直接输出HTML标签到页面上,输出的是转义后的变量值
  2.<%- %>   
  而这个标签,从显示效果上看,他没有直接输出HTML代码到页面上,输出的是没有转义后的变量值
  3.<% %>
  而这个标签,从显示上看,他循环了出来参数中的值,标签中是javascript逻辑代码,注意括号的开闭合

express项目结构

Nodejs学习笔记(四)--- Express安装与模版引擎ejs_第18张图片
image.png

1.node_modules文件夹
这文件夹就是在创建完项目后,cd到项目目录执行npm install后生成的文件夹,下载了项目需要的依赖项
2.package.json文件
此文件是项目的配置文件(可定义应用程序名,版本,依赖项等等)
  node_modules文件夹下的依赖项是从哪里知道的呢?原因就是项目根目录下的这个package.json文件,执行npm install时会去找此文件中的dependencies,并安装指定的依赖项
3.public文件夹(包含images、javascripts、stylesheets)
  这个文件夹做过Web开发的应该一看就知道,为了存放图片、脚本、样式等文件的
4.routes文件夹
  用于存放路由文件,
5.views文件夹
  用于存放模版文件

express项目分析

先从app.js看起
  1.app.set(name,value)
  把名字为name的项的值设为value,用于设置参数
  app.set('views', path.join(__dirname, 'views')); 设置了模版文件夹的路径;__dirname是node.js中的全局变量,表示取当前执行文件的路径
  app.set('view engine', 'ejs'); 设置使用的模版引擎,我们使用的ejs
  2.app.use([path], function)
  用这个方法来使用中间件,因为express依赖于connect,有大量的中间件,可以通过app.use来使用;path参数可以不填,默认为'/' .
  app.use(express.static(path.join(__dirname, 'public'))); 这一句中可能要注意一下,express.static( )是处理静态请求的,设置了public文件,public下所有文件都会以静态资料文件形式返回(如样式、脚本、图片素材等文件)


var routes = require('./routes/index');
var users = require('./routes/users');

app.use('/', routes);
app.use('/users', users);

上面代码表示当用户使用/访问时,调用routes,即routes目录下的index.js文件,其中.js后缀省略,用/users访问时,调用routes目录下users.js文件 
  3.app.get(name)
  获取名为name的项的值
  4.路由文件index.js

router.get('/', function(req, res) {
  res.render('index', { title: '

Express

' ,users:[{username: 'Tiany'}, {username: 'Tiany Zhong'}, {username: 'Zhong Dian'}] }); });

这段表示,router.get表示通过get请求/时,响应后面的function处理,两个参数分别是request、response;
res.render表示调用模版引擎解析名字index的模板,传并传入了title和users两个对象做为参数;
此外 解析views目录下的index.ejs?原因就是app.js中的设置:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

而这两个参数在index.ejs中可以使用,最后就是我们看到的页面展示效果了。

内容大多是根据书籍和网上资料的总结,结合自己实践中遇到问题做了记录和总结,其中描述可能不是很准确,还有许多内容没有细究,若是存在问题,还望大神指正建议。

你可能感兴趣的:(Nodejs学习笔记(四)--- Express安装与模版引擎ejs)