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日

相关文章

  • JavaScript实现网页计算器功能

    JavaScript是现代网页开发中不可或缺的语言,可以用来实现网页计算器功能。以下是实现网页计算器功能的完整攻略,包含两条示例说明: 1. 创建网页结构 在HTML页面中创建一个计算器界面。可以使用<div>元素来包含计算器所有内容。 在这个<div>元素中,可以创建多个<button>元素,每个<button&g…

    JavaScript 2023年6月11日
    00
  • javascript合并两个数组最简单的实现方法

    针对这个问题,我将提供以下完整攻略: JavaScript合并两个数组最简单的实现方法 在JavaScript中合并两个数组的方法有很多,但这里我们将要学习最简单的两种方法。它们都是原生JavaScript方法,不依赖于外部库。 方法一:concat()方法 concat()方法通过将两个数组组合在一起来创建一个新数组。数组的元素将首先是第一个数组中的元素,…

    JavaScript 2023年5月27日
    00
  • Javascript valueOf 方法

    以下是关于JavaScript valueOf方法的完整攻略。 JavaScript valueOf方法 JavaScript valueOf方法是所有JavaScript对象的一个方法,用于返回对象的原始值。对于Number对象,方法返回对象的原数字值。 下面是一个使用valueOf方法的示例: var num = new Number(123); con…

    JavaScript 2023年5月11日
    00
  • vue使用keep-alive保持滚动条位置的实现方法

    当我们在Vue应用中使用Vue-router进行路由跳转时,如果跳转到的页面存在滚动条,那么这时候就会存在一个问题,就是当我们返回到之前的路由时,滚动条会自动回到顶部,而不是保持在之前的位置。而我们可以使用keep-alive组件来保持滚动条位置。 Vue中keep-alive组件的使用 Vue中的keep-alive组件可以帮助我们在组件切换时,保留组件状…

    JavaScript 2023年6月11日
    00
  • JS闭包原理及其使用场景解析

    JS闭包原理及其使用场景解析 什么是闭包? 闭包(Closure)指的是有权访问另外一个函数作用域内变量的函数。 用更通俗易懂的话来说,闭包就是函数内部定义的函数,它可以访问自己的变量,还可以访问父级函数的变量。 闭包的原理 在JavaScript中,如果两个函数嵌套的话,内部函数就可以访问外部函数的变量。这是因为在JavaScript中函数会形成一个作用域…

    JavaScript 2023年6月10日
    00
  • element-ui 上传图片后标注坐标点

    下面将详细讲解“element-ui上传图片后标注坐标点”的完整攻略。 准备工作 安装 element-ui 组件库和 vue-cropperjs 图片裁剪插件。 npm install element-ui vue-cropperjs –save 引入 element-ui 中的 Upload 和 Dialog 组件。 <template> …

    JavaScript 2023年6月10日
    00
  • JS简单获取及显示当前时间的方法

    JS简单获取及显示当前时间的方法可以使用JavaScript中的Date对象。下面是实现该方法的完整步骤: 1. 获取当前时间 在JavaScript中,可以创建一个Date对象,用它来表示当前时间。 let currentDate = new Date(); 这个Date对象表示的就是当前时间。如果你想获取特定事件的时间,可以传入相应的日期和时间参数,例如…

    JavaScript 2023年5月27日
    00
  • JavaScript 函数语法详解

    JavaScript 函数语法详解 在JavaScript中,函数也被称为一等公民,因为它们可以像任何其他值(数字,字符串等)一样进行操作。函数可以接受参数和返回值,并且可以在任何位置声明或调用。下面是JavaScript函数的语法: function functionName(parameters) { // 函数体 return returnValue;…

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