101-《Nodejs开发》-服务器端编程（后端开发）

谁家好人学前端啊
394 阅读10分钟

目录

  • 搭建简易服务器（体验）

  • express框架学习

    • 数据处理
    • 路由匹配

  • 后端优化

    • MVC

  • 业务

    • 身份认证

  • 为什么要整后端

    • 体验完整的web应用开发的流程，让我们对web应用有整体的认识。后端采用的是Nodejs+MongoDB进行开发，大多数代码仍是JavaScript代码，所以也有加深印象提高代码熟练度的目的。

一、搭建简易服务器(nodejs)

  • 目的：体验原生的服务器编程，搭建一个简单的服务器，方便后续引入Express框架。

1.1 搭建Nodejs服务器

  • 思想：需要利用Nodejs自带的http模块进行服务器搭建代码开发。我们使用http模块提供的api进行服务器的搭建。

  • 流程

    • 1.在任意目录下新建一个js文件，名称自定义，推荐server.js

    • 2.编写该js文件，首先引入http模块

      const http = require('http')
      • require的作用等同于import from，引入一个模块

    • 3.使用createServer新建一个服务器实例对象，方便后续启动服务器

      const server = http.createServer();

    • 4.监听新建服务器对象的request事件，当前端浏览器向该服务器发送数据时会自动触发该事件的处理程序

      server.on('request',function(req,res){
    console.log('服务器触发');
    // 设置配置代码，确定字符编码为UTF-8解决中文乱码问题
    res.setHeader("content-type","text/html;charset=utf-8");
     //发送处理的数据给前端
    // res.write("welcome  to woniu");
    res.write("欢迎到蜗牛");
    res.end();
})

    • 5.监听计算机的端口，用于监听和接受浏览器传递过来的数据

      //3. 服务器使用某个计算机端口用于接受前端发送过来的数据(1~65535)
//推荐 3000 8080 4000 5000  6666
server.listen(3000,function(){
    console.log('服务器启动之后，会执行一次该函数，一般只是用于提示作用：推荐；服务器启动3000')
})

    • 6.利用Nodejs执行该server.js: 在js文件所在目录打开终端，输入node server.js启动服务器，成功启动会显示console.log里的内容

      img

      • 启动后如果要重新启动可以按住ctrl+c结束该次执行，然后重新输入命令启动服务器

    • 7.启动完之后，就可以打开浏览器：以http://localhost:端口号的形式来访问服务器

      img

1.2 服务器处理前端传递的数据

  • 思路：前端通过在地址栏中通过拼接的方式：http://localhost:3000?属性名=值&属性名=值2的形式传递数据到服务器，服务器使用对应的参数接受后就可以进行处理。处理后利用res.write将处理后的信息反馈给前端

  • 后端服务器如何接受前端传递过来的数据

    • 服务器监听request提供的req参数中有个url属性表示浏览器的完整访问服务器的路径，我们可以对地址进行解析从而拿到传递的数据

      server.on('request',function(req,res){    
console.log(req.url);//完整的网页地址
})

  • 接受数据后的处理流程

    • 1.将数据前缀部分利用replace进行替换为空字符串

      let url = req.url.replace("/?","");

    • 2.利用split将数据进行分割为数组（分隔符为=和&）

      url = url.split(/[=&]/)

    • 3.利用数组的api进行判断数据是否存在于正确数据中（比如判断用户是否输入正确）

      let isRight = users.some(user=>user.username==arr[1] && user.password==arr[3]);

    • 4.根据判断结果返回不同的信息给前端

      if(isRight){
    res.write("<h1>登录成功</h1>")
}else{
    res.write("<h1>登录失败,用户名或密码错误</h1>")
}

    • 5.重启服务器，查看效果

      img

1.3 原生Nodejs搭建服务器处理业务的不便

  • 需要手动的进行判断当前数据是要进行什么业务处理（登录、添加、删除、查询),导致大量的if和elseif
  • 需要手动的解析浏览器传递过来的数据
  • 默认中文是乱码的，需要手动处理
  • 解决：使用Express框架来进行服务器端开发（后端开发）

二、Express框架学习

  • 前提：解决原生的Nodejs服务器的诸多不便，提高后端开发的效率

2.1 Express框架的简介

  • 概念：是一款基于Nodejs的web应用开发框架。内部集成了大量的api供开发者使用，能够极大提升开发web应用(一般是网站)的效率。

  • 引入Express框架

    • Express需要通过npm下载对应的包，下载后才能使用

  • Express框架 特点

    • 内置了大量的api能够快速的实现数据（来源于浏览器或数据库）的接受和传递以及处理
    • Express自带的路由匹配机制能够极大的快速实现业务代码以及页面地址的匹配。即页面的地址可以自动的匹配对应的代码进行执行，比如匹配/login自动找到代码中对应 的函数并执行。即实现手动匹配业务代码变成自动匹配。
    • Express提供了多种api方便数据库的交互。
    • 自动解析浏览器传递过来的数据并包装为一个对象供开发者使用

  • Express框架的一般使用流程

    • 1.利用npm下载Express框架
    • 2.利用Express框架自带的插件快速搭建一个基于该框架以及Nodejs的web应用项目。
    • 3.利用Express提供的api来完成后端代码开发（业务开发）

2.2 搭建一个基于Express的项目并启动

  • 1.确保电脑已经全局安装了Express

    npm i  express-generator -g

  • 2.保存项目文件的目录下打开终端并使用Express命令快速新建一个项目（包含初始的文件以及文件夹）

    express 项目名称
    • 建议项目名称全小写，多个单词以-隔开（规范，非强制）

  • 3.在新建的项目目录下重新打开终端（或原终端输入 cd 项目文件夹名称进入项目根目录也可以），使用npm i下载项目所需的包

    npm i

  • 4.查看项目的package.json的启动命令，用npm执行就可以实现项目的启动，默认3000端口

    npm run start

  • 5.浏览器输入http://localhost:3000查看效果

