Express后台开发环境搭建入门课程

648 阅读4分钟

前言:

如果你是一个合格的前端开发工程师,那么可能你或多或少都接触过nodejs,因为在很多情况下,我们前端开发人员想开发一个自己的项目,但是不会后端,导致项目无法进展下去,所以很多时候掌握一门后端技术会让前端开发人员的的路子变宽很多。

那么我们前端开发人员使用nodejs来进行开发无疑是最好的选择之一,因为毕竟nodejs可以让我们用js语法编写后台程序和接口,让我们能够向着全栈开发工程师迈进。

1.Express介绍

官网上有这样一句话很好的概括了Express:

高度包容、快速而极简的Node.js Web 框架

前端有Vue、react等框架,Java也有相对应的开发框架,那么Nodejs也有对应的开发框架,Express就是这样一个Nodejs框架。

Express 是一个简洁而灵活的 node.js web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。

总的来说:Express可以快速的帮助我们搭建一个完整的网站,它并没有更改Nodejs原有的特性,它只是在Nodejs的基础上进行了扩展,让我们可以更方便的进行开发,它有以下几点核心特点:

  • 可以设置中间件来响应 HTTP 请求
  • 定义了路由表用于执行不同的 HTTP 请求动作
  • 定义了路由表用于执行不同的 HTTP 请求动作

2.安装Express

全局安装Express生成器,就像vue-cli一样,可以让我们使用express命令直接创建一个基于express的项目。

npm i -g express-generator

查看Express版本,出现版本号则代表安装成功

express --version

查看版本号

3.初始化Express项目

(1)初始化项目

在电脑任意位置,打开命令行,输入如下初始化命令:

express server // server为项目名称,可以任意取

此时目录出现了server文件夹,命令行出现如下界面则代表创建成功:

创建成功

项目初始目录如下:

(2)安装依赖

根据命令行内的提示,安装依赖,进入项目文件夹内,输入如下命令:

npm install 

通过package.json文件,我们可以看到项目里面的依赖又哪些,以及启动命令:

package.json文件

依赖解释:

  • cookie-parser:第三方cookie操作模块
  • express:express框架
  • morgan:日志组件

(3)启动项目

命令行输入命令:

npm run start

命令行显示如下则代表启动成功:

启动成功

我们可以通过bin下面的www文件查看端口号是多少,默认端口是3000,通过浏览器访问同样可以得知是否启动,浏览器输入http://localhost:3000:

启动成功

4.安装nodemon

按照上面方式初始化的项目无法做到更新,当我们更改了代码必须重启才行,所以我们借助nodemon插件实现热更新。

安装依赖:

npm install nodemon

在package.json里面更改启动命令:

"scripts": {
    "start": "nodemon ./bin/www"
},

这个时候项目就可以做到热更新了。

5.封装路由

做前端开发的小伙伴都知道,后端只负责给我们暴露接口,格式大概是/api/...这样的,那么在express中,同样以这种形式将接口返回给前端。在我们刚刚生成的express项目中,有routes文件夹,这个文件夹下面就用来放置我们的路由,也可以叫做接口。

我们改造以下routes文件夹,让我们的路由更加方便管理。

(1)在routes文件夹下新建modules文件夹,用来存放各个接口模块,然后删掉初始化出来的user.js:

新建modules文件夹

因为其它地方引用了它们,所以还得删掉引用的地方,在app.js中:

然后修改为如下:

初始化路由

(2)在modules文件夹下新建home.js,用来存放首页的相关接口逻辑,并编写代码如下:

/routes/modules/home.js
// 封装接口方法
const home = {
  getInfo: (req, res) => {
    res.render("index", { title: "Express" });
  },
};
module.exports = home;

然后修改routes下的index.js,代码如下:

/routed/index.js
var express = require("express");
var router = express.Router();

const home = require("./modules/hoem");

/* GET home page. */
router.get("/getInfo", home.getInfo);

module.exports = router;

(3)这个时候就在浏览器输入http://localhost:3000/getInfo 同样可以访问了。