Nuxt 是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。NUXT使用服务端渲染技术，可以获得更快的内容到达时间，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验。服务端渲染又称 SSR (Server Side Render) ，是指在服务端就完成页面的内容，而不是在客户端通过AJAX请求才获取数据

一、开发模式

1、项目结构

Nuxt.js：

预定义的目录结构，包括pages、layouts、store等。
强制性路由生成，基于文件系统自动创建路由。
Vue.js：

自由的项目结构，开发者可以根据需求自定义。
路由由开发者手动配置，使用vue-router进行管理。
2、配置文件

Nuxt.js：

使用nuxt.config.js进行全局配置，简化了配置过程。
Vue.js：

依赖于多个配置文件，如vue.config.js、webpack.config.js等，更加灵活但也更复杂。
3、开发体验

Nuxt.js：

提供了开箱即用的功能，如自动路由、热重载等，提升了开发效率。
Vue.js：

更加灵活，但需要手动配置和安装插件，适合有特定需求的项目。

二、服务器端渲染

1、渲染方式

Nuxt.js：

支持服务端渲染（SSR）、静态站点生成（SSG）和单页应用（SPA）。
SSR可以显著提升页面加载速度和SEO效果。
Vue.js：

原生支持单页应用（SPA），但要实现SSR需要额外的配置和库，如使用vue-server-renderer。
2、SEO优化

Nuxt.js：

SSR和SSG使得页面在首次加载时即包含完整内容，有助于搜索引擎抓取和索引。
Vue.js：

单页应用在客户端渲染，初次加载时页面为空，需要通过JavaScript填充内容，不利于SEO。
3、性能

Nuxt.js：

SSR可以减少客户端的计算量，提升页面初次加载速度，但增加了服务器的负载。
Vue.js：

客户端渲染减少了服务器压力，但增加了客户端的计算量，可能导致初次加载时间较长。

三、内置功能

1、状态管理

Nuxt.js：

默认集成了Vuex，提供集中式状态管理解决方案。
Vue.js：

需要手动安装和配置Vuex，灵活性更高。
2、路由

Nuxt.js：

基于文件系统自动生成，无需手动配置。
Vue.js：

需要使用vue-router手动配置，灵活性更高但也更复杂。
3、插件和模块

Nuxt.js：

提供丰富的官方插件和模块，如PWA、Auth、Axios等，简化了开发过程。
Vue.js：

需要手动查找和配置插件和库，灵活性高但需要更多时间和精力。
4、静态站点生成

Nuxt.js：

内置静态站点生成器，适合生成静态博客、文档网站等。
Vue.js：

需要使用第三方工具如VuePress来生成静态站点。

总结与建议

总结：

开发模式： Nuxt.js提供了更为规范和预定义的项目结构，适合快速开发；Vue.js灵活性更高，但需要更多配置。
服务器端渲染： Nuxt.js天然支持SSR和SSG，提升SEO和性能；Vue.js主要针对SPA，SSR需要额外配置。
内置功能： Nuxt.js集成了丰富的官方插件和模块，简化了开发过程；Vue.js则需要手动选择和配置。
建议：

如果你的项目需要服务器端渲染或静态站点生成，Nuxt.js是一个非常好的选择。
如果你更喜欢灵活的项目结构和配置，或者你的项目是一个单页应用，那么Vue.js可能更适合你。
无论选择哪一个框架，都要根据项目的具体需求和团队的技术栈进行决策，确保选择最合适的工具来提升开发效率和项目质量。
通过深入理解Nuxt.js和Vue.js的区别，开发者可以更好地选择适合自己项目的技术栈，从而提高开发效率，优化性能和SEO效果。希望本篇文章能够帮助你更好地理解这两个框架，并在实际项目中做出明智的选择。

相关问答FAQs：

1. Nuxt和Vue的基本区别是什么？

Nuxt是一个基于Vue.js的通用应用框架，它提供了一些默认配置和约定，使得在开发Vue应用时更加简单和高效。Vue.js本身是一个轻量级的JavaScript框架，用于构建用户界面。Vue.js提供了可组合的组件、响应式数据绑定和虚拟DOM等功能，而Nuxt则在此基础上增加了路由、服务端渲染和静态站点生成等功能。

2. Nuxt和Vue在开发模式上有什么区别？

