Python 类型提示简介 后端开发
Python 3.6+ 版本加入了对"类型提示"的支持。
这些"类型提示"是一种新的语法(在 Python 3.6 版本加入)用来声明一个变量的类型。
通过声明变量的类型,编辑器和一些工具能给你提供更好的支持。
这只是一个关于 Python 类型提示的快速入门 / 复习。它仅涵盖与 FastAPI 一起使用所需的最少部分...实际上只有很少一点。
整个 FastAPI 都基于这些类型提示构建,它们带来了许多优点和好处。
但即使你不会用到 FastAPI,了解一下类型提示也会让你从中受益。
def get_full_name(first_name: str, last_name: str):
full_name = first_name.title() + " " + last_name.title()
return full_name
print(get_full_name('john', 'dog'))
支持简单类型:
- int
- float
- bool
- bytes
嵌套类型
from typing import List
def process_items(items: List[str]):
for item in items:
print(item)
这表示:变量 items 是一个 list ,并且这个列表里的每一个元素都是 str 。
元组和集合
from typing import Set, Tuple
def process_items(items_t: Tuple[int, int, str], items_s: Set[bytes]):
return items_t, tiems_s
字典
定义 dict 时,需要传入两个子类型,用逗号进行分隔。
REST表述性状态转移 前端开发
RESTful是一种专门为Web开发而定义API接口的设计风格,尤其适用于前后端分离的应用模式中。
关键词:面向资源开发。
这种风格的理念认为后端开发任务就是提供数据的,对外提供的是数据资源的访问接口,所以在定义接口时,客户端访问的URL路径就表示这种要操作的数据资源。
面对资源分别使用POST、DELETE、GET、UPDATE等请求动作来表达对数据的增删改查。
请求方法 | 请求地址 | 后端操作 |
---|---|---|
POST | /Student/ | 增加学生 |
GET | /student/ | 获取所有学生 |
GET | /student/1 | 获取id为1的学生 |
PUT | /student/1 | 修改id为1的学生 |
DELETE | /student/1 | 删除id为1的学生 |
restful规格是一种通用的规范,不限制语言和开发框架的使用。事实上,我们可以使用任何一门语言,任何一个框架都可以实现符合restful规范的API接口。
Javascript 字符串插值 前端开发
ECMAScript 6 新增了使用模板字面量定义字符串的能力。与使用单引号或双引号不同,模板字面量
保留换行字符,可以跨行定义字符串:
let myMultiLineString = 'first line\nsecond line';
let myMultiLineTemplateLiteral = `first line
second line`;
console.log(myMultiLineString);
// first line
// second line"
console.log(myMultiLineTemplateLiteral);
// first line
模板字面量最常用的一个特性是支持字符串插值,也就是可以在一个连续定义中插入一个或多个
值。技术上讲,模板字面量不是字符串,而是一种特殊的 JavaScript 句法表达式,只不过求值后得到的
是字符串。模板字面量在定义时立即求值并转换为字符串实例,任何插入的变量也会从它们最接近的作
用域中取值。
字符串插值通过在${}中使用一个 JavaScript 表达式实现:
let value = 5;
let exponent = 'second';
let interpolatedTemplateLiteral = `${value} to the ${exponent} power is ${value * value}`
console.log(interpolatedTemplateLiteral)
什么是 JavaScript 前端开发
JavaScript 是一门用来与网页交互的脚本语言,包含以下三个组成部分。
ECMAScript:由 ECMA-262 定义并提供核心功能。
文档对象模型(DOM):提供与网页内容交互的方法和接口。
浏览器对象模型(BOM):提供与浏览器交互的方法和接口。
JavaScript 的这三个部分得到了五大 Web 浏览器(IE、Firefox、Chrome、Safari 和 Opera)不同程度的支持。所有浏览器基本上对 ES5(ECMAScript 5)提供了完善的支持,而对 ES6(ECMAScript 6)和 ES7(ECMAScript 7)的支持度也在不断提升。这些浏览器对 DOM 的支持各不相同,但对 Level 3 的支持日益趋于规范。HTML5 中收录的 BOM 会因浏览器而异,不过开发者仍然可以假定存在很大一部分公共特性。
初识ArkTS语言 游戏开发
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集。因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。
当前,ArkTS在TS的基础上主要扩展了如下能力:
- 基本语法:ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
- 状态管理:ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
- 渲染控制:ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。
未来,ArkTS会结合应用开发/运行的需求持续演进,逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。
应用程序包概述 游戏开发
用户应用程序泛指运行在设备的操作系统之上,为用户提供特定服务的程序,简称“应用”。一个应用所对应的软件包文件,称为“应用程序包”。
HarmonyOS提供了应用程序包开发、安装、查询、更新、卸载的管理机制,方便开发者开发和管理HarmonyOS应用,具体如下:
-
应用软件所涉及的文件多种多样,开发者可通过HarmonyOS提供的集成开发工具将其开发的可执行代码、资源、三方库等文件整合到一起制作成HarmonyOS应用程序包,便于开发者对应用程序的部署。
-
应用软件所涉及的设备类型多种多样,开发者可通过HarmonyOS提供的应用程序包配置文件指定其应用程序包的分发设备类型,便于应用市场对应用程序包的分发管理。
-
应用软件所包含的功能多种多样,将不同的功能特性按模块来划分和管理是一种良好的设计方式。HarmonyOS提供了同一应用程序的多包管理的机制,开发者可以将不同的功能特性聚合到不同的包中,方便后续的维护与扩展。
-
应用软件涉及的芯片平台多种多样,有x86、ARM等,还有32位、64位之分,HarmonyOS为应用程序包屏蔽了芯片平台的差异,使应用程序包在不同的芯片平台都能够安装运行。
-
应用软件涉及的软件信息多种多样,有应用版本、应用名称、组件、申请权限等的信息,HarmonyOS包管理为开发者提供了这些信息的查询接口,方便开发者在程序中查询所需要的包信息。
-
应用软件涉及的资源多种多样,有媒体资源、原生资源、字符资源以及国际化的资源等,HarmonyOS包管理将不同的资源归档到不同的目录中,并集成资源索引文件,方便应用对资源的查找和使用。
JavaScript双11倒计时小案例 前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var targetDate = new Date("2023/11/11")
function diffTime(current, target){
var sub = Math.ceil((target - current)/1000)
var day = parseInt(sub/(60*60*24))
var hours = parseInt(sub%(60*60*24) / (60*60))
var minutes = parseInt(sub%(60*60)/60)
var seconds = sub%60
var obj = {
day:day,
hours:hours,
minutes:minutes,
seconds:seconds
}
return obj
}
// var res = diffTime(currentDate,targetDate)
// console.log(res)
setInterval(function(){
var currentDate = new Date()
var res = diffTime(currentDate, targetDate)
// document.write(`双11${res.day}天${res.hous}时${res.minutes}分${res.seconds}秒`)
// document.write("<br>")
box.innerHTML = `距离双11还有${res.day}天${res.hous}时${res.minutes}分${res.seconds}秒`
},1000)
</script>
</body>
</html>
JavaScript for循环打印九九口诀表 前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<script>
for (var m = 1; m <= 9; m++) {
for (var i = 1; i <= m; i++) {
document.write("<span>" + i + " * " + m + " = " + m*i + "</span>")
}
document.write("<br>")
}
</script>
</body>
</html>
CSS旋转折扇小案例 前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
/* 不显示列表前的符号 */
list-style: none;
}
ul {
margin: 10px auto;
width: 600px;
height: 400px;
border: 5px solid gray;
position: relative;
}
li {
width: 60px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 30px;
text-align: center;
/* 设置旋转中心点 */
transform-origin: bottom center;
border-radius: 10px;
transition: all 2s;
}
/* 除了第七个,其他都透明 */
ul li:not(:nth-child(7)) {
opacity: 0;
}
ul:hover li {
opacity: 1;
}
ul li:nth-child(1), ul li:nth-child(13) {
background: purple;
}
ul li:nth-child(2), ul li:nth-child(12) {
background: darkblue;
}
ul li:nth-child(3), ul li:nth-child(11) {
background: deeppink;
}
ul li:nth-child(4), ul li:nth-child(10) {
background: deepskyblue;
}
ul li:nth-child(5), ul li:nth-child(9) {
background: green;
}
ul li:nth-child(6), ul li:nth-child(8) {
background: yellow;
}
ul li:nth-child(7) {
background: red;
}
ul:hover li:nth-child(1) {
transform: rotate(90deg);
}
ul:hover li:nth-child(13) {
transform: rotate(-90deg);
}
ul:hover li:nth-child(2) {
transform: rotate(75deg);
}
ul:hover li:nth-child(12) {
transform: rotate(-75deg);
}
ul:hover li:nth-child(3) {
transform: rotate(60deg);
}
ul:hover li:nth-child(11) {
transform: rotate(-60deg);
}
ul:hover li:nth-child(4) {
transform: rotate(45deg);
}
ul:hover li:nth-child(10) {
transform: rotate(-45deg);
}
ul:hover li:nth-child(5) {
transform: rotate(30deg);
}
ul:hover li:nth-child(9) {
transform: rotate(-30deg);
}
ul:hover li:nth-child(6) {
transform: rotate(15deg);
}
ul:hover li:nth-child(8) {
transform: rotate(-15deg);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</body>
</html>
CSS画太极图小案例 前端开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: lightblue;
}
div {
width: 200px;
height: 200px;
/* 线性渐变,白黑各一半 */
background: linear-gradient(white 50%, black 50%);
margin: 10px auto;
/* 弹性盒子,水平显示 */
display: flex;
/* 侧轴居中 */
align-items: center;
border-radius: 50%;
}
div::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: radial-gradient(black 25%, white 25%);
border-radius: 50%;
}
div::after {
content: "";
display: block;
width: 100px;
height: 100px;
background: radial-gradient(white 25%, black 25%);
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>