前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【crud】全栈-在线备忘录-node-express-MongoDB

【crud】全栈-在线备忘录-node-express-MongoDB

作者头像
web前端教室
发布2018-03-27 10:24:50
8440
发布2018-03-27 10:24:50
举报
文章被收录于专栏:web前端教室
这个VueJs的demo,这是一个在线的备忘录,算是全栈的一个应用吧,第一版的很简陋的demo贴上来,以后再美化UI,先把crud流程跑通再说,
视频内容

<!-- 需求 -->

在线备忘录,

- 登录

- 注册

- 留言列表

- 发文章

- 修改

- 删除

- ...

<!-- 分析需求 -->

上面列了那么些功能点,其实就二个,

1、登录、注册算一个;

2、增、删、改、查

<!-- 实现思路 -->

1、前端页面vue-cli;

2、安装express搞一个中间件,然后用它来请求mongodb;

3、安装mongodb。查询就是.find();添加就是insertOne()...

4、v-model获取“名称”、“内容”,拼成对象使用axios,做为参数传入到express里的app.get方法中的req里;

5、MongoClient.connect...数据库,使用.insertOne(_insertMsg,...这就添加一条数据了

6、查询也和4~5步骤类似;

<!-- UI界面 -->

现在页面是无比简陋,只是为了实现业务逻辑,跑通CRUD;等这十来个例子准备的差不多,我把界面再美化一下,

1、看看是搞个UI库;

2、或是我自己用PS做一个;

<!-- 大概的结构 -->

大概步骤就是图上箭头所示。

<!-- 先行者课程 -->

这几天我一边写demo,一般设计先行者课程的课程结构,

1、每个demo课程都是独立的;

2、每个demo课程都包含“分析、设计、实现、迭代”四部分;

3、所有demo课程循环讲解,难度在我看来都差不多,所以可以随时加入;

4、每个demo课程搞定之后,才能进入下一个demo的学习。类似于游戏的过关。

怎么过呢?

每个人要进入下一个demo的学习之前,都要交一份上个demo课程的最终作业。合格,进入下一个demo;不合格,你就继续写。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-02-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端教室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云数据库 MongoDB
腾讯云数据库 MongoDB(TencentDB for MongoDB)是腾讯云基于全球广受欢迎的 MongoDB 打造的高性能 NoSQL 数据库,100%完全兼容 MongoDB 协议,支持跨文档事务,提供稳定丰富的监控管理,弹性可扩展、自动容灾,适用于文档型数据库场景,您无需自建灾备体系及控制管理系统。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档