在开发模式上，Nuxt和Vue有一些不同之处。Vue开发时，我们通常需要手动配置路由、状态管理和构建工具等方面的内容。而Nuxt则通过默认的配置和约定，自动为我们做了这些事情，让我们可以更专注于业务逻辑的实现。

另外，Nuxt还提供了一些开发工具，如自动重载、错误日志和性能分析等，以帮助开发者更方便地调试和优化应用程序。

3. Nuxt和Vue在部署和扩展方面有何区别？

在部署和扩展方面，Nuxt和Vue也有一些区别。由于Nuxt支持服务端渲染和静态站点生成，因此我们可以将Nuxt应用直接部署到静态文件托管服务或CDN上，从而实现更高的性能和可扩展性。

而Vue.js应用通常是通过构建工具打包生成静态文件，然后部署到服务器上，通过服务器端渲染来实现首屏渲染。虽然也可以通过一些手段来优化性能和扩展性，但相比之下，Nuxt在部署和扩展方面更加简单和方便。

总的来说，Nuxt是建立在Vue.js之上的一个应用框架，它提供了更多的功能和便利，使得开发和部署Vue应用更加高效和简单。但对于一些简单的项目，使用Vue.js本身也是一个不错的选择。

sudo yarn add element-plus --save
sudo yarn add @element-plus/icons-vue
sudo yarn add  @element-plus/nuxt -D

二、配置nuxt.config

export default defineNuxtConfig({
  ssr: true,
  devtools: { enabled: true },
  typescript: {
    shim: false,
  },
  modules: ['@element-plus/nuxt'],
  css: ['element-plus/dist/index.css'],
})

重启后便可以在项目中使用element-plus了

 <template v-if="arr.length">
<div v-for="(item,idx)in arr" :key="idx"> {{ item }}</div>
</template>

解决方法 :
v-if="arr&&arr.length"

<template v-if="arr&&arr.length">
<div v-for="(item,idx)in arr" :key="idx"> {{ item }}</div>
</template>

PM2 官网链接: https://pm2.keymetrics.io/

1.PM2 的优势
持续运行：即使应用出错或崩溃，也能自动重启。
负载均衡：智能地自动分配入站连接到多个应用实例。
日志集中管理：一处集中显示所有应用的日志。
实时监控：实时查看所有应用的状态及细节性能指标。

2. 安装 PM2
   选择以下任意一种方法全局安装 PM2：

   yarn global add pm2

   或者

   npm install pm2 -g

3. PM2 常用命令
   启动： pm2 start app.js- 启动并保护您的应用。
   查看列表： pm2 list- 显示所有 PM2 托管的应用列表。
   监控应用： pm2 monit- 查看应用的资源使用和日志。
   查看日志： pm2 logs- 获取应用的实时日志。
   重启应用： pm2 restart
   停止应用： pm2 stop
   移除应用： pm2 delete

🚀 修改 package.json

如上图在 script 标签中添加

"pm2": "pm2 start ./ecosystem.config.cjs --interpreter babel-node --env production",
"bundle": "rollup -c"

4、配置pm2启动文件
🔧 在根目录创建 ecosystem.config.cjs 内容如下

内容如下:

// 配置pm2
module.exports = {
    apps: [
        {
            name: "JavaMerPcMall",
            script: "./.output/server/index.mjs", // 其实使用npm去启动了./node_modules/nuxt/bin/nuxt这个文件。当我们cd到我们的项目目录之后，我们最终可以执行如下命令来启动：
            args: "start", // 传递给脚本的参数
            watch: true, // 开启监听文件变动重启
            ignore_watch: ["node_modules", "public", "logs"], // 不用监听的文件
            exec_mode: "fork",// 自家主机window cluster_mode 模式下启动失败
            instances: "1", // max表示最大的 应用启动实例个数，仅在 cluster 模式有效 默认为 fork
            autorestart: true, // 默认为 true, 发生异常的情况下自动重启
            max_memory_restart: "1G", //  // 最大内存限制数，超出自动重启
            error_file: './logs/app-err.log', // 错误日志文件
            // out_file: './logs/app-out.log', // 正常日志文件
            merge_logs: true, // 设置追加日志而不是新建日志
            log_date_format: "YYYY-MM-DD HH:mm:ss", // 指定日志文件的时间格式
            min_uptime: "60s", // 应用运行少于时间被认为是异常启动
            env: {
                // 环境参数，当前指定为开发环境
                NODE_ENV: "development",
                PORT: "8888",
            },
            env_production: {
                // 环境参数,当前指定为生产环境
                NODE_ENV: "production", //使用production模式 pm2 start ecosystem.config.js --env production
                PORT: "60001",
            },
            env_test: {
                // 环境参数,当前为测试环境
                NODE_ENV: "test",
            }
        }
    ]
};

