node.js Web应用框架Express入门指南

Node.js Web应用框架Express入门指南

Express是基于Node.js开发的Web应用框架,它提供了一组API来帮助开发者快速地创建Web应用程序。本指南将介绍如何入门使用Express,包括安装、配置、路由、模板引擎等方面的内容。

安装Express

首先需要安装Node.js和npm。安装完成后,可打开终端窗口,输入以下命令安装Express:

npm install express

配置Express应用

创建一个新的Express应用,可以在终端输入以下命令:

express myapp
cd myapp
npm install

这将创建一个名为myapp的Express应用程序。接下来,可以使用以下命令启动应用程序:

npm start

这将在默认端口3000上启动应用程序。在浏览器中打开http://localhost:3000,即可访问应用程序的主页。

路由

路由是处理HTTP请求的机制。Express提供了一组API来定义路由。例如,以下代码将处理根路径的请求,并返回Hello World:

const express = require('express')
const app = express()

app.get('/', function(req, res) {
  res.send('Hello World')
})

app.listen(3000)

在浏览器中访问http://localhost:3000,即可查看响应内容。

除了处理GET请求,还可以处理其他HTTP方法的请求,如POST、PUT、DELETE等。以下代码将处理POST请求:

app.post('/', function(req, res) {
  res.send('Hello World')
})

模板引擎

模板引擎是将动态数据呈现到Web页面上的机制。Express支持多种模板引擎,如EJS、Jade等。以下代码使用EJS模板引擎将动态数据呈现到页面上:

先安装ejs

npm install ejs
const express = require('express')
const app = express()

app.set('view engine', 'ejs')

app.get('/', function(req, res) {
  res.render('index', {name: 'Express'})
})

app.listen(3000)

在views文件夹下新建一个index.ejs文件,其中可以使用<%= %>语法来插入动态数据。

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
  </head>
  <body>
    <h1>Hello <%= name %>!</h1>
  </body>
</html>

在浏览器中访问http://localhost:3000,即可看到响应内容为Hello Express。

示例1

以下代码实现了一个简单的Express应用,它处理了根路径和/about路径的请求,并返回不同的响应内容。

const express = require('express')
const app = express()

app.set('view engine', 'ejs')

app.get('/', function(req, res) {
  res.send('Welcome to my homepage!')
})

app.get('/about', function(req, res) {
  let people = ['Alice', 'Bob', 'Charlie']
  res.render('about', {people: people})
})

app.listen(3000)

在views文件夹下新建一个about.ejs文件,其中可以使用<%= %>语法来插入动态数据。

<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
  </head>
  <body>
    <h1>About</h1>
    <ul>
      <% people.forEach(function(person) { %>
        <li><%= person %></li>
      <% }) %>
    </ul>
  </body>
</html>

在浏览器中访问http://localhost:3000,即可看到不同的响应内容。

示例2

以下代码实现了一个简单的Express应用,它处理了根路径的请求,并返回一个表单。当表单被提交后,将显示提交的数据。

const express = require('express')
const app = express()

app.set('view engine', 'ejs')
app.use(express.urlencoded({extended: false}))

app.get('/', function(req, res) {
  res.render('form')
})

app.post('/', function(req, res) {
  let name = req.body.name
  let email = req.body.email
  res.send(`Name: ${name}, Email: ${email}`)
})

app.listen(3000)

在views文件夹下新建一个form.ejs文件,其中包含了表单内容和提交按钮。

<!DOCTYPE html>
<html>
  <head>
    <title>Form</title>
  </head>
  <body>
    <h1>Form</h1>
    <form action="/" method="POST">
      <div>
        <label>Name:</label>
        <input type="text" name="name" />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

