使用vuejs+express+mongodb 开发一款销售仓库管理系统

最新推荐文章于 2024-10-01 08:44:39 发布

林凡sy

最新推荐文章于 2024-10-01 08:44:39 发布

阅读量5.3k

点赞数 6

分类专栏： mongodb vuejs express 文章标签： mongodb express centos nodejs

本文链接：https://blog.csdn.net/qq_32593725/article/details/78142455

版权

本文介绍了使用vue、mongodb和express开发一套仓储销售管理系统的全过程，包括开发环境搭建、前后端开发、遇到的问题及解决方案，以及如何发布到阿里云ESC服务器（centos7系统）。重点涉及vue-cli、webpack、nodejs、mongodb的安装配置，以及项目结构和文件组织。

摘要由CSDN通过智能技术生成

引言

最近刚完成了一套使用vue + mongodb + express 的仓储销售管理系统，本文主要是写一些从开发到发布到阿里云上服务器的一些总结，主要包括了开发环境的搭建，开发中遇到的问题，以及最后发布到阿里云ESC服务器(centos7系统)。在阅读前建议先大概过一遍vue的文档。

开发工具:

sublime text3(编辑器)
nodejs(运行环境)
mongodb(数据库服务)
chorm(测试浏览器)

环境搭建

安装nodejs

进入nodejs中文官网下载最新版本的nodehttp://nodejs.cn/download/根据自己电脑的系统下载相应的安装包，好像Windows系统下载zip解压后是需要自己搭建环境变量的？我也没测试过，我是直接下载msi进行安装的(具体的看这篇文章的人基本都知道了就不多说了)。

这里建议安装好nodejs后去https://cnpmjs.org/安装阿里淘宝镜像，也就是cnpm，在许多时候npm各种闹幺蛾子，毕竟服务器在国外，还是阿里团队的cnpm好用。直接打开命令符输入:npm install -g cnpm –registry= https://registry.npm.taobao.org 回车即可。

安装mongodb

下载地址:https://www.mongodb.com/download-center#community,下载安装好Mongodb后需要创建一个文件来存放数据，然后在bin目录下打开终端输入:mongod.exe –dbpath刚才创建存放数据的文件路径，例如我在d盘创建了一个mongodb\db文件夹来存放数据那么就输入:mongod.exe –dbpath d:\mongodb_data\db来启动服务(否则在mongoose连接数据库时是无法连接的)。相关的其他操作可以去百度或者谷歌。

安装vue-cli以及webpack

安装vue-cli以及webpack工具，打开命令提示符输入：npm install webpack -g以及npm install vue-cli -g安装完成后可以输入webpack -v 和 vue -V(注意是大写的V)可以验证是否安装成功。

项目初始化

安装好上述工具环境后即可初始化项目了，进入你的项目想要存放的根目录打开命令提示符输入:vue init webpack xxxx(项目名)，然后回车即可，接下来会让你确定项目的参数配置，如果你嫌麻烦一直按回车即可创建好项目结构。如下图所示:
这里写图片描述
初始化完成进入项目文件: cd xxxx(项目名称), 安装相应依赖项，使用命令提示符输入npm install 或者 cnpm install (建议使用cnpm，因为有的依赖项使用npm安装会卡住不会动了，毕竟服务器在国外)。安装完成后输入npm run dev启动项目，不出意外的话会自动打开浏览器帮你打开项目默认是8080端口，所以请确保你的8080端口没有被占用。效果如下:
这里写图片描述
到这里整个前端开发环境算是搭建完成了。