详细记录基于vue+nodejs+mongodb构建的商城学习(四)基于项目的node.js开发后端的学习与梳理总结...

前置:

本系列文章是一个本人边学习边梳理的学习笔记,俗话说好脑袋不如烂笔头,再好的记忆力时间长了也会有细节忘记,本项目选择的前端框架是vue,后端开发使用是node.js,数据库使用的是mongodb,本系列文章重要内容主要有四点:

1.云服务器的购买,怎么使用xshell工具连接云服务器;

2.在本地及云服务器安装mongodb数据库,及数据库的使用;

3.梳理我在学习vue这个前端框架之后的完整项目的实际运用总结;

4.关于node.js开发后端的学习与梳理总结;

5.完整项目的上线部署;

node.js后端开发篇

本文主要概括为以下几点:

  • node.js开发环境的搭建
  • node.js的特点概要
  • node.js相关模块(创建server服务,通过node加载静态资源等)
  • 搭建基于express框架的运行环境
  • node.js的启动调试方式
  • 基于Express框架开发相关接口

一、node.js开发环境的搭建

1、下载node.js安装包

可以根据node.js的开发运行平台去官网下载node.js安装包nodejs.cn/download/

因为windows环境mac环境我们直接下载对应环境.msi的可执行文件傻瓜式安装就好,不是很难,所以我们主要来研究记录linux环境下的node.js的环境安装。

下载安装包有两种方式:

1)通过wget命令直接在linux服务器上面下载

wget https://npm.taobao.org/mirrors/node/v10.15.1/node-v10.15.1-linux-x64.tar.xz复制代码

2)先下载到本地,然后通过scp命令上传如下:

scp /path/filename username@servername:/path 复制代码

例如scp /var/www/test.php [email protected]:/var/www/ 把本机/var/www/目录下的test.php文件上传到192.168.0.101这台服务器上的/var/www/目录中

我使用第一种方法安装:


然后解压,根据下载安装包的格式不同,有两种解压命令:

xz -d node-v10.15.1-linux-x64.tar.xz复制代码

tar -xzvf node-v10.15.1-linux-x64.tar.gz复制代码

然后解压成.tar格式的压缩包,然后使用命令,再次解压:

tar -xvf node-v10.15.1-linux-x64.tar复制代码


解压完成。

2、配置软连接,可以全局访问node、npm

cd node-v10.15.1-linux-x64/bin
ls -la复制代码


现在还不能全局访问node跟npm。

使用一下命令:

ln -s /usr/local/node-v10.15.1-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node-v10.15.1-linux-x64/bin/npm /usr/local/bin/npm复制代码

然后进入/usr/local/bin


证明软连接建立成功


注:bin文件一般都是可执行文件,所以一般放在bin文件夹

二、node.js的特点概要

1、基于Chrome V8引擎

是可构建可扩展的高性能服务器,在处理高并发方面有一定优势,和C语言在性能方面几乎不相上下。

2、单线程

即同一时间只能干一件事,相对的java语言是多线程

3、可以使用javascript语言开发后端代码

我们使用node.js开发后端可以像写前端代码一样开发我们后端服务,只是我们node.js会提供服务端的模块,可以让我们像写前端js代码一样去写后端服务

4、非阻塞的IO

因为node.js是基于事件驱动的

三、node.js相关模块(创建server服务,通过node加载静态资源等)

关于node.js的相关详细模块,node.js官网有详细介绍:nodejs.cn/api/,现在重点介绍http模块。

http.Server类:为什么我们可以通过某一个链接访问某一个页面呢,那是因为在服务器端部署的有一套服务,所以我们能够访问到,http.Server类,也能创建一套服务,那样客户端也就能访问node.js创建的服务。


http.ClientRequest类 :这个属于客户端的类,是当我们的node.js服务需要嗲用第三方数据接口的时候,我们的服务就变成了客户端,第三方接口就变成了服务端,就需要这个类。

fs模块(文件系统)fs模块提供了一个 API,用于以模仿标准 POSIX 函数的方式与文件系统进行交互。

http.get类:可以作为客户端去请求第三方的方法,接受与 http.request()类 相同的 options,且 method 始终设置为 GET。从原型继承的属性将被忽略。


四、搭建基于express框架的运行环境

搭建express框架运行环境分为以下几个步骤:

  • 安装express generator生成器
  • 通过生成器自动创建项目与配置分析
  • .jade文件替换成.html文件开发

1、安装express generator生成器

使用以下命令安装生成器:

npm install -g express-generator复制代码

安装完毕后使用一下命令可以查看安装的版本:

express --version复制代码


如果出现上图结果,我安装的是4.16.0版本,证明安装成功了。

2、通过生成器自动创建项目

使用下面命令自动生成项目:

express node-project复制代码

其中node-project是项目名称,如下图:


使用命令安装依赖

npm install复制代码

完成后的项目目录结构如下图:

使用以下命令可以启动项目:

npm start复制代码

或者

node ./bin/www复制代码

浏览器访问http://localhost:3000/,分析下路由配置:访问http://localhost:3000/或者http://localhost:3000,程序首先会找“/”对应的路由,也就是indexRouter路由,看入口文件如下:

