vue+node+mongodb实现的简单TodoList

login主界面主界面

原因

初学node，js既然也可以写后端,也可以自己设置接口，身为一个小前台就一直就想利用node来做一个简单的后台。由此有了这个简单的demo，看官见笑。

项目搭建

环境需求vue-cli(脚手架)、mongodb、nodejs

在mongodb中 数据库 -》集合-》文档文档的数据结构和JSON基本一样。所有存储在集合中的数据都是 BSON 格式。BSON 是一种相似 JSON 的二进制形式的存储格式，是 Binary JSON 的简称。
所以我们可以将mongodb想象成一个大json对象解决，传统的数据库中表和表之间的外键关联都不存在了.取而代之的是json格式的类树形结构.这就是转到mongodb之后最大的区别. 设计时把复杂的东西笼统成一个树形结构,而不是像从前那样先笼统成一个个实体,而后再笼统实体之间的关系，对前台而言mongodb做设计比sql做设计要简单很多

1. 利用vue-cli初始化项目vue create todo_list

2. 通过brew 安装mongodb

   使用 OSX 的 brew 来安装 mongodb的命令如下：sudo brew install mongodb要安装支持 TLS/SSL 命令如下：sudo brew install mongodb --with-openssl假如要安装开发版本，可以使用下面的命令：sudo brew install mongodb --devel而后，使用命令mongod --version来查看mongo DB能否安装成功。

   后因为mongodb已经不开源头
   我在这里直接安装默认的社区版本，执行brew install mongodb-community 也可以参考文档安装指定的版本；
   之后采用show dbs 查看安装能否成功

• 假如发现数据库链接不上，可以在~/.bashrc中配置 export PATH=/usr/local/Cellar/mongodb-community/4.2.3/bin:${PATH}

• 之后执行brew services start mongodb-community 最后进行mongo连接

  mongo链接

这里推荐使用robo3t这个mongodb可视化工具来快速的构建字典表

robo3T

前台项目结构

todolist|└─── NodeApi 后台api提供文件│     |--controller  控制层，对数据库进行操作|     |--db          数据库实例|     |--middlewares node中间件|     |--router      向前台暴露的接口|     |--app         入口js|     |--config      全局配置|└─── src 前台项目目录│     |--api           前台请求接口|     |--assets        图片相关|     |--components    项目公关组件|     |--router        路由|     |--views         视图层|  

前台主要的界面和设计就不细说，有兴趣的可以去github上看一下交互细节和页面逻辑。github地址

编写Node项目

通过npm安装koa、mongoose、body-parser模块

npm install koa body-parser mongoose --save

• 数据库链接app.js

const Koa = require('koa');const mongoose = require('mongoose');const app = new Koa();mongoose.connect('mongodb://localhost/todolist', { useNewUrlParser: true }, err => {  if (err) {    console.error('Failed to connect to database');  } else {    console.log('数据库链接成功');  }});app.listen(3000);

通过运行node app.js过浏览器访问localhost:3000即可以看到数据库已经链接

数据模型的构建

数据模型就是在数据库构建的表中，所需要的数据和数据的对应类型。

在项目根目录建立一个db文件夹，每个模型都是由一个Schema生产，举个例子在db文件夹中创立一个user.js文件,内容如下

//  name: {例子//      type: String,//      required: true, // 表示该字段是必须的//      unique: true // 表示该字段唯一//  },//引入mongoose模块const mongoose = require('mongoose')const Schema = mongoose.Schemaconst userSchema = new Schema({  user_id: { //客户id    type: String  },  user_name: {  //客户名称    type: String,    required: true  },  user_password: {  //客户密码    type: String,    required: true  },  user_event: {    type: Array,    default: ['001'] //可以给与默认值    // 字符串数组类型  }}, {//这里mongoose.Schema最好要写上第二个参数//明确指定到数据库中的哪个表取数据，我这里写了user，目的就是为了以后操作数据要去user表中。  timestamps: { createdAt: 'created', updatedAt: 'updated' },  collection: 'user',  versionKey: false // 不需要 __v 字段，默认是加上的})//导出model模块module.exports = mongoose.model('user', userSchema)

