WebStorm新建EJS工程

发表于2021-05-20更新于2021-05-21

NodeJs基于EJS得建立

项目整体目录如下：

img-0

1. 新建一个目录ejs_demo

进入这个目录执行代码：npm init

安装ejs依赖和渲染插件express

npm install ejs

npm install express

2. 新建app.js 通过node运行这个脚本文件，会开启一个服务，然后完成对模板文件得渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var http=require("http");
var express=require("express");
var app=express();
var path = require('path');
// 1.在app.js的头上定义ejs:
var ejs = require('ejs');
//定义变量
var tem={
  message:"我是中间部分"
};
//创建服务器
//在控制台输入node app.js启动服务器
http.createServer(app).listen(8080,function(){
  console.log("服务器地址为:http://localhost:8080");
});
//挂载静态资源处理中间件,设置css或者js引用文件的静态路径
app.use(express.static(__dirname+"/public"));
// 或者以下这个也可以
// app.use(express.static(path.join(__dirname, 'public'), {maxAge: 36000}));
//设置模板视图的目录
app.set("views","./public/views");
//设置是否启用视图编译缓存，启用将加快服务器执行效率
app.set("view cache",true);
// 2.注册html模板引擎：
app.engine('html',ejs.__express);
//设置模板引擎的格式即运用何种模板引擎
app.set("view engine","html");
//设置路由
app.get("/index",function(req,res){
  res.render("index",{title:tem.message});
});

3. 新建index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>EJS</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="/css/main.css" rel="stylesheet">
</head>
<body>
<%- include("./header.html") %>
<h1><%=title%></h1>
<%- include("./footer.html") %>
</body>
</html>

4. 新建head.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, 
         initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <h1>我是头部</h1>
</body>
</html>

5. 新建footer.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, 
    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>我是尾部</h1>
</body>
</html>

6. 新建main.cs

1
2
3
4
5
6
7
8
h1{
  width:80%;
  height:100px;
  background:green;
  margin:20px auto;
  text-align: center;
  line-height:100px;
}

7. 控制台运行命名：node app.js

在浏览器打开网址：localhost:8080/index

img-1

使用WebStorm模板来新建项目

1. 打开WebStorm新建项目 按如下选项进行选定。需要选择EJS模板引擎

image-3

2. 创建完毕我们会看到如下目录

image-4

3. 运行这个项目有两种方式

* 第一种是点击右上角得绿色三角形。

  然后在浏览器输入localhost:3000

  ![image-5.png](./WebStorm/image-5.png)

* 第二种方式：命令行输入 node www

  然后在浏览器输入localhost:3000

4. 新建一个新的页面方式如下：

4.1 新建文件student.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title><%= name %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= name %></h1>
<p>Welcome to <%= name %></p>
</body>
</html>

4.1 打开index.js文件。增加对student得路由跳转

1
2
3
4
5
6
7
8
9
10
11
12
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
router.get('/student', function(req, res, next) {
  res.render('student', { name: '张云' });
});
module.exports = router;

4.2 运行后浏览器打开：localhost:3000/student

image-6