前言

Visual Studio Code(简称VSCode)是微软开发的一款免费开源跨平台代码编辑器,凭借其免费、开源、跨平台的特性,以及丰富的插件生态和美观的界面,成为前端开发者的首选工具。

本文将带你从零开始学习Express框架,包括搭建项目、配置路由、使用中间件以及实现动态渲染功能。这篇教程凝结了大量心血,如果你觉得有帮助,欢迎点赞、收藏、关注三连支持!

Node.js

Node.js 既不是传统意义上的前端,也不是后端,而是一个运行环境,但它主要用于后端开发

从技术角度看:

  • 前端通常指浏览器端的开发(HTML/CSS/JavaScript),运行在用户的浏览器中
  • 后端指服务器端的开发,运行在服务器上

Node.js 的特点是:

  1. 基于 JavaScript 语言(前端常用语言)
  2. 运行在服务器端(而非浏览器)
  3. 可以操作文件、数据库、处理网络请求等后端功能

因此,Node.js 让 JavaScript 跳出了浏览器的限制,能够用于开发服务器端程序,所以它主要被归类为后端开发技术,但本质上是一个跨领域的运行环境。

例如 Express 框架,就是基于 Node.js 构建的后端 Web 框架,用于处理 HTTP 请求、路由、服务器逻辑等后端任务。

基础概念解析

什么是动态渲染?

动态渲染指的是模板结构(如表格、列表等)保持不变,但展示的内容可以动态变化的技术。通过这种方式,我们可以用同一个模板展示不同的数据,大大提高了代码的复用性和维护性。

什么是终端?

在VSCode中,终端可以理解为一个内置的命令行窗口(类似Windows的CMD),我们可以通过它执行各种命令,如安装模块、运行程序等。

准备工作

首先,确保你已经安装了Node.js环境,然后全局安装Express:

npm install express -g

说明:-g参数表示全局安装,这样以后创建Express项目时就无需再次安装,实现"一劳永逸"

同样,我们还需要安装ejs模板引擎用于动态渲染:

npm install ejs -g

创建VSCode项目的注意事项

  1. 不要打开包含多个项目的总文件夹,以免项目之间相互影响
  2. 直接打开项目所在的目录作为工作区
  3. 确保端口不被占用(如提示8888端口已占用,说明可能启动了多个服务器)

自定义模块:在JS文件中调用其他JS文件的函数

在Node.js中,我们可以通过模块系统实现代码的复用。下面是一个简单的例子:

module.js

// exports是一个内置对象,用于导出函数和属性
// 导出一个加法函数
exports.add = function(a, b) {return a + b;
}// 导出一个属性
exports.msg = '给诗书画唱三连!Hello world!\n' + '看到这句话说明demo.js成功调用module.js中的内容!';

demo.js

// 引入当前文件夹下的module.js
// ./表示当前文件夹,.js后缀可以省略
let m = require('./module');// 调用模块中的函数
let num = m.add(3, 4);
console.log(num);// 访问模块中的属性
console.log(m.msg);

运行方式:在终端中输入node demo.js即可执行。

Express框架基础

创建第一个Express项目

  1. 首先创建一个package.json文件:
{"name": "helloapp","description": "我的第一个express项目","version": "1.0","private": true,"dependencies": {"express": "4.x"}
}
  1. 创建主程序文件(如app.js):
let express = require("express");
let app = express();// 配置路由:访问根路径时的响应
app.get("/", function(request, response) {response.send("欢迎访问本网站!");
});// 启动服务器,监听8888端口
app.listen(8888);
console.log("服务器启动完毕!访问地址:http://127.0.0.1:8888");
  1. 运行程序:在终端输入node app.js,然后在浏览器访问http://127.0.0.1:8888

使用Express访问静态HTML文件

如果需要访问静态HTML文件,可以使用express.static中间件:

  1. 创建public文件夹,并在其中创建index.html
<!DOCTYPE html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/920863.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/920863.shtml
英文地址,请注明出处:http://en.pswp.cn/news/920863.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

众擎机器人开源代码解读

一&#xff0c;综述 EngineAI ROS 包&#xff1a; 高层开发模式&#xff1a;用户可通过发布身体速度指令&#xff0c;直接调用 EngineAI 机器人的行走控制器。底层开发模式&#xff1a;用户可通过发布关节指令&#xff0c;自主开发专属的控制器。 ROS2 package&#xff1a;全…

Windows系统安装Git详细教程

文章目录步骤 1&#xff1a;下载 Git 安装包步骤 2&#xff1a;运行安装程序步骤 3&#xff1a;选择安装路径步骤 4&#xff1a;选择组件步骤 5&#xff1a;选择默认编辑器步骤 6&#xff1a;选择路径环境变量步骤 7&#xff1a;选择 HTTPS 协议的传输方式步骤 8&#xff1a;配…

leetcode 3446. 按对角线进行矩阵排序 中等

给你一个大小为 n x n 的整数方阵 grid。返回一个经过如下调整的矩阵&#xff1a;左下角三角形&#xff08;包括中间对角线&#xff09;的对角线按 非递增顺序 排序。右上角三角形 的对角线按 非递减顺序 排序。示例 1&#xff1a;输入&#xff1a; grid [[1,7,3],[9,8,2],[4,…

携程旅行 web 验证码 分析

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 逆向分析 部分python代码 result cp…

JavaEE 进阶第一期:开启前端入门之旅(上)

专栏&#xff1a;JavaEE 进阶跃迁营 个人主页&#xff1a;手握风云 一、HTML基础 1.1. 什么是HTML HTML(Hyper Text Markup Language)&#xff0c;超文本标记语言。 超文本&#xff1a;比文本要强大&#xff0c;通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本…

4.5 PBR