建立路由接口

在项目根目录创立一个router文件夹，文件夹中创立一个user_router.js文件,内容如下,分别为对客户的增删改查路由。项目模块较多，对应的路由也很多。假如一个个的去注册，效率太低。这里用node的fs模块去遍历读取routes下的所有路由文件，统一注册，可以直接在index.js中对所有的router进行引用。

//index.jsconst fs = require('fs') //引入fs读取文件module.exports = app => {  fs.readdirSync(__dirname).forEach(file => {    if (file === 'index.js' || file === '.DS_Store') {      return    }    const route = require(`./${file}`)    app.use(route.routes()).use(route.allowedMethods())//统一注册路由  })}

//user_controller.js// 引入路由模块并实例化const Router = require('koa-router') //引入koa路由实例// const router = new Router();const router = new Router({ prefix: '/user' }) //设置路由访问路径// 导如对应的控制器const user_controller = require('../controller/user_controller')// 为控制器的方法定义请求路径和请求方式router.post('/set', user_controller.set_User) //保存客户router.post('/get', user_controller.get_User) //查询客户module.exports = router

建立controller来控制事务(增删改查)

增删改查示例：

const User_col = require('../db/user')5ca3894ee78a732a245e3bb8为id//查询所有数据User_col.find(function (err, ret) {}//根据条件查询数据User_col.find({  _id: '5ca3894ee78a732a245e3bb8',  username: 'czk'}, function (err, ret) {}//根据条件查询数据的第一个User_col.findOne({})//根据id值查询数据User_col.findById('5ca3894ee78a732a245e3bb8', function (err, ret) {})改 升级User_col.findByIdAndUpdate('5ca3894ee78a732a245e3bb8', {})删User_col.findByIdAndDelete('5ca3894ee78a732a245e3bb8', function (err, ret) {})增let admin = {  username: 'czk',  password: '123',}User_col.create(admin)

在项目根目录建立一个controller文件夹，在controller文件夹中创立一个user_controller.js文件,内容如下

// 引入刚才定义的表const User_col = require('../db/user')// get 请求返回所有数据const get_User = async (ctx, next) => {  const result = await User_col.find({})  ctx.status = 200  ctx.body = {    data: result  }}// post 带一个 msg 参数，并插入数据库const set_User = async (ctx, next) => {  const req = ctx.request.body  ctx.status = 200  ctx.verifyParams({    user_name: { type: 'string', required: true },    //假如required为true则入参为必填项    user_password: { type: 'string', required: true }  })  const result = await User_col.create(  { user_name: req.user_name, user_password: req.user_password })  // const result = await User_col.create({ req });  ctx.body = {    data: result  }}// 暴露出这两个方法，在路由中使用module.exports = {  set_User,  get_User}

入口文件的构建

项目根目录的app.js，是后台项目的入口文件,内容如下

const Koa = require('koa')const mongoose = require('mongoose')const parameter = require('koa-parameter') // 参数校验const error = require('koa-json-error') // 错误抓取const cors = require('koa2-cors') //koa前台跨域，处理option跨域const BodyParser = require('koa-bodyparser') // 获取json数据const routing = require('./router/index') const config = require('./config')const app = new Koa()mongoose.connect('mongodb://localhost/todolist', { useNewUrlParser: true }, err => {  if (err) {    console.error('Failed to connect to database')  } else {    console.log('数据库链接成功')  }})app.use(cors()) app.use(BodyParser()) // 使用koa-bodyparser：app.use(parameter(app)) // 参数校验routing(app) // 路由解决app.use(error({  postFormat: (e, { stack, ...rest }) =>   config.environment == 'master' ? rest : { stack, ...rest }}))app.listen(3000, () => console.log('程序启动在3000端口了'))