本系列文章是一个本人边学习边梳理的学习笔记,俗话说好脑袋不如烂笔头,再好的记忆力时间长了也会有细节忘记,本项目选择的前端框架是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.登录拦截
身份认证,也就是白名单,哪些接口是需要登录才能访问的,哪些是可以直接访问的
登录拦截,在程序走路由之前都会必须先经过这个函数复制代码