多语言展示
当前在线:176今日阅读:193今日分享:47

Express+MongoDB+Vue实现后台网站二

该系列利用Express+MongoDB+Vue来实现后台网站功能,并从数据库安装、服务器端设计、后台页面实现和美化等一步步实例分析;  由于构建的服务器端基于Express框架,所以本文主要介绍服务器端设计中的框架内容、新建工程和接口测试工具。
工具/原料

Node

安装Node
新建工程
1

为了能快速创建一个应用的“骨架”,可以安装应用生成器Express(通过命令“npm install express-generator -g”安装应用生成器)。

2

安装完应用生成器后,打开命令提示行,进入项目目录,然后执行命令“express systemService”,执行效果如下图:

3

执行命令“cd systemService”进入创建好的工程中,然后执行命令“npm install”安装相关的包,执行效果如下图:

4

所有包安装成功后,执行命令“set DEBUG= book_service & npm start”启动应用,执行效果如下图:

5

在浏览器中输入地址“http://localhost:3000/”打开测试页面,效果如下图:

6

为了不用每次修改代码就需要重启服务更新效果,可以使用Supervisior进行系统修改代码的监控;  执行命令“npm install -g supervisor”进行全局安装,安装成功效果如下图1;安装成功后执行命令“supervisor bin/www”启动程序,执行效果如下图2(启动后,每次修改代码都会自动重新载入代码)。

接口测试工具
1

该系列选用Postman进行接口数据正确性测试,网上介绍了两种安装方式,一种是进入chrome的应用商店安装,一种是安装客户端,可自行根据需要搜索安装包。

2

由于该系列都是使用POST的HTTP方法,下面实例分析测试整个过程,效果如下图:  1.HTTP方法选址“POST”;  2.输入接口地址,比如找回密码的接口“http://localhost:4577/users/findPassword”;  3.选择“Body”下的“x-www-form-urlencoded”;  4.输入接口需要的请求参数,比如找回密码的“username”、“userMail”和“userPhone”;  5.点击按钮“Send”发送请求,底部“Body-Pretty”会显示请求结果,下图为成功请求返回的数据。  Tips:可对接口进行保存、分类等,具体可自行操作使用。

推荐信息