首页
Node
PHP
Git
Python
前端
搜索
nuxt和vue开发有什么区别
登录
搜索
一行虎
累计撰写
28
篇文章
累计收到
1
条评论
首页
栏目
首页
Node
PHP
Git
Python
前端
灯片
灯片2
nuxt和vue开发有什么区别
最新文章
2024-2-17
nuxt和vue开发有什么区别
Nuxt.js与Vue.js开发的主要区别可以归纳为以下三点: 1、开发模式,2、服务器端渲染,3、内置功能。 Nuxt.js是一个基于Vue.js的框架,专为服务端渲染(SSR)和静态站点生成而设计。虽然两者共享Vue.js的核心,但它们在开发模式、渲染方式和功能集成方面有所不同。以下将详细探讨这些区别。 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: Nuxt和Vue的基本区别是什么? Nuxt是一个基于Vue.js的通用应用框架,它提供了一些默认配置和约定,使得在开发Vue应用时更加简单和高效。Vue.js本身是一个轻量级的JavaScript框架,用于构建用户界面。Vue.js提供了可组合的组件、响应式数据绑定和虚拟DOM等功能,而Nuxt则在此基础上增加了路由、服务端渲染和静态站点生成等功能。 Nuxt和Vue在开发模式上有什么区别? 在开发模式上,Nuxt和Vue有一些不同之处。Vue开发时,我们通常需要手动配置路由、状态管理和构建工具等方面的内容。而Nuxt则通过默认的配置和约定,自动为我们做了这些事情,让我们可以更专注于业务逻辑的实现。 另外,Nuxt还提供了一些开发工具,如自动重载、错误日志和性能分析等,以帮助开发者更方便地调试和优化应用程序。 Nuxt和Vue在部署和扩展方面有何区别? 在部署和扩展方面,Nuxt和Vue也有一些区别。由于Nuxt支持服务端渲染和静态站点生成,因此我们可以将Nuxt应用直接部署到静态文件托管服务或CDN上,从而实现更高的性能和可扩展性。 而Vue.js应用通常是通过构建工具打包生成静态文件,然后部署到服务器上,通过服务器端渲染来实现首屏渲染。虽然也可以通过一些手段来优化性能和扩展性,但相比之下,Nuxt在部署和扩展方面更加简单和方便。 总的来说,Nuxt是建立在Vue.js之上的一个应用框架,它提供了更多的功能和便利,使得开发和部署Vue应用更加高效和简单。但对于一些简单的项目,使用Vue.js本身也是一个不错的选择。
2024年-2月-17日
246 阅读
0 评论
未分类
2024-2-15
nuxt3中使用element-plus(集成element-plus)
一、安装依赖 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了
2024年-2月-15日
224 阅读
0 评论
未分类
2024-2-14
Nuxt报错TypeError: Cannot read properties of null (reading 'length')
可能是某个数组属性不存在, 但是判断了他的长度,比如下方代码 <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>
2024年-2月-14日
254 阅读
0 评论
未分类
2024-1-5
PM2 快速上手-Nuxt + pm2 部署 PC 商城
PM2是 Node.js 的优秀运行时管理工具,专为简化和优化 Node.js 应用程序的生产部署与运行而设计。 PM2 官网链接: https://pm2.keymetrics.io/ 1.PM2 的优势 持续运行:即使应用出错或崩溃,也能自动重启。 负载均衡:智能地自动分配入站连接到多个应用实例。 日志集中管理:一处集中显示所有应用的日志。 实时监控:实...
2024年-1月-5日
394 阅读
0 评论
Node
2023-11-23
快速上手 Python 框架 FastAPI
FastAPI 是一种现代,快速(高性能)的 Web 框架,基于标准Python 类型提示使用 Python 3.6+ 构建 API。 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}
2023年-11月-23日
455 阅读
0 评论
Python
2023-11-12
Python抽取分数超过60的学生
print('1111') 示例数据 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)
2023年-11月-12日
526 阅读
0 评论
Python
2023-11-12
Python-生成固定时间且间隔为1分随机测试数据Json实例
This is a sample Python script. 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"}]}
2023年-11月-12日
506 阅读
0 评论
Python
2023-11-12
link和@import在CSS引入方式上关键区别
本质区别: 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可控性、权重和性能等方面都有显著区别,开发者应根据具体需求选择合适的方法。
2023年-11月-12日
467 阅读
0 评论
CSS
2023-11-11
前后端交互规范
一、协作流程规范 在团队协作中,每个人都会提交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)
2023年-11月-11日
176 阅读
0 评论
前端
2023-11-11
git基本操作
初始化仓库 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将本地仓库的提交历史推送到远程仓库)
2023年-11月-11日
540 阅读
0 评论
Git
1
2
3