前端Vue2.0+Vuex，服务端NodeJs+mongodb,一次全栈之旅。

2019年6月9日 289次阅读来源: 无尘霄

服务端：Node + Express + MongoDB
前端：Vue2.0 + Vuex + axios
预览地址：http://qianxun11.com/weibo/index.html
Github地址：https://github.com/ranshaw/VueJs

这是一个基于Vue, Vuex, Axios, NodeJs, Express, MongoDB, Mongoose的仿发布微博页面的小例子，实现了评论，点赞，踩一踩，删除，分页等功能，虽然只是一个简单的页面，设计的内容却挺多的，Vue组件的封装，Vuex和Axios的具体使用，服务端接口的编写，数据库的增删查改等。

服务端推荐阅读

服务端代码实现

在你阅读完上面的文章之后，我相信服务端代码的编写，对你来说已经没什么问题了，下面代码中用到了少量的ES6中语法，如果只为看懂本文，百度一下即可，为了将来的发展的话，还是要系统学习下，推荐阮一峰大神的ES6教程，现在ES6已经成为前端的必备技能了。

OK,了解了这些之后，我们开始编写服务端的代码。

连接数据库，开启服务

const mongoose = require('mongoose'),
   express = require('express'),
   app = express(),
   pathName = __dirname,
   db = mongoose.connect('mongodb://127.0.0.1:27017/data');

mongoose.Promise = global.Promise;

const port = process.env.PORT || 8886;
app.use(express.static(pathName));
app.listen(port);
console.log(`server is start on port:${port}`);

db.connection.on('error', function () {

 console.log('数据库连接失败！')
});

db.connection.on('open', function () {

 console.log('数据库连接成功！')
});

定义模式

comment = mongoose.model('comment', {
    content: String,
    time: String,
    acc: Number,
    ref: Number
  });

添加数据接口

app.get('/add', function (req, res) {

  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');

  let data = {
    content: '',
    time: '',
    acc: 0,
    ref: 0
  };

  console.log(req.query)
  data.content = req.query.content;
  data.time = new Date().getTime();

  addData(data, function (v) {
    if (v.code === 0) {
      res.send(v)
    } else {

      res.send(v)
    }

  });
});

res.header里面的内容是设置允许跨域访问，addData是我封装的保存数据到数据库的一个函数，里面的具体实现就不贴出来了，如果你有认真看上面的那边文章，这里面很简答的，其实用mongoose操作MongoDB，操作是相当的简洁，新增数据，新增一个实例，然后调用其save方法，更新update,删除remove,查询find，说到find，得提一下分页逻辑的实现，

let query = comment.find({});
  query.skip((page - 1) * rows);
  query.limit(rows);
  query.sort({'time': -1});

其中limit()方法读取指定量的数据，skip()跳过指定量的数据，sort()通过参数指定排序的字段，并使用1和-1来指定排序的方式，其中1为升序，-1为降序排列，rows为一页的总数据，假如现在前端要取第2页的数据，每页有5条数据，逻辑就是跳过5条数据，再取5条数据，然后按时间降序排列下，这种是只求能实现功能就行，没考虑性能，哪位大神有更好的方法，欢迎赐教。

服务端的逻辑就说这么多了，比较简单，源码点这里，具体实现自行研究哟，觉得有帮助的话，给Star一下哟。