Node.js基础入门第九天

简介: Node.js基础入门第九天

经过前面几天对Node.js的学习,基本的开发知识已经逐渐掌握,所谓工欲善其事必先利其器,今天进一步学习Node.js的开发框架Express。利用Express框架可以快速的进行Web后端开发,本文仅供学习分享使用,如有不足之处,还请指正。

Express简介

Express是基于 Node.js 平台,快速、开放、极简的 Web 开发框架,目前最新版本是4.17.2。Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。

具体可参考Express中文王

Express生成器

1. 什么是Express生成器

通过应用生成器工具 express-generator 可以快速创建一个基于Express的应用程序的骨架。

2. 安装Express生成器

全局安装 express-generator ,可以通过在命令行工具执行以下命令进行:

cnpm i -g express-generator

安装过程,如下所示:

注意:全局安装npm的模块目录:C:\Users\Alan.hsiang\AppData\Roaming\npm 。

创建Express项目

Exress生成器安装成功后,就可以通过命令创建Express项目,如下所示:

切换到项目所在目录,通过以上命令,自动创建一个Express项目:

express -e 项目名称

创建过程,如下所示:

注意:如果已经手动创建项目目录,则可以通过express -e 创建默认项目。

创建成功后,在文件夹里面打开,默认目录结构如下所示:

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug
7 directories, 9 files

安装项目依赖

在创建默认项目后,还需要安装依赖模块,才可以运行程序,如下所示:

cnpm i

安装过程,如下所示:

依赖安装成功后,即可在文件夹中查看,多出来一个目录【node_modules】,如下所示:

运行Express项目

在项目所在的命令行窗口,输入以下命令,即可启动项目:

npm start

启动过程,如下所示:

在浏览器中输入网址【http://localhost:3000/】,即可打开项目。具体如下所示:

以上就表示Express安装创建成功。

Express目录结构说明

关于Exress生成器默认创建的项目,目录结构如下所示:

创建一个新路由模块

以创建一个新闻模块为例,步骤如下所示:

1. 创建ejs模块文件

在views目录下,创建news目录,然后创建list.ejs和detail.ejs,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新闻列表页</title>
    </head>
    <body>
        <h3>新闻列表</h3>
        <ul>
            <li>第一条新闻</li>
            <li>第二条新闻</li>
            <li>第三条新闻</li>
            <li>第四条新闻</li>
        </ul>
    </body>
</html>

新闻详细页:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新闻详细页</title>
    </head>
    <body>
        <h3>新闻详细页</h3>
    </body>
</html>

注意:本示例只是为了说明原理,所以都是简单的html页面代码

2. 创建路由文件

在routes目录下,创建一个news.js文件,并添加代码,做为news模块的路由文件。如下所示:

var express = require('express');
var router = express.Router();
/* GET news listing. */
router.get('/list.html', function(req, res, next) {
  res.render('news/list',{});
});
router.get('/detail.html', function(req, res, next) {
  res.render('news/detail',{});
});
module.exports = router;

3. 在app.js中引入路由

在app.js中添加如下两行代码,即可引入新的路由,如下所示:

4. 运行项目

在命令行中运行项目,如下所示:

在浏览器中,输入网址,如下所示:

以上,则表示express项目模块成功运行。

备注

杂诗三首·其三【作者】沈佺期 【朝代】唐

闻道黄龙戍,频年不解兵。

可怜闺里月,长在汉家营。

少妇今春意,良人昨夜情。

谁能将旗鼓,一为取龙城。

相关文章
|
5月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
1357 2
|
3天前
|
JSON JavaScript 前端开发
菜鸟之路Day23一一JavaScript 入门
本文介绍了 JavaScript 的基础内容,包括 JS 的引入方式、基础语法、数据类型、运算符、类型转换、函数、对象(如 Array、String、自定义对象、JSON、BOM 和 DOM)、事件监听,以及 Vue 框架的初步使用。重点讲解了内部和外部脚本的引入、变量声明(var、let、const)、常见输出语句、数组与字符串的操作方法、DOM 操作及事件绑定,并通过实例展示了 Vue 的双向数据绑定和常用指令(v-bind、v-model、v-on、v-if、v-for 等)。
18 7
|
3月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
4月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
202 10
|
4月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
743 1
|
4月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
182 0
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
6月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
377 5
一小时入门Vue.js前端开发
|
5月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
5月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
62 1
|
5月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
1066 1

热门文章

最新文章