1.PBR简介 2.高光工作流 3.金属工作流1.PBR简介 PBR(Physically Based Rendering, 基于物理的渲染)的工作流分为金属工作流和高光工作流2.高光工作流 高光工作流是一种传统的工作流, 现在用的相对较少, 但是在某些特定情况下能提供更精细的控制a.核心思想它不区分金属和非金属,…

09.《路由基础知识解析和实践》

09.路由基础 文章目录09.路由基础核心概念路由关键组成部分三层转发原理介绍(通信流程)路由类型及配置直连路由&#xff08;direct&#xff09;实验示例**静态路由&#xff08;Static&#xff09;****实验示例****动态路由****RIP&#xff08;routing information protocol---路…

websocket建立连接过程

1. 客户端发送一个GET的http请求&#xff0c;请求头要包含connection: upgradehost&#xff1a;localhost:8000。表明地址upgrade: websocket。指明升级的协议sec-websocket-key 。 安全验证密钥sec-websocket-version。 协议版本sec-websocket-accept 。对传过来的key进行加密…

Simulink库文件-一种低通滤波模块搭建方法

在汽车电控系统应用层开发中&#xff0c;经常会用到低通滤波模块&#xff0c;其主要作用是去除输入信号中的高频干扰&#xff0c;防止由于输入信号的干扰引起后续执行系统的非预期频繁波动。本文介绍简要介绍低通滤波的定义及作用&#xff0c;并介绍一种低通滤波模块simulink搭…

【C++游记】AVL树

枫の个人主页 你不能改变过去&#xff0c;但你可以改变未来 算法/C/数据结构/C Hello&#xff0c;这里是小枫。C语言与数据结构和算法初阶两个板块都更新完毕&#xff0c;我们继续来学习C的内容呀。C是接近底层有比较经典的语言&#xff0c;因此学习起来注定枯燥无味&#xf…

音视频学习(六十二):H264中的SEI

什么是SEI? 在 H.264 视频编码标准中&#xff0c;补充增强信息&#xff08;Supplemental Enhancement Information&#xff0c;SEI&#xff09; 是一种特殊的 NAL&#xff08;网络抽象层&#xff09;单元。它不像序列参数集&#xff08;SPS&#xff09;或图像参数集&#xff0…

docker run 后报错/bin/bash: /bin/bash: cannot execute binary file总结

以下方法来源于AI&#xff0c;个人仅验证了第三条便成功执行 1. 镜像与宿主机架构不匹配 比如&#xff1a; 你是 x86_64 的机器&#xff0c;但镜像是 ARM64 的&#xff08;或反之&#xff09;。在 PC 上拉了树莓派用的镜像。查看镜像架构 docker inspect <image_name> | …

【Redisson 加锁源码解析】

Redisson 源码解析 —— 分布式锁实现过程 在分布式系统中&#xff0c;分布式锁 是非常常见的需求&#xff0c;用来保证多个节点之间的互斥操作。Redisson 是 Redis 的一个 Java 客户端&#xff0c;它提供了对分布式锁的良好封装。本文将从源码角度剖析 Redisson 的分布式锁实现…

uni-app支持单多选、搜索、查询、限制能否点击组件

<template><view class="multi-select-container" :class="{ single-select: !multiple, no-search: !searchable }"><!-- 当组件被禁用时,直接显示选中的内容 --><view class="disabled-display" v-if="disabled &a…

TFT屏幕:STM32硬件SPI+DMA+队列自动传输

看了网上的很多的SPIDMA的代码&#xff0c;感觉都有一些缺陷&#xff0c;就是基本都是需要有手动等待DMA完成的这个操作&#xff0c;我感觉这种等待操作在很大程度上浪费了时间&#xff0c;那么我加入的“队列”就是一种将等待时间利用起来的方法。原本的SPIDMA的操作逻辑如下图…

AI操作系统语言模型设计 之1 基于意识的Face-Gate-Window的共轭路径的思维-认知-情感嵌套模型

摘要&#xff08;AI生成&#xff09;本文提出了一种创新的AI操作系统语言模型设计框架&#xff0c;将人类意识活动的分层结构映射到人工智能系统中。该模型包含三个嵌套层次&#xff1a;理性思维层&#xff08;Face层&#xff09;&#xff1a;采用双面胶隐喻&#xff08;A/B面&…

疯狂星期四文案网第57天运营日记

网站运营第57天&#xff0c;点击观站&#xff1a; 疯狂星期四 crazy-thursday.com 全网最全的疯狂星期四文案网站 运营报告 今日访问量 今日搜索引擎收录情况

SQLark:一款面向信创应用开发者的数据库开发和管理工具

SQLark 是一款面向信创应用开发者的数据库开发和管理工具&#xff0c;用于快速查询、创建和管理不同类型的数据库系统&#xff0c;现已支持达梦、Oracle、MySQL、PostgreSQL 数据库。 SQLark 提供了对多种数据库的连接支持&#xff0c;实现跨平台数据库管理的无缝切换&#xff…

BigDecimal——解决Java浮点数值精度问题:快速入门与使用

在Java开发中&#xff0c;涉及金额计算、科学计数或需要高精度数值处理时&#xff0c;你是否遇到过这样的困惑&#xff1f;用double计算0.1加0.2&#xff0c;结果竟不是0.3&#xff1b;用float存储商品价格&#xff0c;小数点后两位莫名多出几位乱码&#xff1b;甚至在金融系统…

wpf之WrapPanel

前言 WrapPanel类似winform中的FlowLayoutPanel&#xff0c;采用流式布局。 1、Orientation 该属性指定WrapPanel中子空间布局的方向&#xff0c;有水平和垂直方向两种 1&#xff09;Horizontal 水平方向 子元素Button按照水平方向排列&#xff0c;如果一行排满了自动换下一…