分针网
前端Vue2.0+Vuex,服务端NodeJs+mongodb,实现微博评论页面
伍晓辉 2017-07-20 09:26:14
阅读 0 点赞   阅读 写了0文章
前端开发
服务端:Node + Express + mongodb
前 端:Vue2.0 + Vuex + axios
地 址:http://m.dayread.top

虽然是练手的小项目,但也实现完整的前后交互的流程,对于想入门NodeJs和VueJs的童鞋来说,可以拿去玩一玩,写这篇文章也算是对自己学习过程的一个总结,有些错误或者不合适的地方希望大神们指出。

服务端代码实现

首先需要安装MongoDB,评论内容的保存,点赞或者踩一踩,以及删除内容,都需要在数据库中进行增删查改,MongoDB在window上安装教程,大家可以按照这篇教程安装和配置下,对于数据库的操作,我用的是mongoose,具体用法可以参考:在Node中基于Mongoose对MongoDB进行增删查改,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一下哟。

前端代码实现


布局很简单,如有雷同,纯属巧合,废话不多说,开撸。
首先用Vue-cli初始化一个项目,如果没有用过,点击前面的链接,自行研究下。


其中TakeComment.vue是评论框组件,CommentList.vue是评论列表组件,Paging.vue是分页组件,分页组件是模仿我之前用过的Jquery 的Datatables插件的分页逻辑,

开始长这样


中间长这样


最后长这样


实现逻辑在store.js里getters中的pages()中。

static中存放的事图片和样式代码,ajax.js中是封装的接口,其实叫api.js更好点,store.js就是用Vuex对整个项目所有状态的一个管理,项目里需要管理的状态并不多,主要是为了学习,

const state = {
current:1,
commentList:[],
pageNo:1,
backClipped: true,
preClipped: false,
};

关于Vuex的具体用法,大家还是看官方的文档吧,上面讲的很清楚明白的。

OK,事就这么个事,例子也就是这么个例子,比起某些大神们高仿某某网站或者平台的,咱这就是个新手们入门的小实战,简单易学,前后通吃,项目源码,觉得有点意思的,学起来吧!




作者:无尘霄
©著作权归作者所有
18650135259
客服微信