在本教程中，我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序。 我们从设计 API 开始。...编译 src 文件夹中的每个 .ts 文件 include: 告诉编译器包含 src 目录和子目录中的文件 exclude: 在编译时会排除数组中的文件或文件夹 现在我们安装依赖项，使项目可以使用 TypeScript...yarn add express cors mongoose 我们还需要安装它们的类型作为开发依赖项，帮助 TypeScript 编译器理解这些包。...yarn add -D @types/node @types/express @types/mongoose @types/cors 现在，TypeScript 不会再对你提示错误——它将使用这些类型来定义我们刚刚安装的库...added", todo: newTodo, todos: allTodos }) } catch (error) { throw error } } addTodo() 函数接收包含用户输入数据的
，最后决定使用的技术栈就是 koa+typescript+mysql+mongodb来搭建项目。...Typescript 网上特别多关于“为什么要用Typescript开发”，“Typescript开发的好处和坏处”，“为什么不用Typescript开发”等等的争论和文章，有兴趣的同学也可以去说道说道哈...并且，一些用户身份信息或埋点信息可以存在mongo中 PM2 PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单 项目搭建...= error; }) export default app 到了这一步，我们就已经可以启动一个简单的项目了 npm run tsc 编译ts文件 node app.js 启动项目 接下来在浏览器输入...不过这个项目除了使用mysql，也还有用到mongo，接下来看看mongodb怎么用 使用mongoose作为mongodb的中间件 // mongoose入口 import mongoose from
一、Node.js默认使用commonJs的模块化方案，TypeScript默认是ES6的模块化方案，两者有本质区别。...避免了 传送过多的对象，代码看起来很复杂 4.渲染数据的位置在渲染的ejs文件中的放置， 如果需要样式，可以事先在HTML结构中包一层HTML结构， 然后用CSS定义好。...== password) { err.repassworderr = '两次密码输入不一致'; } if (!...== password) { err.repassworderr = '两次密码输入不一致' } err.usernamereerr = '用户名或者邮箱输入有误...= require('mongoose'); module.exports = new Promise((resolve, reject) => { mongoose.connect('mongodb
最佳实践 请求设计规范 URI 使用名词，尽量使用复数，如/users URI 使用嵌套表示关联关系，如/users/123/repos/234 使用正确的 HTTP 方法，如 GET/POST/PUT...上面说了这么多，下面让我们看一下如何在 Koa 中践行RESTful API最佳实践吧。...拿到路由分配的任务并执行 在 koa 中是一个中间件 为什么要用控制器 获取 HTTP 请求参数 Query String，如?...简单的说，Mongoose就是对node环境中MongoDB数据库操作的封装，一个对象模型(ODM)工具，将数据库中的数据转换为JavaScript对象以供我们在应用中使用。...在这里主要是以用户模块的crud为例来展示下如何在 koa 中践行RESTful API最佳实践。
依赖注入最大的作用是代码解耦，依赖的对象根据不同的情况可以有多种实现，如单元测试的时候可以在不改业务代码的情况下将依赖的对象换成 Mock 数据。...类型系统是后端开发很重要的一环，Nest是使用TypeScript实现的框架，因此原生就支持TypeScript，而且还大量使用了注解，熟悉 Spring 的朋友会感到十分亲切。...另外，Nest是基于Express实现的，需要的话可以取到底层的对象，如request和response。...连接数据库 例子中使用mongoose连接和操作本地MongoDB数据库。为了更方便使用，Nest提供了@nestjs/mongoose包，对mongoose包装了一层，使其更符合Nest的使用风格。...操作数据库的步骤如下： app.module中定义连接的数据库：MongooseModule.forRoot('mongodb://localhost/nest') cat.schema中定义 Schema
中启发了`实验性'装饰器的设计器。...https://inspect.dev/ Mongoose 5.10新增乐观并发控制(乐观锁)(英) Optimistic concurrency核心思想是追踪文档的版本并在每次保存后增加版本，当在加载文档和保存文档之间...http://thecodebarbarian.com/whats-new-in-mongoose-5-10-optimistic-concurrency.html prefers-reduced-motion-media...特性可以帮助缓解运动敏感人群的不适(英) 屏幕上的某些运动可能会对运动敏感的人产生影响，如眩晕，恶心等。...javascriptweekly.com/link/94726/web tools And codes Print.js：小型的打印PDF插件(英) Print.js的主要目的是帮助我们直接在我们的应用程序中打印
，Nest 官方为我们提供了一个 Mongoose 的封装，我们需要安装 mongoose 和 @nestjs/mongoose： npm install mongoose @nestjs/mongoose...执行上面的终端命令之后，app.module.ts 中的代码已经发生了变化，在文件顶部自动引入了 UserModule，同时也在 @Module 装饰器的 imports 中引入了 UserModule...连接数据之前，我们要先在根模块，也就是 app.module.ts 中引入 Mongoose 的连接模块： // app.module.ts import { Module } from '@nestjs.../user.service'; interface UserResponse {//这是一个 TypeScript 接口定义，用于描述用户响应的数据结构。...// 输入框2的输入事件（年龄） input2Change(e) { this.setData({ inputValue2: e.detail.value, });
npm run dev $ open http://localhost:7001 image.png 安装插件 @switchdog/egg-graphql 插件机制是egg的一大特色，由于我们基于 TypeScript...enable: true, package: '@switchdog/egg-graphql', }, 配置插件 通常插件都会有一些配置项，在/config/config.default.ts中配置即可...// 设置为true时，以Apollo跟踪格式收集和公开跟踪数据 debug: true, // 一个布尔值，如果发生执行错误，它将打印其他调试日志记录 }, }; 在中间件中开启...可以理解为 {id: 1, name: 'jack'} 项目启动 npm run dev 在浏览器中输入 http://127.0.0.1:7001/graphql 出现如下界面说明已经 graphql...从MongoDB查询数据 安装 egg-mongoose yarn add egg-mongoose 配置 // config/plugin.ts exports.mongoose = { enable
留言功能在社交中占据很重要的作用。这里实现的留言功能，参考微信朋友圈的方式： 用户发送一个TOPIC话题，读者可以在该话题下面进行评论，也可以对该话题下的留言进行评论。...前端实现 使用技术 react ant design typescript 在上面的截图中，很明显，就是一个表单的设计，外加一个列表的展示。...后端 使用的技术： mongodb 数据库，这里我使用到了其ODM mongoose koa2 一个Node框架 pm2 进程守卫 apidoc 用来生成接口文档（如果你留意体验站点，右上角有一个...首先，我们对自己要存储的数据结构schema进行相关的定义： const mongoose = require('mongoose') const Schema = mongoose.Schema /.../ 定义留言字段 let MessageSchema = new Schema({ // 关联字段 -- 用户的id userId: { type: mongoose.Schema.Types.ObjectId
正确的组织 Node.js 项目结构将避免重复代码、提高服务的稳定性和扩展性。...图片描述 ☠️ 不要将您的业务逻辑放入控制器中!!...对象中。...让我们看一下经典的 Express.js 应用初始化 const mongoose = require('mongoose'); const express = require('express...`); }); } // Run the async function to start our server startServer(); 如您所见，应用程序的这一部分可能真是一团糟
一、typescript是什么 typescript 是 javascript的超集，在javascript基础上提供了更加实用的类型供开发使用; 支持ES6语法，支持面向对象编程的概念，如类、接口、继承...2.类型注解：在TypeScript中，可以使用类型注解来显式声明变量的类型，如let num: number = 10;。而在JavaScript中，不需要显式声明变量的类型，可以直接赋值。...3.语言特性：TypeScript在JavaScript的基础上增加了一些新的语言特性，如类（Class）、接口（Interface）、枚举（Enum）等。...4.编译过程：TypeScript需要通过编译器将TypeScript代码转换为可执行的JavaScript代码，然后在浏览器或Node.js环境中运行。...参考文献 https://www.tslang.cn/docs/handbook/basic-types.html
建立评论模型 js 1const schema = new mongoose.Schema({ 2 // comment id 3 cid: { 4 type: Number, 5 required...post列中关联引用表(post表)的 _id（文章），在 hasChild 中记录是否存在回复。...如 post 中的一篇 pid 为 11 的文章下有一条评论，那么 key 中命名 11#001，这是第一条评论，如果该评论下存在一条回复，则回复的 key 为 11#001#001，下层亦是如此。...deleteCount: delCount || 1 }) 30} catch (e) { 31 console.log(e) 32 return res.send({ ok: 0, msg: '参数不正确...' }) 33} 34} 35return res.send({ ok: 0, msg: '请输入正确的ID' }) 36}) COPY 说完了删除，相比之下新建评论就容易多了，只要根据原本的评论数量设定新的
特点 请求你所要的数据，不多不少； 如： hero 中有 name, age, sex 等，可以只取得需要的字段。...如：接口 restapi/shopping/v3/restaurants?latitude=13 就是个典型的 restful 接口，定义资源 + 查询条件。 2....另外，我们可以使用 [类型] 来表示一类数组，如： [Int] 表示整型数组； [String] 表示字符串型数组； 2...."doSomething": "I'm IronMan, I'm watching TV now" } } } 五、GraphQL客户端 这一节我们学习如何在客户端中访问...查询类型用 type ，输入类型用 input。 其实 GraphQL 还是很简单好用的呢~~~
我们可以在应用程序中间件中捕获错误，并统一处理这些错误。...数据库集成在 Web 应用程序中，使用数据库存储和管理数据是常见需求。Koa2 可以方便地与各种数据库集成，如 MongoDB、MySQL 等。...这里以 MongoDB 为例，介绍如何在 Koa2 中集成 MongoDB。...首先，我们需要安装 mongoose，一个流行的 MongoDB ODM（对象文档映射器）：npm install mongoose然后配置 MongoDB 连接和模型：const Koa = require...('koa');const Router = require('koa-router');const mongoose = require('mongoose');const koaBody = require
一、TypeScript 的联合类型简介 在 TypeScript 中，联合类型（Union Types）是一个非常重要的特性，它允许单个变量持有多种类型的值。...想象一下，在一个 TypeScript 应用中，我们需要一个函数来处理各种类型的输入，比如用户的名字（字符串）、年龄（数字）或生日（日期）。...在这篇文章中，我们将重点介绍 Extract 类型，通过实际示例展示如何在真实的 TypeScript 场景中有效使用它。...，只处理基于文本的输入。...下面是一个示例，展示如何利用 TypeScript 确保我们的 AppState 使用正确的模式。
需求描述 参考文献 需求描述 首先我有一个 Item 的 collection: type Item { _id: String itemname: String!...getItemSummary { data{ _id count } success } } 然按照其中的类别 (itemtype) 进行总计: 那么实际上在后台 mongoose...$skip：在聚合管道中跳过指定数量的文档，并返回余下的文档。 $unwind：将文档中的某一个数组类型字段拆分成多条，每条包含数组中的一个值。 $group：将集合中的文档分组，可用于统计结果。...$sort：将输入文档排序后输出。 $geoNear：输出接近某一地理位置的有序文档。...db.col_1.aggregate({ $skip: 2 }); 参考文献 https://www.jianshu.com/p/baea1bce6de3
让我们来看一个简单的例子，了解一下如何在Vue中让组件进行通信。...然后，消息有效载荷存储在 messageFromChild 引用中，该引用会自动更新模板以显示来自子组件的消息。 简单吧？这展示了你如何在Vue中使组件“相互通信”。...如何在Typescript中正确地使用类型推断 使用emits的一个“缺点”是，当你发出一个自定义事件时，你不一定知道子组件会发出什么。这种不确定性可能会导致数据类型和运行时错误的潜在问题。...通过正确地为emits添加类型，你可以确保类型安全性，提高代码清晰度，并使你的Vue应用程序更易于维护。...让我们探索如何使用Vue 3的Composition API和script setup正确地使用TypeScript来输入emits。
特点 请求你所要的数据，不多不少； 如： hero 中有 name, age, sex 等，可以只取得需要的字段。...如：接口 restapi/shopping/v3/restaurants?latitude=13 就是个典型的 restful 接口，定义资源 + 查询条件。 2....另外，我们可以使用 [类型] 来表示一类数组，如： [Int] 表示整型数组； [String] 表示字符串型数组； 2...."doSomething": "I'm IronMan, I'm watching TV now" } } } 五、GraphQL客户端 这一节我们学习如何在客户端中访问...查询类型用 type ，输入类型用 input。
6、TypeScript 中声明变量有哪些不同的关键字？ 7、如何书写带有类型注释的函数 ？ 8、如何在 TypeScript 中创建对象 ？ 9、如何在 TypeScript 中指定可选属性 ？...string：表示文本值，例如“javascript”、“typescript”等 number：表示数值，如 1、2、25、36 等 boolean：表示一个变量，它可以具有“真”或“假”值 image.png...有时你想将值存储在变量中，但事先不知道该变量的类型 当你没有明确提供类型时，TypeScript假定变量是any类型，并且编译器无法从周围的上下文中推断出类型 例如，该值来自 API 调用或用户输入。...image.png 8、如何在 TypeScript 中创建对象 ？ 对象是类似字典的keys和values的集合，key 必须是唯一的。...它们类似于数组，有时也称为关联数组 但是，数组使用数字来索引值，而对象允许使用任何其他类型作为键 image.png 9、如何在 TypeScript 中指定可选属性 ？ 通过添加 ？
相信大家对于如何在项目中使用 TypeScript 已经轻车熟路，本文就来探讨简单探讨一下 TypeScript 是如何工作的，以及有哪些工具帮助它实现了这个目标。...二、TypeScript 与 VSCode 当我们在 VSCode 中新建一个 TypeScript 文件并输入 TS 代码时，可以发现 VSCode 自动对代码做了高亮，甚至在类型不一致的地方，VSCode...Babel 有两种常见使用场景，一种是直接在 CLI 中调用 babel 命令，另一种是将Babel 和打包工具（如 webpack）结合使用。...由于 babel 自身并不具备打包功能，所以直接在命令行中调用 babel 命令的用处不大，本节主要讨论如何在 webpack 中使用 babel 处理 typescript。...当然，由于 babel 的单文件特性，@babel/preset-typescript 对于一些需要收集完整类型系统信息才能正确运行的 TypeScript 语言特性，支持不是很好，如 const enums
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
