Nodejs 手动搭建 Express 项目

俗话说好记性不如烂笔头,在看了两天文档后,在这里准备把自己学到的东西写成文章记录下来。

安装全局模块

npm install -g express express-generator supervisor 

// express-generator  Express 应用生成器
// supervisor  监视你对代码的改动,并自动重启 Node.js ,必须全局安装

快速生成项目

express -e blog   // -e 使用ejs 模板引擎生成项目

手动创建项目

1.安装依赖

npm init 
npm install express ejs --save
// 项目结构

blog
├─app.js        // 入口文件
├─package.json  // 项目依赖配置
├─node_modules  // 存放项目的依赖库
├─public        // 静态文件资源目录
│  ├─images
│  ├─js
│  └─styles
└─views         // 视图文件(ejs模板 或jade 模板)

2.编写入口文件

// 引用模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();

app.set('views', path.join(__dirname,'views'));  // 设置视图文件目录

app.set('view engine' , 'ejs'); //设置模板引擎为ejs

app.use( express.static(path.join(__dirname, 'public')) );  // 配置静态资源目录


// 路由规则
app.get('/', function(request, response){
    response.send('Hello Node.js')
});

app.listen(3000);    // 监听 3000 端口

console.log('server started at port 3000');

3.修改模板后缀

默认ejs模板只支持渲染以ejs为扩展名的文件,可能在使用的时候会觉得它的代码书写方式很不爽还是想用html的形式去书写。
在这里可以使用engine 注册模板引擎的函数,让他处理指定后缀名的文件

/*
* 将上面的 app.set('view engine' , 'ejs')
* 修改成
* */

app.set('view engine' , 'html'); //修改模板文件的后缀名为html
app.engine('.html' , ejs.__express);   //"__express",ejs模块的一个公共属性,表示要渲染的文件扩展名。

接下来在控制台跑起来看看

node app.js

浏览器访问 http://localhost:3000 成功输出
图片描述

到这里项目就已经初步搭建起来了。

4.路由模块化

在根目录新建routes 文件夹

// routes/index.js  

var express = require('express');
var router = express.Router();   //使用 express.Router 类创建模块化、可挂载的路由句柄

// 访问根路由 渲染 index 模板
router.get('/', function (req, res) {
    res.render('index');
});

module.exports = router;

添加模板, 在views文件夹下新建 index.html 模板 (就一普通html文件)

修改入口文件app.js


// 引入 路由模块
var router = require('./routes/index');
app.use('/', router);

将写在app.js 中的路由删掉。

到这里整个项目已经搭建起来了,大功告成。

//app.js

// 引用模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
var port = process.env.PORT || 3000;
// 引入 路由模块
var router = require('./routes/index');
app.use('/', router);
// 设置视图文件目录
app.set('views', path.join(__dirname,'views'));  

// app.set('view engine' , 'ejs'); //设置模板引擎为ejs
app.set('view engine' , 'html'); //设置模板引擎为html
app.engine('.html' , ejs.__express);

app.use( express.static(path.join(__dirname, 'public')) );  // 配置静态资源目录
app.listen(port);
console.log('server started at port ' + port);

ps: 第一次写文章,请多加指教。


初探Node.js
做笔记用~ 请多指教。
876 声望
17 粉丝
0 条评论
推荐阅读
react 实现div缩放、旋转、拖拽的9个控制点
在被控制的元素的四条边和四个角添加8个控制点控制点。拖拽控制点时判断拖拽的方向,计算偏移量。修改元素的top、left、width、height。旋转功能是通过三角函数计算鼠标拖动后的角度。动态修改元素的rotate

yeungx26阅读 8.2k评论 2

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco22阅读 2.2k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.8k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

876 声望
17 粉丝
宣传栏