快速搭建一个Express工程骨架

本文指导如何快速搭建一个基于Express的Node.js工程。首先,介绍Express的基础知识并建议阅读官方文档。接着,详细说明如何使用express-generator全局安装并创建项目骨架,包括项目结构、package.json文件及下载依赖。最后,讲解启动服务、访问欢迎界面以及分析关键代码如app.js、routers下的index.js和views中的index.ejs文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、前期准备

学习Express的基础知识,可以看看中文文档

二、创建项目骨架

1.下载express-generator

通过应用生成器,可以帮我们快速搭建项目需要的骨架。这就需要npm在全局下载express-generator(-g就是在全局安装)
$ npm install express-generator -g

2.使用生成器创建项目

在一个文件夹下面创建一个叫做“FirstApp”的工程,使用的模板为ejs,默认是jade。

E:\node>express FirstApp -e
这里写图片描述

我们可以发现在目录中已经创建好了FirstApp文件夹,项目的结构如下

这里写图片描述

打开package.json这里写的是项目的相关信息,比如项目名称、版本、依赖项等。
{
  "name": "FirstApp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "ejs": "~2.4.1",
    "express": "~4.13.4",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0"
  }
}
下载项目的依赖项
E:\node\FirstApp>npm install

这里写图片描述

然后你就会在FirstApp目录下会多了一个node_modules的文件夹,里面就是项目所需要依赖的模块

这里写图片描述

三、启动项目

1.启动服务

使用如下命令,旧版本是node app.js 你可以去package.json文件找到启动命令
E:\node\FirstApp>node ./bin/www

2.在浏览器输入localhost:3000

我们可以看到Express的欢迎界面

这里写图片描述

3. 查看代码

1)打开app.js(项目的入口),我们看看里面有什么

通过require把项目的依赖项引入进来

var express = require('express');

设置视图的路径,我们把页面都放在views文件夹下面。视图的模板引擎是ejs

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

设置公共文件的存放位置,默认把公共文件比如stylesheets、javascript、images等放在public文件夹下面

app.use(express.static(path.join(__dirname, 'public')));
2)打开routers下面的index.js

+》在浏览器输入localhost:3000发送一个get请求,node服务监听到来自3000端口的请求时就会对这个请求进行处理。它会对地址栏的地址和路由规则进行匹配,如果 匹配成功它就会返回请求的处理,对相应的页面进行渲染。
+》router.get()方法有两个参数,第一个是路由规则,第二个是一个中间件函数,如果路由匹配成功所进行的操作。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
3)打开views下面的index.ejs

+》样式的引入,这里直接写的是下面的,因为前面已经设置好公共文件的存放位置,即在public下面。它会自动找到public下面对应的文件
<link rel='stylesheet' href='/stylesheets/style.css' />

+》写过html的童鞋,看ejs页面一定不会陌生,其实都差不多,就是后缀不一样,然后ejs可以渲染。渲染一般是下面的形式,当匹配到规则时就会把值传过来,对页面进行渲染。
<%= title %>

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值