Nodejs 手动搭建 Express 项目

Eric 发布于2019-08-20 14:18 / 839人阅读

摘要：接下来在控制台跑起来看看浏览器访问成功输出到这里项目就已经初步搭建起来了。到这里整个项目已经搭建起来了，大功告成。引用模块引入路由模块设置视图文件目录设置模板引擎为设置模板引擎为配置静态资源目录第一次写文章，请多加指教。

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

安装全局模块

npm install -g express express-generator suptervisor 

// express-generator  Express 应用生成器
// suptervisor  监视你对代码的改动，并自动重启 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模块的一个公共属性，表示要渲染的文件扩展名。

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

浏览器访问 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: 第一次写文章，请多加指教。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81529.html

NodeJS+Express搭建个人博客-gulp自动化构建工具使用（二）

摘要：自动化构建工具使用简言现在不管是做前端还是后端的，不可避免的是要跟打交道的而且这么容易开发难道我们不想自己随手写点什么这类比较前卫的框架早就深度集成了很多前端的东西现在，就让我们手动为也插上的翅膀吧。 gulp自动化构建工具使用简言现在不管是做前端还是后端的，不可避免的是要跟html打交道的；而且Node这么容易开发web；难道我们不想自己随手写点什么？Express这类比较前卫的...

Yangder 2019-06-26 17:47 评论0 收藏0
NodeJS+Express搭建个人博客-环境搭建（一）

摘要：本项目持续更新中，开源免费与各位爱好技术达人共勉，注现阶段仍在开发中。。。。。 NodeJS+Express+MongoDb开发的个人博客 NodeJS+Express搭建个人博客-环境搭建（一）NodeJS+Express搭建个人博客-gulp自动化构建工具使用（二）NodeJS+Express搭建个人博客-Express+Mongodb组合架构介绍（三）NodeJS+Express...

Clect 2019-06-26 17:47 评论0 收藏0
express中间层搭建前端项目1

摘要：从前端小白到精通首先需要自行下载安装安装地址我的版本是，安装之后，需要安装依赖以及生成调试工具，亲测对版本比较敏感，只兼容低版本的所以调试可以用或者用软件进行调试安装调试链接，下载包，忘记了模板引擎用的是，喜欢用其实一样，只是语法有从前端小白到精通express 首先需要自行下载安装nodejs nodejs安装地址//我的版本是4.7.0，安装nodejs之后，需要npm in...

stefanieliang 2019-08-22 18:03 评论0 收藏0