在浏览器中访问http://localhost:3000,即可看到表单。填写表单后,点击Submit按钮,即可看到提交的数据。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:node.js Web应用框架Express入门指南 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • php中preg_replace正则替换用法分析【一次替换多个值】

    《PHP中preg_replace正则替换用法分析【一次替换多个值】》是一篇介绍PHP中正则替换的文章,主要介绍preg_replace函数中的一些使用技巧,可以一次替换多个值。 一、preg_replace函数 preg_replace是PHP中用于正则替换的函数。它的语法如下: preg_replace($pattern, $replacement, $…

    JavaScript 2023年6月10日
    00
  • JavaScript运行过程中的“预编译阶段”和“执行阶段”

    JavaScript代码的运行分为两个阶段:预编译阶段和执行阶段。在预编译阶段,JavaScript引擎会进行一些预处理操作,包括变量声明、函数声明、变量提升等。执行阶段则是按照预处理结果进行实际代码的执行。 预编译阶段 变量声明 在预编译阶段,JavaScript引擎会将代码中所有的变量声明存储到作用域中。例如: console.log(a); // un…

    JavaScript 2023年5月27日
    00
  • 理解Javascript_13_执行模型详解

    下面是关于“理解Javascript_13_执行模型详解”的完整攻略。 1. 理解Javascript执行模型 1.1 什么是执行模型 JavaScript 执行模型是指描述 JavaScript 引擎如何解析和执行 JavaScript 代码的一种方式。简单来说,就是 JavaScript 程序在浏览器中如何被“翻译”成机器能够理解的指令,然后顺序地被执行…

    JavaScript 2023年5月18日
    00
  • JavaScript前端面试组合函数

    JavaScript前端面试中,组合函数是一个常见的考点,如果能够掌握组合函数的概念、实现及应用,能够极大地提高我们面试的成功率。本篇文章将会详细讲解“组合函数”的相关知识点,并提供两个示例来进行说明。 什么是组合函数 组合函数指的是将多个函数组合成一个新的函数,新函数会按照一定的顺序调用这些子函数,并将每个子函数的返回值作为参数传递给下一个函数。组合函数可…

    JavaScript 2023年5月27日
    00
  • JavaScript实现自动生成网页元素功能(按钮、文本等)

    让我们来详细讲解一下“JavaScript实现自动生成网页元素功能(按钮、文本等)”的完整攻略。 1. 需求分析 要实现自动生成网页元素功能,首先需要明确我们的需求和目标。我们的目标是在用户输入指定的元素类型和数量后,自动生成对应的HTML元素,比如按钮、文本输入框等。可以参考以下的需求分析: 需要一个表单,供用户填写元素类型和数量。表单设计可以参考以下样式…

    JavaScript 2023年6月10日
    00
  • 分享我通过 API 赚钱的思路

    写在最前 我们经常看到非常多的 API 推荐,但又经常收藏到收藏夹里吃灰,仿佛收藏了就是用了。 很多时候没有用起来,可能是因为想不到某类 API 可以用来做什么或者能应用在哪里。 下面我将我思考的一些方向给到大家,希望我们都能共同致富。 天气类 API 天气预报查询:获取城市的天气实况数据;更新频率分钟级别。 空气质量查询:获取指定城市的整点观测空气质量等。…

    JavaScript 2023年4月18日
    00
  • JavaScript 弱引用强引用底层示例详解

    JavaScript 弱引用和强引用底层示例详解 什么是引用 在 JavaScript 中,引用是指对内存中存储的对象的指针。当创建一个对象时,JavaScript 会为其在内存中分配一块区域,并返回一个引用,用于在程序执行时访问该对象。在 JavaScript 中,所有变量都是通过引用来存储和访问的,因此引用是非常重要的概念。 弱引用和强引用 在 Java…

    JavaScript 2023年6月10日
    00
  • Vue中$router与 $route的区别详解

    Vue中$router与$route的区别详解 在Vue中,$router和$route两个属性经常被用到,但是它们又有什么区别呢? $route $route是Vue-Router中的一个对象,它包含了当前路由的信息,例如当前的路径、参数、query参数等。在组件中可以通过this.$route来访问。 下面通过一个示例来说明: <template&…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部