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

简介: 前言:如果你是一个合格的前端开发工程师,那么可能你或多或少都接触过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

6.png


查看版本号


3.初始化Express项目


(1)初始化项目

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

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


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


创建成功

项目初始目录如下:8.png


(2)安装依赖

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

npm install 


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


9.png


package.json文件

依赖解释:


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


(3)启动项目

命令行输入命令:

npm run start


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


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



启动成功


4.安装nodemon


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


安装依赖:

npm install nodemon

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

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


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


5.封装路由


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


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


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

12.png


新建modules文件夹

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

然后修改为如下:14.png

初始化路由

(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 同样可以访问了。

18.png



相关文章
|
7月前
|
人工智能 JavaScript 前端开发
【利用AI让知识体系化】入门Express框架(三)
【利用AI让知识体系化】入门Express框架
|
7月前
|
XML 人工智能 JavaScript
【利用AI让知识体系化】入门Express框架(二)
【利用AI让知识体系化】入门Express框架
|
JSON JavaScript 中间件
【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件
【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件
300 9
【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件
|
7月前
|
人工智能 JavaScript 前端开发
【利用AI让知识体系化】入门Express框架(一)
【利用AI让知识体系化】入门Express框架
|
7月前
|
前端开发
node+express+ multer 实现文件上传入门
node+express+ multer 实现文件上传入门
|
JavaScript 前端开发 中间件
python web 开发与 Node.js + Express 创建web服务器入门
python web 开发与 Node.js + Express 创建web服务器入门
195 0
|
Linux 编译器 Go
兔起鹘落全端涵盖,Go lang1.18入门精炼教程,由白丁入鸿儒,全平台(Sublime 4)Go lang开发环境搭建EP00
Go lang,为并发而生的静态语言,源于C语言又不拘泥于效率,高效却不流于古板,Python灵活,略输性能,Java严谨,稍逊风骚。君不见各大厂牌均纷纷使用Go lang对自己的高并发业务进行重构,原因无他,经济下行的大背景之下,性能突出、效率拉满的Go lang无疑是高并发场景下节约服务器资源的一剂灵药。
兔起鹘落全端涵盖,Go lang1.18入门精炼教程,由白丁入鸿儒,全平台(Sublime 4)Go lang开发环境搭建EP00
|
开发框架 JavaScript 前端开发
【node进阶】深度解析之Express框架入门
【node进阶】深度解析之Express框架入门
【node进阶】深度解析之Express框架入门
|
JSON JavaScript 中间件
node.js 学习入门(07 - express 模块创建基本 web 服务器)(下)
node.js 学习入门(07 - express 模块创建基本 web 服务器)
|
JavaScript 中间件
node.js 学习入门(07 - express 模块创建基本 web 服务器)(上)
node.js 学习入门(07 - express 模块创建基本 web 服务器)