Vue中使用MongoDB小Demo

Vue中使用MongoDB小Demo

Vue中使用MongoDB小Demo
Demo虽小,但是需要完成的功能的要点还是比较多的,这个Demo做到的是能够在页面中通过分页的方式来一一获取数据。

HTML部分

Vue中使用MongoDB小Demo
像下拉框的选项的这种在C#中称为combobox的标签使用的是select标签,我们在option标签来定义下拉框里面的每个选项,再再select标签上绑定上v-model,这样只要我们选了某个值,v-model就会自动将那个值赋给绑定的值

逻辑部分

Vue中使用MongoDB小Demo
今天学习了一个概念,并不是只有post请求的时候我们才可以传递数据,我们使用get请求的时候同样是可以传递数据,只需要通过像数据字典的方法再url里面传递值就行,因为上一页下一页所要执行的代码其实时及其的类似的,以前的我会给上一页和下一页分别定义的方法,再通过这个方法发送post请求给后端,现在知道了get传值,所有的操作就都只要再经过传值的数据来进行判断操作即可

后端

Vue中使用MongoDB小Demo
数据库使用的mongodb数据库,这个数据库中的一些方法:
skip()过滤方法,传递一个非负数,表示过滤几条数据,skip(2)表示的时过滤2条数据)
limit()截取函数,传递一个非负数,表示只取其中的几条数据 limit(2)表示只从头取出2条数据

分页的思路

我的分页的思路就是根据skip和limit组合起来使用,下一页和上一页都通过过滤这个概念来使用,第一页的时候就从头开始取即可。

这个Demo虽然蛮小的,但是也是写了我好久,写完之后真的又学习到了很多,向全栈又迈了一小步。