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

React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App

终端上运行这个命令,创建一个新的 NodeJS 应用程序: yarn init 它会询问几个问题,然后初始化应用程序。你可以通过命令中添加 -y 标志来跳过。...控制器、类型和路由它们各自以它们命名的的文件夹中。 现在,我们需要配置 tsconfig.json,使编译器运行我们的首选项。...也就是说,我们现在可以为 API 创建一些路由,并使用这些方法来处理请求。...getTodos() 方法会返回 promise —— 因此,我们可以调用 then 函数并用获取到的数据更新 state,或者发生任何错误时抛出一个错误。...} setTodos(data.todos) }) .catch(err => console.log(err)) } 当发送表单时,我们用 addTodo() 服务端发送请求

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

深入浅出mongodb之实战

所以我们可以通过修改模板引擎的方式创建项目 express backend -e 创建好项目之后,我们express骨架已经搭建好了,我们可以启动项目看一下效果 cd backend npm i npm start 如果出现下面的结果说明我们的启动成功了...,主要编写前端发送请求和响应数据给前端 views这个文件夹中ejs文件结尾的文件是后端的模板文件 app.js是入口文件,模板配置和总路由文件 package.json 这个是包的描述文件,我们主要关注的是...,如果遇到了不同源请求时,会先询问来自哪个源对源进行检查之后,做出响应。...中有这么一句话一切皆为中间件,我们设置路由的时候,需要在app.js中注册之后才能使用 //app.js var api = require("....最后 本文结束,有什么问题和有错误的地方,欢迎大家的留言和评论,还有后续更新,下期更加精彩 ???

1.7K10

Express中对MongoDB数据库进行增删改查

