vue + node + mongodb 搭建客户管理系统

技术概要

• 脚手架 vue-cli 3.0
• 前端框架 vue
• UI框架 iview
• 后端语言 node
• web框架 express
• 数据库 mongodb
• 中间件 mongoose

项目结构

源码戳我

.
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── server   ## 服务端
│   ├── api.js  ## 接口
│   ├── db.js  ## 数据库连接以及定义模型
│   └── index.js ## express配置项
├── src  ## 前端
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   └── pages
│       └── Customer.vue
└── vue.config.js

服务器端采用express框架，作为本地的web服务器，提供新增客户 、客户列表、分页筛选等接口。
前端使用vue-cli 3.0脚手架搭建，只是练习，前端并未详细设计，所有内容都写在一个页面了，读者可通过路由拆分，增加更多校验等。

注意事项

1. vue-cli 3.0 如何配置
   vue-cli 3.0 实现了零配置，在项目目录中没有了以往的config、build目录文件，但是面对跨域、设置端口等操作，其实可以在vue.config.js中进行配置，详情可查看vue-cli 文档

2. express的基本使用
   采用express.Router模块化路由处理程序，编写RESTful API。

3. mongoose基本基本使用
   首先了解mongodb的基本使用，node.js如何连接mongodb，并实现增删改查。中间件mongoose对node.js操作mongodb做了封装，使用更加便捷，需要了解schemas(模式)、model(模型)，以及基本的增删改查等api。

参考

vue + node + mongodb从开发到部署
node菜鸟教程
mongodb菜鸟教程
阮一峰 mongodb应用
mongoose教程一
使用express + mongoose对mongodb实现增删改查
mongoose 4.5中文文档
mongoose官方文档
分页总数的计算