【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

时间:2022-01-05 09:21:56

¶项目分析

一个完整的网站服务架构,包括:
   1、web frame ---这里应用express框架
   2、web server ---这里应用nodejs
   3、Database ---这里应用MonggoDB  + NoSQL Manager for MonggoDB  professional 进行管理
   4、前端展示  ---这里应用vue

1.项目服务器端搭建

安装NoSQL Manager for MonggoDB  professional,mongodb,nodejs,express,配置服务器以便获取真实数据。mongodb+ express + vue+nodejs  搭建后台 (MEVN架构)

2.项目初始化

在步骤1中的初始项目与此大致相同,选取的 配置 不同(vue-cli/webpack/yarn/element-ui )

1).新建项目文件夹vueManageSDL并初始配置

在初始配置的时候可以根据需求适当的修改选择【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

以上为该项目初始配置

2).继续安装如下npm依赖包

axios:用于发送类似Ajax请求
element-ui: 用于构建页面ui的组件

【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

此处我偷懒直接在package.json中写入,后cnpm install 统一安装

3).项目目录图

【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

3.项目模拟数据生成

用mongodb命令创建数据,eg:

【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

¶项目运行

①前端页面

命令 npm run dev    或者 yarn run dev

可访问:localhost:8088/#/ 。成功图:

【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

ps:  yarn的命令与npm命令

② 服务器端Database访问    (保持cmd窗口打开,确保该项目服务器启动状态)

【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

可访问:http://localhost:8088/api/log...

另外,模拟数据Database (无服务器版)需要【vue】本地开发mock数据支持

关于 注册登录demo    (api.js中改getAccount接口中 if (docs != "")  改为  if (docs != null)    )

小结:

新建一个start.bat文件。内容保存为  start mongod --dbpath F:\mongoDB\data    用于启动MongoDB服务

项目再次运行前,则:

        ①双击start.bat文件 
        ②localhost连接MongoDB的操作: 打开NoSQL Mananger for MongoDB Professional ,next连接即可(端口默认)。
        ③项目连接MongoDB的操作 :cmd窗口②进入项目的server目录,输入命令 :node index.js     
        
  项目运行、编译,则
       npm run dev
       npm run build        

参考博文