【VUE项目实战】6、后台项目的安装配置

接上篇《5、本地项目托管到码云(Gitee)》
在前面的博文中,我们已经初始化完成了一个VUE的前端项目,因为是前后端分离的项目,必须要依赖于一个可以提供接口的后台项目。本篇单据介绍一下,如何配置一个基于Node.js的后台项目,来支持我们前端项目的开发。

步骤有4步:
①安装MySQL数据库
②安装Node.js环境
③配置项目相关信息(安装依赖包)
④启动项目
⑥使用Postman测试后台项目接口是否正常

1、安装MySQL数据库

此处不再赘述,具体的安装步骤,参考【菜鸟教程  runoob.com】的:《Windows10 MYSQL Installer 安装》(https://www.runoob.com/w3cnote/windows10-mysql-installer.html
再下载一个Sqlyog图形化管理界面,用来操作数据库(下载https://sqlyog.en.softonic.com/):

然后导入我们项目需要的数据库文件:

下载链接:https://download.csdn.net/download/u013517797/20354471

登录数据库,首先创建一个名为“mydb”的数据库:

然后将该SQL文件导入到数据库中:

导入完毕后,可以看到刚创建的数据库中新增了相应的数据库表:

2、安装Node.js环境

此处不再赘述,具体的安装步骤,参考【菜鸟教程  runoob.com】的:《Node.js 安装配置》(https://www.runoob.com/nodejs/nodejs-install-setup.html

3、配置项目相关信息(安装依赖包)

我们先来下载后台的源代码压缩包:https://download.csdn.net/download/u013517797/20354532

解压之后我们可以看到详细的目录:

 项目整体文件说明

●config 配置文件目录
     default.json 默认配置文件(其中包含数据库配置,jwt配置)
●dao 数据访问层,存放对数据库的增删改查操作
     DAO.js 提供的公共访问数据库的方法
●models 存放具体数据库 ORM 模型文件
●modules 当前项目模块
     authorization.js API权限验证模块
     database.js 数据库模块(数据库加载基于 nodejs-orm2 库加载)
     passport.js 基于 passport 模块的登录搭建
     resextra.js API 统一返回结果接口
●node_modules 项目依赖的第三方模块
●routes 统一路由
     api 提供 api 接口
     mapp 提供移动APP界面
     mweb 提供移动web站点
●services 服务层,业务逻辑代码在这一层编写,通过不同的接口获取的数据转换成统一的前端所需要的数据
●app.js 主项目入口文件
●package.json 项目配置文件

然后我们需要打开命令行工具,进入服务端项目解压的文件夹,然后运行npm install来安装我们后台的依赖包:

4、启动项目

安装完毕后,输入“node .\app.js”来运行我们的后台项目:

如果最后没有报错,证明我们的后台项目启动成功了:

注:如果有如下报错,很有可能是数据库没有连接上:

需要检查一下下面的配置,是否是本地数据库的地址和账号密码(我的root密码是1234,默认是root):

5、测试后台项目接口

后台API文档下载地址:https://download.csdn.net/download/u013517797/20354648
运行成功之后,我们可以看看后台的API接口文档(使用Markdown工具打开):

可以看到接口的基准地址是本机的8888端口,支持CORS跨域,使用Token认证。后面的大家自己看。

现在我们就测试Login接口,看看是不是能够使用。我们下载并打开Postman:

下面是Post主页面:

 下面是登录的地址和请求参数(在API文档里):

按照接口文档的结构,我们访问http://127.0.0.1:8888/api/private/v1/login地址,进行登录请求:

这里数据库已经默认创建了账号为“admin”,密码为“123456”的账号,所以我们点击发送请求后,会登录成功。
这里我们可以看到登录成功之后的id、手机号、邮箱地址,以及token。token是用来进行服务端与客户端的登录状态保持的,类似Java后台的session,我们可以通过token验证该用户是否已经登录。

下一篇我们正式开始开发前端项目,编写登录与退出功能。

转载请注明出处:https://blog.csdn.net/acmman/article/details/118876820

参考:黑马程序员(www.itheima.com)Vue项目实战教学视频

Guess you like

Origin blog.csdn.net/u013517797/article/details/118876820