express js 示例项目 - Javascript (1)

📌 相关文章

📜 express js 示例项目 - Javascript (1)

📅 最后修改于: 2023-12-03 15:30:41.239000 🧑 作者: Mango

Express.js 示例项目 - Javascript

介绍

Express.js 是基于 Node.js 的 Web 应用程序开发框架，可以帮助开发者快速创建 Web 服务器应用程序。本示例项目将介绍如何使用 Express.js 创建一个简单的 Web 应用程序，并演示如何使用路由、中间件、模板引擎等功能，对于初学者来说非常友好。

技术栈

Node.js
Express.js
EJS 模板引擎
bodyParser 中间件

项目目录结构

|-- public                  // 静态资源目录
    |-- css
        |-- main.css
    |-- js
        |-- main.js
|-- views                   // 视图模板目录
    |-- index.ejs
    |-- error.ejs
|-- app.js                  // 启动入口文件
|-- package.json            // 项目依赖

安装步骤

克隆本仓库代码：

git clone https://github.com/example/express-js-example.git

进入项目目录，安装依赖：
```
cd express-js-example
npm install
```
启动应用程序：
```
npm start
```
打开浏览器，访问 http://localhost:3000/，即可预览应用程序。

项目实现

启动文件

这里使用 app.js 作为启动文件，代码如下：

// 引入依赖
const express = require('express')
const bodyParser = require('body-parser')

// 实例化express
const app = express()

// 配置bodyParser中间件
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

// 设置静态资源目录
app.use(express.static('public'))

// 设置视图模板引擎
app.set('views', __dirname + '/views')
app.engine('html', require('ejs').renderFile)
app.set('view engine', 'html')

// 路由设置
app.get('/', (req, res) => {
  res.render('index')
})

// 错误处理中间件
app.use((err, req, res, next) => {
  console.log(err.stack)
  res.status(500).render('error', { error: err })
})

// 监听端口
app.listen(3000, () => {
  console.log('App is running on port 3000!')
})

express 模块是 Express.js 的核心模块，此处用于创建 app 实例对象。
body-parser 中间件是用于解析请求体的工具，这里使用 urlencoded 和 json 两种解析方式解析，解析后的数据会挂载到 req.body 上。
express.static 中间件是用于设置静态资源的目录，这里设置为 public 目录。
app.set 方法是设置 Express.js 的一些属性，这里设置了视图模板引擎和视图模板目录。
app.get 方法是用于设置 GET 请求的路由，当请求 / 路径时返回 index 视图模板。
错误处理中间件是用于捕获异常并处理的中间件，当发生异常时会跳转到 error 视图模板并显示错误信息。

视图模板

这里使用 EJS 模板引擎来渲染 HTML 页面。在 views 目录下创建 index.ejs 和 error.ejs 文件，分别用于渲染首页和错误页面，代码如下：

<!-- index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express.js 示例项目</title>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <h1>Hello, Express.js!</h1>
  <script type="text/javascript" src="/js/main.js"></script>
</body>
</html>

<!-- error.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express.js 示例项目 - 出错了</title>
</head>
<body>
  <h1>出错了！</h1>
  <p><%= error.stack %></p>
</body>
</html>

静态资源

在 public 目录下创建 css 和 js 目录，分别用于存放 CSS 和 JS 文件。

/* public/css/main.css */
h1 {
  color: blue;
}

// public/js/main.js
console.log('Hello, Express.js!')

效果演示

启动应用程序后，在浏览器中访问 http://localhost:3000/，页面会显示 Hello, Express.js! 和一条蓝色的线。

运行效果如下：

示例项目运行效果

总结

本示例项目展示了如何使用 Express.js 框架创建一个简单的 Web 应用程序，并演示了如何使用路由、中间件和模板引擎等功能。这只是一个非常简单的示例，可供初学者们入门和实践。实际上，Express.js 框架非常强大，支持各种中间件，可以让开发者更加高效地创建 Web 应用程序。