首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

yarn add express cors mongoose 我们还需要安装它们类型作为开发依赖项,帮助 TypeScript 编译器理解这些包。...yarn add -D @types/node @types/express @types/mongoose @types/cors 现在,TypeScript 不会再对你提示错误——它将使用这些类型来定义我们刚刚安装库...就是说,现在如果我们能成功连接 MongoDB,服务器就会启动,否则,会抛出错误。 我们现在已经通过 Node、Express、TypeScript 和 MongoDB 完成 api 构建。...用 React 和 TypeScript 创建客户端 构建 为了创建一个新 React 应用,我将会使用 create-react-app ——你可以用其他你想用方法。...所以,在终端运行以下代码: npx create-react-app my-app --template typescript 然后,为了能获取远程数据安装 Axios 库。

17K30
您找到你想要的搜索结果了吗?
是的
没有找到

Node.js 搭建一个 API 接口服务(实战)

,最后决定使用技术栈就是 koa+typescript+mysql+mongodb来搭建项目。...Typescript 网上特别多关于“为什么要用Typescript开发”,“Typescript开发好处和坏处”,“为什么不用Typescript开发”等等争论和文章,有兴趣同学也可以去说道说道哈...js中没有的东西,譬如泛型接口抽象等等 良好模块管理 强类型语音,个人感觉比js开发服务端项目更合适 有良好错误提示机制,可以避免很多开发阶段低级错误 约束开发习惯,使得代码更优雅规范 最后记住一点...() 说到这边,不得不提一句哈,就是路由可以引入装饰器写法,这样能减少重复工作和提高效率,有兴趣同学可以看我一篇博客哈。...,但是需要考虑东西也是很多,而且因为很多插件都是第一次接触,所以整个项目实现过程还是蛮坎坷,基本是那种摸石头过河。

7.6K31

深入浅出mongodb(一)

/data(这里 data 是新建需要新建 data 文件夹,在文件夹里创建 db 文件夹) 客户端 C:\MongoDB\bin mongo 注意: 如果出现在 windows 下出现小黑窗口闪退情况...:'user'}) 在 mongoose 中,提供了 Schema 类,我们可以在实例化时候先定义mongoose.Schema,以免后续总是要出现丑陋new mongoose.Schema()。...官网给解释是: Mixed是一种无模式类型,"anything"随便什么都可以,一般使用Schema.Types.Mixed或者{}来表示。...2.5 ObjectId 一个 ObjectId 其实可以分割为四部分,即当前时间戳,当前主机hash,当前进程id,自动增加计数器,有了这几个基本就可以保证它唯一性了。...node 开发习惯,callback中第一个参数永远是错误信息,第二个参数是正确信息。

3.9K10

不容错过 Node.js 项目架构

这篇文章是基于我多年来在处理一些糟糕 Node.js 项目结构、不好设计模式以及无数个小时代码重构经验探索研究。...└───types # 对于 Typescript 类型声明文件(d.ts) 以上不仅仅是组织 JavaScript 文件一种方式......图片描述 因为有一天,您将希望在一个 CLI 工具上来使用您业务逻辑,又或从来不使用。对于一些重复任务,然后从 Node.js 服务器对它自己进行调用,显然这不是一个好主意。 ?...DI 或控制反转(IoC)是一种常见模式,通过 “注入” 或通过构造函数传递类或函数依赖关系,有助于代码组织。...我从 W3Tech 微框架中采用这种模式,但并不依赖于它们包装。 这个想法是将 Node.js 启动过程拆分为可测试模块。

5.8K30

Mongoose 插件记录Node.js API日志

那么如何创建一个 Mongoose 插件,以更清洁方式为你进行记录并简化 API 日志? Mongoose插件是什么? 在 Mongoose 中,模式是可插入。...插件就像一个函数,你可以在模式中使用它,并在模式实例一次次地重用。 Mongoose 还提供全局插件,你可以将其用于所有模式。...步骤1:创建基本日志模式模型 让我们创建一个具有以下六个属性基本日志模式: Action: 按照它名称,这是 API 一个动作过程,无论是 create、update、delete还是别的什么。..._diff, } return LogSchema.create(data) } } module.exports = plugin 在 Mongoose 中,有不同钩子可用。...现在我们需要使用架构可用 init 和 save 方法。 this.isNew():如果你正在创建新文档,那么只需返回 next()中间件。

2.7K40

MongoDB增删改查操作

创建集合 创建集合分为两步,-是对对集合设定规则,二是创建集合,创建mongoose.Schema构造函数实例即可创建集合。...实际在数据库中产生集合名为courses 2.创建文档 创建文档实际就是向集合中插入数据。 方法1 分为两步: ①创建集合实例。 ②调用实例对象下save方法将数据保存到数据库中。...course.save(); 方法2 和数据库相关所有操作都是异步操作 创建文档  插入数据 Course.create({    name: 'JavaScript',    author: '...create方法插入数据 Post.create({    title: 'aaa',    age: 68,    category: 'javascript',    author: 'db...mongoose.model('Post', postSchema); // 插入文档数据 // User.create({ //     name: 'xc' // }).then(result =

6.5K20

基于 egg.js 构建 graphql api 服务

,由于我们基于 TypeScript ,所以选择了支持 TS 包。...apolloServerOptions: { tracing: true, // 设置为true时,以Apollo跟踪格式收集和公开跟踪数据 debug: true, // 一个布尔值,如果发生执行错误...**(CORS,Cross-origin resource sharing)**,是W3C标准,是一种机制,它使用额外HTTP头来告诉浏览器 让运行在一个 origin (domain) Web应用被准许访问来自不同源服务器指定资源...使用 graphql 或 rest 端点时,实际不必担心使用 CSRF 保护。对服务请求应该是无状态,并且不真正依赖Cookie或会话数据。...可以理解为 {id: 1, name: 'jack'} 项目启动 npm run dev 在浏览器中输入 http://127.0.0.1:7001/graphql 出现如下界面说明已经 graphql

1.8K10

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

序列文章 从项目中由浅入深学习vue,微信小程序和快应用 (1) 从项目中由浅入深学习react (2) 从项目中由浅入深学习typescript (3) 前言 node.js出现前端已经可以用...:解析router中间件 mongoose :基于mongdodb数据库框架,操作数据 nodemon:后台服务启动热更新 3.项目目录 ├── app...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

1.8K20

深入浅出mongodb之实战

,我们可以启动项目看一下效果 cd backend npm i npm start 如果出现下面的结果说明我们启动成功了 $ npm start > backend@0.0.0 start C:\...实际在真正开发环境中,如果我们这么设置允许所有的源都可以访问会有很多问题,我们可以使用cors[4]来代替它 当然如果在生产中我们采用nginx部署之后,就不存在跨域了?...接下来就是我们平时常说mvc模式m和c部分了,为了结构清晰,便于维护我们分成四部分scheme,model,controller,api scheme 在项目的根目录下创建scheme文件夹,因为这里项目简单我们就创建一个...,创建index.js文件: const mongoose = require("mongoose"); const model = mongoose.model.bind(mongoose); const...最后 本文结束,有什么问题和有错误地方,欢迎大家留言和评论,还有后续更新,下期更加精彩 ???

1.7K10
领券