2.3 express 项目文件夹架构

  • /bin:包含了项目的启动文件www,里面主要新建了服务器对象并加载了项目的配置文件app.js，所以开发者在app.js写的配置代码，重启服务器后会生效
  • /node_modules:包含项目所使用的包
  • /public:包含前端的所有资源。比如页面、样式、页面交互js、图片等资源。
  • /routes:包含所有的业务代码，利用Express的路由匹配机制进行业务代码执行
  • /views:包含了项目的视图代码，即页面代码。但本身是使用jade模板引擎开发，不适用前端。该文件夹可以忽略。
  • app.js:项目的核心配置文件，里面包含了所需要使用的所有的路由js文件以及数据库连接部分，是项目的核心文件。

2.4 Express的路由匹配机制

  • 概念：Express为了方便开发者针对不同的业务能够快速实现页面地址以及业务代码的匹配，设计出了路由匹配机制。

  • 主要内容：当浏览器输入对应的路由字符串时，Express会自动匹配在app.js引入的路由js文件/routes/下的js文件并匹配js文件中对应的路径，如果匹配上则执行对应的代码，如果没有匹配上，则报404错误（没有找到）

  • 例子：比如http://localhost:3000/users/login,这个路由地址

    • 1.Express会首先解析第一部分路由/users（也称一级路由），并在app.js中找到同个路径的app.use('/users',路由文件对象),并进入对应的路由文件中

      img

    • 2.继续解析第二部分路由/login,会在一级路由对应的文件中找到router.get('/login'，处理函数)并执行对应的函数。

      img

    • 3.处理后的数据可以通过调用res.send()返回给前端（见第二步）

2.5 Express 处理函数如何接受浏览器传递的数据

  • 概念：Express项目的处理函数的req参数有个query属性可以接受传递的数据。

  • 语法

    router.get('/add', function(req, res, next) { 
//使用req.query接受传递的数据 
console.log(req.query);
});

  • 例子：完成用户的添加

    • 1.书写添加用户的代码

      router.get('/add', function(req, res, next) {
  //业务代码编写
  let {username,password} = req.query;
  console.log(username,password);
  users.push({username,password})
  res.send('添加用户成功');
});

    • 2.保证app.js中有对应的路由匹配

      app.use('/users',userRouter)

    • 3.浏览器输入对应的地址回车，并查看效果

      img

2.6 服务器返回数据的规范格式

  • 概念：基本服务器返回的 是一个JavaScript对象。一般会包括两个属性code和message，有的还有data属性。

  • 返回数据的组成

    • code：指服务器处理状态码。成功一般为200，失败一般为-1，根据公司自己代码规范来定。
    • message：反馈的信息。如果处理成功一般为查询成功、添加成功、删除成功等，失败可以是添加失败，登录失败等
    • data:可选，一般是要返回的具体的数据，比如查询的用户数组

  • 一般格式

    {    
    code:200,    
    message:'查询成功',    
    data:数组
}

三、APifox

  • 前提：我们测试后端的代码是在浏览器直接输入地址进行测试，这样不够方便并且测试url不能保存。引入apifox方便前端用于测试后端编写好的功能代码（比如登录、注册、用户添加、订单查询、商品删除等）

3.1 apifox简介

  • 概念：apifox是一款前后端以及测试人员的一体化协作平台，可以帮助参与web应用开发和测试的it人员更快捷的对程序功能代码进行测试以及bug跟踪。

  • 特点

    • 以团队为单位，并且每个项目之间的测试代码都是独立的，并且可以保存测试代码
    • 每个项目都可以拆分为多个模块，每个模块之间都可以有多个测试代码

  • 引入

    • 下载客户端并安装后进行使用
    • 官方：apifox.com/
    • 版本：直接用最新的，以前的也可以

3.2 apifox相关概念

3.2.1 团队项目

  • apifox是以团队为单位。每个团队都可以有多个项目，每个项目都可以有 多个模块，而每个模块都可以有多个测试代码（接口）

  • 新建团队

  • 新建项目

  • 新建模块（目录）

  • 细节

    • 在公司里，项目是分到某个团队的，该团队的组长就负责邀请组员到该apifox团队中，接手新项目时，组长就会在该团队下新建项目，并设置每个团员的权限为编辑者（开发者），每个编辑者都可以添加目录和具体 的测试代码（接口）。
    • 在学习阶段：以上的所有工作都是学生自己完成。

3.2.2 接口

  • 概念：接口是一个it的常用概念。是指访问服务器某个操作的路径，通常一个接口对应服务器上的一个操作。比如用户查询接口、登录接口、注册接口等。每个接口本质是一个url，但是一般会有要发送的数据以及服务器针对该接口要返回处理后的数据，那么我们将针对该接口的说明文档，称为接口文档

  • 细节

    • 在公司里，接口文档可能是前后端一起协商进行编写，也可能后端开发人员包了。在学习阶段，学生自行编写。

  • 新建接口

补充

nodemon

  • 概念：一个npm包，可以实现监听nodejs项目下的任何js文件变化，从而能够自动重新启动项目，比如js文件修改自动重新启动Express项目

  • 安装

    npm i nodemon -g

  • 针对Express项目，在项目根目录下打开终端并使用nodemon启动，替换npm run start

    nodemon start
    • 后续修改js代码并保存，nodemon会自动进行重启
avatar
文章
阅读
粉丝