node+express+ejs制作简单页面上手指南

下面我将为您详细介绍如何使用node+express+ejs制作简单页面的步骤。

1. 安装node和express框架

如果你还没有安装node.js和express框架的话，你需要先从官网下载并安装Node.js并使用npm安装express框架。在命令行中输入以下命令进行安装：

npm install express --save

2. 创建Express项目

在终端中使用以下命令创建一个名为myapp的Express项目：

express myapp

这将创建名为myapp的文件夹，并将一些初始文件（如package.json和app.js等）放在其中。

3. 安装ejs模板引擎

使用以下命令安装ejs模板引擎：

npm install ejs --save

4. 在Express中设置ejs作为模板引擎

在Express项目中，打开app.js文件并添加以下代码：

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

这样就将ejs模板引擎设置为默认的模板引擎。

5. 创建路由和视图文件

在routes文件夹下创建一个名为index.js的文件，并添加以下代码：

var express = require('express');
var router = express.Router();

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

module.exports = router;

这将创建一个路由，当用户访问网站的根路径时，渲染名为index.ejs的视图文件。

在views文件夹下创建一个名为index.ejs的文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
</body>
</html>

这将创建一个简单的HTML页面，其中变量title将由Express传递给ejs模板引擎进行渲染。

6. 启动Express应用

在命令行中进入myapp目录并运行以下命令：

npm start

在浏览器中访问 http://localhost:3000/，即可看到一个简单的页面。

示例一：动态渲染视图

在之前的代码中，虽然在index视图中设置了变量title，但变量值始终是Express。在下面的示例中，我们将假设我们有一个名为users.json的数据文件，其中包含了用户数据，我们将使用该数据动态渲染视图。

在myapp文件夹下创建一个名为public的文件夹，并在其中创建一个名为user.json的文件，内容如下：

{
    "users": [
        {name: "张三", age: 20, gender: "男"},
        {name: "李四", age: 22, gender: "女"},
        {name: "王五", age: 19, gender: "男"}
    ]
}

修改index.js文件的代码：

var express = require('express');
var router = express.Router();
var fs=require('fs');
var users=JSON.parse(fs.readFileSync('./public/users.json'));

router.get('/', function(req, res, next) {
  res.render('index', { title: '用户列表',users: users.users });
});

module.exports = router;

修改index.ejs文件的代码：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <% for(var i=0;i<users.length;i++){%>
            <tr>
                <td><%= users[i].name %></td>
                <td><%= users[i].age %></td>
                <td><%= users[i].gender %></td>
            </tr>
            <%} %>
        </tbody>
    </table>
</body>
</html>

运行应用，并访问http://localhost:3000/，即可看到一个动态渲染的HTML页面。

示例二：使用form表单提交数据

在另一个示例中，我们将添加一个表单，让用户可以向服务器提交数据。

将routes文件夹下的index.js文件修改为以下代码：

var express = require('express');
var router = express.Router();
var fs=require('fs');
var users=JSON.parse(fs.readFileSync('./public/users.json'));

router.get('/', function(req, res, next) {
  res.render('index', { title: '用户列表',users: users.users });
});

router.post('/adduser', function(req, res) {
    var newUser=req.body;
    users.users.push(newUser);
    fs.writeFileSync('./public/users.json',JSON.stringify(users));//将新增用户更新到user.json文件中
    res.redirect('/');
});

module.exports = router;

同时在index.ejs页面添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <% for(var i=0;i<users.length;i++){%>
            <tr>
                <td><%= users[i].name %></td>
                <td><%= users[i].age %></td>
                <td><%= users[i].gender %></td>
            </tr>
            <%} %>
        </tbody>
    </table>

    <h2>添加用户</h2>
    <form action="/adduser" method="post">
        <p>姓名：<input type="text" name="name"></p>
        <p>年龄：<input type="text" name="age"></p>
        <p>性别：<input type="text" name="gender"></p>
        <p><input type="submit" value="提交"></p>
    </form>
</body>
</html>

此时，当用户填写表单并提交时，服务器将接收到表单数据并将其保存到users.json文件中，同时页面将重新加载，显示更新后的用户列表。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node+express+ejs制作简单页面上手指南 - Python技术站