pm2进程列表

pm2 list

pm2重启进程

pm2 restart [app-name]

pm2 restart all

pm2停止进程

pm2 stop [app-name]

pm2 stop all

pm2的进程日志

pm2 logs

pm2 logs [app-name]

如下图项目启动成功

本地测试端口60001访问成功

FastAPI 文档

官方文档：https://fastapi.tiangolo.com/

FastAPI 安装

FastAPI 推荐使用 uvicorn 来运行服务，Uvicorn 是基于 uvloop 和 httptools 构建的闪电般快速的 ASGI 服务器。

在终端中执行以下命令：

pip install fastapi 
pip install uvicorn

FastAPI 实践

创建一个 .py 文件，并写以下代码

from typing import Optional

from fastapi import FastAPI

app = FastAPI()

@app.get("/api/v1/hw")
def read_root():
    return {"Hello": "World"}

@app.get("api/v1/items/{item_id}")
def read_item(item_id: int):
    return {"item_id": item_id}

示例数据

students = [
{'name': 'Alice', 'score': 78},
{'name': 'Bob', 'score': 56},
{'name': 'Charlie', 'score': 84},
{'name': 'Dave', 'score': 92}
]

这个例子中，filter_students_by_score 函数通过列表推导式（list comprehension）筛选出那些分数超过60的学生记录。

抽取分数超过60的学生

def filter_students_by_score(data):
return [student for student in data if student['score'] > 60]

filtered_students = filter_students_by_score(students)

打印结果

for student in filtered_students:
print(student)

import random
from datetime import datetime, timedelta
import json

if __name__ == '__main__':
    print_hi('PyCharm')
#### See PyCharm help at https://www.jetbrains.com/help/pycharm/

### 定义开始和结束时间
start_time = datetime(2024, 9, 9, 14, 00)  # 2024年3月1日 8:30
end_time = datetime(2024, 9, 9, 14, 30)  # 2024年3月1日 9:30

### 时间间隔设置为1分
interval = timedelta(minutes=1)