就会运行routes下面对应的index.js文件,然后会render里面的index,render会自动加载views下面的文件

不需要再去指定我们的文件夹,因为在入口文件已经设置过了(注意:这张截图是我已经把.jade文件替换成.html开发的配置)

3、.jade文件替换成.html文件开发

首先安装ejs插件

npm install ejs --save复制代码

安装完成后再入口文佳app.js更改相关配置,首先引入ejs插件

var ejs = require('ejs')复制代码

然后在app.set('views', path.join(__dirname, './views'));

下面添加app.engine('.html',ejs.__express);

app.set('view engine', 'jade');

改成app.set('view engine', 'html');

然后把views文件夹下面的.jade文件全部删除,新建对应的html文件就可以了

五、node.js的启动调试方式

node.js的启动方式有以下几种:

  • 通过node命令启动
  • webstorm配置启动入口
  • pm2启动工具(基于进程管理的,可以提供当前电脑的负载均衡)

1、通过node命令启动

cmd或者IDE的Terminal模式下进入到项目目录使用如下命令启动项目:

node ./bin/www复制代码

2、webstorm配置启动入口

点击编辑器的run-->Edit Configurations


然后点击左上角的+号


选择里面的node.js


然后界面如下,按照要求去填写


然后点击Apply,点击ok

3、pm2启动工具

首先全局安装pm2插件

npm install pm2 -g复制代码

启动命令如下:

pm2 start bin/www复制代码

停止命令如下:

pm2 stop bin/www复制代码

六、基于Express框架开发相关接口

1、安装Mongoose

Mongoose 是 MongoDB 数据库的模型工具,为 NodeJS 设计,工作于异步环境下。是对MongoDB的封装,提供增删改查的api,方便我们队数据库进行操作。

安装Mongoose命令如下:

npm install mongoose --save复制代码

2、创建models

Mongoose需要创建model,通过创建model就相当于是实例了,通过实体可以跟MongoDB数据库进行关联

3、创建路由

当你查询接口时,需要通过路由调model实例,通过model提供的api查询MongoDB数据库

4、基于mongoose、实现商品列表的查询功能

代码层面表现如下:

首先在我们的express项目根目录下新建一个models文件夹(因为会包括很多model实体,所以是复数),然后新建一个goods商品列表的model,goods定义的商品模型是根据我们这次项目的表结构dumall里面的goods集合是相对应的,如下图:

然后我们的model层如下:

注意:我们定义一个商品Good时,在数据库建立集合时的goods一定要加“s”,否则这个模型就关联不上goods这个集合,因为在关联时程序会默认加“s”,如果不加“s”,输出model模型时可以这样写:

model.exports = mongoose.model('Good',productSchema,'good')实现完商品这个model复制代码

实现完商品这个model层后,我们需要新建一个对应的路由

然后在app.js里面建一个对应的一级路由,必须建立一级路由,然后在一级路由下可以增加二级路由(也就是接口)


goods路由内容如下


然后接下来实现路由,在路由里实现业务代码(例如查询对应集合里面的文档):


接下来是跟本地开发的vue.js项目结合:

因为都是本地开发,两个项目,不同的端口,所以需要配置反向代理:


然后ajax接口获取json数据:


vue项目这边出现了一个问题:

我请求的数据也能过来,在控制台查看network里面结构如下:


是正常的数据。

但我console.log打印ajax获取到的response数据时,返回的如下数据:


多返回了config,headers,request等信息,因为接口会返回所有的信息。

5、实现排序与分页功能


req.param("userId")是express封装的获取参数的api(注意:req.param()是get方法获取参数的api,req.body.userId是post方法获取参数的api),.sort()是排序的方法,其中1是升序,-1是降序。

.skip()方法是计算分页使用的,获取的数据返回给前段时要跳转的条数,.limit()是顺序取得条数。

6.post请求方式及加入购物车的代码逻辑

一种情况是要加入的物品在该用户下的购物车里有存在,则在购物车对应物品的数量字段加1


然后保存


另外一种情况是,如果该用户的购物车里没有要加入的物品,通过前端传过来的productId,去查询物品种类的那个集合(也就是goods),找到对应物品后,在该物品下新加计数字段productNum,是否默认选中字段checked,然后把该物品保存到用户下存放物品的字段里(也就是购物车里,cartList)


7.登录模块

获取前端传过来的用户名密码,通过user这个模型去users集合查询有没有对应的用户,如果存在把对应用户的userId,userName存放在服务器的根目录,也就是域名下的cookie里面,然后返回给前端用户名userName

也可以存放到session里面,注意放在session里需要一个插件express-session


8.退出登录模块

退出原理是操作cookie,是把存在cookie的userId的有效期设置为-1失效状态


9.检测用户是否处于登录状态

原理是能不能获取到客户端的cookie里面的userId


10.登录拦截

身份认证,也就是白名单,哪些接口是需要登录才能访问的,哪些是可以直接访问的

登录拦截,在程序走路由之前都会必须先经过这个函数复制代码



你可能感兴趣的:(详细记录基于vue+nodejs+mongodb构建的商城学习(四)基于项目的node.js开发后端的学习与梳理总结...)