,不过Rest-Client插件可以直接在VSCode中发送HTTP的GET、POST、PUT、DELETE请求,对于开发人员来说很方便,具体可以参考Johnny老师的B站视频VSCode中类似PostMan...然后VSCode中打开终端,使用cnpm命令安装express和MongoDB的数据库模块mongoose和cors(支持跨域),命令如下: cnpm install express cnpm install...}) NodeJs中对MongoDB数据库进行增删改查 连接MongoDB数据库 新建一个MongoDB数据库模型,命名为express-test const mongoose = require('...请求修改产品信息 // 修改产品和PUT请求 // patch表示部分修改,put表示覆盖 //app.patch(); app.put('/products/:id', async function(...请求 // patch表示部分修改,put表示覆盖 //app.patch(); app.put('/products/:id', async function(req,res){ const product

5.3K10

从零到部署:用 Vue 和 Express 实现迷你全栈电商应用(二)

让我们再来看一看我们的路由部分 routes/index.js,路由是我们 API 服务器的核心,我们对数据进行增删改查都需要访问特定的路由接口,我们整个教程中几乎都是围绕路由的操作。...我们的 API 服务器实际上就是通过 HTTP 的各种方法(POST、DELETE、PUT、GET 等)访问我们定义的路由,进而对数据库进行相应的增删改查操作以获取我们期望的数据。...接着我们我们的 app.js 文件中导入 mongoose ,并且通过 mongoose 提供的接口连接我们的 MongoDB 数据库: // ... const mongoose = require...CORS 是用来限制此域名下的资源访问解决方案,当它关闭时,另外一个域名访问此域名的资源时会被拒绝。...完成 API 路由 路由是 Express 的关键组成部分,也是客户端与服务器进行交互的入口, Express 路由中接受两个参数:Request 和 Response,一个用来获取客户端的请求,一个用来发送给客户端服务器的响应

3K10

使用MongoDB和Express开发NoSQL数据库应用的详细教程

步骤3:连接MongoDBmyapp目录下,安装mongoose,这是一个用于Node.js中连接MongoDB的库:npm install mongooseapp.js中添加以下代码,以连接到MongoDB...步骤4:定义数据模型myapp/models目录下创建一个新文件user.js,定义一个简单的用户数据模型:// models/user.jsconst mongoose = require('mongoose...('User', userSchema);步骤5:创建路由myapp/routes目录下创建一个新文件users.js,定义处理用户相关路由的代码:// routes/users.jsvar express...app.use('/users', usersRouter);步骤6:启动应用在myapp目录下运行以下命令启动应用:npm start访问http://localhost:3000/users可以看到用户列表为,...步骤7:使用Postman测试API使用Postman或任何API测试工具,http://localhost:3000/users发送POST请求,添加新用户。同样,可以使用GET请求获取用户列表。

21610

GraphQL 基础实践

,对于移动端来说,发起一个 HTTP 请求还是比较消耗资源的,特别是一些网络连接质量不佳的情况下,一下发出多个请求反而会导致不好的体验。...而 GraphQL 就是为了解决这些问题而来的,服务端发送一次描述信息,告知客户端所需的所有数据,数据的控制甚至可以精细到字段,达到一次请求获取所有所需数据的目的。... movie 的旁边,name: "Manchester",这个代表着传入 movie 的参数,参数名为 name 值为Manchester,利用这些参数服务器表达你所需的数据需要符合什么条件。...在上面的 Schema 中,后面紧跟着的感叹号声明了此类型是个不可类型(Non-Nullable),参数中声明表示该参数不能传入为。...本例中,Schema 定义了 name 为 String类型,那么你就不能传 Int类型进去,此时会抛出类型不符的错误

12.8K20

RESTful API接口设计规范与最佳实践

当一个查询的结果为的时候,为什么有的接口设计会返回异常(HTTP状态码404或其他),有的则是会返回请求成功(HTTPS状态码200),但是返回结果是数组或者null等表示结果为的标识?...而前面提到的,关于实际开发出来的RESTfull接口风格迥异的问题实际上并没有太糟糕,为什么这么说呢?...,并返回实体主体 2 POST 指定资源提交数据进行处理请求(例如提交表单或者上传文件)。...POST 请求可能会导致新的资源的建立和/或已有资源的修改 3 PUT 从客户端服务器传送的数据取代指定的文档的内容 4 PATCH 是对 PUT 方法的补充,用来对已知资源进行局部更新 5 DELETE...最后总结一下这个问题就是,你可以不遵循RESTfull风格设计里面关于对请求方法类型的区分定义,但需要在路由地址上花心思,那么真实开发场景中,我们该如何选择呢?

49610

MongoDB增删改查操作

1.2 创建文档 创建文档实际上就是集合中插入数据。...mongoose验证 创建集合规则时,可以设置当前字段的验证规则,验证失败就则输入插入失败。...当用户访问/list时,将所有用户信息查询出来 实现路由功能 呈现用户列表页面 从数据库中查询用户信息 将用户信息展示列表中 将用户信息和表格HTML进行拼接并将拼接结果响应回客户端...1.点击修改按钮的时候 将用户ID传递到当前页面 2.从数据库中查询当前用户信息 将用户信息展示到页面中 2.实现用户修改功能 1.指定表单的提交地址以及请求方式...req, res) => { // res.end('list'); // 请求方式 const method = req.method; // 请求地址 const

19.8K30

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

为什么要用node 最主要的一点是其他语言咱也不会啊。。。 ?...Typescript 网上特别多关于“为什么要用Typescript开发”,“Typescript开发的好处和坏处”,“为什么不用Typescript开发”等等的争论和文章,有兴趣的同学也可以去说道说道哈...,可以避免很多开发阶段的低级错误 约束开发习惯,使得代码更优雅规范 最后记住一点,适合自己的才是最好的 Mysql MySQL 是最流行的关系型数据库管理系统, WEB 应用方面 MySQL 是最好的...router.use(路由模块.routes()) ... router.use(路由模块.routes()) // 测试路由连接 router.get('/test-connect', async...(tableName, AccSchema, tableName) // disposeAccInsertData 方法用来处理日志信息,有些字段嵌套太要扁平化深或者去除值冗余字段

7.2K31

使用 ServerLess, Nodejs, MongoDB Atlas cloud 构建 REST API

v=2 注册成功进入个人中心出现以下页面,选择 Build a Cluster 按钮 创建 Cluster 3. 以下提供了多种选择方案,对于初学者选择左侧免费版创建 4....不利于上下文重用:传动程序启动之后常驻内存,不存在冷启动问题,而 ServerLess 是基于事件驱动的,第一次请求来了之后会下载代码、启动容器、启动运行环境、执行代码,这个过程称为冷启动,但是以 AWS...运行之后调用多次,可能会出现以下问题 OverwriteModelError: Cannot overwrite `Books` model once compiled....这个错误是因为你已经定义了一个 Schema,之后又重复定义该 Scheme 导致的,错误代码如下所示: module.exports = mongoose.model('Books', BooksSchema...,注意如果是 /books/:id 这样的路由 serverless.yml 里的路由规则为 books/{id} service: mongodb-serverless-node-rest-api

2.8K20

Node.js 配合 express 框架、mongodb 实践 &&

ejs 引擎渲染( res.render() ) 1.Node.js使用ejs渲染的核心技巧是渲染数据的指定 2.尽量一个渲染数据对象包括所有的渲染内容 3.一个渲染对象可以有很多个属性,每次get请求时先发送一个的对象到后端...'这是Node.js版本' '//入口文件使用了两个路由路由,分别处理get和post请求逻辑。...即使是同一个路由,但是请求方式不一样,他们的处理逻辑不会冲突' const express = require('express'); const db = require('....err) { console.log('服务器连接成功'); } else { console.log('服务器连接成功'); }; }); 三、get请求路由处理模块...文件中的格式有三种 1. 里面可以写任意代码 2. 里面写的代码最终会转义后再出现(推荐) 3. 里面写的代码最终不会转义后就出现

4.9K20

《Elasticsearch 源码解析与优化实战》第7章:写流程

} INDEX:索引中“put”一个文档的操作称为“索引”一个文档。...UPDATE:默认情况下,“put”一个文档时,如果文档已存在,则更新它。 DELETE:删除文档。 put API中,通过op_type参数来指定操作类型。...转发请求时会将SequenceID、PrimaryTerm、GlobalCheckPoint、version 等传递给副分片。....); 等待Response的过程中,本节点发出了多少个Request,就要等待多少个Response。无论这些Response是成功的还是失败的,直到超时。...因此读取操作主分片和副分片上可能会得到不同结果。 原子性:索引的读写、别名更新是原子操作,不会出现中间状态。但bulk不是原子操作,不能用来实现事务。

2.1K61
领券