### 生成时间列表
time_list = [start_time + i * interval for i in range((end_time - start_time) // interval)]

print(f"随机产生温度参数：")
for ind, time in enumerate(time_list):
    jsonList = {
        'batteryValue': "100",
        "recordDate": f'{time}',
        "longitude": "114.06455",
        "latitude": "22.54846",
        "sensorList": [
            {
                "sensorId": 1,
                "sensorType": "temperature",
                # 随机生成2.5-7.0之间的小数，保留两位小数 f"{random_number:.2f}"
                "sensorValue": f"{random.uniform(2.5, 7.0):.2f}"
            }
        ],
    }
    end = ''
    if ind < len(time_list) - 1:
        print(json.dumps(jsonList) + ',')
    else:
        print(json.dumps(jsonList))

生成格式：

{"batteryValue": "100", "recordDate": "2024-09-09 14:00:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "4.50"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:01:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.92"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:02:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.96"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:03:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.18"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:04:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "4.17"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:05:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.14"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:06:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.88"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:07:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.12"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:08:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.77"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:09:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "4.34"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:10:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.78"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:11:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "4.88"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:12:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.79"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:13:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.99"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:14:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "4.51"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:15:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "6.85"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:16:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "6.66"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:17:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.87"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:18:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "5.65"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:19:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.67"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:20:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "6.75"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:21:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "5.25"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:22:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "5.13"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:23:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "3.13"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:24:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "5.72"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:25:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "5.15"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:26:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "4.02"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:27:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.90"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:28:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.63"}]},
{"batteryValue": "100", "recordDate": "2024-09-09 14:29:00", "longitude": "114.06455", "latitude": "22.54846", "sensorList": [{"sensorId": 1, "sensorType": "temperature", "sensorValue": "2.94"}]}

‌link‌：link是HTML标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等。
‌@import‌：@import是CSS提供的语法规则，只能用于导入样式表，不能定义其他HTML属性‌。

‌加载顺序‌：

‌link‌：在页面加载时，link引入的CSS会同时被加载。
‌@import‌：@import引入的CSS会在页面加载完毕后才加载，这可能导致页面在加载过程中出现样式未完全应用的情况，影响用户体验‌

‌兼容性‌：

‌link‌：作为HTML元素，link不存在兼容性问题，所有浏览器都支持。
‌@import‌：@import是CSS2.1的语法，仅在IE5及更高版本中支持，较老的浏览器可能无法识别‌。

‌DOM可控性‌：

‌link‌：支持使用JavaScript操作DOM，可以通过JavaScript动态改变样式。
‌@import‌：由于@import是基于CSS的语法，无法通过DOM方法插入样式‌。

‌权重和性能‌：

‌link‌：引入的样式权重高于@import引入的样式。
‌性能方面‌：link方式可以同时加载CSS，而@import在页面加载完毕后才加载，可能会影响页面加载速度‌。

综上所述，link和@import在本质、加载顺序、兼容性、DOM可控性、权重和性能等方面都有显著区别，开发者应根据具体需求选择合适的方法。

在团队协作中，每个人都会提交git commit message，但是由于每个人的开发风格和书写习惯的不同，导致git提交五花八门，不利于维护和阅读。一般来说，大厂都一套自己的代码提交规范的，尤其是在开源项目中，代码提交规范都是一致的。

1、需求分析。确保大家对需求有一致的认知
2、设计接口文档。前端需要确认是否符合要求
3、并行开发。前端需要根据接口文档进行Mock, 模拟对接后端接口；联调之前，要求后端做好接口测试
4、真实环境联调。前端将接口请求代理到后端服务，进行真实环境联调。

二、接口规范

2.1 接口风格：

RESTful —— 推荐
JSONRPC
2.1.1 RESTful

标准格式

http(s)://server.com/app-name/{version}/{domain}/{rest-convention}
用法

GET
GET /api/teams （对应团队列表）

GET /api/teams/123 （对应 ID 为 123 的团队）

GET /api/teams/123/members （对应 ID 为 123 的团队下的成员列表）

GET /api/teams/123/members/456 （对应 ID 为 123 的团队下 ID 为 456 的成员）

POST
用于创建资源，或者特殊资源提交（如文件上传/下载）

POST /api/teams/123/members/456 （新增ID 为 123 的团队下 ID 为 456 的成员信息）

body参数{name：'xxx'}

POST /api/teams/123/members/456 （下载ID 为 123 的团队下 ID 为 456 的成员信息）

POST /api/teams/123/members/456 （上传ID 为 123 的团队下 ID 为 456 的成员信息）

body参数{file：formData}

UPDATE（PUT和PATCH）
PUT 用于更新资源的全部信息，在请求的 body 中需要传入修改后的全部资源主体
PATCH 用于局部更新，在 body 中只需要传入需要改动的资源字段。

POST /api/teams （创建团队）

POST /api/teams/123/members （创建团队ID 为 123 的成员）

PUT /api/teams/123/members/456 （更新ID 为 123 的团队下 ID 为 456 的成员全部信息）

PATCH /api/teams/123/members/456 （更新ID 为 123 的团队下 ID 为 456 的成员部分信息）

DELETE
// 单个删除

DELETE /api/users/123

// 批量删除

DELETE /api/users

body参数{ids：[]}

HEAD
获取一个资源的元数据，如数据的哈希值或最后的更新时间。

OPTIONS
获取客户端能对资源做什么操作的信息

过滤
?limit=10：指定返回记录的数量

?offset=10：指定返回记录的开始位置。

?page=2&size=100：指定第几页，以及每页的记录数。

?sortby=name&order=asc：指定返回结果按照哪个属性排序，以及排序顺序。

?keyname=1：指定筛选条件复制代码

其他规范：
规则1：URI结尾不应包含（/）
规则2：正斜杠分隔符（/）必须用来指示层级关系
规则3：应使用连字符（-）来提高URI的可读性
规则4：不得在URI中使用下划线（_）
规则5：URI路径中全都使用小写字母

2.2 注意点：

明确数据类型。例如数字应为Int或Float类型，而非String类型
明确空值的意义。比如在做更新操作时，空值是表示重置，还是忽略更新
明确默认值。对象类型的返回空对象{}, 数组类型的返回空数组[]，字符串类型的返回空字符串""，Number和Boolean类型的返回null
对于大数字(如Java的long 类型，整数类型大于16位浮点数类型大于18位)，返回给前端时需要设置为字符串类型, 防止js发生溢出
关于日期时间格式
对于需要前端再次处理的日期值, 可以使用时间戳
对于纯展示用的日期值, 推荐返回格式化文本, 例如: 2017年1月1日或2017-01-01 20:00:00
对于日期时间需要排序时，返回时间戳或者格式化的包含毫秒数的文本
建议同时返回时间戳的原始值(或 ISO 标准格式)和用于统一显示的格式化文本，例如: {"createTime": 1543195480357, "createTimeText": "2018年11月26日"}
关于分页
分页计数，从1开始
避免滚动加载可能出现的重复数据，采用 lastId 分页方式
图片URL
图片的 URL 建议返回完整的 URL，协议为HTTP时可省略协议
文件上传/下载
文件上传限制默认最大为10M
文件上传类型默认支持：
文档类：doc、docx、xls、xlsx、ppt、pptx、pdf、txt
图片类：jpg、jpeg、png、gif
其他：zip、rar
多文件上传不支持IE9及以下版本浏览器
图片上传服务器前需先在前端压缩，默认控制在400万以下像素或2560*1440及以下分辨率
响应避免冗余的嵌套
接口版本化，保持向下兼容；接口不兼容时需升级版本
建议使用Swagger等工具，避免人工维护可能导致的代码和文档不同步
鉴权通过header实现
同时给出 ID 字段和用于显示字段时，前端提交只提交ID字段
2.3 接口文档规范

后端通过接口文档向前端暴露接口相关的信息。通常需要包含这些信息：

版本号
文档描述
服务的入口，例如协议、域名、基本路径
测试服务器，可选
简单使用示例
安全和认证
具体接口定义
方法名称或者URI
方法描述
请求参数及其描述，必须说明类型(数据类型、是否可选等)
响应参数及其描述, 必须说明类型(数据类型、是否可选等)
可能的异常情况、错误代码、以及描述
请求示例，可选
2.3.1 Header

Content-Type
application/json 默认
application/x-www-form-urlencoded 表单提交/APP请求
Authorization
Basic XXXXXXXX
Bearer XXXXXXXX
Cookie
openid = hash(appid+uid)
Expires 过期时间，默认为0
Referer 之前页面URL，跳转第三方地址需要此参数
lang 多语言
zh_cn
zh_hk
en_us
2.3.2 请求参数

4种类型：
1、cookie： 一般用于OAuth认证
2、Request Header： 一般用于OAuth认证
3、请求body数据
4、地址栏参数： 详见【2.1.1过滤】

2.3.3 响应参数

response Demo

• 表示不必须
  {

  status: 200, // 详见【status】

  data: {

  code: 10000, // 返回码，详见【4.3.2 公共响应参数】

  msg: '成功', // * 返回码描述

  sub_code: 'success', // 明细返回码

  sub_msg: '', // * 明细返回码描述，显示给客户端用户【须语义化中文提示】，code不为10000时均需toast提示

  sysMsg: '', // * 提示，调试使用，可包括中英文数字及特殊符号

  result: [], // 返回的数据结果对象，可根据需要定义

  page: {

  current: 1,           // * 当前页，从1开始
  
  size: 10,             // * 每页记录数
  
  total: 100            // * 总记录数

  }

  },

  message: '成功', // 提示,显示给客户端用户【须语义化中文提示】

  sysMessage: 'success' // * 提示,调试使用,中英文都行

}

2.4 转义与编码

编码规则：encodeURIComponent 与 decodeURIComponent

URI特殊字符需转义
特殊字符及转义符号

特殊字符

转义后的符号

+

%2B

空格

%20

/

%2F

?

%3F

%

%25

#

%23

&

%26

=

%3D

!

%21

第三方回调页面URI需反转义，如：支付宝支付成功回调页面

URI汉字需转为Unicode码
2.5 加密

首选HTTPS，其中以下项目要求必须为HTTPS
APP
微信公众号和小程序
使用第三方API（如海康、高德等）
HTTP项目需要对关键敏感信息进行加密处理，HTTPS项目不做要求
账号、密码
账号、密码禁止明文传输，如admin等
密码加密策略：
方法一
服务器端存储密码为Hash(Random-Salt + Hash(Constant-SALT + Pasword))
客户端传输密码为Hash(Constant-SALT + Password)
Random-Salt为用户的随机盐，每个用户均不同，服务器端收到客户端的hash密码后，在将其与用户随机盐一起Hash运算，从而将结果与数据库存储值相比较。
优点：数据库存储的密码经过两层哈希，且其中包含了固定盐和用户随机盐，安全性较高。
缺点：客户端传输的密码虽然经过了一层哈希，但是使用固定盐值，因此相同密码生成的结果均一致，容易收到重放攻击。
方法二
服务器端存储密码为Hash(Constant-SALT + Pasword)
客户端传输密码为Hash(Random-Salt + Hash(Constant-SALT + Password))
Random-Salt为每次进入登陆页面时生成的随机盐，此处主要是为了防止重放攻击，作用类似与nonce 服务器收到客户端上传的hash之后的密码，根据用户ID取出服务器存储的密码，并通过与之前返回客户端的Random-Salt（可存储于Session中）进行Hash运算，从而与客户端上传的密码进行比较。
优点：客户端有效的防止了重放攻击。
缺点：在前端代码中，固定盐值暴露，一旦后台数据库被攻破，用户密码信息将有危险。
加密库：
MD5
crypto-js
手机号、银行卡号、姓名等私密信息
通用加密策略：
Hash(Constant-SALT + Pasword)
Random-Salt为每个应用or业务系统的随机盐，与其他细节加密字段进行Hash运算后再跳转。
数字加密策略：
转换进制，如：
// 加密

const mask = (+phone).toString(28)

// 解密

const phone = parseInt(mask, 28)

手机号、银行卡号加密策略：
方法一
参考上文数字加密策略
方法二
参考上文通用加密策略
姓名、邮箱、住址等加密策略：
参考上文通用加密策略
第三方跳转时URI加密
加解密策略
参考上文通用加密策略
2.6 跨域

CORS 实现

三、接口测试与模拟

3.1 工具：

RESTful
Swagger 这是最为接近上面理想模型的一个解决方案
JSON Server 快速生成JSON mock服务器
Easy Mock 可视化的、在线的接口mock服务
Yapi接口平台 支持本地部署
GraphQl
GraphQL Faker
graphql-tools
模拟数据生成
js 强大的模拟数据生成工具，支持Node和浏览器
js 数据生成和模拟工具

四、 附录

4.1 公共状态码（status）

git init： 初始化一个新的 Git 仓库。

git init --bare： 初始化一个裸仓库（通常用于远程仓库）。

配置用户信息

git config --global user.name "Your Name"：设置全局用户名。
git config --global user.email "your.email@example.com"：设置全局用户邮箱。

分支管理

git branch：列出所有本地分支。
git branch ：创建新分支。
git checkout ：切换到指定分支。

git checkout -b ：新建分支并切换到该分支。
git merge ：合并指定分支到当前分支。
git branch -d ：删除分支branch1。

远程仓库

git remote add origin ：添加远程仓库。
git fetch：获取远程仓库的变化。
git pull：获取远程仓库的变化并合并到本地。

git pull ：拉取远程仓库的指定分支。

git push：推送本地的提交到远程仓库。

git push ：本地分支推送到远程（远程无该分支会创建）。

其他命令

git log：查看提交历史。
git diff：显示未暂存的差异。
git stash：暂存当前工作目录的更改以便稍后恢复。
git clone ：克隆一个远程仓库到本地。

查看状态

git status：显示工作目录和暂存区的状态。

添加文件

git add ：将单个文件添加到暂存区。
git add.：将所有改动添加到暂存区。

忽略文件

touch .gitignore： 创建一个 .gitignore 文件来指定不需要跟踪的文件模式。

提交更改

git commit -m "Commit message": 提交暂存区的更改到仓库，并附带提交信息。

常用

git commit -m "提交信息"：提交已暂存的更改。

git commit -a -m "提交信息"：自动将所有已跟踪文件的更改添加到暂存区，并提交（不包括未跟踪的新文件）。

git commit --amend -m "新的提交信息"：可以修改最近一次提交的信息或者添加新的更改到最近一次提交中。

（commit作用于本地仓库，push将本地仓库的提交历史推送到远程仓库）