手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

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

时间:2024-10-19 22:11:13

  该系列利用Express+MongoDB+Vue来实现后台网站功能,并从数据库安装、服务器端设计、后台页面实现和美化等一步步实例分析;  本文主要介绍MongoDB数据库的安装、启动和查看等。

工具/原料

MongoDB

Studio 3T

MongoDB安装

1、  打开MongoDB官方网站,地址为“https://www.mongodb.com/”,页面效果如下图:

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

2、  单击右上角的“Try Free”按钮,跳转页面点击“Server”后,页面效果如下图,选择对应版本+系统+安装方式,最后点击Download按钮进行下载;

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

3、  下载完毕后,双击打开.msi文件进行安装,一路NEXT就可以,安装效果如下图:

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

启动MongoDB

1、  新增存放数据库文件的文件夹,该例子选择的存放位置为“D:\db\MongoDB”,效果如下图:

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

2、  打开命令行,使用cd命令进入安装目录“C:\Program Files\MongoDB\Server\4.2\bin”中,然后执行命令“mongod.exe --dbpath D:\db\MongoDB”,启动成功效果如下图:

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

3、  优化启动过程,先设置安装目录为全局变量,操作过程如图1;然后桌面新增一个文本文件,输入图2内容,后缀名改为“.bat”,双击打开运行成功效果如下图3:

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

安装MongoDB的可视化界面

1、  打开Studio 3T官方网站“https://studio3t.com/download”,切换到对应的系统,然后点击按钮“DOWNLOAD FOR XXX”进行安装包下载,操作如下图:

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

2、  双击安装程序,一路NEXT就可以;  安装成功后启动程序Studio 3T,点击Connect按钮打开新的连接建立的页面;再点击New Connection按钮打开新建的连接地址,输入信息后点击Test Connection按钮进行测试;测试成功后点击Save按钮保存连接信息,效果如下图1;最后点击Connect按钮,连接成功效果如下图2:  Tips:需要MongoDB数据库启动成功。

Express+MongoDB+Vue实现后台网站一
Express+MongoDB+Vue实现后台网站一
© 手抄报圈