3、TypeScript的接口与高级类型
接口定义 接口:对复杂的对象类型进行标注的一种方式,或者给其它代码定义一种契约(比如:类) 接口的基础语法定义结构特别简单 interface Point { x: number; y: number; } 上面的代码定义了一个类型,该类型包含两个属性,一个 number 类型的 x 和一个 number 类型的 y,接口中多个属性之间可以使用 逗号 或者 分号 进行分隔 我们可以通过这个接口来给一个数据进行类型标注 let p1: Point = { x: 100, y: 100 }; 注意:接口是一种 类型 ,不能作为 值 使用 interface Point { x: number; y: number; } let p1 = Point; //错误 可选属性 interface Point { x: number y: number // 加问好表示类型是可选的 color?: string } let p1: Point ...
2、TypeScript的类型系统
基础类型 基础类型包括String、number、boolean // 通过冒号标注变量值的类型 let title: string = '小康' let age: number = 18 let isOk: boolean = true 空和未定义类型 let a: null let b: undefined // a与b无法被赋值,但是可以将其赋值给其他类型 let c: string = '1' c = b console.log(c) 如果声明了一个变量,但没有赋值,那么值默认为undefined,类型为any 避免赋值为空值时的配置 修改tsc配置文件,加入字段strictNullChecks { "compilerOptions": { "outDir": "./dist", "target": "ES2015", "watch": true, "strictNullChecks": true }, "include": ["./src/**/*"] } 此时就不能将空值赋值给 ...
1、TypeScript的基本使用
安装 npm i typescript -g tsc -v 编译ts文件 tsc 文件名 即可编译ts文件。 一些有用的编译选项 编译命令 tsc 还支持许多编译选项,这里我先来了解几个比较常用的 –outDir 指定编译文件输出目录 tsc --outDir ./dist ./src/hello.ts –target 指定编译的代码版本目标,默认为 ES3 tsc --outDir ./dist --target ES6 ./src/hello.ts –watch 在监听模式下运行,当文件发生改变的时候自动编译 tsc --outDir ./dist --target ES6 --watch ./src/hello.ts 通过上面几个例子,我们基本可以了解 tsc 的使用了,但是大家应该也发现了,如果每次编译都输入这么一大堆的选项其实是很繁琐的,好在TypeScript 编译为我们提供了一个更加强大且方便的方式,编译配置文件:tsconfig.json,我们可以把上面的编译选项保存到这个配置文件中 编译配置文件 我们可以把编译的一些选项保存在一个指定的 json 文件 ...
五、Koa2上传图片的实现
操作流程 安装koa-body替换koa-bodyparser yarn add koa-body 设置中间件 const koaBody = require('koa-body') const path = require('path') app.use(koaBody({ // 启用文件传输 multipart: true, formidable: { // 上传目录 uploadDir: path.join(__dirname, '/public/uploads'), // 保留扩展名 keepExtensions: true } })) 编写控制器 class HomeCtl { index (ctx) { ctx.body = '<h1>这是主页</h1>' } upload (ctx) { const file = ctx.request.fi ...
四、JWT在Koa框架中实现用户的认证与授权
JWT是什么 JSON Web Token是一个开放标准(RFC7519) 定义了一种紧凑且独立的方式,可以将各方之间的信息作为json对象进行安全传输 该信息可以验证和信任,因为是经过数字签名的。 JWT的构成 Header typ TOKEN的类型,固定为JWT alg 使用hash算法 Payload 存储需要传递的信息,如用户ID、用户名等 还包含元数据,如过期时间、发布人等 与 Header不同, Payload可以加密 Signature 对 Header和 Payload部分进行签名 保证 Token在传输的过程中没有被篡改或者损坏 NodeJs中使用JWT 安装jsonwebtoken yarn add jsonwebtoken 使用 const jsonwebtoken = require('jsonwebtoken') const token = jsonwebtoken.sign({ _id, name }, secret, { expiresIn: "1d" ...
三、NodeJs链接MogoDB云数据库
MongoDB使用云数据库 注册用户 创建数据库 添加用户 设置白名单地址 链接数据库 使用数据库 安装mongoose yarn add mogoose 链接数据库 复制上一步的字符串,并替换掉其中的数据。例如<password>和<dbname> 在入口文件链接数据库 const mongoose = require('mongoose') // 通过配置文件导入链接字符串 const { connectionStr } = require('./config') mongoose.connect(connectionStr, { useUnifiedTopology: true, useNewUrlParser: true }, () => { console.log('链接成功了'); }) 创建用户模型 新建一个schema文件夹,在这个文件中写我们的数据库模型。例如user const mongoose = require(' ...
二、Koa的基本使用
初始化项目 安装依赖 yarn add koa yarn add nodemon -D 简单的Hello World const Koa = require('koa') const app = new Koa() app.use((ctx) => { ctx.body = 'Hello World' }) app.listen(3000) nodemon使用了内部安装,因此需要在package.json中写运行脚本才可以使用。 { "scripts": { "server": "nodemon index.js" } } 路由 一个简单的判断路由路径和请求方法 app.use(async (ctx) => { if (ctx.url === '/' && ctx.method == "GET") { ctx.body = '主页' } else { ctx.body = ' ...
一、RESTful API 理论
什么是REST及限制 REST的六个限制 客户-服务器 关注点分离 服务端专注数据存储,提升了简单性 前端专注用户界面,提升了可移植性 无状态 所有用户会话信息都保存在客户端 每次请求必须包括所有信息,不能依赖上下文信息 服务端不用保存会话信息,提升了简单性、可靠性、可见性 缓存 所有服务端响应都要被标为可缓存或不可缓存 减少前后端交互,提升了性能 统一接口 接口设计尽可能统一通用,提升了简单性、可见性 接口与实现解耦,使前后端可以独立开发迭代 分层系统 每层只知道相邻的一层,后面隐藏的就不知道了 客户端不知道是和代理还是真实服务器通信 其他层:安全层、负载均衡、缓存层等 按需代码 客户端可以下载运行服务端传来的代码(比如JS) 通过減少ー些功能,简化了客户端 统一接口的限制 资源的标识 通过表述来操作资源 表述就是 Representation,比如JSON、XML等 客户端不能直接操作(比如SQL)服务端资源 客户端应该通过表述(比如JSON)来操作资源 自描述消息 每个消 ...
7、谷粒后台后续操作
图表介绍 echarts https://echarts.baidu.com/ 百度开源, 如果要在react 项目中使用, 需要下载echarts-for-react G2 https://antv.alipay.com/zh-cn/g2/3.x/index.html 阿里开源 bizcharts https://bizcharts.net/products/bizCharts 基于react 包装G2 的开源库,需要额外下载@antv/data-set d3 https://d3js.org.cn/ 国外的免费可视化图表库 简单使用 安装插件 yarn add echarts echarts-for-react bizcharts @antv/data-set 柱形图 import React, { Component } from 'react' import { Card, Button } from 'antd' import ReactEcharts from 'echarts-for-react' /* ...












