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

引言

最近刚完成了一套使用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端口没有被占用。效果如下:

到这里整个前端开发环境算是搭建完成了。

下面大概讲一下项目文件结构:

build文件夹:存放构建脚本目录的，主要是在你使用webpack打包时会用到里面的js文件。
config文件夹：构建配置的目录
node_modules文件夹: 使用过noedjs的应该都不必多说了吧是用来存放依赖项的
src文件夹: 用来存放前端开发代码的，大部分你所编写的前端代码都会在里面。
static文件夹: 是用来存放静态资源的。
test文件夹： 测试文件夹，我没用过也不太了解，直接删了吧。。
index.html文件： 入口文件

开始开发吧

首先我们先把项目结构稍微改一下，改成如下所示:

主要多了一个server文件夹，是用来存放服务器端代码的，以后我们服务器端的所有代码都将存放在server文件夹中。
在src文件夹中多了config文件夹(好多其实这个我觉得是多余的，我只存放了一个路由文件，包括所有模块的路由，如果分层较深的可以分成多个文件这里最好是routes文件夹吧)，css文件夹不必多说每个前端都知道的，frame也是多余的无视掉吧，util文件主要写一些公用的属性以及方法，比如我们请求express服务器默认是localhost:3000，就可以写在里面，然后就可以直接在vue文件中使用this来访问了。

这里使用的是Vue中的install方法，详细可以去官方文档中查看。别忘了还需要在main.js中引入

main.js文件主要用来写一些全局的依赖项以及路由的配置规则、全局组件等，如果使用了Vuex的话建议也可以写在里面。
data文件夹里面主要放一些静态的json数据，比如侧边栏的文字、链接url、icon的x,y值等。

page文件夹主要就放置每个模块的代码了，比如登录页，详情页等。建议每个模块一个文件夹，然后再创建controllers以及views和css文件夹方别管理每个模块，如果使用的请求较多的话还可以多一个services文件夹。
以上就是前段开发的基本内容了。

下面说一些前段开发中所遇到的问题以及解决方式:

因为该系统是vue+express+mongodb所开发的应用，而mongodb所存储的时间是ISODate类型，如果是post给后台存储的话是自动转化的，但是如果直接查询返回的时间也是ISODate类型，所以需要转换成相应的字符串或者Date类型，我使用的是moment.js转换的，直接npm安装后，在main.js中加入依赖即可，加入方式是添加到原型链中直接使用this.$moment使用，另外一个是导入导出excel文件的插件。

在编写表格组件的时候，会存在所需要显示的值和后台返回的值不同，最好不要修改v-model的值，比如一条数据的状态是started，该字段是后台返回的，前端需要显示为开始，那么此时一定不要讲返回的model修改为字符串’开始’，在组件中最好使用v-text，根据对应的v-model值来显示。

编写组件的时候尽量把公共的部分都写在组件里，而不是采用this.$emit()在每个模块中都写同样的代码，比如翻页组件，在点击下一页的时候对应的页码++，这段代码的实现就可以写在组件中。

我使用webpack打包的时候会出现无法打包出静态图片的问题，我的解决方式是build文件中的webpack.base.conf.js文件中加入以下代码:

然后将图片放在src文件下的assets的img文件夹中，虽然这不是一个好的解决方法吧。

对于某些图片的显示状态，我是使用vuex来控制的，比如请求后台时候的loading_gif，以及报错时弹出框的显示等。

关于后端开发

后台服务器的话主要使用express作为服务器端，mongodb作为数据库，前面有讲过mongodb的安装，windows下我是用mongd.exe –dbapth的方式来启动的， mac下修改好环境变量以免每次输入sudo mongod

$touch .base_profile$vim .base_profileexport MONGO_PATH=/Desktop/mongodb(你的mongodb的安装路径)export PATH=$PATH:$MONGO_PATH/bin

接下来就可以直接输入./mongod启动服务了。启动成功的话会占用27017端口(默认情况下)。你可以直接浏览器输入localhost:27017访问验证是否启动成功，也可以使用命令符查看27017是否被占用。

lsof -i tcp:27017

开启mongodb服务成功后，接下来就需要搭建服务器端环境了，其实就是安装相应的依赖即可。
主要的依赖项有express、cookie-parser、express-session、body-parse、cors、mongoose。
安装好依赖后，我们将在server文件夹中进行服务器端的开发，文件结构如下所示：

