专栏首页前端小而全的知识归纳从项目中由浅入深的学习koa 、mongodb(4)

从项目中由浅入深的学习koa 、mongodb(4)

序列文章

从项目中由浅入深的学习vue,微信小程序和快应用 (1) 从项目中由浅入深的学习react (2) 从项目中由浅入深的学习typescript (3)

前言

node.js的出现前端已经可以用js一把梭,从前端写到后台。 本文从后台利用node的框架koa+mongodb实现数据的增删改查和注册接口,前端利用umi + dva +ant-design-pro来实现数据渲染。实现一个小全栈project,就是so-easy

1.效果图

react-koa 全栈项目,欢迎star

2.技术栈

koa:node框架 koa-bodyparser:解析body的中间件 koa-router :解析router的中间件 mongoose :基于mongdodb的数据库框架,操作数据 nodemon:后台服务启动热更新

3.项目目录

├── app // 主项目目录 │ ├── controllrts // 控制器目录(数据处理) │ │ └── ... // 各个表对应的控制器 │ ├── middleware // 中间件目录 │ │ └── resFormat.js // 格式化返回值 │ ├── models // 表目录(数据模型) │ │ ├── course.js // 课程表 │ │ └── user.js // 用户表 │ └── utils // 工具库 │ │ ├── formatDate.js // 时间格式化 │ │ └── passport.js // 用户密码加密和验证工具 ├── db-template // 数据库导出的 json 文件 ├── routes // 路由目录 │ └── api // 接口目录 │ │ ├── course_router.js // 课程相关接口 │ │ └── user_router.js // 用户相关接口 ├── app.js // 项目入口 └── config.js // 基础配置信息

4.项目启动步骤

1.git clone 2.安装mongodb:http://www.runoob.com/mongodb... 3.安装 Robomongo是mongodb可视化操作工具 (可选) 4.启动 cd koa-template npm run start cd react-template npm run start

注意: mongodb启动默认端口号是27017,启动看是否被占用 后端项目端口号是3000,可以在koa-template/config.js里面修改

5.koa的主要API

API

作用

new koa()

得到koa实例

use

koa的属性,添加中间件

context

将 node 的 request 和 response 对象封装到单个对象中,每个请求都将创建一个 Context,通过ctx访问暴露的方法

ctx方法

request:请求主体;response:响应主体;ctx.cookies.get:获取cookie;ctx.throw:抛出异常

request属性

header:请求头;method:方法;url:请求url;originalUrl请求原始URL;href:完整URL;hostname:主机名;type:请求头类型;

response属性

header:响应头;status:状态,未设置默认为200或204;body:响应主体,string(提示信息) Buffer Stream(流) Object Array JSON-字符串化ull 无内容响应;get:获取响应头字段;set:设置响应头;append:添加响应头;type:响应类型;lastModified:返回为 Date, 如果存在;etag:设置缓存

6.koa-router主要API

API

作用

get

get方法

post

post方法

patch

patch方法

delete

delete方法

prefix

配置公共路由路径

use

将路由分层,同一个实例router中可以配置成不同模块

ctx.params

获取动态路由参数

fs

分割文件

7.mongoose主要API

API

作用

Schema

数据模式,表结构的定义;每个schema会映射到mongodb中的一个collection,它不具备操作数据库的能力

model

schema生成的模型,可以对数据库的操作

model的操作database方法

API

方法

create/save

创建

remove

移除

delete

删除一个

deleteMany

删除多个

find

查找

findById

通过id查找

findOne

找到一个

count

匹配文档数量

update

更新

updateOne

更新一个

updateMany

更新多个

findOneAndUpdate

找到一个并更新

findByIdAndUpdate

通过id查找并更新

findOneAndRemove

找到一个并移除

replaceOne

替换一个

watch

监听变化

query查询API

API

作用

where

指定一个 path

equals

等于

or

nor

不是

gt

大于

lt

小于

size

大小

exists

存在

within

在什么之内

注:Query是通过Model.find()来实例化 aggregate(聚合)API

API

作用

append

追加

addFields

追加文件

limit

限制大小

sort

排序

注:aggregate=Model.aggregate()

更多详细API,请戳

8.react项目详情

从项目中由浅入深的学习react

9.总结

一个koa项目就是从koa-bodyparser来解析body,koa-router来分发和处理接口,mongose来操作database。入门就是so-easy!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue+element实现表格跨行或跨列合并

    vue+element用于pc后台管理系统比较多,所以后台管理系统一般以处理数据为主,数据结构的复杂程度变高,相对应的前端展示成本也提高, 有些产品经理或许会要...

    火狼1
  • JS面试之数据结构与算法 (5)

    JS面试之函数(1) JS面试之对象(2) JS面试之数组的几个不low操作(3) JS面试之http0.9~3.0对比分析(4)

    火狼1
  • 前端常用的 59 个工具类【持续更新】

    前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来;

    火狼1
  • Typecho友情链接插件禁用之后重新启动报500错误的解决方法

    laulzgoay
  • JavaScript-作用域、块级作用域、上下文、执行上下文、作用域链

    (2)实际上,JavaScript默认有一个全局对象window,全局作用域的变量实际上被绑定到window的一个属性。

    WEBING
  • VisualStudio 修改配色 使用 VisualStudio 配色应用Resharper配色

    如果觉得 VisualStudio 的配色不好看,那么可以到这个网站下载其他的配色。

    林德熙
  • Java Generic 自定义泛型如何自定义泛型自定义泛型的边界共变性,逆变性泛型对象的比较

    考虑我们要实现了一个节点对象,这个对象可以自定义类型,我们可以用泛型语法进行如下的定义:

    desperate633
  • 【JS】303- 编写更好的 JavaScript 条件式和匹配条件的技巧

    如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地...

    pingan8787
  • LintCode 搜索旋转排序数组题目分析代码

    假设有一个排序的按未知的旋转轴旋转的数组(比如,0 1 2 4 5 6 7 可能成为4 5 6 7 0 1 2)。给定一个目标值进行搜索,如果在数组中找到目标值...

    desperate633
  • 「译」编写更好的 JavaScript 条件式和匹配条件的技巧

    如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地...

    Chor

扫码关注云+社区

领取腾讯云代金券