express的简单使用

一、express的项目生成器

• 通过应用 生成器工具 express-generator 可以快速创建一个应用的骨架。

1.在命令提示符中依次执行以下命令：

• 下载生成器（脚手架）
  • npm install express-generator -g
• 创建项目目录
  • express myapp
• 进入目录
  • cd myapp
• 下载依赖
  • npm install
• 启动项目
  • npm run start

2.项目结构介绍：

• myapp
  • bin
    • 项目的入口文件，执行npm run start启动的文件
  • node_modules
    • 依赖文件，第三方模块
  • public
    • 静态资源文件夹，图片，css，js
  • routes
    • 路由文件，根据不同的请求路径，执行对应的处理
  • views
    • 前端页面，后台的模版（前后端不分离）
  • app.js
    • 应用各种中间件，设置静态资源文件夹，注册路由和接口，控制器
  • package.json
    • 模块的说明文件

3.补充：了解静态资源文件

二、ejs模版的使用

1、express生成器默认项目模板为jade模版，语法生僻，不接近前端语法，学习成本高。

2、所以，在使用express生成器创建项目时，可将创建生成器命令替换为：

• express myapp --view=ejs

3、ejs模版语法介绍：

• 变量的定义和渲染：

  • 定义：
    • ./routes/index.js文件

  router.get('/', function(req, res, next) {
  	res.render('index', {
      	title: 'Express',
     		msg:"这是一个<mark>信息</mark>"
  	});
  });
  

• 渲染：

  • ./views/index.ejs

  <%= msg %>    // 转义标签
  <%- msg %>    // 解析标签
  

• 循环的定义和渲染：

  • 定义：
    • ./routes/index.js文件

router.get('/', function(req, res, next) {
    res.render('index', {
        title: 'Express',
        arr:["北京","上海","广州","深圳","成都"]
    });
});

• 渲染：
  • ./views/index.ejs

<% for(var i=0;i<arr.length;i++){ %>
    <li><%= arr[i] %></li>
<% } %>

• 分支的定义和渲染：

  • 定义：
    • ./routes/index.js文件

router.get('/', function(req, res, next) {
    res.render('index', {
        onoff:true
    });
});

• 渲染：
  • ./views/index.ejs

<% if(onoff){ %>
    <p>真</p>
<% }else{ %>
    <p>假</p>
<% } %>

• 引入公共部分的模版：

  • 定义公共模版：
    • ./views/header.ejs文件

<div>这是公共的头部内容</div>
引入公共模版：
./views/index.ejs
<%- include("./header.ejs") %>

*注意解析标签，不是转义