其中services文件夹里主要存放每个模块的对应方法，例如用户模块的方法就包括了登录、注册等，那么就在其中创建一个user.js文件夹，其中包含了login()、以及register()方法。每个方法的代码片中写相应的处理即可。
api.js文件应该改为apis.js，其中主要是所有api的一个概览。例如:

//加载用户相关方法const userServices = require('./services/user.js');//注册router.post('/register', userServices.userRegister);//登录router.post('/login', userServices.userLogin);

app.js文件是后端服务的一个入口文件，其中主要是对各个依赖的引入以及一些依赖的配置等，比如我们使用的cors插件的配置就是在这里进行的

app.use(cors{   origin:[],//这里会写一些允许访问的地址，比如我们是localhost:8080前端访问的，那么这里就需要给数组添加一个元素为'http://localhost:8080'，否则无法请求。   methods:['GET','POST','DELETE','PUT'],   alloweHeaders: ['Conten-Type', 'Authorization']})

db.js文件是用来写一些mongoose的一些方法处理的，包括连接mongodb成功、连接异常、连接断开等回调方法的编写就在这里进行的，在这里你也可以定义所有的Schema，比如用户、订单的。

//首先引入mongooseconst mongoose = require('mongoose'),db_url = 'mongodb://localhost:27017/数据库名';//接下来就是对数据各种连接状态的处理/** * 连接数据库 */// const db = mongoose.connect(DB_url);mongoose.connect(db_url,{useMongoClient:true}, function(){    console.log('Mongoose connection success');});/**  * 连接成功  */mongoose.connection.on('connected', function () {        console.log('Mongoose connection open to ' + db_url);  });    /** * 连接异常 */mongoose.connection.on('error',function (err) {        console.log('Mongoose connection error: ' + err);  });    /** * 连接断开 */mongoose.connection.on('disconnected', function () {        console.log('Mongoose connection disconnected');  });//然后就是定义各种Schemaconst schemaA = new mongoose.Schema({});const Models = {   a: mongoose.model('a',schemaA)}module.exports = Models;

编写完成了后别忘每个模块都需要require到，然后在相应目录打开命令提示符输入node app即可开启后端服务。

关于发布

首先我们整个采用vue开发模块，需要使用webpack打包输出，使用npm build命令即可。打包成功后我们只需要将服务器端的代码以及输入的dist文件前端代码部署在阿里云服务器即可。
首先需要在阿里云购买服务器，以及IP地址和域名，我记得17年9月的时候购买有一个免费体验套餐，可以直接使用。对于尝鲜的大学生来说这样就足够了。具体流程可以百度，有很多博客都有，这里主要讲述一下 环境搭建以及所使用的工具。
我选择的服务器是centos7系统，初始化是类似于命令提示符的样子，那么我们就使用yum 安装startx，安装后使用startx即可出现桌面

接下来就是如同在自己电脑上开发一样安装好mongodb以及后台运行的各个依赖模块项，当然首先你得安装好nodejs。webpack打包前端代码的时候记得将util.js文件中的baseUrl修改为相应的服务器后端服务地址，并且需要在app.js中配置cors将跨域问题解决，即是添加服务器ip即可，否则发布成功后也无法访问。
在服务器端与本地不同的是需要使用pm2 来将项目永久运行于后台，使用nginx将域名映射到ip地址上。
在服务器端的具体工具的安装可以参考各个博客百度谷歌都可以，已经有很多先驱者了，这里就不再做过多的复述。至于我的项目在服务器端发布的结构如下：

dist文件即是前端webpack打包后的文件，其余都是server文件夹中的文件，node_modules是后端运行所需要的依赖项，即是express等。bin是应该pm2运行后所生成的文件，基本可以无视掉。
在app.js中需要加几行代码：

app.use(express.static(path.resolve(__dirname, '../dist')))app.get('*', function(req, res) {    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')    res.send(html)})

上述代码的意思是使用express静态读取dist文件夹中的index.html文件。

运行的话使用

pm2 start app.js

即可。

第一次写博客有许多不足之处，还请各位看官老爷多多包涵。有什么问题也可以在评论区指出。