蒋川
TA的个人档案
蒋川_个人页
文章
41
问答
0
视频
0
个人介绍
WX个人：HiJiangChuan
擅长的技术
- Java
- 数据库
-
发表了文章 2022-04-15
全球排名前 3 的开源低代码开发平台测评
本文首发：《全球排名前 3 的开源低代码开发平台测评》低代码开发平台已经是程序员日常标配效率工具了，曾经我们拿到开发需求后，要先配 Vue & React 等框架环境、再选需要引入的第三方组件库，最后穿针引线，调试搭建起需要的后台工具。这其中无数深坑等着我们去趟，直到低代码工具出现后，才解决这一开发困境，让轮子自己把自己安上。低代码开发平台一般内置多种前端 UI 组件，包括表格、表单、图表、富文本编辑器、时间选择器、下拉菜单、地图等，几乎所有搭建工具时需要的前端组件，都能在低代码开发平台内找到。也就是说，你在根据自己需求搭建工具的过程中，完全不需要写任何前端代码，仅需拖拽即可瞬间生成前端组件，后端数据库及 API 也帮你一键连入，简单几行代码，轻松搭建工具。比如可快速构建 admin 后台管理 、销售 ERP、客户 CRM、数据分析看板、云端文件上传管理等基于数据库或 API 的管理工具，曾经用 Vue 开发需要数周，现在只需要几小时，极大提高了开发效率。谁用谁知道，早用早下班。低代码工具层出不穷，但真正顶级好用又开源免费的并不多，我测试了所有能找到的开源低代码平台，挑出用户最多，社区生态最健壮，迭代速度最快的 3 款开源低代码开发平台，分享给大家。当然，开源工具的优势是选择多样，缺点是所有问题都只能自己来处理。为了帮助大家进一步提高开发效率节省时间，再推荐一款走自研路线的低码平台卡拉云低，它是一款针对国内应用场景特别优化的低代码开发工具，详见本文文末。本文介绍全球排名前 3 的开源低代码开发平台AppSmith - 前端极度灵活，支持多数据源接入Budibase - 内置自动化流程触发器工具，与第三方连接，企业级 IFTTTToolJet - 拥有丰富多样的可接入数据源及第三方工具调用AppSmith - 前端极度灵活，支持多数据源接入Appsmith 开源低代码开发平台Appsmith 是什么？AppSmith 是印度一家创业公司开发的低代码开发工具，它的原型是另一家名叫 Retool 的美国的创业公司。AppSmith 从 2019 年开始开发，到现在已经发行了 1.x 版本。用户可使用 AppSmith 开发自己的企业内部管理工具，一键接入数据库及 API（支持 RESTful API、PostgreSQL、DynamoDB、MongoDB、Firebase 等），仅需拖拽即可生成的前端 UI 组件。有清晰的权限系统，企业团队在 AppSmith 上开发的 app ，可根据使用者的身份划分权限。Appsmith 怎么样？（1）简单拖拽即可创建前端组件AppSmith 内置多种常用的前端组件，表格、表单、图表、富文本编辑器、时间选择器、下拉菜单、地图等。用户可直接通过鼠标拖拽来搭建 admin 管理后台、数据看板、数据库 CRUD 工具、销售 ERP、客户 CRM 等任何基于数据库和 API 的管理工具。有关 AppSmith 深度测评推荐：《AppSmith 是什么？怎么样 —— 低代码开发平台测评》（2）可一键接入多种数据库及 APIAppSmith 可直连多种常见数据库及 RESTful API。通过 JS 连接前端组件，直接把查询返回的数据映射到前端组件上。完全不用处理复杂的前后端问题，一键连接。（3）无需处理前后端问题，会简单 JS 即可不用处理复杂的前后端连接问题，会写简单 JS 即可快速把后端查询返回的数据映射到前端组件上。你不需要写大段大段代码，只需要通过 JS 把谁和谁相连，谁的数据映射给谁写清楚即可完成搭建。上手容易，轻松开发。（4）权限清晰，一键邀请同事加入开发或使用在 AppSmith 上开发的 APP 管理工具时，不仅可以分享给同事共同开发，还可以直接分享给业务团队只读使用。Budibase - 内置自动化流程触发器工具，与第三方连接，企业级 IFTTTBudibase 是什么？Budibase 是一套开源的低代码开发平台，与其他所有的低代码开发平台类似，它支持一键数据库及API 接入，支持简单的 JS 关联前后端数据，有细致的权限访问管理，对移动端有良好的支持。与其他低代码不同的是它主打企业流程自动化，有完善的自动化流程设计，内置 20 多个自动流程触发器和操作模版，帮助你更好的完成庞大的数据管理及调用。有关 Budibase 深度测评推荐：《Budibase 是什么？怎么样 —— 低代码开发平台测评》Budibase 怎么样？（1）Budibase 支持多种数据源接入Budibase 支持多种数据源接入，包括 MongoDB、CouchDB、PostgreSQL、MySQL、Airtable、S3、DynamoDB 及 REST API。（2）Budibase 内置低代码编辑器，快速构建企业工具Budibase 开箱即用，内置低代码编辑器，包含各种有设计感的前端组件，团队也公开了一些 CSS 样式，可直接调试。简单几步搭出直观好用的前端网站页面，可轻松分享给任何人直接使用。（3）Budibase 的拿手好戏，自动化工作流Budibase 与其他低代码开发平台最大的区别就在于它的自动化工作流，只要告诉 Budibase 你需要做什么，Budibase 会自动帮你有条不紊的完成，堪称企业级 IFTTT。ToolJet - 拥有丰富多样的可接入数据源及第三方工具调用ToolJet 是什么？ToolJet 是一套开源的低代码开发平台框架，可快速构建和部署企业内部工具，帮助开发团队节省大量开发时间。开发者可使用 ToolJet 连接多种常见的数据库（如 PostgreSQL、MongoDB、Elasticsearch 等）也可以直接接入 RESTful API，甚至可以直接调第三方工具（比如 Stripe、Slack、Google Sheets、Airtable 等），灵活的前端组件拖拽生成，无需懂任何前端技术。有关 ToolJet 深度测评推荐：《ToolJet 是什么？怎么样 —— 低代码开发平台测评》ToolJet 怎么样？（1）ToolJet 可接入多种数据源、API及第三方工具ToolJet 可接入三种数据源，数据库、API 及第三方工具，通过 JS 把后端调的数据与前端组件相映射，快速搭建灵活的数据管理工具。（2）ToolJet 拖拽生成前端组件ToolJet 内置常见的前端组件，鼠标简单拖放即可生成。ToolJet 内置 30 多个组件，包括最重度使用的表格、图表、文本框及按钮等。完全不需要开发者操心任何前端事物，甚至根本不懂前端的开发者也可以轻松上手。（3）与你的团队共享开发ToolJet 内置丰富的权限管理，可直接通过邮件邀请你的团队加入开发。也可把已经完成的 app 直接只读分享出去给业务团队直接使用。ToolJet 的权限系统非常细致，不论你的权限设置需求如何复杂，它都能轻松应对。开源低代码开发平台与卡拉云对比卡拉云是新一代低代码开发平台，与 AppSmith、Budibase、ToolJet 三款开源低代码开发平台不同，卡拉云选择走自研路线，无需自己动手安装部署，只需简单注册即可快速开始使用。卡拉云针对国内互联网应用场景进行了许多优化，不论是使用习惯上，还是应用场景上都更贴近国内用户。如集成了阿里、腾讯、华为等多家云存储、可轻松调用七牛云 API、Leancloud API、金数据、又拍云、企业微信、钉钉等常见的第三方应用接口，方便开发者直接使用。下图为使用卡拉云搭建的内部广告投放监测系统，仅需拖拽，1小时搞定。卡拉云帮助开发者处理所有非必要开发事物，免安装部署，开发者只需把精力聚焦在需求开发上，无需管任何琐事，甚至完全可以不用懂前端，也能搭出漂亮的企业后台管理工具。卡拉云可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽即可生成所有常见的前端 UI 组件。简单易上手，配合详尽的开发文档，5分钟上手卡拉云。使用卡拉云快速搭建企业内部工具，原来一周的开发工作量，可缩减至 1 小时，更多信息可访问卡拉云官网。扩展阅读：Element Plus 和 Ant Design Vue 对比测评，哪个更好？Element Plus for Vue 3 入门教程12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐最棒的 7 个 Laravel admin 后台管理系统推荐Retool 是什么，怎么样？ —— Retool 低代码工具测评最好的 6 款 React 后台管理系统模板和框架最好用的 7 款 Vue admin 后台管理框架测评
-
发表了文章 2022-04-10
ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色
本文首发：《ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色》Vue ECharts 饼状图中的每个扇形颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各销售渠道名，那么你可以需要使用全局统一的识别色彩，那么就需要指定每个扇面的颜色。本文讲解 4 种配置修改 ECharts 饼图颜色的方法。另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置包括 ECharts 在内的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，早用早下班，详见本文文末。方法一：在 series 内配置饼状图颜色series: [ itemStyle: { normal: { color: function (colors) { var colorList = [ '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc' ]; return colorList[colors.dataIndex]; } }, } ]EChart.js 在 series 中设置饼状图颜色的 Demo 源代码：option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: '50%', data: [ { value: 1017, name: '搜索引擎' }, { value: 583, name: '直接访问' }, { value: 873, name: '微信朋友圈' }, { value: 432, name: '口碑介绍' }, { value: 332, name: '电话销售' }, { value: 678, name: 'Feeds 广告' } ], itemStyle: { normal: { color: function (colors) { var colorList = [ '#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc' ]; return colorList[colors.dataIndex]; } }, } } ] };扩展阅读：《最好用的 7 款 Vue admin 后台管理框架测评》方法二：在 option 内配置饼状图颜色color**:**['#3ca170','#5470c6', '#91cd77','#ef6567', '#f9c956','#75bedc'],EChart.js 在 option 中设置饼状图颜色的 Demo 源代码：option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, color: ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'], series: [ { name: 'GA 数据统计', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: 1017, name: '搜索引擎' }, { value: 583, name: '直接访问' }, { value: 873, name: '微信朋友圈' }, { value: 432, name: '口碑介绍' }, { value: 332, name: '电话销售' }, { value: 678, name: 'Feeds 广告' } ] } ] };扩展阅读：《Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能》方法三：在 data 内配置饼状图颜色data: [ { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}}, { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}}, { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}}, { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}}, { value: 432, name: '口碑介绍',itemStyle: {color:'#f9c956'}} ]EChart.js 在 data 中设置饼状图颜色的 Demo 源代码：option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, legend: { top: 'bottom' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [ { value: 917, name: '搜索引擎',itemStyle: {color:'#fc8251'}}, { value: 873, name: '微信朋友圈',itemStyle: {color:'#5470c6'}}, { value: 678, name: 'Feeds 广告',itemStyle: {color:'#91cd77'}}, { value: 583, name: '直接访问',itemStyle: {color:'#ef6567'}}, { value: 332, name: '电话销售',itemStyle: {color:'#f9c956'} }, { value: 432, name: '口碑介绍',itemStyle: {color:'#75bedc'}} ] } ] };扩展阅读：《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》方法四：配置 ECharts 饼状图随机颜色color: function () { return ( 'rgb(' + [ Math.round(Math.random() * 270), Math.round(Math.random() * 370), Math.round(Math.random() * 400) ].join(',') + ')' ); },option = { title: { text: '卡拉云流量来源渠道汇总', subtext: '本月数据', left: 'center' }, legend: { top: 'bottom' }, series: [ { name: 'GA 数据统计', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { color: function () { return ( 'rgb(' + [ Math.round(Math.random() * 270), Math.round(Math.random() * 370), Math.round(Math.random() * 400) ].join(',') + ')' ); }, borderRadius: 8 }, data: [ { value: 917, name: '搜索引擎'}, { value: 873, name: '微信朋友圈'}, { value: 678, name: 'Feeds 广告'}, { value: 583, name: '直接访问'}, { value: 332, name: '电话销售'}, { value: 432, name: '口碑介绍'} ] } ] };扩展阅读：《7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型》使用「卡拉云」直接生成饼状图本文介绍了如何解决在 Vue 中 ECharts 饼图指定或随机颜色的解决方案，虽然开源库已经帮我们解决了大部分造轮子的事，但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端，一行代码也不用写的方法，生成图表呢？这里推荐你使用卡拉云，卡拉云内置多种样式的图表，仅需鼠标拖拽即可生成，完全不用懂任何前端。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。扩展阅读：最好用的 7 款 Vue admin 后台管理框架测评如何在 Vue 中加入图表 - Vue echarts 使用教程最好用的 5 款 React 富文本编辑器最棒的 7 个 Laravel admin 后台管理系统推荐顶级好用的 5 款 Vue table 表格组件测评与推荐最好的 6 个 React Table 组件详细亲测推荐最好的 6 个免费天气 API 接口对比测评使用和风天气 API 10分钟搭建天气预报数据看板
-
发表了文章 2022-04-07
Element Plus 和 Ant Design Vue 对比测评，哪个更好？
本文首发：《Element Plus 和 Ant Design Vue 对比测评，哪个更好？》Vue 3 发布后，各家第三方库开始陆续重构并支持 Vue 3 ，国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3。到底应该怎么选择呢？本文从多个纬度对两个框架进行对比和测评。Element Plus 发布正式版后，下载量飙升，当然这也依托于 Element UI 的占有率和好口碑。有关 Element Plus 的入门教程可看这篇：《Element Plus for Vue 3 入门教程》框架版本对 Vue 的支持Element UI 支持 Vue 2Element Plus 支持 Vue 3Ant Design Vue 1.x 支持 Vue 2Ant Design Vue 3.x 支持 Vue 3Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，在这次面向 Vue 3.0 重构时，一次性全部解决。Ant Design Vue 1.x 仅支持 Vue 2 ，2.x 是为了 Vue 3 开发的兼容版，并没有任何新特性，大多数的 API 也只是为了更好的兼容 Vue 3 ，3.x 版在易用性、功能、性能上都有了很大的提升，可以说是对 Vue 3 比较成熟支持的版本了。浏览器兼容性Element Plus 和 Ant Design Vue 3 都已不在支持 IE 了，并不是他们自己放弃了 IE 而是 Vue 3 本身已经放弃了 IE。如果想在低版本浏览器上正常使用这两个框架，可使用 Babel、ESBuild 或其他转换工具，并引入相应的 polyfill。Element Plus 使用到了 ResizeObserver，如有兼容性需求可自行引入 resize-observer-polyfill。详情请参阅 ResizeObserver 的兼容性。组件功能与特点Element Plus 共 68 个组件，Ant Design Vue 3.x 共 64 个组件。table 组件：Element Plus 自带 virtual scroll ，Ant Design Vue 需要购买 Surely 这个高级包。如果需要用表格处理大量数据，Element Plus 更合适。Ant Design table ，定义好 columns 有几列后，用 template 写法就无法用 v-if 去隐藏某一列在 Ant Design Vue 里，Modal.confirm 某些 api 不支持 promise 写法，需要写在回调函数里TreeSelect 组件：Ant Design tree 组件写自定义内容不方便。而 Element 更好用。form 表单组件：两个框架功能基本一致，包含数据收集，表单校验和提交功能。input、checkbox 、select 等常用功能两个框架都有。Ant Design Vue 2 & 3 是最早支持 Vue 3 的框架之一，新版本解决了很多 Vue 用户群在旧版本不喜欢的「单向数据流 value + change event」，实现了全 v-model 使用组件。维护状态Element Plus 与 Element UI 一样依然是饿了么团队开发支持和维护。前段时间传闻 Element UI 无人维护，不更新了。其实只是团队在全力开发 Element Plus 而已。Element 团队的迭代速度有目共睹，可放心使用。Ant Design Vue 是 Ant Design的 Vue 实现，UI 风格和 Ant Design 保持 1:1 复刻。Ant Design Vue 虽然是以个人开发开始起步的，算是社区版，但它得到了蚂蚁官方认可，挂在蚂蚁金服底下的正式项目，保持了不错的更新和维护状态。Element Plus、Ant Design Vue 与卡拉云对比Element Plus 与 Ant Design Vue 都是 Vue 3 的一个组件库，所以使用 Element 和 antdv 首先要搭 Vue 3 开发环境，然后再引入组件库，再按照文档的说明，根据自己的需求进行二次开发。使用 Element 和 antdv 相对来说对前端技能要求较高。卡拉云是新一代低代码开发平台，与 Element 和 antdv 相比，卡拉云的优势在于不用搭建 Vue 环境，直接注册即可开始使用。开发者完全不用处理任何前端问题，只需简单拖拽，即可快速生成所需组件，可一键接入包括 MySQL 在内的常见数据库及 API，根据引导简单几步打通前后端，数周的开发时间，缩短至 1 小时。卡拉云搭建的数据看板 DEMO：https://my.kalacloud.com/apps/ykxauq3u6r/published使用卡拉云 10 分钟内搭建的「天气预报数据看板」，简单拖拽，几行代码即可快速完成，搭建即发布，可一键分享给其他同学一起使用。立即注册使用卡拉云。扩展阅读：7 种最棒的 Vue Loading 加载动画组件测评与推荐如何在 Vue 中加入图表 - Vue echarts 使用教程最棒的 7 个 Laravel admin 后台管理系统推荐顶级好用的 5 款 Vue table 表格组件测评与推荐12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
-
发表了文章 2022-03-29
React Router 6 (React路由) 最详细教程
React Router 经历多个版本的发展，现在已经到了 React Router 6。虽然网络上写 React-Router 路由本身的教程很多，但真正讲到 React-Router 6 的并不多。同时因为第 6 版引入了很多新的概念，以及大量使用 Hook，因此网上的很多旧教程已经不实用了。这篇文章里我们总结 React Router 6 路由器的用法，用例子说明如何实现各种场景和需求，比如程序化跳转等等。在卡拉云中，我们也大量地使用了 React-Router 6，所以在讲解过程中我们会用一些在实际使用的例子来说明问题，但本文的主要例子会放在 github 仓库中，方便你参考。如果你觉得有用，不妨分享和加星，或在博客中链回本文，让更多人看到。本系列中其它优秀教程请参考React 表格教程React 拖拽教程React 富文本组件当然如果你希望快速搭建后台系统，也推荐尝试卡拉云，可以免掉前后端开发、维护的烦恼什么是 React-Router要理解什么是 React-Router 就要先理解什么是 SPA (Single Page Application)，也就是俗称的单页应用。每个单页应用其实是一系列的 JS 文件，当用户请求网站时，网站返回一整个(或一系列)的 js 文件和 HTML，而当用户在某个页面内点击时，你需要告诉浏览器怎么加载另一个页面地址。单页应用中通常只有一个 index.html 文件的，所以浏览器自带的 <a> 链接 tag 并不能用来做单页应用的跳转，因此你需要一个在 React 中的路由实现。然而 React 框架本身是不带路由功能的，因此如果你需要实现路由功能让用户可以在多个单页应用中跳转的话，就需要使用 React-Router。React-Router 从 2014 年开始开发，到现在已经经历了 6 次大版本迭代，而从它的使用者来看，Netflix, Twitter, Discord 等等大厂纷纷背书，因此 React-Router 已经基本成了在 React 中做路由的默认选项。如果你现在还在用老的版本，想要升级，那么可以参考升级教程，否则的话可以一步步参考本文。在读完本文后，你应该可搭起来如下这样的简单应用，用一个导航栏控制用户可以访问的页面，同时保护某些页面，必须在用户登录后才可以进入。虽然这个应用看起来简单，但是它却包含了 React-Router 中常见的功能和 API，包括BrowserRouterLinkRoutesRouteOutlet等等如何安装 React-Router安装 React-Router 非常简单，如果你使用的是 yarn 或者 npm，则用通常的安装方式即可我们先用 create-react-app 脚手架建起一个 app 来npx create-react-app react-router-6-tutorial然后用 npm 安装如果使用 npm 的话则是npm install react-router-dom@6yarn 安装yarn add react-router-dom@6这样 react-router 就安装好了。注意如果在 web 上的话，你需要的是 react-router-dom 而不是 react-router 这个包。它们的区别是，后者包含了 react-native 中需要的一些组件，如果你只需要做网页应用的话，用前者就可以了React Router APIReact Router 的 API 在它的官方文档上已经介绍得比较清楚了，我们这里简单地总结一下几个可能用到的 API。具体的用法在下文中我们详细来讲，这里只是作为参考，如果碰上问题可以查一查BrowserRouter在 React Router 中，最外层的 API 通常就是用 BrowserRouter。BrowserRouter 的内部实现是用了 history 这个库和 React Context 来实现的，所以当你的用户前进后退时，history 这个库会记住用户的历史记录，这样需要跳转时可以直接操作。BrowserRouter 使用时，通常用来包住其它需要路由的组件，所以通常会需要在你的应用的最外层用它，比如如下import ReactDOM from 'react-dom' import * as React from 'react' import { BrowserRouter } from 'react-router-dom' import App from './App` ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('app))RouteRoute 用来定义一个访问路径与 React 组件之间的关系。比如说，如果你希望用户访问 https://your_site.com/about 的时候加载 <About /> 这个 React 页面，那么你就需要用 Route:<Route path="/about" element={<About />} />RoutesRoutes 是用来包住路由访问路径(Route)的。它决定用户在浏览器中输入的路径到对应加载什么 React 组件，因此绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route，比如如下import { Routes, Route } from "react-router-dom"; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> ); }在这里，Routes 告诉了 React Router 每当用户访问根地址时，加载 Home 这个页面，而当用户访问 /about 时，就加载 <About /> 页面。React Router 实操案例在上文中我们介绍了 React Router 的 API，余下全文中我们用一个实例来说明如何使用 React Router。首先我们建起几个页面<Home /> <About /> <Dashboard />Home 用于展示一个简单的导航列表，About用于展示关于页，而 Dashboard 则需要用户登录以后才可以访问。首先我们新建一个 router.js 文件，并在其中加载好 React-Router 组件import './App.css'; import { BrowserRouter, Route, Routes } from "react-router-dom" function App() { return <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> </Routes> </BrowserRouter> } const Home = () => { return <div>hello world</div> } export default App; 这里我们直接在 App.js 中加上一个叫 Home 的组件，里面只是单纯地展示 hello wolrd 而已。接下来，我们再把另外两个路径写好，加入 About 和 Dashboard 两个组件import './App.css'; import { BrowserRouter, Route, Routes } from "react-router-dom" function App() { return <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </BrowserRouter> } const Home = () => { return <div>hello world</div> } const About = () => { return <div>这里是卡拉云的主页</div> } const Dashboard = () => { return <div>今日活跃用户: 42</div> } export default App;此时，当我们在浏览器中切换到 / 或 /about 或 /dashboard 时，就会显示对应的组件了。注意，在上面每个 Route 中，用 element 项将组件传下去，同时在 path 项中指定路径。在 Route 外，用 Routes 包裹起整路由列表。写到这里，我们其实已经完成了一个基本的路由功能，对于绝大多数可以公开访问的网站(或者内部系统)，这差不多就已经完结的。但有时，你可能希望知道用户所在的路径，来做一些对应显示和特殊逻辑处理，或者是你需要让用户鉴权后才能访问某个路径，那么你需要继续读一下后文几个章节如何获取当前页路径如何在 React-Router 中获取当前用户在访问的页面的路径？其实很简单，在 React-Rotuer 6 中，提供了一个 hook 钩子，专门用来获得当前路径。在上文的例子中，我们只需要在对应的页面里，比如 About 中，加上这个 hook 就可以了首先我们导入 useLocation 这个 hook，然后仿照如下代码就可以获得当前位置import { useLocation } from 'react-router-dom' const About = () => { // 使用 hook const location = useLocation(); const { from, pathname } = location return <div>这里是卡拉云的网站，你当前在 {pathname}，你是从 {from} 跳转过来的</div> }如何设置默认页路径(如 404 页)在上文的路由列表 Routes 中，我们可以加入一个 catch all 的默认页面，比如用来作 404 页面。我们只要在最后加入 path 为 * 的一个路径，意为匹配所有路径，即可 function App() { return <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/dashboard" element={<Dashboard />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> } // 用来作为 404 页面的组件 const NotFound = () => { return <div>你来到了没有知识的荒原</div> }当然你可以把 404 页面做得更好看一点，比如卡拉云中如果访问不存在的链接的话，404 页面如下如何用 React Router 鉴权并保护路径总结本文中我们介绍了如何使用 React-Router，用一个实例说明 React Router 6 中的 API，以及常见的使用场景等。如果你对我们的技术博客感兴趣，欢迎继续阅读Vue Video.js 教程Vue 强制刷新Echarts 折线图如何配置Vue 弹窗
-
发表了文章 2022-03-21
最好的 6 款 React 后台管理系统模板和框架
本文首发：《最好的 6 款 React 后台管理系统模板和框架》React admin框架繁多，在本文里我们介绍 React 下最好的 6 款后台系统，每款均严格测试后，整理它们的优缺点方便你来挑选。同时我们给出一些实用建议，帮你避免选型时不注意可能导致的埋坑。为什么后台系统极其重要一个成熟好用的后台管理系统对于公司运营效率有极大提升，而对程序员来说，很多时候写后台系统其实都是在“帮个忙”，原因是这些后台系统多数情况下和公司的主营业务并没有太大关系。比如说，运营会请你写个系统来帮助管理商品，人事会请你写个系统来管理公司人员等等。因此，找一个称手的模板和框架可以省下大量的时间。如果需要马上搭建马上能上线的后台系统，可以直接考虑卡拉云(见后文)，比模板和二次开发更快更方便，同时功能丰富得多。如何挑选 React admin后台有的时候选择一个后台系统框架时，一个开始没注意到的小问题可能导致之后系统完全无法使用。举个例子，如果你的整套系统用了 SCSS 来写界面，而这个后台框架并不支持 SCSS，那么你还需要额外的精力把 SCSS 集成进去。因此，在下文评测中我们尽量把这些细节展示出来。我们用以下一些标准来评判 React 下的后台系统模板。开发者体验首先后台系统要能用得起来，开发者(也就是你)得尽量少花功夫在这个框架上，也就是说这个框架本身的 API、组件或者接口需要设计得足够好，足够能用。否则，如果需要大量蛮力适配(brute-force)才能满足需要的话，还不如不用框架自己写好了。权限管理一个后台系统是不是具有完备的权限管理，对于绝大多数公司来说都极为重要。比如，很难想象让一个公司请的外包运营成员来直接操作公司的用户数据库。而正确的做法是给他们分配合适的权限，让一部分人员只能操作限定的动作。权限管理说起来简单，但是绝大多数前端模板中是无法实现的，必须配合后端。而是不是有好的接口设计就决定了与后端的权限管理对接时是否足够容易。组件丰富程度有一些组件对于一些后台来说极为重要，比如说如果你的后台是一个员工报销系统，那么时间选择器可能就非常重要，因为可能需要注明发票报销的时间。如果你的后台需要展示服务器运行时间、用户数，那么报表、图表组件就很重要。对绝大多数后台来说，表格组件也非常重要。但是不管是表格、图表还是时间选择器，都是实现比较困难的前端组件。所以要找到一个框架要刚好把这三个组件都做得好，是不太容易的事情。因此组件的丰富程度和完善度，也是挑选后台系统的重要标准。React 后台系统的类别React 后台系统可以粗略地分为以下几种类别仅前端模板前后端集成系统，需要数据迁移前后端集成且有方便的数据接口对于 1，适合后台已经成型，所有后台 API、数据库连接均已经包好的情况下。第一种是指只有前端代码的 React 后台系统。当然，后台系统显然是用来操作后端数据的，所以不接“后端”的后台系统是不存在的，选用这种后台系统的话，你需要自己提供后端接口和数据库接口等。这个类型的代表有 antd 和各种纯 UI 的 react 框架，比如 Material UI, Mi-UI 等。第二种是指不仅有前端代码，同时也包含了后端服务。如果需要一些新的后端接口，则需要调整和开发后端接口。通常来说，这类后台系统都是打包销售，比如 SAP，SalesForce 出售的一些 SaaS 后台系统，本文里就不展开讨论了。第三种是指，前端后端集成，但不需要数据迁移。框架提供了数据接口，你只需要把你的数据接入即可使用。这个类型的代表有卡拉云。那么什么情况下选择哪种后台系统呢？情况一如果你已经有一个成型的后台系统，现在只需要把后台界面做得更方便、漂亮，或者增加一些组件的情况下:，你可以应该选择方案 1 或者方案 3。原因是你已经非常明确你需要哪些组件，工作流的流程怎样，甚至已经有后端接口可以直接接入，那么二次开发一下前端框架可能就可以满足你的需求了。或者用方案 3，可以比较轻松地把数据接口接入，而不用对后台接口做太多调整。情况二还没有后端，只有数据库。这个情况应该是绝大多数创业公司在寻找第一个后台系统时遇到的情况，工程师资源全部集中在公司业务上，没有人有精力和时间来开发后台系统。然而后台系统又极为重要，所以开始急冲冲地找一个方案。在这种情况下，我们推荐使用方案 3，原因是后端接口还不成型，工作流不清晰可能还需要大量迭代。这种情况下直接开始固化后端是不明智的。情况三没有前端，只有后端接口。这样的情况在创业公司，甚至不少大厂中也占有一定比例。没有前端的情况下，有时候开发者甚至会直接采用直接查询和修改数据库的方式来使用“后台系统”。在这种状态下，也推荐使用方案 3，直接将数据库接入，同时用拖拽、配置的方式生成前端。react-adminReact-admin 是一款提供前端组件，同时还提供后端数据接口的框架。目前它在 github 上有 19.1K 的星。注意，通常来说我们讲的“react后台系统”一般英文翻译为react admin，而这款框架本身比较讨巧，名字本身就叫react-admin，请注意不要混淆了概念。react-admin 的优点非常明显支持常见组件，比如表格、文本输入框、数字输入框等提供前端权限控制接口(但需要单独与后端集成)提供 i18n 可以翻译界面完成度较高，五年的老项目，代码质量过硬代码同时支持 TypeScirpt 和 JavaScript，开发体验好但它的不足也很明显。首先，组件的功能性较弱，因此需要的前端二次开发较重，只适合比较简单的使用场景。如果需要二次开发，则需要前端工程师对这个框架和 React 本身了解较深。其次，它的数据接口层比较轻，对于不同的数据(比如REST API)需要使用不同的接口，这些都需要单独集成和调试。最后需要考虑的地方是，虽然它在 GitHub 上有大量的赞(19000)，但真正使用的项目还不如其赞多(8700)，因此社区的活跃程度也并是非常高，react-admin 的最近一次代码提交是几个月前。AdminJSAdminJS 与 react-admin 非常类似，也是一款主要提供前端 React 模板，同时提供轻后端接口的框架。但它开始得比较晚，目前在 GitHub 上有 4800 个星。AdminJS 的主要优点有支持部分常见组件，比如表格、文本输入框、下拉菜单文档较全面，整个文档由 JSDoc 写成，非常详细项目较新，维护比较勤代码同时支持 TypeScirpt 和 JavaScript，开发体验好但是有以下几个非常明显的缺点，我认为如果你在考虑 AdminJS 的话，不如考虑 react-admin 或卡拉云。首先，AdminJS 的使用面非常窄，目前在 GitHub 上只有 188 的使用。其次，它的代码复杂度极高，侧面反应架构设计不合理。另一方面，如果去看它的文档的话，会发现如果要在 AdminJS 上做二次开发，基本上就重新学了一套新框架了，时间成本上并不划算，同时如果遇到问题卡住项目极容易难产。当然即使如此，在为数不多的后台框架里，AdminJS 也是较为优秀的一款了。卡拉云卡拉云与其它的框架都不太一样，它不光提供一个前端框架，还提供了一个完整的前端编辑器。同时，卡拉云还提供完整的后端接口，让你可以直接接入自己的数据库。在前端，你可以通过前端编辑器来配置组件，包括表格图表文本输入数字输入地图时间选择组件文件上传组件富文本编辑组件JSON 编辑组件数据标注组件等等同时每个组件都有单独的可配置项，每个可配置项均支持用 JS 来定制逻辑。因此即使是像表格这样超复杂的前端组件，在卡拉云里你也可以通过细节配置，加上 JS 逻辑，来满足任意复杂的需求。比如，下图为卡拉云中对表格组件的配置选项，你可以针对每列动态隐藏、调整背景色，调整显示类型比如图片、链接等等丰富的配置功能。同时因为任何配置项都支持 JS，因此配置的灵活度几乎等同于直接写 React 代码。只要前端工程师会基本的 JavaScript(不会的话可能也不能叫前端了)，就可以在前端定制出任意复杂度的后台。在后端，卡拉云支持直接查询和更新常见数据库，如 MySQL，PostgreSQL和 MongoDB 等，同时也支持 REST API 来调用你自己的 API 端口或第三方 API。使用卡拉云的优点非常明显，你基本可以省掉要开发维护一个后台系统要操的心了，这样可以让工程师专注于公司本身的业务线。同时不管是组件丰富度和完成度，以及权限系统的稳固程度，卡拉云都比市面上其它框架和公司做得牢靠一些，具体详情请参考我们的文档。[](https://kalacloud.com/blog/best-react-admin-dashboard/#antd)antdantd 即 Ant Design 的简写，也就是蚂蚁金服的著名前端框架。antd 可以说是泛前端框架里的翘楚了，从概念上来说，它提供了很多常见的前端组件，包括表格、输入框、下拉菜单等等，每个组件均提供一些参数以供配置使用。但严格来说，antd 并不是特意为“后台系统”而存在的，因此如果你想要用 antd 来搭建后台系统的话，它只是帮助你把 CSS 和组件设计这两件事情做了一些，但后台系统中需要的逻辑还是需要自己开发的。 比如举个例子，antd 提供了类似 Avatar 这样的组件，用来展示登录用户头像，但一个用户是不是登录了、登录的逻辑是怎样的，这些都是需要你自己提供逻辑的。从经验上看，后台系统与直接面向消费者(to C)的场景不同，后台系统多数情况下可以承受较简单甚至粗糙的 UI，以换取更丰富、复杂的功能。而面向消费者的场景通常则需要将功能做得足够简单，且 UI/UX 极为重要。因此，多数情况下开发后台系统时，精力均在如何把对的数据，正确地连接和展示出来，同时提供组件以供用户操作。antd 提供了 展示 这一步，但其它的逻辑就需要前端工程师来黏合了。因此，antd 比较适合需求较为固化，不经常更改，同时工程师资源有剩余的情况下。 如果需要快速迭代，则应该考虑上文中提到的前三种框架。react-antd-adminreact-antd-admin 是在 antd 的基础上，由 @jiangxy 开发的后台系统。它只包含前端部分，因此如果需要任何权限控制或者与后端连接的话，需要单独做二次开发。这个项目在早期开发频率还可以，因此在 GitHub 上积累了 1400 个星，但由于繁忙，后来就停止了开发。上一次代码提交还是五年前，因此对比下来，不建议使用。同时作者自己也在 GitHub 的 readme 中也提到了安全和权限的问题:安全/权限问题 目前对安全&权限都没考虑进去，如果有这方面的要求，只能后端校验了。在请求后端接口时校验用户的身份和权限。 权限问题也很麻烦，感觉不太好做成通用的东西，如果有需求的话，还是定制开发比较好。 兼容性如果你在考虑使用 react-antd-admin 的话，建议直接在 ant 的基础上自己开发，或者使用类似卡拉云这样完成度较高的系统。shards-dashboard-reactshards-dashboard-react是一套 react 下的后台开发模板，注意这个模板的含义基本就是指它只包含了常见组件和其对应的 CSS，而不包含组件具体的逻辑处理。它的界面如下如果你的项目中，只是需要添加更多的组件，特别是 Material 风格的组件，那么使用 shards-dashboard-react 会比较合适。但如果连后端接口都没有，那么则需要考虑使用本文前面提到的三个框架或系统，react-admin, adminjs 或 卡拉云。总结本文中我们介绍了市面上最好的几款 React 后台框架，比较了它们的优缺点。相信这篇文章可以帮助你在技术选型的时候，提供一些参考。如果你对卡拉云感兴趣，欢迎联系我们。如果你对 Vue 的框架感兴趣，也欢迎阅读 最好用的 7 款 Vue admin 后台管理框架测评 和 7 个 Laravel admin 后台管理系统推荐
-
发表了文章 2022-03-21
最好的 6 款 React 后台管理系统模板和框架
本文首发：《最好的 6 款 React 后台管理系统模板和框架》React admin框架繁多，在本文里我们介绍 React 下最好的 6 款后台系统，每款均严格测试后，整理它们的优缺点方便你来挑选。同时我们给出一些实用建议，帮你避免选型时不注意可能导致的埋坑。为什么后台系统极其重要一个成熟好用的后台管理系统对于公司运营效率有极大提升，而对程序员来说，很多时候写后台系统其实都是在“帮个忙”，原因是这些后台系统多数情况下和公司的主营业务并没有太大关系。比如说，运营会请你写个系统来帮助管理商品，人事会请你写个系统来管理公司人员等等。因此，找一个称手的模板和框架可以省下大量的时间。如果需要马上搭建马上能上线的后台系统，可以直接考虑卡拉云(见后文)，比模板和二次开发更快更方便，同时功能丰富得多。如何挑选 React admin后台有的时候选择一个后台系统框架时，一个开始没注意到的小问题可能导致之后系统完全无法使用。举个例子，如果你的整套系统用了 SCSS 来写界面，而这个后台框架并不支持 SCSS，那么你还需要额外的精力把 SCSS 集成进去。因此，在下文评测中我们尽量把这些细节展示出来。我们用以下一些标准来评判 React 下的后台系统模板。开发者体验首先后台系统要能用得起来，开发者(也就是你)得尽量少花功夫在这个框架上，也就是说这个框架本身的 API、组件或者接口需要设计得足够好，足够能用。否则，如果需要大量蛮力适配(brute-force)才能满足需要的话，还不如不用框架自己写好了。权限管理一个后台系统是不是具有完备的权限管理，对于绝大多数公司来说都极为重要。比如，很难想象让一个公司请的外包运营成员来直接操作公司的用户数据库。而正确的做法是给他们分配合适的权限，让一部分人员只能操作限定的动作。权限管理说起来简单，但是绝大多数前端模板中是无法实现的，必须配合后端。而是不是有好的接口设计就决定了与后端的权限管理对接时是否足够容易。组件丰富程度有一些组件对于一些后台来说极为重要，比如说如果你的后台是一个员工报销系统，那么时间选择器可能就非常重要，因为可能需要注明发票报销的时间。如果你的后台需要展示服务器运行时间、用户数，那么报表、图表组件就很重要。对绝大多数后台来说，表格组件也非常重要。但是不管是表格、图表还是时间选择器，都是实现比较困难的前端组件。所以要找到一个框架要刚好把这三个组件都做得好，是不太容易的事情。因此组件的丰富程度和完善度，也是挑选后台系统的重要标准。React 后台系统的类别React 后台系统可以粗略地分为以下几种类别仅前端模板前后端集成系统，需要数据迁移前后端集成且有方便的数据接口对于 1，适合后台已经成型，所有后台 API、数据库连接均已经包好的情况下。第一种是指只有前端代码的 React 后台系统。当然，后台系统显然是用来操作后端数据的，所以不接“后端”的后台系统是不存在的，选用这种后台系统的话，你需要自己提供后端接口和数据库接口等。这个类型的代表有 antd 和各种纯 UI 的 react 框架，比如 Material UI, Mi-UI 等。第二种是指不仅有前端代码，同时也包含了后端服务。如果需要一些新的后端接口，则需要调整和开发后端接口。通常来说，这类后台系统都是打包销售，比如 SAP，SalesForce 出售的一些 SaaS 后台系统，本文里就不展开讨论了。第三种是指，前端后端集成，但不需要数据迁移。框架提供了数据接口，你只需要把你的数据接入即可使用。这个类型的代表有卡拉云。那么什么情况下选择哪种后台系统呢？情况一如果你已经有一个成型的后台系统，现在只需要把后台界面做得更方便、漂亮，或者增加一些组件的情况下:，你可以应该选择方案 1 或者方案 3。原因是你已经非常明确你需要哪些组件，工作流的流程怎样，甚至已经有后端接口可以直接接入，那么二次开发一下前端框架可能就可以满足你的需求了。或者用方案 3，可以比较轻松地把数据接口接入，而不用对后台接口做太多调整。情况二还没有后端，只有数据库。这个情况应该是绝大多数创业公司在寻找第一个后台系统时遇到的情况，工程师资源全部集中在公司业务上，没有人有精力和时间来开发后台系统。然而后台系统又极为重要，所以开始急冲冲地找一个方案。在这种情况下，我们推荐使用方案 3，原因是后端接口还不成型，工作流不清晰可能还需要大量迭代。这种情况下直接开始固化后端是不明智的。情况三没有前端，只有后端接口。这样的情况在创业公司，甚至不少大厂中也占有一定比例。没有前端的情况下，有时候开发者甚至会直接采用直接查询和修改数据库的方式来使用“后台系统”。在这种状态下，也推荐使用方案 3，直接将数据库接入，同时用拖拽、配置的方式生成前端。react-adminReact-admin 是一款提供前端组件，同时还提供后端数据接口的框架。目前它在 github 上有 19.1K 的星。注意，通常来说我们讲的“react后台系统”一般英文翻译为react admin，而这款框架本身比较讨巧，名字本身就叫react-admin，请注意不要混淆了概念。react-admin 的优点非常明显支持常见组件，比如表格、文本输入框、数字输入框等提供前端权限控制接口(但需要单独与后端集成)提供 i18n 可以翻译界面完成度较高，五年的老项目，代码质量过硬代码同时支持 TypeScirpt 和 JavaScript，开发体验好但它的不足也很明显。首先，组件的功能性较弱，因此需要的前端二次开发较重，只适合比较简单的使用场景。如果需要二次开发，则需要前端工程师对这个框架和 React 本身了解较深。其次，它的数据接口层比较轻，对于不同的数据(比如REST API)需要使用不同的接口，这些都需要单独集成和调试。最后需要考虑的地方是，虽然它在 GitHub 上有大量的赞(19000)，但真正使用的项目还不如其赞多(8700)，因此社区的活跃程度也并是非常高，react-admin 的最近一次代码提交是几个月前。AdminJSAdminJS 与 react-admin 非常类似，也是一款主要提供前端 React 模板，同时提供轻后端接口的框架。但它开始得比较晚，目前在 GitHub 上有 4800 个星。AdminJS 的主要优点有支持部分常见组件，比如表格、文本输入框、下拉菜单文档较全面，整个文档由 JSDoc 写成，非常详细项目较新，维护比较勤代码同时支持 TypeScirpt 和 JavaScript，开发体验好但是有以下几个非常明显的缺点，我认为如果你在考虑 AdminJS 的话，不如考虑 react-admin 或卡拉云。首先，AdminJS 的使用面非常窄，目前在 GitHub 上只有 188 的使用。其次，它的代码复杂度极高，侧面反应架构设计不合理。另一方面，如果去看它的文档的话，会发现如果要在 AdminJS 上做二次开发，基本上就重新学了一套新框架了，时间成本上并不划算，同时如果遇到问题卡住项目极容易难产。当然即使如此，在为数不多的后台框架里，AdminJS 也是较为优秀的一款了。卡拉云卡拉云与其它的框架都不太一样，它不光提供一个前端框架，还提供了一个完整的前端编辑器。同时，卡拉云还提供完整的后端接口，让你可以直接接入自己的数据库。在前端，你可以通过前端编辑器来配置组件，包括表格图表文本输入数字输入地图时间选择组件文件上传组件富文本编辑组件JSON 编辑组件数据标注组件等等同时每个组件都有单独的可配置项，每个可配置项均支持用 JS 来定制逻辑。因此即使是像表格这样超复杂的前端组件，在卡拉云里你也可以通过细节配置，加上 JS 逻辑，来满足任意复杂的需求。比如，下图为卡拉云中对表格组件的配置选项，你可以针对每列动态隐藏、调整背景色，调整显示类型比如图片、链接等等丰富的配置功能。同时因为任何配置项都支持 JS，因此配置的灵活度几乎等同于直接写 React 代码。只要前端工程师会基本的 JavaScript(不会的话可能也不能叫前端了)，就可以在前端定制出任意复杂度的后台。在后端，卡拉云支持直接查询和更新常见数据库，如 MySQL，PostgreSQL和 MongoDB 等，同时也支持 REST API 来调用你自己的 API 端口或第三方 API。使用卡拉云的优点非常明显，你基本可以省掉要开发维护一个后台系统要操的心了，这样可以让工程师专注于公司本身的业务线。同时不管是组件丰富度和完成度，以及权限系统的稳固程度，卡拉云都比市面上其它框架和公司做得牢靠一些，具体详情请参考我们的文档。[](https://kalacloud.com/blog/best-react-admin-dashboard/#antd)antdantd 即 Ant Design 的简写，也就是蚂蚁金服的著名前端框架。antd 可以说是泛前端框架里的翘楚了，从概念上来说，它提供了很多常见的前端组件，包括表格、输入框、下拉菜单等等，每个组件均提供一些参数以供配置使用。但严格来说，antd 并不是特意为“后台系统”而存在的，因此如果你想要用 antd 来搭建后台系统的话，它只是帮助你把 CSS 和组件设计这两件事情做了一些，但后台系统中需要的逻辑还是需要自己开发的。 比如举个例子，antd 提供了类似 Avatar 这样的组件，用来展示登录用户头像，但一个用户是不是登录了、登录的逻辑是怎样的，这些都是需要你自己提供逻辑的。从经验上看，后台系统与直接面向消费者(to C)的场景不同，后台系统多数情况下可以承受较简单甚至粗糙的 UI，以换取更丰富、复杂的功能。而面向消费者的场景通常则需要将功能做得足够简单，且 UI/UX 极为重要。因此，多数情况下开发后台系统时，精力均在如何把对的数据，正确地连接和展示出来，同时提供组件以供用户操作。antd 提供了 展示 这一步，但其它的逻辑就需要前端工程师来黏合了。因此，antd 比较适合需求较为固化，不经常更改，同时工程师资源有剩余的情况下。 如果需要快速迭代，则应该考虑上文中提到的前三种框架。react-antd-adminreact-antd-admin 是在 antd 的基础上，由 @jiangxy 开发的后台系统。它只包含前端部分，因此如果需要任何权限控制或者与后端连接的话，需要单独做二次开发。这个项目在早期开发频率还可以，因此在 GitHub 上积累了 1400 个星，但由于繁忙，后来就停止了开发。上一次代码提交还是五年前，因此对比下来，不建议使用。同时作者自己也在 GitHub 的 readme 中也提到了安全和权限的问题:安全/权限问题 目前对安全&权限都没考虑进去，如果有这方面的要求，只能后端校验了。在请求后端接口时校验用户的身份和权限。 权限问题也很麻烦，感觉不太好做成通用的东西，如果有需求的话，还是定制开发比较好。 兼容性如果你在考虑使用 react-antd-admin 的话，建议直接在 ant 的基础上自己开发，或者使用类似卡拉云这样完成度较高的系统。shards-dashboard-reactshards-dashboard-react是一套 react 下的后台开发模板，注意这个模板的含义基本就是指它只包含了常见组件和其对应的 CSS，而不包含组件具体的逻辑处理。它的界面如下如果你的项目中，只是需要添加更多的组件，特别是 Material 风格的组件，那么使用 shards-dashboard-react 会比较合适。但如果连后端接口都没有，那么则需要考虑使用本文前面提到的三个框架或系统，react-admin, adminjs 或 卡拉云。总结本文中我们介绍了市面上最好的几款 React 后台框架，比较了它们的优缺点。相信这篇文章可以帮助你在技术选型的时候，提供一些参考。如果你对卡拉云感兴趣，欢迎联系我们。如果你对 Vue 的框架感兴趣，也欢迎阅读 最好用的 7 款 Vue admin 后台管理框架测评 和 7 个 Laravel admin 后台管理系统推荐
-
发表了文章 2022-03-19
Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板
本文首发：《Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板 - 卡拉云》Axios 是一个基于 Promise 的 HTTP 请求库，它用在 node.js 和浏览器里。本教程教你如何使用 Axios 库发出 API 请求远程调取数据。在本教程中，你将学到如何使用 Vue + Axios 搭建一套加密币实时行情看板，你会学到 Axios 如何向加密货币行情 API 请求数据，存储数据，然后使用 Vue 在前端展示这些数据，最终完成「实时行情看板」的搭建。为了让看板看起来更漂亮，我们将使用 Foundation CSS 框架。本教程将手把手教你如何通过 Axios 读取 API 数据，搭建一套加密币实时价格看板。「加密币实时行情看板」最终效果。前端使用 Vue + Axios，后端调用加密币行情 API，读完本教程，你也能搭建一套属于自己的加密币行情数据看板。如何安装 Axios可以使用以下简单方法之一将 Axios 添加到我们的项目/代码中：npm：npm install axiosbower：bower install axiosyarn：yarn add axiosCDN 方法一：<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>CDN 方法二：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>我们还是来一起搭一个实战项目来学习如何使用 Axios 吧，请务必跟随本教程一起操作。第 1 步：创建一个最简单的 Vue Web APP我们先来创建一个最简单的 Vue APP，循序渐进，方便大家理解。我们新建一个 index.html 文件，先在这个页面里写入一组模拟数据，使用 Vue.js 来显示这个模拟数据。后文我们会用真实的 API 来进行替换。<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> <meta charset="utf-8"> <title> 卡拉云 - 加密币实时行情 </title> </head> <body> <div class="container" id="app"> <h3 class="text-center"> 卡拉云 - 加密币实时行情</h3> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> 比特币：人民币 </p> </div> <div class="card-divider"> <p> {{ BTCinCNY }} </p> </div> </div> </div> </div> <script src="https://unpkg.com/vue"></script> </body> </html>在这段 HTML 文件里，我们通过 CDN 加载了 Foundation CSS 框架和 Vue.js。只需简单两行，他们就被加载进来，无需下载到本地。从 Vue.js 中获取的数据会映射到 {{ BTCinCNY }} 里，这就是 Vue 在 HTML 中呈现数据的方式。我们来定义一下 {{ BTCinCNY }}在 <script src="https://unpkg.com/vue"></script> 的下面添加以下代码，我们来创建一个新的 Vue app 并定义在 index.html 页面上显示的数据结构：... <script> const vm = new Vue({ el: '#app', data: { BTCinCNY: 73759.99} // 这里是模拟数据，后文我们会用 API 数据替换 }); </script> ...这段代码创建了一个新 Vue 应用实例，并将这个实例赋到「 id = app 」到元素上。Vue 把这个过程叫做加载应用。我们定义了一个新 Vue 实例，通过配置对象对这个应用进行配置，[el](https://v3.cn.vuejs.org/api/application-api.html#el) 指定了加载应用对应的元素 ID，以及包含的数据。在这个实例中，包含一组「key-value」即 { BTCinCNY: 73759.99 } 这组数据会通过以下代码显示在 HTML 页面上。<div class="card-divider"> <p> {{ BTCinCNY }} </p> </div>更新 index.html 我们在浏览器中打开，显示效果如下图我们再来加上比特币的美元价格，在 index.html 中修改加入美元价格。<script> const vm = new Vue({ el: '#app', data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 } // 这里是模拟数据，后文我们会用 API 数据替换 }); </script>然后向标记（div）中添加美元显示的表格部分... <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> 比特币：美元 </p> </div> <div class="card-divider"> {{BTCinUSD}} </div> </div> </div> ...index.html 的完整修改版。请将这段代码更新至 index.html<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> <meta charset="utf-8"> <title> 卡拉云 - 加密币实时行情 </title> </head> <body> <div class="container" id="app"> <h3 class="text-center"> 卡拉云 - 加密币实时行情</h3> <div class="columns medium-4"> <div class="card"> <div class="card-section"> <p> 比特币：人民币 </p> </div> <div class="card-divider"> <p> {{ BTCinCNY }} </p> </div> </div> </div> <div class="columns medium-4"> <div class="card"> <div class="card-section"> <p> 比特币：美元 </p> </div> <div class="card-divider"> {{ BTCinUSD }} </div> </div> </div> </div> <script src="https://unpkg.com/vue"></script> <script> const vm = new Vue({ el: '#app', data: { BTCinCNY: 73759.99, BTCinUSD: 3759.91 } // 这里是模拟数据，后文我们会用 API 数据替换 }); </script> </body> </html>更新 index.html 后，在浏览器打开显示效果如下：扩展阅读：《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》第 2 步：分离 JavaScript 和 HTML在第 1 步中，为了给大家更好的展示工作原理，我们将所有代码都放在 index.html 一个文件中，现在我们要把前端和后端数据分成两个独立的文件存放，即 index.html和vueApp.js 。在 index.html中，显示比特币对应的多种价格。而在 vueApp.js 文件中，用于读取数据。将显示和数据页面拆分开来，更便于我们日常维护。我们先把 index.html 文件中 JavaScript 的代码删掉，将这段指向 vueApp.js 文件... <script src="https://unpkg.com/vue"></script> <script language="JavaScript"> const vm = new Vue({ el: '#app', data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 } }); </script> ...将 vm 整段删掉，替换为指向 vueApp.js 的 <script>... <script src="https://unpkg.com/vue"></script> <script src="vueApp.js"></script> ...然后，在 index.html 的存放目录中，新建 vueApp.js 文件，代码如下：const vm = new Vue({ el: '#app', data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 } });保存 vueApp.js 文件并在浏览器重新打开 index.html ，你会发现显示结果没有任何变化。下一步，我们加入更多加密币的实时行情。第 3 步：使用 Vue 加载数据当前页面我们加载了比特币的模拟价格，我们再来加上一个以太币的模拟价格。我们来重构一下视图和模拟数据。打开vueApp.js文件，修改数据，代码如下：const vm = new Vue({ el: '#app', data: { results: {"BTC": {"CNY":73759.99,"USD":3166.21}, "ETH": {"CNY":33581.77,"USD":2336.25}}} });由于数据的嵌套结构，我们使用 results 作为键，它包含两条记录，一个是比特币价格，一个是以太币价格。这种结构合并同类项，让数据展示和读取更简洁。接着我们打开index.html文件并找到显示加密币的部分：... <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> 比特币：人民币 </p> </div> <div class="card-divider"> {{BTCinCNY}} </div> </div> </div> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> 比特币：美元 </p> </div> <div class="card-divider"> {{BTCinUSD}} </div> </div> </div> </div> ...用以下代码替换上面的代码块：... <div class="columns medium-4" v-for="(result, index) in results"> <div class="card"> <div class="card-section"> <p> {{ index }} </p> </div> <div class="card-divider"> <p> ¥ {{ result.CNY }}</p> </div> <div class="card-section"> <p> $ {{ result.USD }}</p> </div> </div> </div> ...这段代码使用来[v-for](https://vuejs.org/v2/api/#v-for) 指令就像一个 for 循环。它遍历我们数据中的所有 key - value在浏览器中重新加载 index.html，可以看到以下样式：](https://kalacloud.com/static/a62f738c6ad8f746c525fe768fad6141/fc83b/02-03-btc-eth.jpg)此修改使我们可以向其中的results数据添加新货币vueApp.js并使其显示在页面上而无需进一步更改。将另一个模拟条目添加到数据集以进行尝试：接下来，我们再向 results 里加入一个新的数字货币。这一次，我们无需修改 index.html 就可以自动更新。修改 vueApp.js 文件，直接使用下面的代码替换即可const vm = new Vue({ el: '#app', data: { results: { "BTC": { "CNY": 73759.99, "USD": 3166.21 }, "ETH": { "CNY": 33581.77, "USD": 2336.25 }, "LINK": { "CNY": 182.62, "USD": 26.49 } } } });保存后，刷新 index.html 页面，可以看到下面的效果如果你也做出来本教程的效果，那么太棒了。接下来，我们要接真实的 API 了。扩展阅读：《7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型》第 4 步：使用 Axios 从 API 读取数据我们使用 Cryptocompare 加密币行情网站的实时报价 API 来替换模拟价格数据。加密货币实时价格 API ：https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD这个 API 请求比特币、以太坊币、ChainLink币的人民币价格和美元价格。我们可以用curl向 API 发送请求查看响应：curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD'请求返回输出如下：{"BTC":{"CNY":281999.94,"USD":40928.18},"ETH":{"CNY":20758.02,"USD":3012.21},"LINK":{"CNY":182.62,"USD":26.49}}API 返回结果与我们的模拟价格数据几乎一样，我们现在要做的是用 API 中的数据替换掉模拟数据。为了发送请求，我们使用 [mounted()](https://vuejs.org/v2/api/#mounted) Vue 函数，结合 Axios 请求库中的 GET 函数获取数据，然后把读取的数据存在 results 数组中。我们要在 index.html 中加入加载 Axios 库的代码：... <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="vueApp.js"></script> ...再打开 vueApp.js 加入请求 API 地址和修改数据存储方式：const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD"; const vm = new Vue({ el: '#app', data: { results: [] }, mounted() { axios.get(url).then(response => { this.results = response.data }) } });使用axios.get 函数，当 API 成功返回数据时，then 开始执行，并将数据保存在 results 变量中。在浏览器重新打开index.html，这时网页上显示的就是真实的加密数字货币实时报价了。恭喜，你完成了 Vue + Axios 的加密行情看板的搭建。如果你觉得前端写起来太麻烦，更愿意把宝贵的时间用在深度思考上的话。我推荐你使用卡拉云，卡拉云无需懂任何前端技术，仅需要拖拽即可快速搭建任何工具系统。卡拉云可快速接入数据库、API，这是我花了 1 分钟搭出来的加密数字看板，你还可以分享给身边的小伙伴一起使用。立即使用卡拉云，搭建属于你自己的数据工具工具。前端搭起来太费劲？试试卡拉云，无需处理任何前端问题，仅需简单拖拽组件，即可直接生成后台系统，数月工作量降至 2 天。立即试用Axios 各类调用方式Axios 响应对象架构Axios 请求的响应返回信息包含：data: API 返回的数据status: HTTP 状态码statusText: HTTP 状态信息headers：HTTP 标头configaxios：请求配置Axios 响应数据Axios 响应对象具有data包含解析响应正文的字段。我们可以使用then或 await 接收数据。如下所示：axios.get('kalacloud.com/api') .then(function (response) { console.log(response.data); }); const { data } = await axios.get(url); Axios 错误处理使用 catch() 做错误处理axios.get('kalacloud.com/api') .then(...) .catch(function (error) { if (error.response) { // 返回的状态代码不在 2xx 范围内，即错误代码。 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 没有返回 console.log(error.request); } else { console.log('Error', error.message); } console.log(error.config); });扩展阅读：《顶级好用的 8 款 Vue 弹窗组件测评与推荐》使用 async-await 处理 Axios 错误如果你想使用 async-await，只需用 try / catch 块包装 axios 调用。async function getTodo() { try { const response = await axios.get('kalacloud.com/api'); console.log(response); } catch (error) { if (error.response) { // 返回的状态代码不在 2xx 范围内，即错误代码。 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 没有返回 console.log(error.request); } else { console.log('Error', error.message); } console.log(error.config); } }Axios GET 请求axios.get('kalacloud.com/api') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }) .then(function () { }); Async / await:async function getTodo() { try { const response = await axios.get('kalacloud.com/api'); console.log(response); } catch (error) { console.error(error); } } 扩展阅读：《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》Axios GET 带参数请求你可以使用 params 来带 API 提供的参数。axios.get( 'kalacloud.com/api', { params: { title: '标题数据' } } );当然也可以这么写，他们效果一样。axios.get('/todo?title=标题数据'); Axios GET 带 headers 请求axios.get( 'kalacloud.com/api', { headers: { 'x-access-token': 'token-value' } } );Axios GET 同时带参数和 headers 请求axios.get( 'kalacloud.com/api‘, { params: { title: '标题数据' }, headers: { 'x-access-token': 'token-value' } } ); 扩展阅读：《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐》Axios PUT 请求axios.put( 'kalacloud.com/api/1', { title: title, description: description, published: true, } );Axios POST 带 body 请求axios.post( 'kalacloud.com/api', { title: title, description: description, } ); 扩展阅读：《最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐》Axios POST 带 headers 请求await axios.post( 'kalacloud.com/api', { title: title, description: description, }, { headers: { "x-access-token": "token-value", }, } ); Axios PUT 带 headers 请求axios.put( 'kalacloud.com/api2', { title: title, description: description, published: true, }, { headers: { "x-access-token": "token-value", }, } );扩展阅读：《Vue + Node.js 搭建「文件上传」管理后台》Axios DELETE 请求axios.delete('kalacloud.com/api/2');Axios DELETE 带 headers 请求axios.delete( 'kalacloud.com/api/2', { headers: { "x-access-token": "token-value", }, } );Vue + Axios 搭建总结首先恭喜你使用 Vue + Axios 搭建完成「加密币实时行情看板」，这说明你已经基本掌握了这项技能。前端开发就是这么繁琐和重复，需要你不断练习掌握。那么，有没有完全不用写前端，直接填上数据库地址或 API 地址就能搭出可用的后台工具呢？有。 推荐使用卡拉云，卡拉云帮你解决了前后端搭建的全部问题，你完全不用掌握任何前端后端技术，只需要几行代码，即可接入数据库 & API 。再复杂的项目，也只需正常开发的 10% 的工时即可完成。卡拉云是一套低代码开发工具，仅需简单拖拽即可快速搭建后台工具。立即试用卡拉云，一分钟快速搭建属于你自己的后台工具。扩展阅读：MySQL 时间戳用什么类型 - MySQL 时间函数详解最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件如何在 MySQL 中导入和导出 CSV / Excel 文件
-
发表了文章 2022-03-16
最棒的 7 个 Laravel admin 后台管理系统推荐
本文首发：《最棒的 7 个 Laravel admin 后台管理系统推荐 - 卡拉云》Laravel 已经凭借自己的易用性及低门槛成为 github 上 stars 第一的 PHP 框架，本文将介绍我精心为大家挑选出来的 Laravel admin 后台管理系统，从抽象程度最低（灵活但代码量大）到抽象程度最高（代码量小但不灵活）来帮助大家选择合适自己的 Laravel admin 后台管理系统。Laravel admin 后台管理系按类型选择选择 Laravel admin 后台管理系统之前，我用了市面上大多数 Laravel admin ，它们看起来差别不大，其实用途和使用场景差别很大。下面总结了几个类型，大家可根据自己的需求对号入座。脚手架型脚手架型的主要是以代码方式创建的，它可以帮你自动生成 Model、组件、路由，还有最基础的 CRUD 操作，但是一旦部署，后期就比较难调整了。本文推荐的 infyOm Laravel Generator 就是这种类型。CRUD 接口型由于 Laravel 框架遵循 MVC（模型-视图-控制器）模式，admin 管理系统的另一种类型是直接提供CRUD 接口。就是自动将 CRUD 逻辑和 UI 添加到现有模型的视图和控制器集。这种的好处是前端组件帮你写好，模块化的快速加到现有项目或者快速 set 起一个项目，代码量相对于脚手架型更少，弱点是如果碰到模型之间有复杂的逻辑关系，它并不能很灵活的处理。本文推荐的 Nova（官方出品）、Laravel-admin、Backpack、Orchid 都属于这种类型。可视化编程可视化编程相对于上面两种类型，抽象程度更高，已经帮你把前端都写好了，只需要你指定要什么，放在什么地方就行了。这种灵活程度相对于前两者更低，但部署起来更方便。对编程能力要求更低。本文推荐的 Voyager 、QuickAdminPanel 和 Backpack 提供的开发工具 Backpack DevTools 都是这个类型的。新一代低代码开发工具脚手架型的优势是它最灵活，劣势是需要写大量代码，CURD 优势是在复杂度和便捷度上找了个平衡，劣势是后端程序员还需要分精力出来处理前端问题。可视化编程仿佛解决了前两者的问题，但如果实际需求稍微复杂一些，用可视化编程比自己写代码还麻烦。现在，已经有了汇集三种类型有点于一身的解决方案 - 卡拉云。卡拉云是一套低代码解决方案，完全不用处理任何前端问题，只需要拖拽即可快速生成前端组件，开发者只需会调 API，会写 SQL 即可快速把前端组件与后端连接起来。卡拉云即有可视化编程的便捷性，又有脚手架型的灵活性。数周的工作量，1 小时即可完成。详情请见本文文末。涵盖大多数场景需求的 7 个最棒的 Laravel admin 后台管理系统Laravel Nova - Laravel 官方出品，品质保证laravel-admin - 国人开发的高品质开源 Laravel 后台管理Backpack - 可灵活，可敏捷，文档优秀，有视频教程Voyager - 前端 Blade，Model 自动创建 BREAD 可视化编程InfyOm Laravel Generator - 灵活性最强，帮你处理所有杂事QuickAdminPanel - 最强大的半自动后台搭建系统Orchid - 拥有优秀的开发者社区、更显着众多，开源生态好卡拉云 - 低代码开发工具，无需处理任何前端问题，快速接入 API & 数据库，1小时构建自己的后台管理工具Laravel Nova - Laravel 官方出品，品质保证官网：https://nova.laravel.com/Laravel 官方在 2018 年发布了官方后台管理系统 Nova，它是由 Laravel 框架的开发者 Taylor Otwell 一手完成。Nova Laravel admin 作为官方出品的后台管理系统设计非常合理，性能优化到极致，因为是官方出品，整个开发生态非常好，几乎每天都有很新扩展包在 Laravel nova packages 上线。不论你面对的项目开发需求有多么奇怪，都能找到和你需求匹配的解决方案。Nova 配置简单，功能能全面，搜索、过滤、图表、自定义操作这些常规功能开箱即用。Nova 前端采用 Vue + Vue Route ，国内 Vue 用顺手的开发者来说 Nove 更加灵活。Nova 没有免费试用版，小项目 99 刀授权，大项目 199 刀授权。扩展阅读：《最好用的 6 款 Vue 拖拽组件库推荐》laravel-admin - 国人开发的高品质开源 Laravel 后台管理官网：https://laravel-admin.org/github：https://github.com/z-song/laravel-adminlaravel-admin 绝对是 laravel admin 开源解决方案里的王者，又是我们国人自己开发的。虽然它在性能优化上无法和官方的 Nova admin 所匹敌，但毕竟是开源项目，国内使用者众多，也有自己的开发者生态。laravel-admin 经过几年的迭代，内置的扩展已经比较完善，表格、表单、时间选择、搜索、过滤等，还有 laravel-admin 内置用户权限管理系统，这点与 Nova 的开发逻辑不同，Nova 权限管理需要自己写，当然也更灵活。扩展阅读：《vue.draggable 入门指南 - 手把手教你开发任务看板》Backpack - 可灵活，可敏捷，文档优秀，有视频教程官网：https://backpackforlaravel.com/github：https://github.com/laravel-backpackBackpack 2016年发布的第一个版本，比 Nove 还早两年。Backpack 不仅仅是简单的 laravel admin 后台管理系统，还包含可视化编程接口，有自己的 UI 组件库。另外 Backpack 还有开发工具 Backpack DevTools（付费，99欧元） ，在网页上可视化操作拖拽组件，直接拖拽生成代码。当然，付费的就是付费的，Backpack 文档优秀，有视频教程，非常多的前端主题可选，另外非商业项目可以免费使用，不过只要你开始用它的工具和附加选项，马上就进入付费区间了，摊手。扩展阅读：《Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能》Voyager - 前端 Blade，Model 自动创建 BREAD ，可视化编程官网：https://voyager.devdojo.com/Github：https://github.com/the-control-group/voyagerVoyager 跟其他 laravel admin 有所不同，Voyager 可以轻松根据 Model 自动创建 BREAD，帮助你节省写控制器和方法的代码。这个功能虽然便捷，但肯定不如纯代码灵活。Voyager 内置一个媒体管理器，允许使用者在 UI 层面查看、编辑、删除文件，不论是在本地，还是放在其他云上都可以轻松操作。Voyager 还有个菜单构建器，直接在页面上就可以完成菜单管理。Voyager 的文档写的非常清晰，并且没有视频教程。扩展阅读：《订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统》InfyOm Laravel Generator - 灵活性最强，帮你处理所有杂事官网：https://infyom.com/open-sourcegithub：https://github.com/InfyOmLabs/laravel-generatorInfyOm Laravel Generator 最大的特点是可以自动生成 CURL、API、Router、Model、Requests，它的使用逻辑是帮助快速完成这些基础设施，让你在几分钟内完成基础部署。它的功能用 infyOM 官网上的口号可以概括「几分钟部署好你的 API 和管理面板」扩展阅读：《优惠券发放系统搭建实战 - 卡拉云》QuickAdminPanel - 最强大的半自动后台搭建系统官网：https://quickadminpanel.com/github：https://github.com/LaravelDaily/Larancer-QuickAdminPanelQuickAdminPanel 就跟它的名字一样，就是快。一切都可以在线完成，在 QuickAdminPanel 的官网配置你的 admin 面板，要什么 Modules 在网页上点击 install 即可，按照流程配置完成后，点击下载，获得属于你自己的定制后台代码，然后部署到你自己的服务器上就行了，就是这么 Quick。特别适合需求不复杂，不需要太多灵活性，就是想快的使用者。扩展阅读：《React Draggable 实现拖拽 - 最详细中文教程》Orchid - 拥有优秀的开发者社区、更显着众多，开源生态好官网：https://orchid.softwaregithub：https://github.com/orchidsoftwareOrchid 开发者是一位俄国人，Alexandr Chernyaev，Orchid 帮助使用者快速搭建管理后台，内置表单构建器、表格过滤器、排序、搜索这些稍微有些复杂的功能，细节做的非常帮。Orchid 性价比超高，一般来说开源意味着维护相对付费少一些，付费虽然对使用者需求响应快，但需要一些费用。而 Orchid 即拥有免费开源的属性，又有庞大的开源社区，大量的赞助，支持它像付费软件一样高速成长。扩展阅读：《最好用的 7 款 Vue 富文本编辑器》总结本文介绍了多款顶级 Laravel admin，已经涵盖了多数常见的 admin 应用场景，不过无论用哪个后台管理系统，都仍然需要处理前端问题。如果不想处理前端问题，推荐使用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可快速生成。下图为使用卡拉云搭建的内部广告投放监测系统，仅需拖拽，1小时搞定。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。扩展阅读：最好用的七大顶级 API 接口测试工具如何在 Vue 中加入图表 - Vue echarts 使用教程最好用的 5 款 React 富文本编辑器最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐顶级好用的 5 款 Vue table 表格组件测评与推荐Postman 使用教程 - 手把手教你 API 接口测试最好的 6 个免费天气 API 接口对比测评如何在 Vue 中导出数据至 Excel 表格
-
发表了文章 2022-03-07
appsmith 怎么用？评价如何
本文首发：《appsmith 怎么用？评价如何 - 卡拉云》AppSmith 是印度一家创业公司开发的低代码开发工具，它的原型是另一家名叫 Retool 的美国的创业公司。AppSmith 从 2019 年开始开发，到现在已经发行了 1.x 版本，也就是处于正式发行状态。那么 Appsmith 到底怎么样？它的评价如何？对比卡拉云它有哪些优缺点呢？AppSmith 怎么用？AppSmith 本身是开源软件，但是它提供一个云端版本。如果你需要私有部署的话，那么需要比较熟悉 k8s 或 docker，才能比较自由地部署成功。但对于很多同学来说，上手最好的办法可能是直接使用云端版本。在 AppSmith 注册帐号后，就可以创建应用了。AppSmith 中的应用概念与卡拉云中一样，每个应用是一个常用操作集合。比如说，对于一个员工管理系统，你可以在卡拉云或者 AppSmith 中创建一个“员工管理”应用，这个应用调用对应的查询，就可以对对应的员工数据进行增删改查。与卡拉云架构类似，AppSmith 也采用的是 proxy 服务器执行的架构。即你的查询会经过一次 AppSmith 的服务器，再到你的数据库或者服务器，实现跳转查询。如图所示组件操作上，AppSmith 与卡拉云非常类似，都是采用拖拽创建的方式。你可以从组件库中拖入一个组件，这样一个组件就创建好了。组件连接逻辑上，AppSmith 也采用的是用简单的 JavaScript 来连接组件间的逻辑。比如在文本框中输入 {{Input1.value}} 那么文本框中就会引用 Input1 里用户输入的值。其它的数据源连接、查询设置等，与卡拉云相差不大，这里就不赘述了。在一些特别的组件设计上，比如日期选择器，我们采用了更适合国内用户使用习惯的设计。其它特别的组件包括文件上传(七牛云，阿里云，腾讯云等)，图表组件(使用Echart)，地图(百度地图/高德地图)等等AppSmith 评价如何Appsmith 本身是比较优秀的开源软件，因为创始团队来自印度，因此在印度的流行程度较高。同时因为其主要语言为英文，因此在英文国家也较流行。如果细读 Appsmith 的代码的话，有个小问题是代码本身较为混乱。首先代码用的仍然是 React 16.8 之前的 class 写法，因此无法与更新的 react hook 兼容，这就为继续开发和贡献代码创造了不小的麻烦。同时 Appsmith 的全局状态管理用的是 Redux Saga，这个状态管理库较为小众和复杂，也为 Appsmith 的发展代来了一些局限。当然对于多数情境下使用，代码的整洁度本身不是大问题，但这也从侧面可能反映出混乱的代码可能藏起来较多的 bug 和问题。举个例子，不少用户发现大量的 bugAppSmith 卡拉云对比卡拉云与 Appsmith 比起来，本身的架构和实现都类似，但卡拉云更加注重功能的稳健性，每个功能有大量的测试保证其正确性。同时卡拉云完全针对国内市场开发，因此不管是集成上还是使用习惯上，都更加贴近用户。比如说，卡拉云集成的七牛云、阿里云存储，Leancloud API，金数据等。同时与企业微信等的集成也在计划中，相信可以更方便国内的同学们使用。以下是卡拉云中添加一个文件上传应用的图示当然最大的不同是，AppSmith 采用开源的市场策略，依靠开发者自愿贡献同时提供服务而盈利。而卡拉云则是采用成本较高的自研策略，但是对技术的分享和讨论也并没有关起门来，比如我们的技术博客中就有不少我们如何实现某些特定组件的文章，欢迎围观。
-
发表了文章 2022-03-07
React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云
本文首发：《React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云》React Draggable 是 react 生态中，最好用的拖拽实现库之一。如果你的应用中需要实现拖拽功能，可以尝试用 react-draggable，它可以满足多数情况下的拖拽需求，比如一个弹出设置浮窗，可以相互遮挡的容器之类。在所有 react 拖拽库里(即 react dnd, drag and drop)，react-draggable 算是把功能性和易用性平衡得最好的拖拽库了。在实现卡拉云时，我们也大量使用了 react-draggable。所以这篇文章里，我们介绍如何使用 react-draggable，一些常见的设置和我们的经验。请根据下面的代码一步步实现，最终你要实现的效果如下如果你在参考的过程中有不确定代码应该怎么写，可以直接到代码库中找到对应的文件。本文可参考的代码放在 github 上: react-draggable代码，觉得不错的话不妨打个星。react-draggable 简介react-draggable 经过几年的发展，已经是一个相对比较稳定的库了。从 npm trends 上看，从 16 年起它的流行程度就迅速超过了其它几个类似的项目。它在 github 上算非常热门的项目了，使用它的项目众多，所以可以放心地使用。如果有 bug 反馈也会非常快如果看它的源码的话，会发现它的原理其实很简单，它只是将一个需要被拖拽的组件包到它定义的一个组件中，当鼠标拖拽时，重新计算组件的位置，这样就实现了“拖拽”的效果。这也是绝大多数拖拽组件库的实现方式。准备项目我们按常规，使用 create-react-app 这个工具来创建项目。如果你本地没有安装 npx 的话，强烈推荐，使用非常方便。npx create-react-app react-draggalbe-tutorial cd react-draggalbe-tutorial npm start在准备好 react 脚手架后，你就可以到目录里，把项目跑起来。执行 npm start。这时候应该看到一个熟悉的画面当然如果你是在已有项目里准备加上 react-draggable，那么跳过本步，直接执行下一步安装就好了。安装 react-draggable现在执行 npm install react-draggable，执行完后应该在你的 node_modules 中就装好了 react-draggable。☁ react-draggalbe-tutorial [master] npm install react-draggable added 2 packages, and audited 1408 packages in 2s新建一个盒子组件我们先在 App.js 文件中加上几个简单的结构，比如一个框用来表示需要拖拽的组件，同时在框上加上一个拖拽把手，这样方便用户识别。在 App.js 中加上一个叫 Box 的组件先占位，如下import './App.css'; const Box = () => { return <>hello world</> } function App() { return ( <div className="App"> <Box></Box> </div> ); } export default App;注意，这里的 Box 只是非常简单地在屏幕上打一行字出来。接着，我们把 Box 稍微完善一下，把它的 css 写得规整一点。如果你对 css 本身不熟悉，没有关系，直接复制 index.css 中的代码就可以了。 .box { background-color: green; width: 300px; height: 300px; display: flex; flex-direction: column; } .drag-handler { background-color: grey; height: 50px; cursor: move; }到这里，我们应该已经可以看见基本成型的一个盒子组件。注意当鼠标移到把手上时，会出现拖拽的指针指示，这样可以提示用户这是一个可拖拽组件。接入 react-draggable现在，我们希望当用户鼠标拖拽把手时，把手本身可以被移动。首先我们把 react-draggable 导入import Draggable from 'react-draggable'; 到这里，App.js 中就是。import './App.css'; import Draggable from 'react-draggable'; // The default const Box = () => { return <div className="box"> <div className='drag-handler'>拖这里可以</div> <div>box 正文，拖这里拖不动</div> </div> } function App() { return ( <div className="App"> <Draggable> <Box></Box> </Draggable> </div> ); } export default App; 但是千万注意，如果这里你去试图拖拽一下把手，是拖不动的。原因是 Draggable 并不能直接包一个组件，而需要再包一层 div。我一开始在这里卡了很久时间，但解决的办法很简单，只需要多包一层 div 在外面即可。 function App() { return ( <div className="App"> <Draggable> <div> <Box /> </div> </Draggable> </div> ); }可以看到，如果这时候开始拖动，Box 就可以在界面上自由移动了。但是有一个问题，我们不希望用户拖动正文部分时，也将组件拖动。要解决这个问题也很简单，请看下一章如何在 react-draggable 中仅允许组件的一部分被拖动在 react-draggable 的 API 中，一个属性叫 handle，这个属性的作用就是用来选出对拖动有反应的组件部分。对应到我们上面的例子，我们只希望在用户拖动把手时，整个组件移动。所以我们只需要用 handle 属性，选出来把手即可。我们在代码中加入 function App() { return ( <div className="App"> <Draggable handle='.drag-handler'> <div> <Box /> </div> </Draggable> </div> ); } 注意这里，.drag-handler 是一个选择器，用来选出 className=drag-handler 的组件部分，也就是对应的我们的把手。那么到此，组件就只能通过拖动把手而拖动了。限制可拖动范围有时候我们希望限制可以拖动的范围，比如你不希望用户把一个组件拖到另一个区域，因为可能挡住那个区域的其它界面。在 react-draggable 中，要限制拖动范围很简单，只需要给定 bounds 属性就可以了。bounds: {left?: number, top?: number, right?: number, bottom?: number} | string, 这个 bounds 属性可以指定屏幕上上下左右四个位置的边界限制，同时你也可以给一个字符串，用来选择组件的父组件，这样可以限制该组件只能在它的父组件中移动。限制在父组件中的情况较多，比如你在做一个扑克牌游戏时，显然只希望扑克牌只在牌桌上被拖动，那么你就可以限制扑克牌，让它始终在父组件牌桌中。具体的例子这里就不展开讲了，请自行探索。调整样式最后我们稍微调整一下样式，让整个 APP 看起来漂亮一些。到此，你应该就已经学会使用 react-draggable 来实现拖拽操作了其它库和实现实现拖拽的其它方式也还很多，我们会在之后的文章中介绍。如果你用的是 Vue 的话，不妨参考我们的文章:最好的Vue拖拽库推荐总结react-draggable 总体来说是一个非常优秀的拖拽库，虽然自己写也不需要太多代码，但使用一个“经历过战场”的组件库还是可以省掉不少自己实现的时间。同时它的 API 足够优秀，可以满足日常工作需要。如果你觉得自己写有太大挑战，尝试一下用卡拉云搭建后台工具，事半功倍。
-
发表了文章 2022-03-04
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发：《最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云》Vue 拖拽组件库（drag-and-drop）组件在使用 Vue 框架开发中非常常见的需求，做个内容行排序，拖拽小组件到网页上这类都需要用到拖拽组件。本文记录了我自己用过的 6 款 Vue 拖拽组件库，它们各有各的特点，推荐给大家。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。接下来介绍 6 款我自己常用的 Vue 拖拽组件，它们各有特色，希望能帮你找到合适你的组件库Vue Draggable - Vue 拖拽组件王者Vue drag resize - 轻量级，无依赖，可缩放Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景V-drag - 最简单的可拖拽执行方案Vue Easy DnD - 简洁快捷，上下拖拽场景适用Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用1. Vue Draggable - Vue 拖拽组件王者Vue.Draggable 必须第一个推荐，Vue 拖拽组件里的王者，适应大多数应用场景，流畅顺滑。Vue.Draggable 基于 Sortable.js（一款轻量级拖拽排序 JS 插件） 开发的 Vue 拖拽组件。对移动设备友好支持，支持触控，支持智能滚屏。拖拽与选取文本识别：有时用户会想复制拖拽元素上的文字，多数库无法识别此类用户操作，vue.draggable 可以识别拖拽动作或选择文字的动作。对 Vue UI 库友好，你可以把现有的 Vue 组件附加到可拖拽的元素上，实现这个组件的拖拽功能。扩展阅读：《最好用的 7 个 Vue Tree select 树形组件》2.Vue drag resize - 轻量级，无依赖，可缩放vue-drag-resize 支持拖拽和缩放两个大动作，轻量级，无依赖，功能扎实，适合需要缩放的应用场景。无依赖，轻量级操作可联动支持触摸，对移动端友好元素可定义拖拽及缩放可限制拖拽的最大或最小值可限制拖动的方向扩展阅读：《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》3. Vue smooth dnd - 简单动效，上下拖拽排序，涵盖多场景vue-smooth-dnd 是一款简单轻量的拖拽排序 Vue 组件，封装了 smooth-dnd 库。它主要包含两个组件，Draggable 和 Container；Container 包含了可拖动的元素，它的每一个子元素都被 Draggable 包裹着，也就是说，每一个子元素都带有可拖拽的属性。扩展阅读：《如何在 Vue 中导出数据至 Excel 表格》4. v-drag - 最简单的可拖拽执行方案v-drag 简单好用的 Vue 拖拽组件，对触摸事件友好支持。作者对 V-drag 的定位是快速让 Vue 集成拖拽功能，让 v-drag 包裹的元素快速实现拖拽移动功能。扩展阅读：《如何在 Vue 中加入图表 - Vue echarts 使用教程》5. Vue Easy DnD - 简洁快捷，上下拖拽场景适用Vue-Easy-DnD 就如他的名字一样简单快捷，没有任何啰嗦的功能，支持键盘事件，支持 SSR ，支持触摸事件。扩展阅读：《顶级好用的 5 款 Vue table 表格组件测评与推荐》6. Awe dnd - 基于 vue 2.x 拖放排序组件，元素和图片拖拽通用Awe-dnd 支持桌面和移动端，有简单动画效果，轻巧简洁，没有太多多余功能。扩展阅读：《最好用的 7 款 Vue admin 后台管理系统测评》7.总结本文主要介绍多款 Vue 拖拽组件库。如果不想处理前端问题，推荐使用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可快速生成。下图为使用卡拉云搭建的内部广告投放监测系统，仅需拖拽，1小时搞定。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。扩展阅读：最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐顶级好用的 5 款 Vue table 表格组件测评与推荐Postman 使用教程 - 手把手教你 API 接口测试最好的 6 个免费天气 API 接口对比测评如何在 Vue 中导出数据至 Excel 表格
-
发表了文章 2022-02-28
最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
本文首发：《最好用的 7 个 Vue Tree select 树形组件 - 卡拉云》Vue 树形选择器（Vue tree select）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 7 款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。接下来介绍 7 款我自己常用的 Vue tree select第三方组件，它们各有特色，希望能帮你找到合适你的选择器Vue JSTree - 全功能，树状单选多选，可拖拽，过滤搜索Vue Draggable Nested Tree - 纯树形选择，轻盈趁手Vue Tree List Component - 前端可编辑、删除，拖拽，界面友好Vue Tree select - 基础款树形选择器，没有多余功能Vue Tree Chart - 传图树形选择器 UI 适合展示树状关系Vue Liquor Tree - 移动端友好，可拖拽，灵活配置V-TreeView - 基础款树形选择器，可换 icon，可过滤搜索1. Vue JSTree - 全功能，树状单选多选，可拖拽，过滤搜索Vue JSTree 放在第一个推荐，因为它涵盖了大多数你需要的功能，单选多选，可更换 icon 简单的搜索过滤，可任意拖拽子集到新集合里。Vue JSTree 更多功能：没有依赖单选、多选自定义子集 icon过滤及搜索扩展阅读：《顶级好用的 5 款 Vue table 表格组件测评与推荐》2.Vue draggable nested Tree - 纯树形选择，轻盈趁手Vue draggable nested Tree 简洁的树形 Vue 组件。虽然 UI 简单，但整体轻盈，功能主要集中在树状结构以及鼠标拖拽。对于排序、分组更换这类需求来说是不错的选择。扩展阅读：《最好用的 7 款 Vue 3 富文本编辑器》3.Vue Tree List Component - 前端可编辑、删除，拖拽，界面友好Vue Tree List Component 是一套制作精良的 Vue 树形组件，强烈推荐。用户可以直接在前端 UI 上操作编辑。直接新建文件夹或子节点，重命名节点名，删除节点。拖拽节点到任意子集中，拖拽 UI 细节做的非常棒，有辅助虚线，方便用户在拖拽操作时，定位拖拽位置。扩展阅读：《Vue 搭建带预览的「上传图片」管理后台》4. Vue Tree select - 基础款树形选择器，没有多余功能Vue Tree select 是一个最简单形式的 Vue 树状组件。没有任何其他多余的功能，他就只有多层树状结构，简单的开合以及点击选择。针对仅需要树状选择组件的使用场景。扩展阅读：《手把手教你Vue3+Node.js+Expres+MySQL环境搭建》5. Vue Tree Chart - 传图树形选择器 UI 适合展示树状关系Vue Tree Chart 最突出的特点是它的 UI 设计，它才是传统意义上的树形结构，从树根开始，逐渐展开。特别适合展示权限系统或者公司人员结构这种，能很清晰的展示平行关系。扩展阅读：《Vue Router 手把手教你搭 Vue3 路由》6.Liquor-Tree - 移动端友好，可拖拽，灵活配置Liquor Tree 是一款轻量级树形选择器，对移动端友好，可拖放，支持键盘快捷键，每个操作动作都有事件记录，与 Vue 高度整合。Liquor Tree 代码简洁，扩展性强，可根据你的应用场景按需定制。扩展阅读：《最好用的 7 款 Vue admin 后台管理系统测评》7.V-TreeView - 基础款树形选择器，可换 icon，可过滤搜索V-TreeView 树形选择器 UI 复古，可自定义 icon 可定制上下文菜单，可做简单过滤搜索。代码优雅简洁，没有任何多余功能，很适合做最基础的树形选择功能。扩展阅读：《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》8. Vue 树形选择器总结本文推荐了我自己使用多年的 7 款最好用的 Vue Tree select 树形选择器，这其中一定有一款适合你。这些第三方组件已经帮我们节省大量开发时间，如果还想更进一步，推荐使用卡拉云， 卡拉云内置树形选择器 和过滤搜索功能，无需懂任何前端，仅需拖拽即可快速生成。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。扩展阅读：最好的 5 款翻译 API 接口对比测评最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器Postman 使用教程 - 手把手教你 API 接口测试最好的 6 个免费天气 API 接口对比测评如何在 Vue 中导出数据至 Excel 表格
-
发表了文章 2022-01-24
最好用的 7 款 Vue admin 后台管理系统测评
本文首发：《最好用的 7 款 Vue admin 后台管理系统测评 - 卡拉云》Vue admin 后台管理系统作为每个项目必备的管理后台，对大家来说十分重要。选不好，配不好，不仅现在用着抓狂，未来迭代升级也困难重重，步步是坑。所以在技术选型阶段，就要对市面上主流的 Vue admin 做到全面了解，知道他们的优缺点，再根据自己项目的需求，有针对性的选择。我试用了市面上所有主流 Vue admin 都 npm 到本地测了一遍，筛掉长期不更新，bug 明显，社区活跃度低，功能单一的 admin 后台，把最好、最有特点的 7 款 Vue admin 挑出来，分享给大家。这些后台各有各的特点，有些功能多样，但整体很重；有些虽然稳定，但上线年头久远，含有大量陈旧功能；有些功能虽然少，但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的 admin 后台系统。另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云—— 新一代低代码开发工具帮你搭建 admin 后台管理系统。无需部署安装、一键接入数据库及 API，前端仅需简单拖拽，即可按照你的需求，随心所欲搭建适合任何应用场景的 admin 后台系统。原来三天的工作量，现在 1 小时搞定，谁用谁知道，用上早下班，详见本文文末。本文测评的 7 款 Vue admin 后台管理系统Vue element admin - 老牌 admin 后台管理 求稳首选Antd Pro Vue - 背靠阿里，代码过硬，大型项目首选Vue vben admin - 宝藏后台管理 基于 Vue3 UI清新 功能扎实iView Admin - 老牌 admin 代码工程化 建立生态 高价高品质D2Admin - 趁手 好用 代码工程化 RBAC 权限管理Naive Ui admin - 基于 Vue3 的后台管理新星 适合小项目mall admin web - 电商类 Vue admin 后台管理卡拉云 - 新一代低代码开发工具，无需部署，无需任何前端技术，随心所欲搭建属于你的 admin 后台一. Vue element admin - 老牌 admin 后台管理 求稳首选Vue element admin 是国内最早也是目前最完善的后台前端解决方案，一定得放在第一个说。作为 Vue admin 解决方案的前辈之一，element admin 的用户众多，社区庞大，无论你在使用中碰到什么问题，到处搜搜，基本上都能找与你碰到类似问题的用户提问及解答。element admin 基于 Vue + element UI 来实现，内置动态路由，权限管理，i18n （国际化插件），它把典型的业务模型帮你提炼出来，在你需要的业务场景中做到比你想的还要更好，极其丰富的功能组件，是你搭建企业内部后台的好选择。当然，它的优点也是它的缺点，经过这么多年的迭代，不断的加功能，不断迭代堆积，element admin 稍微有点臃肿，不适合当基础模版来二开，它集成的众多细致功能，会造成不少代码冗余。Vue element admin 经过时间筛选出来，能活到现在依然活跃是有原因的，如果你刚开始搭建管理后台，推荐你从 Vue element admin 开始试用。作者花裤衩自己写了个教程《手摸手带你用vue撸后台》特别棒，前端萌新可以跟着这个走一遍。扩展阅读：《手把手教你Vue3+Node.js+Expres+MySQL环境搭建》二. Antd Pro Vue - 背靠阿里，代码过硬，大型项目首选2018年3月，蚂蚁正式开源了 Ant Design 的 Vue 版本，几个月后，紧接着发布了这套 Vue 组件库的完整前端脚手架 Antd Pro Vue（Vue admin 后台管理系统）。Antd Pro Vue 作为 Vue admin 后台管理框架，视觉设计上传承了 Antd 的严谨专业。官网文档经过这么多多年的迭代，已经从最开始的粗略版升级至现在涵盖各类问题解决方案的专业好文档。Antd Pro Vue 从出生那一刻开始就是为复杂业务所建，它不是从简单功能逐渐迭代到复杂功能，而是从一开始设计时，就按照大公司复杂业务来设计，从一个更宏观的视角来有序安排，提炼出各类业务场景做成制式页，不论你是什么独特的业务场景，都可以找到合适自己的，稍加改动即可上线。三. Vue vben admin - 宝藏后台管理 基于 Vue3 UI清新 功能扎实Vue vben admin 是我一直想推荐的宝藏 admin 后台管理系统，视觉效果一流，功能安排合理。目前基于 Vue3 构建又好用的后台不是太多，Vben admin 基于最新的 Vue3、Vite、Ant-Design-Vue、TypeScript 构建。Vben 虽然早期版本有些问题，有些地方过度封装，有一些学习成本，但作者迭代的相当快，大多数问题在文档都可以找到并解决。vben 提供了完整版和2两个不同类型的精简版，毕竟大多数使用者会根据自己的使用场景进行二开，会删掉自己不需要的代码，作者洞察到了这个需求，帮大家完成了这一步。虽然 vben 文档里描述自己适合做中大型中后台，但 vben 发布时间还比较短，还有挺多升级迭代的路要走，建议谨慎选择。我个人非常看好 vben ，期待它有朝一日，独霸一方。扩展阅读：《Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板》四. iView Admin - 老牌 admin 代码工程化 建立生态 高价高品质2017 年 iView admin 刚发布时，国内各类 Vue UI 框架都刚起步，还没有现在这种头部一家独大的局面。当时正好在 V2EX 看到相关信息，试了试很喜欢，经过这么多年，现在已经迭代多个版本，并且在 2019年发布了 iView admin pro 版，我来说说这两个版本。iView admin 基于 Vue + iView UI 组件库构建的后台管理解决方案，它作为 iView 生态上的成员之一，遵循 iView 设计逻辑，风格统一。iView 组件很符合 Vue 开发模式，如果你同时也很熟悉 React ，那么切到 Vue ，使用 iView 也会更容易适应。但这个 admin 基础版对数据量较大的情况，处理的不是很好，把它当作轻便的基础 admin 使用更合适。iView 在 2019 年推出了全系列 Pro 版本之后，对基础版的维护和更新就很少了，不过我仍然觉得基础版现在的状态，用在自己的小项目中，边用边学习是不错的选择。iView admin Pro 在基础版的基础上有很多重大升级，对各类应用场景都做了细致的支持。另外 pro 对 PC 端和移动端做了非常好的自适应处理。Pro 版内置了 Quill 富文本编辑器，我自己也超爱 Quill，它非常简洁，没有多余功能，特别是对代码书写极其友好，具体可以看我写的这篇《最好用的 7 款 Vue 3 富文本编辑器》。iView admin Pro 售价高达 1 万元，它有着商业软件应有的流畅和趁手，这种付费 admin 我找机会单开一篇写个测评，这里不展开了。扩展阅读：《最好的 6 个免费天气 API 接口对比测评》五. D2Admin - 趁手 好用 代码工程化 RBAC 权限管理D2Admin 绝对是一款低调又好用的 admin 后端管理系统。它是完全免费开源的企业中后台管理集成方案，在 element-ui 相关的开源项目里，D2 admin 的结构和代码风格顺畅清晰，小于 60kb 的本地首屏 JS 加载，而且 D2 的权限管理遵循 RBAC 模型。D2Admin 使用 Vue-cli3 构建，内置 UEditor 富文本编辑器，多款主题，分离的路由和菜单设置，可拖拽的页面布局，Fontawesome 图标库以及提供了数据导出另存为 Excel 文件，这对有些数据看板类的项目尤为重要。扩展阅读：《最好的 5 款翻译 API 接口对比测评》六. Naive Ui admin - 基于 Vue3 的后台管理新星 适合小项目Naive Ui admin是我最近用过特别轻便的一款 Vue admin 中后台管理系统解决方案。它完全免费，可商用。目前基于 Vue3 有好用的项目并不多，老牌前端框架还在支持 Vue3 的路上，现在支持 Vue3 完成度又高的项目屈指可数，Naive Ui Vue Admin 相对来说，是一个比较完整的项目，虽然有些组件还有待开发，但以目前作者的更新频率来说，应该很快就能赶上。扩展阅读：《Postman 使用教程 - 手把手教你 API 接口测试》七. mall admin web - 电商类 Vue admin 后台管理mall admin web 主要针对电商垂直场景，开发的电商后台管理系统。mall admin 内置功能主要围绕电商需求展开，商品管理、订单、会员、促销、统计报表、财务管理等有针对性的功能场景展开。对于快速上线的电商项目，这套系统是非常好的选择，功能全覆盖，简单又直接。mall admin web 基于 Vue + Element 构建，整个功能分布合理，包含电商的大部分所需，方便大家进行二次开发。作者也写了它的后端项目 mall，基于 SpringBoot+MyBatis 实现，采用Docker容器化部署，配合使用更加。八. admin 管理后台总结及「卡拉云」本文介绍了我自己用过的 7 款 Vue admin 后台管理系统的特点，大家可以根据自己工作中的实际场景来挑选合适自己的后管系统。如果你想搭建自己的 admin 后台管理工具，但又不是很熟悉前端，可以考虑使用卡拉云，真正开箱即用，无需写任何前端代码，仅需拖拽，即可快速生成适合你项目的 admin 后台管理系统。上图为卡拉云用户根据自己项目情况，搭建的广告投放监测系统，整个搭建过程用时 50 分钟卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。三天的工作量，使用卡拉云后，可缩减至 1 小时，欢迎免费试用卡拉云。九. 本文作者蒋川，卡拉云联合创始人，B 端数据开发。如果你有任何问题，欢迎添加微信一起交流。我的微 HiJiangChuan扩展阅读：最好的 5 款翻译 API 接口对比测评最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器Postman 使用教程 - 手把手教你 API 接口测试最好的 6 个免费天气 API 接口对比测评PAW 使用教程 - 手把手教你 API 接口测试
-
发表了文章 2022-01-22
最好用的 7 款 Vue 3 富文本编辑器
本文首发：最好用的 7 款 Vue 3 富文本编辑器 - 卡拉云富文本编辑器作为直接与用户交互的内容输入生产工具，对大家的项目来说非常重要。选不好，配置不好，直接影响产品质感和用户体验，所以说在选择编辑器方面花点时间是值得的。我试用了市面上所有主流富文本编辑器，筛掉长期不更新，bug 明显，社区活跃度低，功能单一的编辑器，把最好、最有特点的 7 款编辑器挑出来，分享给大家。这些编辑器各有各的特点，有些功能多样，但整体很重，有些功能虽然少，但某一项功能优化的特别好。希望我的测评可以帮助你选到合适你需求的编辑器。另外，如果你不太懂前度或觉得前端写起来太麻烦，推荐你试试卡拉云，卡拉云仅需简单拖拽，即可生成「富文本编辑器」，更棒的是卡拉云可以帮你快速搭建内置编辑器的 Web 应用程序，详见本文文末。本文测评的 7 款 Vue 富文本编辑器TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富tiptap - 多人在线实时协同编辑CKEditor 5 - 开源免费可商用，行内编辑Quill - 易扩展、轻量级二开、代码高亮好用Froala - 插件丰富，UI友好，编辑器里的苹果summernote - 恰到好处的轻，可直接粘贴图片Trumbowyg - 超轻量，体积小巧，仅 8KB卡拉云 -内置富文本编辑器的低代码开发工具，无需部署，开箱即用一. TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富TinyMCE 是富文本编辑器领域的头部玩家之一，主流富文本编辑器，功能非常全，你需要的大多数功能它都支持。排出复杂又美观文章样式，代码高亮等都是基础功能。它甚至有点像在线版的 Word，可以在顶部的各种菜单中找到你要的功能。但它的优势也恰恰是它的劣势，如此之多的功能都放上来导致整个编辑器非常重，如果只是需要简单功能，上这么复杂的编辑器，大材小用。TinyMCE 对 Vue.js 的集成和安装非常友好，支持 Vue3 和 TypeScript，文档写的也非常好。二. tiptap - 多人在线实时协同编辑tiptap 最初是为 Vue2 开发的，现在已发展成为独立框架工具，对 Vue3、React、Svelte 集成友好。 它基于 Prosemirror 进行扩展开发，是一款无头(headerless)富文本编辑器，默认情况下，它没有任何 UI 样式，你完全可以自己来配置想要的 UI，不需要重写 class，也不需要 important 代码。tiptap 功能非常强大，功能插件丰富。但它比其他编辑器更棒的地方在于多人在线实时编辑。类似于谷歌文档那种效果，所有使用者在同一个页面彼此能看到对方的光标位置和名字，大家同时在线协同编辑。整个协同体验流畅，如果你的应用场景需要多人实时协同编辑，选 tiptap 就对了。三. CKEditor 5 - 开源免费可商用，行内编辑CKEditor 5 是基于 Vue 的富文本编辑器组件，开源，可免费用于商业用途，官方下载量已经过千万。CKEditor 是编辑器前辈 FCkEditor 的基础上开发的全新版本。它的 UI 设计现代，支持行内编辑模式。免费付费功能分布合理，付费主要是小部件、实时协同和历史记录。CKEditor 5 有详细的文档，从入门到自定义编辑器，再到如何与不同框架集成，写的非常详细。扩展阅读：《Axios 教程：Vue + Axios 安装及实战教程 - 手把手教你搭建加密币实时价格看板》四. Quill - 易扩展、轻量级二开、代码高亮好用Quill 也是众多富文本编辑器中的佼佼者，它相对于其他编辑器更容易设置，有丰富便捷的 API，非常好的扩展性，轻量级可二开的编辑框，很适合特殊场景的定制开发。Quill 的优缺点都非常突出，它的代码高亮功能突出好用，但却没有一些常规编辑器都有的标配功能，比如表格，如果你想找一款轻巧，不需要太多复杂功能，对代码编辑友好的编辑器，Quill 是不错的选择。作为老牌富文本编辑器，Quill 还有一个比较大的开发者社区以及围绕 Quill 开发的插件和集成的生态系统。五. Froala - 插件丰富，UI友好，编辑器里的苹果Froala 被喜欢它的用户称之为史上最牛富文本编辑器，干净的 UI 和简洁的设计，极其丰富的插件，可自定义配置，功能非常强大，API 和文档非常全面，开发者上手友好，支持非常多的前端框架 VueJS、ReactJS、Angular、Meteor、Ember。六. summernote - 恰到好处的轻，可直接粘贴图片summernote 是一款轻量级富文本编辑器，它的所有功能都在界面上了，如果这些功能你需要的场景恰巧够用，那么恭喜你了，你找到了轻便趁手的富文本编辑器。summernote 非常容易上手，体验轻快，甚至还支持快捷键操作。值得一提的是它对图片的处理，summernote 直接把图片 base64 到内容字段，所有你不用处理图片。另外它支持直接复制粘贴图片到编辑器里，这一点非常趁手。summernote 基于 jQuery 和 Bootstrap 构建，支持各类主流浏览器，有大量可定制开发的选项，扩展阅读：《Vue3 + Node.js 环境搭建，手把手教你搭建前后端分离的 Web APP》[](https://kalacloud.com/blog/vue-richtext-editor/#%E4%B8%83-trumbowyg---%E8%B6%85%E8%BD%BB%E9%87%8F%E4%BD%93%E7%A7%AF%E5%B0%8F%E5%B7%A7%E4%BB%85-8kb)七. Trumbowyg - 超轻量，体积小巧，仅 8KBTrumbowyg 是一个超级轻量级可定制的 jQuery 富文本编辑器，可生成语义化代码，针对 HTML5 优化，对主流浏览器友好支持， API 功能强大。Trumbowyg 功能非常简单，你看我上面实际安装后的测试截图就知道，没有太多复杂的功能。但它有个突出特点，就是小，压缩后仅有 8kb 大。对于某些应用场景需要网页加载速度快或针对网络状态不好的使用场景，这个特点非常非常重要。八. 富文本编辑器总结本文介绍了我自己用过的 7 款 Vue.js 富文本编辑器的特点，大家可以根据自己工作中的实际场景来对编辑器进行挑选。如果你想搭建自己的后台工具，但你对前端并没有那么熟悉，可以考虑使用卡拉云，卡拉云内置了富文本编辑器，你完全不用操心前端，只需要简单拖拽即可立即在页面上生成富文本编辑器。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天，欢迎免费试用卡拉云。九. 本文作者蒋川，卡拉云联合创始人，B 端数据开发。如果你有任何问题，欢迎一起交流。我的微 HiJiangChuan扩展阅读：最好的 5 款翻译 API 接口对比测评最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器Postman 使用教程 - 手把手教你 API 接口测试最好的 6 个免费天气 API 接口对比测评PAW 使用教程 - 手把手教你 API 接口测试
-
发表了文章 2021-12-31
最好的 6 个免费天气 API 接口对比测评
本文首发：最好的 6 个免费天气 API 接口对比测评 - 卡拉云天气 API包含丰富的天气数据，不仅有实时温度、湿度、风速、降水等这些基础数据，还有过去的历史天气数据和未来的天气预测数据，顶级的天气 API 接口还会包括天气灾害预警，空气质量指数，日出日落、潮汐及月相相关的天文气象等数据。天气 API 也并不难获得，本教程将介绍 6 款国内外免费的天气 API，并手把手教你搭建一套属于自己的天气数据看板。免费的天气 API 概览 - 如何选到免费又稳定的天气 API 接口本文所介绍的天气 API 均是我自己接入使用过的，它们是从众多天气 API 中甄选出的 6 款高质量免费天气 API 。这 6 款 API 都是基础免费增值付费的商业模式，这种模式保证了免费用户可以长期稳定的使用，不用担心数据源挂掉。特别是本文介绍的全球天气 API 对免费用户非常友好，免费开放的数据更多样，限制更少，我会在本文后半段详细介绍。本文详细讲解以下 6 个免费天气 API 的特点及接入方法高德天气 API -免费、 稳定、极简，适合天气预报基础需求心知天气 API - 免费、轻便、专业，适合天气预报的初级需求和风天气 API - 免费和付费同权限，非商业无限免费，含空气质量、天文气象OpenWeather - 免费 100 万次/月 分钟级实时预报，天气云图AccuWeather - 全球最大的气象数据服务商，历史悠久，数据精准，天气 API 王者Visual Crossing - 非开发者使用友好 50年历史气象数据免费调用一. 高德地图天气 API - 稳定、免费、极简高德地图的天气服务面向仅需要稳定的实时天气和简单的未来数天预测服务的开发者，高德天气相对于本文介绍的其他天气 API 来说，显得有些简略，但如果你对天气的需求就是实时和简单的未来预报，那么高德一定是你的好选择。不绕弯，只给你最需要的部分。1. 高德地图天气 API 免费版可用资源30万次/日，200次/秒并发实时天气预报未来 4 天天气预报最高最低气温、风力风向、湿度与高德地图数据融合，极其丰富的地点地图路径数据2. 高德地图天气 API 接入极简教程打开并注册高德开放平台进入高德开发平台的控制台，创建应用并获取 API Key阅读高德地图天气开发文档打开 API 接口工具，填入 高德地图天气 API URLhttps://restapi.amap.com/v3/weather/weatherInfo?key=【你的_API_KEY】8&city=110000&extensions=all高德天气 API 示例：北京未来三天天气预报（查看高德天气的城市编码）北京的城市编码为110000本教程使用「卡拉云」作为接口工具示例演示，在卡拉云直接调用 高德天气 API 查询数据返回成功。使用卡拉云简单拖拽即可快速搭建自己的「天气预报数据看板」，本文最后一章详细讲解。二. 心知天气 API - 免费、轻便、专业心知天气用下来整体感觉轻巧顺手，对于免费版用户没有限制访问次数，可以无限访问，这点已经超过大多数国内天气 API。免费版可调用未来三天的天气预报，包含天气气象和气温两个要素。把它放在第二个介绍是因为心知天气相对于前文的高德天气来说，有可升级的空间。1. 心知天气 API 免费版可用资源永久免费，无限访问，20次/分钟全国 370 个主要城市数据实况天气数据未来 3 日天气预报2. 心知天气 API 接入极简教程打开心知天气注册账号在 心知天气控制台创建你的产品，获得 API Key阅读心知天气 API 开发文档打开 API 接口工具，填入心知天气 API URLhttps://api.seniverse.com/v3/weather/daily.json?key=【你的_api_key】&location=beijing&language=zh-Hans&unit=c&start=-1&days=5心知天气 API 示例：北京未来三天天气情况上图为卡拉云成功调用「心知天气 API 」 的返回数据。本教程使用「卡拉云」作为接口工具做演示，相对于其他接口测试工具，卡拉云在测试接口的同时，可直接完成后台工具的搭建。如何用卡拉云快速搭建自己的「天气预报数据看板」，本文最后一章详细讲解。三. 和风天气 API - 免费付费同权限，非商业无限免费必须得推荐一下和风天气，和风天气 API 面向非商业用户完全免费且不分权限，也就是说商业用户能读什么天气数据，免费用户也就能读什么天气数据。自然灾害、空气质量、极端天气预警、天文信息这些在国内天气 API 的免费版中非常少见，和风天气这种免费和付费同权的商业模式让大家能无限使用所有的数据，在你的项目成长成商业项目，有收入后再收费，可以说非常良心。1. 和风天气免费版可用资源非商业用户 1000次/天 到 SDK 无限量访问按坐标、城市名称、格点方式定位并展示对应天气信息实时、三日、七日天气预报灾害极端天气预警信息全国空气质量信息热带台风信息天文气象数据（日出、日落、月相、太阳角度等）2. 和风天气 API 接入极简教程打开和风天气开放平台注册账号在和风天气控制台创建你的应用，获得 API Key阅读和风天气开发文档 （地理位置、空气、历史数据的开发文档）打开 API 接口工具，填入和风天气 API URLhttps://devapi.qweather.com/v7/weather/now?location=101010100&key=【你的_api_key】![本教程使用「卡拉云」作为接口工具做演示(03-03-kalacloud.jpg)上图为卡拉云成功调用「和风天气 API 」 的返回数据。本教程使用「卡拉云」作为接口工具做演示，相对于其他接口测试工具，卡拉云在测试接口的同时，可直接完成后台工具的搭建。如何用卡拉云快速搭建自己的「天气预报数据看板」，本文最后一章详细讲解。接着我们来说说全球天气 API四. OpenWeather - 100 万次/月 分钟级实时预报 天气云图国际天气 API 服务商的免费档相比中国国内的，会提供更多免费数据，OpenWeather 作为老牌天气信息 API 服务商，可以说是非常良心了。不仅在调用次数上给了 100 万次/月，而且在预报的精度上免费了 60 分钟分钟级预报和 48 小时每小时预报，对于天气敏感的行业来说，非常实用。1. OpenWeather 免费版可用资源每月100万次调用、60次/分钟按坐标、城市名称、格点方式定位并展示对应天气信息实时天气信息60分钟内的分钟天气预报48小时内每小时天气预报7天每日天气预报过去 5 天的历史天气数据基本天气云图全球空气质量信息2. OpenWeather API 接入极简教程打开 OpenWeather 网址，邮箱注册，验证邮箱打开 OpenWeather My API Keys 页面创建自己的 Key查看 OpenWeather 开发文档打开 API 接口工具，填入 OpenWeather 的 API URLhttp://api.openweathermap.org/data/2.5/forecast?q=beijing&appid=【Your_APP_Key】weather：当前天气预报q：地理位置(city name)上图为卡拉云成功调用「OpenWeather API 」 的返回数据。本教程使用「卡拉云」作为接口工具做演示，相对于其他接口测试工具，卡拉云在测试接口的同时，可直接完成后台工具的搭建。如何用卡拉云快速搭建自己的「天气预报数据看板」，本文最后一章详细讲解。五. AccuWeather - 全球最大的气象数据服务商 历史悠久 数据精准AccuWeather 创立于 1962 年，创始人 Joel 当时还在宾大读气象博士。现在 AccuWeather 已经是全球最大最权威的气象数据站，全球多数安卓机使用的天气查询数据都来自 AccuWeather。其实 AccuWeather 对免费用户并不友好，每日可调用数非常少，但因为它是全球天气 API 的王者，提供的气象数据、灾害预报等数据及其准确、细致和权威，我还是把它放在这个列表里，如果你正在挑选天气 API ，不管现在用不用的上 AccuWeather，我觉得你一定要知道全球最权威最棒的天气 API 长啥样，全球顶级企业，特别是对天气要求极高的道路、航空、野外作业都会选用 AccuWeather 作为天气数据支持。1. AccuWeather 免费版可用资源按坐标、城市名称、格点方式定位并展示对应天气信息实时气象数据24小时历史气象数据未来 5 天每日天气预报12小时内每小时预报未来 5 天内生活指数预报每日 50 次 API 调用2. AccuWeather API 接入极简教程打开 AccuWeather 开发者站，邮箱注册并激活账号打开 My APPS 页，创建你的 APP 并获得 API Key阅读 AccuWeather API 文档打开 API 接口工具，本教程使用卡拉云作为示例演示。注册并登录卡拉云，在「数据源」填入 AccuWeather 的 baseURLhttp://dataservice.accuweather.com/locations/v1/cities/geoposition/search?q=39.9,116.4&language=zh-cn&apikey=【Your_app_key】q：这里可写城市名称，也可像本示例一样使用经纬度查询地点上图为卡拉云成功调用「AccuWeather API 」 的返回数据。本教程使用「卡拉云」作为接口工具做演示，相对于其他接口测试工具，卡拉云在测试接口的同时，可直接完成后台工具的搭建。如何用卡拉云快速搭建自己的「天气预报数据看板」，本文最后一章详细讲解。六. Visual Crossing - 非开发者友好 50年历史气象数据免费调用Visual Crossing 面向数据科学家、数据分析师、气象研究学者等学术和企业气象分析领域，也就是说 Visual Crossing 不像其他天气 API 那样假设使用者都是会写代码的程序员，所以在它的网站上对非程序员提供了非常友好的可视化气象分析工具。比如 API builder， 你只需要输入自己的需求，它帮你生成对应的 API URL ，只需要把这条 URL 复制到你的 API 接口工具上即可方便使用。1. Visual Crossing 免费版可用资源调用 1000次 / 天50年历史气象数据15天未来天气预报极端天气预警当前天气情况天文气象数据2. Visual Crossing API 接入极简教程打开 Visual Crossing 官方网站邮箱注册并激活账号打开 个人账户页面，获取你的 API Key查看 Visual Crossing API 开发文档我们可以在这里直接输入我们要查询的地点，网址会帮我们生成对应的 APIhttps://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/BeiJing?unitGroup=metric&key=【Your_api_key】&contentType=json上图为卡拉云成功调用「 Visual Crossing API 」 的返回数据。本教程使用「卡拉云」作为接口工具做演示，相对于其他接口测试工具，卡拉云在测试接口的同时，可直接完成后台工具的搭建。如何用卡拉云快速搭建自己的「天气预报数据看板」，本文最后一章详细讲解。七. 使用「卡拉云」快速搭建天气数据看板，导出天气数据至 CSV卡拉云是一套低代码开发工具，相对于 Postman 接口测试工具，卡拉云的优势是在做 API 接口测试的同时，直接就把后台工具给搭出来了，而且开发者完全不用会任何前端技术，只需要简单填写 API URL 即可通过鼠标拖拽快速搭建出一套天气预报数据看板，并可将数据看板分享给其他小伙伴使用。本文以「对非程序员使用友好的 Visual Crossing 天气 API 」接入卡拉云为例，接入其他天气 API 步骤完全一样。第一步：注册 Visual Crossing 账号，获得 API Key 及 API URL注册并登陆账号后，点这里获取 北京未来 15 天天气情况 API URL第二步：注册并登录卡拉云，在「数据源」添加 Visual Crossing API注意：这里填写的是 Visual Crossing API 的 BaseURL，如下：https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/第三步：在卡拉云新建应用，新建查询，选择资源「Visual_Crossing_API」新建查询选择刚刚我们在「数据源」添加 Visual Crossing API 资源在 HTTP 端点填写 EndPoint 的部分beijing?unitGroup=metric&contentType=json&key=【Your_app_key】第四步：GET 天气 API 测试接口点击「运行并预览」，在弹出的框中可以看到天气 API 返回成功的数值。第五步：从「组件列表」拖拽适合的组建并将数据映射到组件上未来 15 天预报的表格数据：{{VisualCrossingAPI.data.days}}注解：VisualCrossingAPI 为我们在第三步创建的查询，读取 API 中的 days 数据当日天气预报### 最高温度：{{table1.selectedRow.data.tempmax}} ### 最低温度：{{table1.selectedRow.data.tempmin}} ### 风速：{{table1.selectedRow.data.windspeed}} ### 风力：{{table1.selectedRow.data.windgust}} ### 日出时间：{{table1.selectedRow.data.sunrise}} ### 日落时间：{{table1.selectedRow.data.sunset}}注解：table1 是指「未来近 15 天预报」的表格名，鼠标选中（selectedRow）哪一列，当日天气就会显示哪一列的天气预报。分时详情表格数据：{{table1.selectedRow.data.hours}}注解：table1 是指「未来近 15 天预报」的表格名，鼠标选中（selectedRow）哪一列，显示当日 24 小时分时预报第六步：导出天气预报数据至 CSV 文件有时，我们通过天气 API 获取的数据需要导入其他软件或下载到本地进行数据分析，又或者需要发给合伙的小伙伴一起使用。这时，你不用操心导出数据格式、中文乱码等问题，在卡拉云组建库中直接拖拽一个「导出按钮」即可。卡拉云内置「导出按钮」，仅需拖拽一个按钮组建到画布，简单设置即可一键导出数据至 CSV / Excel / JSON 格式的文件。完成：使用卡拉云简单六步，搭建天气数据看板熟练使用后，这样的数据看板使用卡拉云最多 5 分钟就能搭建完成，还可以分享给你的小伙伴一同使用。更多卡拉云使用教程，可访问卡拉云官方网站查看。扩展阅读：Postman 使用教程 - 手把手教你 API 接口测试MySQL 时间戳用什么类型 - MySQL 时间函数详解最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件如何在 MySQL 中导入和导出 CSV / Excel 文件如果我的文章对你有帮助，还请点个赞再走，任何问题欢迎评论区一起交流。
-
发表了文章 2021-12-31
Postman 使用教程 - 手把手教你 API 接口测试
本文首发：Postman 使用教程 - API 接口自动化测试初探 - 卡拉云Postman 是一套 API 接口测试工具，它的强大在于灵活趁手的接口测试功能，极大的提高了 API 测试效率。本教程将由浅入深，带领大家一起学习如何使用 Postman 进行接口测试。API 是什么？API的英文即 Application Programming Interface 首字母的缩写。不要被这么长的单词吓到，直译过来的意思就是：程序之间的接口。我更倾向于把API理解为，程序之间的合约。有关 API 是什么及它的意义这里就不展开讲了，了解更多可看卡拉云博客之前的文章《API是什么: 一篇讲透API》Postman 是什么？Postman 是一款 API 开发协作工具，它可以帮助你测试和开发 API，Postman 提供了测试 API 的友好界面和功能，使用简单便捷，安全可靠。Postman 是 API 接口测试工具的 Top 3，因为它简单可靠又免费，目前有超过 800 万开发者用户使用。特别是 API 批量测试功能，在近几次的大版本更新中，用户体验得到了极大的提升。Postman 是每一位前后端开发者必掌握的开发工具。一. 如何安装 Postman前往 Postman 官网免费下载，安装非常傻瓜，这里就不展开写了，如果安装过程有任何问题，欢迎评论区提问。Postman 支持 Windows、Mac 和 Linux，也可以直接跑在浏览器里，跨平台，使用相当便捷。二. API 模拟工具 GoRest本教程使用模拟 API 工具 GoRest 进行模拟 API 测试。GoRest 有非常多的使用场景，比如，后端接口还没有准备好时，我们可以先用 GoRest 模拟测试，又或者你自己暂时不想搞服务器，也不想搭后端，也可以先用 GoRest 来测。GoRest 可以理解为后端工程师帮你搭好了后端服务器，而且是完全测过的，几乎不可能有 Bug。GoRest 除了其中的数据是模拟的，所有 API 响应都是完全真实的，你可以通过 API 调用的返回数据判断你的前端是否有问题。GoRest 的 API 调用 URL 及规则。通常 API 由 BaseURL + Endpoint 构成。比如上图中第一个 Resources：https://gorest.co.in/public/v1/users这个 API 是由 https://gorest.co.in + /public/v1/users 即 BaseURL +Endpoint 组成的。一般我们可以从 API 地址看出调取信息的大意，这段 URL 是调用 GoRest 上有关 users 的信息。下一节，我们使用 GET 请求调用这个 API ，看看返回结果是不是与 users 信息有关。三. 用 Postman 发出第一个 GET 请求1. GET 请求基本操作GET 请求是 API 中使用最频繁的请求之一，GET 请求仅从数据库中请求读取数据，不会修改服务器中的数据。接下来，我们来创建一个基本的 GET 请求（1）点击主界面「+」号，新建一个请求页（2）选择 GET 请求命令（3）输入 API 地址：https://gorest.co.in/public/v1/users在 GoRest API 设计中 GET 请求无需鉴权（下一节 POST 请求会讲解 API 鉴权问题），所有我们直接点击「Send」即可远程调取服务器信息。点击「Send」，我们可以看到下方的 Body 显示了 GET API 返回值，第一段落是 users 信息概览，下面是一组组 user 信息。如果我们只想看调取其中一位用户的信息应该怎么办呢？我们可以在 API URL 中带上参数。2. 带参数的 GET 请求如果我们想查询 ID 为 2043 的用户信息，我们只需要在请求页面中的 Params(参数) 标签页的 KEY - VALUE 内填写对应的参数即可，之后 Postman 会自动在 API URL 中生成你填写的参数，使 URL 带上参数 GET 请求。https://gorest.co.in/public/v1/users?id=2043设置完成后，点击「Send」我们可以看到，返回值中仅包含我们请求的 user id 为 2043 的用户信息。3. GET 请求中的多条件查询有时，我们需要使用 API 进行多条件查询操作，比如想找 name 值为 kalacloud.com ，同时 gender 值为 male 的用户。（特别提示：此格式是通用写法，但最终要看 API 的开发者如何约定调用方式）BaseURL + ResourceName + ? + key1 = value1 + & + key 2 = value 2 ……主 URL 之后使用 ? 连接参数，参数与参数之间使用 & 连接符连接。https://gorest.co.in/public-api/users/?name=kalacloud.com&gender=male当然，我们可以直接在 Postman 的 Params 中直接填写 KEY - VALUE让 Postman 帮我们生成，然后点击「Send」可以看到 API GET 调取了我们设定的两个 VALUE 值的 data 信息。特别提示，你可以点击右上角的「Bulk Edit」进行参数的批量编辑Params 批量编辑模式。四. 在 Postman 中发送 POST 请求这一节我们讲 POST 请求，POST 请求和 GET 请求最大的区别是 GET 请求仅使用只读形式读取数据，而 POST 请求会修改服务器中的数据，比如创建新用户，创建用户信息，上传图片等操作都是用 POST 完成的。1. POST 请求前，使用 Postman 对 API 鉴权POST 不再仅仅是读取数据，会涉及到对数据的写入，这种敏感的操作，一定会涉及到账号鉴权操作。GoRest 模拟 API 工具使用 HTTP Basic Authentication 鉴权方式这种鉴权方式可以直接放在 Headers 中以 Key - Value 的形式进行验证，本教程演示稍微复杂点的 OAuth2 鉴权方式，好让大家学到更多。首先在 GoRest 注册账号，然后点击顶部的「Rest Console」进入控制页，我们可以在这个页面获得自己的 Auth Token，这段就是 API 用于鉴权的密钥。在 Postman 请求页的 Auth 标签中，选择鉴权类型（Type）为 OAuth 2.0，然后在 Access Token 中填写网页上的这段 Value 后，在请求类型中选择 POST，输入 API 请求地址https://gorest.co.in/public/v1/users然后点击「Send」如果 HTTP 响应代码返回 422，表示鉴权成功，只是没有填写数据。特别提示： 在本案例中使用的GoRest API 是先检测 Token 是否正确，之后在检测 body 等信息。也有先检测提交信息是否正确再鉴权的 API，这取决于 API 的开发者怎么设定，那么这种情况 422 就不代表鉴权成功。所以谨慎起见，所有 4XX 开头的响应代码，你都可以理解为出现了错误。如果返回 401 说明鉴权验证失败（Authentication failed）你的 Token 可能复制错了，请检查后再试。鉴权成功后，下一节，我们通过 API POST 请求将第一组数据写入服务器数据库。（2）用 Postman 发出第一个 POST 请求上一节，我们通过 API Token 鉴权成功，下面我们在请求页设置 POST 请求信息。1.请求命令选择 POST，然后在地址栏填写 API 地址：https://gorest.co.in/public/v1/users2.在「Auth」标签页根据本文上一小节设置 API 鉴权 Access Token3.在 Body 中选择 raw 然后选择 JSON 格式。4.将下列 JSON 代码填入编辑框，此为本次 POST 发送给服务器的内容。5.我们将注册一个新用户，用户信息包含在这个 JSON 文本里。{ "name": "kalacloud", "gender": "Male", "email": "JiangChuan@kalacloud.com", "status": "Active" }最后，点击「Send」，发送 POST 请求。我们可以看到 API 返回信息，已经在服务器中注册好新用户，新用户 ID 为 2151，并一起返回了我们刚刚提交的用户注册信息。如果你也看到了类似的返回结果，那么恭喜，你的第一个 POST 请求被服务器成功接受，你通过 API 在服务器上注册了一个新用户。扩展阅读：最好的 6 个免费天气 API 接口对比测评五. 用 Postman 发送第一个 PUT 更新请求PUT 请求一般用于更新服务器已有资源，如果服务器中没有对应的资源，那么 PUT 会创建相应的资源（特别提醒：虽然 PUT 有创建新资源的功能，但是否能创建成功，最终取决于你调用的 API 是否支持此功能）打开你的 Postman 我们来创建一个 PUT 请求。点击「+」号，新建一个请求页请求类型选择「PUT」根据第四节我们使用 POST 请求创建的资源 ID 为 1475 ，又根据 GoRest API 的文档得知，修改资源的 API 地址为 https://gorest.co.in/public/v1/users/{{ID}} ，所以我们要使用 PUT 修改 ID 为 1475 资源的请求地址应该写：https://gorest.co.in/public/v1/users/1475选择在 Body 标签中填写 JSON 格式的资源修改信息。我们将 1475 中的邮箱由 JiangChuan@kalacloud.com 修改为 Hi@kalacloud.com，所以我们在 Body 中填写以下代码。{ "name": "kalacloud", "gender": "Male", "email": "Hi@kalacloud.com", "status": "Active" }选择 Auth 标签，进行 API 鉴权，鉴权方法详见本文第四节《使用 Postman 对 API 鉴权》点击 「Send」发送 PUT 请求如上图所示，可以看到红4位置 响应代码返回 200 ，这说明 PUT 请求已经执行成功。返回的 Body 信息中，email 字段已经更新为 Hi@kalacloud.com六. 用 Postman 发送第一个 PATCH 更新请求PATCH 请求一般用于服务器资源的部分更新，它相对于 PUT 提交的数据更少，不用提整个数据，只需要提交需要修改的字段即可。有关 PUT 和 PATCH 的更多区别，可查看本文第七节。打开你的 Postman 我们来创建一个 PATCH 请求。点击「+」号，新建一个请求页请求类型选择「PATCH」根据第四节我们使用 POST 请求创建的资源 ID 为 1475 ，又根据 GoRest API 的文档得知，修改资源的 API 地址为 https://gorest.co.in/public/v1/users/{{ID}} ，所以我们要使用 PATCH 修改 ID 为 1475 资源的请求地址应该写，到这里都和 PUT 请求修改资源的方法一样。https://gorest.co.in/public/v1/users/1475选择在 Body 标签中填写 JSON 格式的资源修改信息。上一节我们已经将 ID 为 1475 资源的邮箱改为 Hi@kalacloud.com ，接着我们用 PATCH 请求把这个邮箱改为 HelloWord@kalacloud.com{ "email":"HelloWord@kalacloud.com" }选择 Auth 标签，进行 API 鉴权，鉴权方法详见本文第四节《使用 Postman 对 API 鉴权》点击 「Send」发送 PATCH 请求如上图所示，可以看到红4位置 响应代码返回 200 ，这说明 PATCH 请求已经执行成功。返回的 Body 信息中，email 字段已经更新为 HelloWord@kalacloud.com七. PUT 和 PATCH 的区别在 HTTP 协议中，PUT 和 PATCH 都是用于更新服务器资源的命令，但他们有着不同的格式和用途。PUT 请求：一般用于更新服务器已有资源，如果服务器中没有对应的资源，那么 PUT 会创建相应的资源（特别提醒：虽然 PUT 有创建新资源的功能，但是否能创建最终取决于你调用的 API 是否支持此功能）PATCH 请求：用于局部更新服务器现有资源，它不用像 PUT 更新资源中的一点点也要提交所有字段信息，PATCH 更新哪个字段就提交哪个字段的更新信息即可。举例说明PUT 和 PATCH 的区别：同样是更新资源中的 Email 信息，PUT 需要带上资源中的所有信息，然后在更新 （上图）而 PATCH 则仅需要提交更新部分，即仅提交邮箱信息即可 （下图）那么，如果 PUT 像 PATCH 一样仅提交资源的局部信息会发生什么呢？会 400 报错。PUT 不论修改多少，必须把修改资源的全部字段写全，否则会 400 报错。扩展阅读：最好用的 5 款 React 富文本编辑器八. 用 Postman 发送第一个 DELETE 删除请求我们在上文讲了获取(GET)，创建(POST)，更新(PUT / PATCH) 请求，接着我们来说说删除(DELETE) 请求。顾名思义，DELETE 请求执行可删除整个资源。我们来直接实践一次你就明白了。打开你的 Postman ，跟随本教程一起创建一个 DELETE 请求。点击「+」号，新建一个请求页请求类型选择「DELETE」我们来把上文刚刚创建的 ID 为 1475 的资源彻底删掉。根据 GoRest API 的文档得知，删除资源的 API 请求地址为 https://gorest.co.in/public/v1/users/{{ID}} ，所以我们要使用 PATCH 删除 ID 为 1475 资源的请求地址应该写：https://gorest.co.in/public/v1/users/1475选择 Auth 标签，进行 API 鉴权，鉴权方法详见本文第四节《使用 Postman 对 API 鉴权》点击 「Send」发送 DELETE 请求，删除对应的资源。如上图所示，提交 DELETE 请求后，响应代码为 204 ，返回的 body 为空，删除成功。特别提示：在 GoRest 的文档说明中，特别说了 DELETE 删除返回值的状态。API 返回状态具体是怎么样的，还要看 API 的开发者是如何约定的，并非只有返回 200 才是成功的。扩展阅读：PAW 使用教程 - 手把手教你 API 接口测试九. Postman 中的全局变量、环境变量、集合变量的设置1. Postman 设置变量的意义Postman 里有多种变量，我们可以把某些重要的值抽象出来变成变量，方便我们做场景 / 条件切换。比如，我们可以把 baseURL 抽出来，在环境变量里设置「生产环境变量」和「测试环境变量」，之后，我们只需要切换标签即可快速将数据从一个环境切换到另一个环境中，非常方便。2. Postman 常用的三种变量形式全局变量：全局变量一旦声明，即可应用到 Postman 中所有测试的 API 中。任何请求都可以直接使用全局变量，它的作用域是全局的。环境变量：Postman 的环境变量可以理解为一组选项，当这组环境变量选项被选中时，才会生效，特别适合「生产环境」和「测试环境」之间的切换等应用场景。集合变量：集合变量是针对集合（Collections）生效的，一个集合下可能有 N 条 API 请求，集合变量可以一次修改集合下的所有变量数值。以上三种变量的作用域从大到小为 全局 > 集合 > 环境，当三个变量形式同时作用于一个 API 测试条时，Postman 会优先使用最小作用域变量。3. 如何在 Postman 设置全局变量与环境变量新建一个请求页，点击右上角的「小眼睛」进入变量设置页。页面上方为「环境变量」，我们点击编辑设置环境变量名为「卡拉云_API 测试环境」VARIABLE 设置为 baseURL，INITIAL VALUE 设置为 https://gorest.co.in ，保存之后我们就可以使用 {{baseURL}} 变量来替代 API URL 了。页面下方为「全局变量」，VARIABLE 设置为 kalacloud_id，INITIAL VALUE 设置为 2312 (2312 为 GoRest 中的一个已存在的用户信息 ID)，保存后我们就可以使用 {{kalacloud_id}} 变量来替代 ID 值了。我们来一起测一下刚刚设置好的「全局变量」和「环境变量」是否生效。新建一个 GET 请求页，地址栏填入：{{baseURL}}/public/v1/users?id={{kalacloud_id}}点击「Send」返回响应代码为 200 说明请求成功，返回的 Body 信息是 ID 为 2312 的用户信息，说明全局和环境变量已生效。4. 如何在 Postman 设置集合变量集合变量是指应用在整个集合所有请求中的变量，集合变量优先与其他变量应用与请求，也就是说如果有集合变量，那么其他变量与集合变量相冲突的化，优先执行集合变量。集合变量很适合临时修改整个集合中的变量，来针对集合进行测试。打开你的 Postman，我们一起操作一遍。选中一个集合，点击集合标题右侧「...」选择编辑。进入集合设置页，选择 Variables 设置集合变量此时，整个集合下所有请求页，都应用了此集合变量。十. 如何使用 Postman Pre-request scripts 预请求脚本Pre-request scripts 预请求脚本是在 API 请求之前执行的脚本，我们可以临时更改请求的某些变量。一般预请求脚本有这么两种常见的应用场景。(1)设置动态请求头信息。 (2)设置动态请求参数信息。比如，当我们要请求一个与时间有关的资源时，我们可以在预请求脚本中添加 timestamp 字段，这是一个动态值，我们可以通过前置请求脚本来实现。举例说明： 比如我们要在 header 中包含一个时间戳，我们可以这样操作在 Pre-request scripts 中添加获取时间戳的代码pm.environment.set("TimeStampHeader",new Date());在 header 中添加预脚本中的变量 TimeStampHeader 当请求时，Postman 会先执行预脚本获取时间戳，然后再将时间戳赋予到 header 中 timestamp 值中。接着我们来执行这条 GET 请求，打开控制控制台，在控制台中，可以看到 Request Headers 中包含我们刚刚设置的时间戳 「timestamp」特别提示：有关控制台的讲解，在本教程第十二节。附：常用的 Pre-request scripts ：获取变量//通用语法 postman.getGlobalVariable("key"); //获取全局变量 postman.getEnvironmentVariable("key"); //获取环境变量 //postman native app 特有语法 pm.globals.get("key"); //获取全局变量 pm.environment.get("key"); //获取环境变量设置变量//通用语法 postman.setGlobalVariable("key","value"); //设置全局变量 postman.setEnvironmentVariable("key","value"); //设置环境变量 //postman native app 特有语法 pm.globals.get("key","value"); //设置全局变量 pm.environment.get("key","value"); //设置环境变量清除变量//通用语法 postman.clearGlobalVariable("key"); //清除全局变量 postman.clearEnvironmentVariable("key"); //清除环境变量 //postman native app 特有语法 pm.globals.unset("key"); //清除全局变量 pm.environment.unset("key"); //清除环境变量将数组、嵌套对象存储到全局&环境变量中//将数组储存到环境变量中 var array = [1, 2, 3, 4]; postman.setEnvironmentVariable("array", JSON.stringify(array)); //将嵌套对象储存到环境变量中 var obj = { a: [1, 2, 3, 4], b: { c: 'val' } }; postman.setEnvironmentVariable("obj", JSON.stringify(obj)); //从环境变量中获取数组对象 var array = JSON.parse(postman.getEnvironmentVariable("array")); //从环境变量中获取嵌套对象/json对象 var obj = JSON.parse(postman.getEnvironmentVariable("obj"));十一.如何创建 Postman Tests 测试脚本 - Postman 断言功能在 Postman 中 Pre-request 和 Tests 是两兄弟，一个是在调用前执行（Pre-request），一个是在调用后执行（Tests），我们可以在 Tests 中使用 JavaScript 校验代码协助我们验证结果，可以说 Tests 是 Postman 的断言功能1.Postman Tests 断言的实际应用Postman 状态类断言1.我们首先创建一个 GET 请求，然后点击 Postman 中 Tests 标签，进入断言设置。2.我们可以在右侧已经预设好的断言代码，我们先点击「Status code: Code is 200」，可以看到预设的代码直接写入编辑框。这段代码的意思是，如果执行调用，服务器返回响应代码为 200 时，判断为 PASS 即调用成功。3.点击「Send」执行 GET 请求，返回的断言可以在 Test Results 中看到结果。4.绿色的 PASS，说明服务器返回的响应代码为 200 ，调用成功。Postman 结果比较类断言我们再添加一条带有变量的 JavaScript 断言设置，比较预期结果和实际返回结果之间是否一致。我们刚刚 GET 请求了 ID 2312 的用户信息，其中 name 的值为 kalacloud那么我们接下来写一个 JS 判断预期与返回结果是否一致。即预期为 name 的值为「kalacloud」，写断言自动判断返回结果的name值是否也是「kalacloud」1.在 Tests 选项卡右侧选择「Response body:JSON value check」，我们来检测 ID 为 2312 的返回值中，name 的值是否为 kalacloud2.我们将「Your Test Name」替换为「检查 ID 为 2312 的 name 返回值为 kalacloud」让这条测试的名字直接反应出我们想测试的内容。3.使用jsonData.data[0].name代替jsonData.value ，即检测第一个返回值中的 name 的 value4.检测返回值：在 to.eql() 中输入待检测值 "kalacloud"，即需要检测的 text。5.代码如下，你可以复制并根据你的情况简单修改，然后在 Postman 中，跟随教程一起测试。特别注意： 这里的 ID = 2312 是我这里的情况，你需要根据你的情况进行相应修改。pm.test("Status code is 200", function () { pm.response.to.have.status(200); }); pm.test("检查 ID 为 2312 的 name 返回值为 kalacloud", function () { var jsonData = pm.response.json(); pm.expect(jsonData.data[0].name).to.eql("kalacloud"); });十二. 如何在 Postman 中使用控制台控制台可以非常直观的显示当前调用的一系列信息，我们可以在「菜单 → view → Show Postman Console」或者点击 Postman 左下角的「Console」图标，打开控制台。我们可以在 Tests 测试脚本中加入 console.log 来显示我们需要在控制台显示的调用信息。如上图，我们在 Test 脚本中加入以下代码console.log("本次测试 id 值为",pm.variables.get("kalacloud_id"));可以显示隐藏在变量下面的具体变量值，方便我们测试时，进行相应的判断。十三. 如何使用 Runner 批量执行测试，批量更换变量测试当我们有一组 API 且这一组之间相互关联的关系，使用手动测试效率非常低。这时，我们就要用到 Postman 的批量执行（Runner）功能，Runner 不仅可以批量执行 API 调用，还可以批量更换变量。掌握此方法，大幅度提升 API 测试效率。打开你的 Postman ，跟随本教程一起操作一遍吧。本次批量 API 测试，我们先导入一个 CSV 文件，文件中包含四组等待新建的用户信息，将 CSV 文件导入 Runner 中待用。新建 POST 调用页，在 Body 里写上创建用户所需信息，所有值使用变量替代，这些变量将从 CSV 中读取。新建 GET 调用页，使用 email 作为查询 KEY 进行查询，如果上一步 POST 执行成功，那么 GET 就能成功查询到新建用户对应的 email，查询到表示 POST 创建成功。在「卡拉云kalacloud.com批量测试」这个集合中设置 Tests 中设置全局断言，每当一个调用执行完毕时，进行 Tests 一次判断。pm.test("Status code is 200", function () { pm.response.to.have.status(200); });打开「卡拉云kalacloud.com批量测试」合集的「Run Collection」的设置页Iterations：这是测试组，我们 CSV 文件中有 4 组测试条目Delay：延迟，一般填 2000 毫秒，太密集的请求，容易被服务器拒绝Data：这里选择我们刚刚的 CSV 文件：kalacloud_users.csv 导入测试数据点击 RUN 蓝色按钮开始执行批量测试从上图可以看到，Postman 按顺序提交了 POST 请求和 GET 请求，并连续测试了从 CSV 文件导入的 4 组数据。一键批量测试，相当高效。十四. Postman 接口测试总结本文从 GET / POST 功能开始讲起，然后详细讲解了 API 接口自动化测试所需要的几个功能特点，全局/环境/集合变量设置，测试断言，测试集合等，以及最后的自动化测试工具 Runner。这些功能共同构成了 Postman API 接口自动化测试功能。接着推荐一下卡拉云，卡拉云是一套低代码开发工具，支持多种数据库及 API 接入。你不仅可以在卡拉云中测试 API ，还能直接把返回的结果映射到组件上，不用写一行代码，只需简单拖拽即可搭建属于你自己的后台工具。上图为使用「卡拉云」调用金数据 API ，然后将返回结果直接映射到表格组件中。你仅需一步，即验证了 API 可用性，又直接把你正在搭的工具给作出来了。立即试用卡拉云，一分钟快速搭建属于你自己的 API 工具。扩展阅读：MySQL 时间戳用什么类型 - MySQL 时间函数详解最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件如何在 MySQL 中导入和导出 CSV / Excel 文件
-
发表了文章 2021-12-17
最好用的 5 款 React 富文本编辑器
本文首发：最好用的 5 款 React 富文本编辑器 - 卡拉云富文本编辑器常用于网络上各种形式的内容展示，从简单的静态博客到复杂的内容管理系统。它应用于多种应用程序，如博客、文章、列表以及更强大的界面 —— 电商网站商品详情和博客上的。然而，从这么多功能各异的编辑器中挑选出一个合适的并不容易。我测评了 5 款 React 富文本编辑器，比较了他们编辑器的核心功能， 希望我的测评可以帮你找到最合适你应用场景的编辑器。如果你完全不会前端，也不用担心，可以使用卡拉云，仅需简单拖拽即可生成「富文本」编辑器，卡拉云帮你快速搭建属于你自己的应用程序，详见本文文尾。1.Draft.js — 能够满足基础需求的免费编辑器Draft.js 是 Facebook 为了 React 而开发的一个 React.js 开源框架。 它是健壮、可扩展及可定制的，在 React 开发者中非常受欢迎。Draft.js 提供了管理各项配置的工具，包括事件触发器上的编辑器样式和单个文本实体（如标题和块引用）的块样式。对于在编辑器中创建的内容，我们希望将其转换为便于在页面上显示的 HTML。一些库如 draft-convert 和 draftjs-to-html 可用于转换这些数据。优点易于理解的扁平化内容模型。构建在 Draft.js 上的高度可扩展及可定制的插件。自 2016 年以来，由 Facebook 支持的庞大且不断增长的开发者社区提供了许多的教程和支持。缺点缺乏官方的移动端支持。OSX 自定义键绑定的问题。当需要表格这样复杂的内容结构时，编辑器将会变慢，代码也会变得复杂。如果你是初学者且希望找到一个能满足基础需求的文本编辑器，试试 Draft.js 吧。使用 npm 或 yarn 安装：npm install draft-js yarn add draft-js 2.Slate.js — 支持复杂内容格式的免费编辑器Slate.js 是另一款超好用的 react 富文本编辑器，可用于构建优雅、功能强悍的编辑器如 Medium Editor、Google Docs 等。优点可使用插件进行扩展。输出 JSON 格式的内容，更容易与其他模块集成。嵌套文档模型支持更复杂的内容结构，如表格、分页符和其他自定义功能。缺点操作编辑器控件需要 UI 设置。仍处于 beta 阶段，在生产环境下站点的实践和信赖上可能会令人失望。如果你希望找到带有自定义功能的内存优化的编辑器，Slate.js 是最佳的选择。使用 yarn 或 npm 安装：yarn add slate slate-react npm install slate slate-react3.Quill.js — 带有主题的免费 API 的文本编辑器Quill.js 是一个快速、轻量级的富文本编辑器。它支持跨平台和跨浏览器，其主题可扩展、可配置，是你在诸多平台的现代浏览器上能找到功能流畅的最佳选择。优点易于设置和使用。跨平台和浏览器支持。预设编辑器样式的主题支持。输出 HTML 格式的内容，无需像其他编辑器一样解析。缺点有限的定制功能。较少的更新和补丁。可能的 XSS 安全漏洞。使用 yarn 或 npm 安装:npm install react-quill yarn add react-quill4.TinyMCE — 功能丰富的商业性编辑器TinyMCE 是一款非常强大的 WYSIWYG 富文本编辑器，具有高度的可定制、可扩展性。如果你预算充足同时希望找到一款没有后顾之忧的编辑器，那么就是它了。优点自动链接检查器。支持实时协作。支持提及和评论。支持增强的媒体嵌入。支持高级表格和复杂的内容格式。缺点需要付费订阅才能使用其高级功能。做决定前你可以先试用免费版本， TinyMCE 提供了详尽的技术文档，从如何安装到功能介绍，写的非常清晰。5.KendoReact — 可直接用于商业性产品的编辑器KendoReact 是专业的 UI 组件和数据可视化库，旨在帮助你使用 React 更快地设计和构建业务应用程序。优点闪电般的性能。高度的可定制。可直接用于开发应用程序。缺点价格偏贵。与免费的富文本编辑器相比，Kendo 有许多非常棒的功能。如果你对文本编辑器有极具竞争力的业务性需求，同时也在寻找一个日后也没有麻烦的编辑器， 那么就是 KendoReact 了。6.TipTap — 样式很有调调的免费编辑器（多送一款编辑器测评）TipTap 是一个没有提供用户界面的富文本编辑器。它允许你完全地自定义构建任何想要的界面，同时也支持实时的协作。优点可定制的 UI。支持键盘快捷键。支持移动端。协同编辑。缺点依旧处于测试阶段。如果你在寻找功能丰富、外观现代的免费编辑器，试试 TipTap 吧：## install with npm npm install @tiptap/core @tiptap/starter-kit ## install with Yarn yarn add @tiptap/core @tiptap/starter-kit总结本文比较了 6 种 React 富文本编辑器的优缺点，我们可以根据自己工作中的实际场景来对编辑器进行挑选。如果你想搭建自己的后台工具，但你对前端并没有那么熟悉，可以考虑使用卡拉云，卡拉云内置了富文本编辑器，完全不用你操心前端，只需要简单拖拽即可立即在页面上生成富文本编辑器。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天，欢迎免费试用卡拉云。卡拉云可根据公司工作流需求，轻松搭建数据看板或其他内部工具，并且可一键分享给组内的小伙伴。更多数据库相关教程可访问 卡拉云 查看。 扩展阅读：MySQL 时间戳用什么类型 - MySQL 时间函数详解最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件如何在 MySQL 中导入和导出 CSV / Excel 文件如果觉得本文对你有帮助，还请点个赞。欢迎评论区一起讨论。
-
发表了文章 2021-12-17
最好用的七大顶级 API 接口测试工具
本文首发：最好用的七大顶级 API 接口测试工具 - 卡拉云现在 API 接口已经成为软件开发重要的组成部分，由于 API 并没有 GUI 图形界面，无法直观的对接口进行测试，所以对于前后端开发来说，找到一套趁手的工具对 API 接口进行测试，了解开发的程序是否符合预期十分重要。面对批量的 API，手动测试变得非常低效，自动化 API 接口测试工具，帮我们提高测试效率的同时，更能帮我们保证程序的稳定和安全性。本文介绍 7 款顶级 API 接口测试工具。在最后加赠介绍一款新一代低代码开发工具 - 卡拉云，不用懂前端，也能一边测 API 一边把应用程序搭建出来，详见文尾。测试金字塔 - API 接口测试的重要性与其让测试组东搞西搞，不如让他们直接测 API ，ROI 会更高一些。下图为展示了 API 在整个软件中的重要性。在测试 API 接口时，应该把测试重点放在调用 API 方式上，因此在整个测试过程中，我们应该检查 API 接口在不同条件下是否返回正确的值。API 返回的值，通常是成功、失败的状态、某种数据或对另一个 API 调用。手动测试虽然也行，但大家还是喜欢使用自动化测试的方法对 API 进行测试，批量的效率和手动比，根本不是一个数量级。我们可以通过趁手的 API 接口工具，对 API 接口进行功能测试、负载测试、安全测试、可靠性测试等。对 API 接口测试的重要性有了认识后，我们再来谈谈七大接口测试工具吧。1.Postman 接口测试工具Postman 的创始人 Asthana，在 2012 年发布了 Postman 第一个版本，当时只是一个简单的 API 交互工具，现在 Postman 已经是一家拥有 50 万家企业 1700 万开发者的测试工具了。Postman 的主要优势是它的易用性，无需注册，简单设置就能马上测起来。Postman 友好的测试界面，对于手动测试以及探索性测试来说，非常适用。最棒的是你还可以和同事共享测试数据，一键分享。Postman 特点（Postman 下载地址）Postman 是 node.js 开发的，提供的 API 也都是 Javascript，所以想要用好它，最好能熟悉 Javascript 的基本语法。Postman 免费功能的范围非常大，基本我们能用到的常用功能，都包含着免费版里了。适用于 Windows、Mac OS、Linux 和 Chrome（Postman 插件起家）支持 RAML 和 Swagger 格式支持运行、测试、记录和监控功能允许用户与团队共享信息，这个功能非常实用。2.PAW - Mac 原生接口测试工具PAW 可以说是 Mac 下最棒的 API 测试工具了，Mac 下原生 HTTP 客户端，丝滑顺畅。PAW 对 GraphQL 完美支持，虽然 PAW 仅支持 Mac (update：Win 和 Linux 已经出了 Beta 版)，但它提供的免费功能在其他软件上都是收费的，是不是感觉有赚到。PAW 的交互体验和易用性方面完全可以和交互体验著称的 Postman 相比较。其实大多数 API 测试工具最大的问题是交互体验杂乱。PAW 一定有一位优秀的产品经理，只要你稍微用一用，就能感觉到它在产品设计和用户体验上的用心。PAW 特点（PAW 下载地址）快速调用 API 接口，可以按照不同参数排序和创建组等方法来测试PAW 对 Basic Auth、OAuth1 & 2、Amazon S3 有很好的支持允许连接请求 Cookie原生 Mac 软件，丝般顺滑开箱即用，可自定义扩展3.SoapUI - 可直连数据库的 API 接口测试工具在开源 API 测试工具中，SoapUI 绝对能排到前五，它是 REST 和 SOAP API 比较好的自动化测试工具，分免费版和高级版，但即使是免费版，也可以无需一行代码即可创建 Web server 模拟。SoapUI 允许你使用 Groovy 脚本编写 Java 风格的代码并处理对 Web server 对响应和请求。SoapUI 甚至有简单的数据库管理工具直连数据库的功能，我们可以直接使用 SoapUI 连接数据库确认内容是否被修改正确，别小看这么个功能，在某些场景下非常好用。接着说说 SoapUI 的缺点，我最不喜欢的地方就是它文档写的稀烂，各种高级功能都需要自己在 Google 里搜索，然后看其他使用者的教程才能搞明白。另外 SoapUI 有些不稳定，动作稍微复杂点，就会导致程序崩溃。SoapUI 特点（SoapUI 下载地址）支持 REST、GraphQL、SOAP、JMS 和 JDBC 测试仅需要点点鼠标，即可快速创建接口测试支持数据库访问可脚本复用，负载测试和安全扫描都可以在功能测试中保持脚本以便在此调用允许 Groovy 高效地创建自定义代码从文件、数据库和 Excel 中提取数据，因此可以模拟 User 与 API 的交互支持异步测试数据驱动测试4.Katalon Studio - 自动化 API 测试工具选择奖Katalon Studio 2015 年发布的第一个版本，一路迭代，逐渐专注在自动化测试这个领域。它被 Gartner（美国最具权威的 IT 研究机构） 评为 2020 年软件自动化测试客户端选择奖。Katalon 是最好的负载 API 测试工具之一，无需任何编程经验也可以进行 API 测试。它可以在 web 端，手机、Mac、Linux、Win 上使用，非常彻底的跨平台软件。Katalon 使用 Groovy 语言对 API 接口进行自动化测试，它同时支持 RESTful 和 SOAP，可通过 DELETE、PUT、GET、POST 等多种类型的命令进行请求测试。用户界面有些古早，不过稍微习惯一下还算顺手。Katalon Studio 特点（Katalon Studio 下载地址）支持从 Swagger（2.0、3.0）、Postman、WSDL 和 WADL 导入测试支持 AssertJ跨平台支持支持 SOAP 和 REST 请求各种类型的命令和参数可用于自动化和探索性测试预设以及也可自己定制代码模版支持 CI/CD 集成5.JMeter - 顶级 API 负载测试工具Jmeter 是顶级 API 负载测试开源工具，它是纯 JAVA 跨平台工具，支持 Windows、Linux、Mac。Jmeter 设计之初用于做性能测试的，但现在大家更喜欢用它做 API 接口功能测试。它支持常见的各种接口，如 HTTP(S)、JDBC、JAVA、WebService、FTP 等。支持可视化测试，测试结果生成形式多样，图表、表格、树状图、日志等形式。JMeter 可以模拟多用户并发线程，创建压力测试对 Web 程序进行测试。最棒的是 JMeter 可以集成Bean Shell&Selenium自动化测试。JMeter 特点（JMeter 下载地址）开源：Jmeter 开源免费，允许二次开发。用户体验良好：界面直观友好，上手就用纯 Java 开发，跨平台可处理 CSV 文件测试结果多样，支持图表、表格、树状图、日志等形式。纯绿色软件，无需安装搞扩展性，可自由编写自己的测试需求无需安装，快速启动。6.Karate DSL - API 接口测试后起之秀Karate DSL 算是 API 接口测试工具的后起之秀，相对于 Jmeter，Postman，Rest-Assured 来说 Karate 有更好的易用性，无需任何编程技能，也可以用它来实现 API 自动化测试。Karate 使用 Cucumber 推广的 BDD 语法，通俗易懂又简洁。Karate DSL 特点（Karate DSL 下载地址）构建在 Cucumber-JVM 基础之上。支持所有类型的 REST、SOAP 请求。可像 Java 工程一样运行测试并生成报告。编写测试代码不需要任何 Java 知识。即便毫无编程经验的同学，也能轻松上手。支持 XML 和 JSONGraphQL 测试友好7.REST-Assured - 轻量级 REST API 客户端Rest-Assured 是一套由 Java 实现的 REST API 测试框架，它是一个开源工具也是一个轻量级的 REST API 客户端，可以直接想服务器端发起 HTTP 请求进行测试，测试语法非常简洁，支持发起 POST、GET、PUT 等请求。支持 XML 和 JSON。REST-Assured 特点（REST-Assured 下载地址）与 Serenity 自动化框架无缝集成支持 BDD Given / When / Then 的语法支持 xpath、jsonpath、gpath 等多种解析方式自动化测试友好支持 XML、JSON 结构化解析对 Spring 支持比较全面8.卡拉云 - 可接入 API 的低代码开发工具（加赠阅读）卡拉云是一套低代码开发工具，支持多种数据库及 API 接入。你不仅可以在卡拉云中测试 API ，还能直接把返回的结果映射到组件上，不用写一行代码，只需简单拖拽即可搭建属于你自己的后台工具。上图为使用「卡拉云」调用金数据 API ，然后将返回结果直接映射到表格组件中。你仅需一步，即验证了 API 可用性，又直接把你正在搭的工具给做出来了。立即试用卡拉云，一分钟快速搭建属于你自己的 API 工具。扩展阅读：MySQL 时间戳用什么类型 - MySQL 时间函数详解最好用的七大顶级 API 接口测试工具最好用的 5 款 React 富文本编辑器如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件如何在 MySQL 中导入和导出 CSV / Excel 文件如果觉得本文对你有帮助，还请点个赞。欢迎评论区一起讨论。
-
发表了文章 2021-12-05
MySQL「 Every derived table must have its own alias」错误修复方法
本文首发：《MySQL「 Every derived table must have its own alias」1248 错误修复法》在写带有子查询或者在查询时产生临时表的查询时，可能会出现这个错误：ERROR 1248 (42000): Every derived table must have its own alias意思是「每一个派生出来的表都必须给它命名一个自己的别名」我们看个例子：假设有一张「顾客购买记录」的表 - kalacloud_purchases 记录了顾客在商店购物的信息。我们要写个查询，查看哪些客户在多个商店买过东西：SELECT DISTINCT customer_id, SUM(1) FROM ( SELECT DISTINCT customer_id, store_id FROM kalacloud_purchases) GROUP BY customer_id HAVING 1 < SUM(1);运行后，可以看到出现 1248 错误：Every derived table must have its own alias在这段报错代码中：FROM ( SELECT DISTINCT customer_id, store_id FROM kalacloud_purchases)这段命令会先查 kalacloud_purchases 表，然后生成一张新的临时表，如果这个临时表没有命名，就会导致 1248 错误。我们只需要加上 「as 临时表别名」即可修复错误加上「AS customer」别名， 这样就解决了这个问题。使用「卡拉云」搭建数据看板我们可以在命令行中直接执行 SQL 对需要的数据进行查询，不过有时候一些运营数据，分析数据需要周期性的反复查询，总是复制粘贴代码非常麻烦。有时我们还需要和各部门协同，将查询好的数据分享给合作组。这种场景下，你可以试试卡拉云。卡拉云可以快速搭建数据看板和数据后台，只要你会写 SQL ，完全不用懂前端也可在 5 分钟内搭建一套根据自己需求设计的数据看板，还可以做成数据查询系统，一键分享给协作组的同学使用，再也不用担心自己沦为人肉查询机。卡拉云不仅可以像命令行一样灵活，还可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天。卡拉云可快速接入的常见数据库及 API，可根据公司工作流需求，轻松搭建数据看板，并且可分享给组内的小伙伴共享数据，仅需拖拽一键生成前端代码，简单一行代码即可映射数据到指定组件中。卡拉云可直接添加导出按钮，导出适用于各类分析软件的数据格式，方便快捷。下图为使用卡拉云在 5 分钟内搭建的「优惠券发放核销」后台，仅需要简单拖拽即可快速生成前端组件，只要会写 SQL，便可搭建一套趁手的数据库工具。立即开通卡拉云，搭建属于自己的数据后台工具吧。有关 MySQL 教程，可继续拓展学习：如何远程连接 MySQL 数据库，阿里云允许外网连接教程MySQL 时间戳用什么类型 - MySQL 时间函数详解MySQL 中如何实现 BLOB 数据类型的存取，BLOB 有哪些应用场景？如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份MySQL 触发器的创建、使用、查看、删除教程-六种情况实战如何将 MySQL / MariaDB 的查询结果保存到文件MySQL 分组查询实战 如何查询每组最第一条、最后一条记录，单多字段查询、分组筛选、最大小值排序
-
发表了文章 2021-12-05
MySQL 配置文件 my.cnf / my.ini 逐行详解
本文首发：MySQL 配置文件 my.cnf / my.ini 逐行详解 - 卡拉云MySQL 配置文件的意义充分理解 MySQL 配置文件中各个变量的意义对我们有针对性的优化 MySQL 数据库性能有非常大的意义。我们需要根据不同的数据量级，不同的生产环境情况对 MySQL 配置文件进行优化。Windows 和 Linux 下的 MySQL 配置文件的名字和存放位置都是不同的，WIndows 下 MySQL 配置文件是 my.ini 存放在 MySQL 安装目录的根目录下；Linux 下 MySQL 配置文件是 my.cnf 存放在 /etc/my.cnf、/etc/mysql/my.cnf。我们也可以通过 find 命令进行查找。另外要注意的是，通过 rpm 命令安装的 MySQL 是没有 /etc/my.cnf 文件的，如果需要配置 MySQL，可以在/etc/my.cnf新建配置文件，然后把本文的配置信息复制到文件中即可。本教程将带领大家逐条解析最新的 MySQL 8.0 的配置文件，争取搞懂每一条变量。当然，我们理解了变量的意义外，更重要的是针对自己的数据库外部环境，在实践中进行微调，以达到优化性能的目的。提示：你可以使用 Ctrl+F 快速定位。 MySQL 配置文件详解[client][mysqld_safe][mysqld]Query Cache MySQL 错误日志设置 慢查询记录 全局查询日志从属线程变量安全变量MyISAM 变量MEMORY 变量InnoDB 变量 WSREP 配置MySQL 配置文件详解文件位置: Windows、Linux、Mac 有细微区别，Windows 配置文件是 .ini，Mac/linux 是 .cnf[Windows] MySQL\MySQL Server 5.7\my.ini [Linux / Mac] /etc/my.cnf /etc/mysql/my.cnf 当然我们也可以使用命令来查看 MySQL 默认配置文件位置mysql --help|grep 'cnf'[client]客户端设置。当前为客户端默认参数port = 3306默认连接端口为 3306socket = /tmp/mysql.sock本地连接的 socket 套接字default_character_set = utf8设置字符集，通常使用 uft8 即可[mysqld_safe]mysqld_safe 是服务器端工具，用于启动 mysqld，也是 mysqld 的守护进程。当 mysql 被 kill 时，mysqld_safe 负责重启启动它。open_files_limit = 8192此为 MySQL 打开的文件描述符限制，它是 MySQL 中的一个全局变量且不可动态修改。它控制着 mysqld 进程能使用的最大文件描述符数量。默认最小值为 1024需要注意的是这个变量的值并不一定是你在这里设置的值，mysqld 会在系统允许的情况下尽量取最大值。当 open_files_limit 没有被配置时，比较 max_connections*5 和 ulimit -n 的值，取最大值当 open_file_limit 被配置时，比较 open_files_limit 和 max_connections*5 的值，取最大值user = mysql用户名log-error = error.log错误 log 记录文件[mysqld]服务端基本配置port = 3306mysqld 服务端监听端口socket = /tmp/mysql.sockMySQL 客户端程序和服务器之间的本地通讯指定一个套接字文件max_allowed_packet = 16M允许最大接收数据包的大小，防止服务器发送过大的数据包。当发出长查询或 mysqld 返回较大结果时，mysqld 才会分配内存，所以增大这个值风险不大，默认 16M，也可以根据需求改大，但太大会有溢出风险。取较小值是一种安全措施，避免偶然出现但大数据包导致内存溢出。default_storage_engine = InnoDB 创建数据表时，默认使用的存储引擎。这个变量还可以通过 –default-table-type 进行设置max_connections = 512最大连接数，当前服务器允许多少并发连接。默认为 100，一般设置为小于 1000 即可。太高会导致内存占用过多，MySQL 服务器会卡死。作为参考，小型站设置 100 - 300max_user_connections = 50用户最大的连接数，默认值为 50 一般使用默认即可。thread_cache_size = 64线程缓存，用于缓存空闲的线程。这个数表示可重新使用保存在缓存中的线程数，当对方断开连接时，如果缓存还有空间，那么客户端的线程就会被放到缓存中，以便提高系统性能。我们可根据物理内存来对这个值进行设置，对应规则 1G 为 8；2G 为 16；3G 为 32；4G 为 64 等。Query Cachequery_cache_type = 1 设置为 0 时，则禁用查询缓存（尽管仍分配query_cache_size个字节的缓冲区）。设置为 1 时 ，除非指定SQL_NO_CACHE，否则所有SELECT查询都将被缓存。设置为 2 时，则仅缓存带有SQL CACHE子句的查询。请注意，如果在禁用查询缓存的情况下启动服务器，则无法在运行时启用服务器。query_cache_size = 64M缓存select语句和结果集大小的参数。查询缓存会存储一个select查询的文本与被传送到客户端的相应结果。如果之后接收到一个相同的查询，服务器会从查询缓存中检索结果，而不是再次分析和执行这个同样的查询。如果你的环境中写操作很少，读操作频繁，那么打开query_cache_type=1，会对性能有明显提升。如果写操作频繁，则应该关闭它（query_cache_type=0）。Session variables sort_buffer_size = 2MMySQL 执行排序时，使用的缓存大小。增大这个缓存，提高 group by，order by 的执行速度。tmp_table_size = 32MHEAP 临时数据表的最大长度，超过这个长度的临时数据表 MySQL 可根据需求自动将基于内存的 HEAP 临时表改为基于硬盘的 MyISAM 表。我们可通过调整 tmp_table_size 的参数达到提高连接查询速度的效果。read_buffer_size = 128kMySQL 读入缓存的大小。如果对表对顺序请求比较频繁对话，可通过增加该变量值以提高性能。read_rnd_buffer_size = 256k用于表的随机读取，读取时每个线程分配的缓存区大小。默认为 256k ，一般在 128 - 256k之间。在做 order by 排序操作时，会用到 read_rnd_buffer_size 空间来暂做缓冲空间。join_buffer_size = 128k 程序中经常会出现一些两表或多表 Join （联表查询）的操作。为了减少参与 Join 连表的读取次数以提高性能，需要用到 Join Buffer 来协助 Join 完成操作。当 Join Buffer 太小时，MySQL 不会将它写入磁盘文件。和 sort_buffer_size 一样，此参数的内存分配也是每个连接独享。table_definition_cache = 400限制不使用文件描述符存储在缓存中的表定义的数量。table_open_cache = 400 限制为所有线程在内存中打开的表数量。扩展阅读：《在 MySQL 中 DATETIME 和 TIMESTAMP 时间类型的区别及使用场景》MySQL 错误日志设置log_error = error.log log_warnings = 2log_warnings 为0， 表示不记录告警信息。log_warnings 为1， 表示告警信息写入错误日志。log_warnings 大于1， 表示各类告警信息，例如有关网络故障的信息和重新连接信息写入错误日志。扩展阅读：《MySQL「 Every derived table must have its own alias」错误 ERROR 1248 修复方法》MySQL 慢查询记录slow_query_log_file = slow.log slow_query_log = 0 log_queries_not_using_indexes = 1 long_query_time = 0.5 min_examined_row_limit = 100slow_query_log ：全局开启慢查询功能。slow_query_log_file ：指定慢查询日志存储文件的地址和文件名。log_queries_not_using_indexes：无论是否超时，未被索引的记录也会记录下来。long_query_time：慢查询阈值（秒），SQL 执行超过这个阈值将被记录在日志中。min_examined_row_limit：慢查询仅记录扫描行数大于此参数的 SQL。关于 MySQL 慢查询日志更多扩展内容，请看《如何使用慢查询日志对 MySQL 进行性能优化 - Profiling、mysqldumpslow 实例详解》MySQL 全局查询日志general_log_file = general.log general_log = 0这一段比较好理解，存放文件名，是否开启日志记录Binary logging and Replication server_id = 42 log_bin = mysql-bin binlog_cache_size = 1M控制二进制日志缓存大小，增加其值可改善处理大事务的系统的性能。在具有大量数据库连接的环境中应限制该值。binlog_stmt_cache_size = 1M如果二进制日志处于活动状态，则此变量确定在每次事务中保存二进制日志更改记录的缓存的每个连接的字节大小。单独的变量binlog_stmt_cache_size设置了语句缓存的上限。该binlog_cache_disk_use 和 binlog_cache_use 服务器状态变量将显示这个变量是否需要增加。max_binlog_size = 128M如果二进制日志在写入后超出此大小，则服务器会通过关闭它并打开新的二进制日志来旋转它。单个事务将始终存储在同一二进制日志中，因此服务器将等待未完成的事务在轮换之前完成。如果将 max_relay_log_size 设置为 0，此图也适用于中继日志的大小。sync_binlog = 0 控制 binlog 写磁盘频率expire_logs_days = 5自动二进制日志文件删除的天数。默认值为 0，table 示“不自动删除”。在启动时和清除二进制日志时，可能会删除它们。binlog_format = ROW此变量设置二进制日志记录格式，并且可以是 STATEMENT，ROW 或 MIXED 三选一binlog_row_image = MINIMAL对于 MySQL 基于行的复制，此变量确定如何将行图像写入二进制日志。从属线程变量log_slave_updates = 1如果设置为 0 （默认值），则复制期间从主服务器接收到的从服务器上的更新不会记录在从服务器的二进制日志中。如果设置为 1 ，则为。需要启用从站的二进制日志才能生效。read_only = 0 skip_slave_start = 0安全变量local_infile = 0 此变量控制LOAD DATA语句的服务器端LOCAL功能。根据local_infile设置，服务器会拒绝或允许 Client 端启用LOCAL的 Client 端加载本地数据。#secure_auth = 1 #sql_mode = TRADITIONAL,ANSI,ONLY_FULL_GROUP_BY #skip_name_resolve = 0检查 Client 端连接时是否解析主机名。如果此变量是 0 ，则 mysqld 在检查 Client 端连接时解析主机名。如果是 1 ，则 mysqld 仅使用 IPNumbers；在这种情况下，授权 table 中的所有Host列值都必须是 IP 地址MyISAM 变量key_buffer_size = 8M MyISAM table 的索引块被缓冲并由所有线程共享。key_buffer_size 是用于索引块的缓冲区的大小。密钥缓冲区也称为密钥缓存。myisam_recover = BACKUP,FORCE设置MyISAM存储引擎恢复模式。变量值是 OFF，DEFAULT，BACKUP，FORCE或QUICK的值的任意组合。如果指定多个值，请用逗号分隔。在服务器启动时指定没有值的变量与指定DEFAULT相同，指定显式值""会禁用恢复(与OFF的值相同)。如果启用了恢复，则每次 mysqld 打开 MyISAMtable 时，它都会检查该 table 是否标记为已崩溃或未正确关闭。(只有在禁用外部锁定的情况下运行，最后一个选项才起作用.)在这种情况下，mysqld在 table 上运行检查。如果 table 已损坏，mysqld尝试修复它。MEMORY 变量max_heap_table_size = 64M此变量设置允许用户创建的 MEMORY table 增长的最大大小。变量的值用于计算MEMORYtableMAX_ROWS的值。除非使用诸如CREATE TABLE之类的语句重新创建该 table 或使用ALTER TABLE或TRUNCATE TABLE对其进行更改，否则设置此变量对任何现有的MEMORYtable 均无效。服务器重新启动还会将现有 MEMORYtable 的最大大小设置为全局max_heap_table_size值。InnoDB 变量innodb_buffer_pool_size = 128M控制缓存表和索引数据的 InnoDB 缓冲池的内存大小innodb_file_per_table = 1 此为独立表空间模式，每个数据库的每个表都会生成一个数据空间。当删除或截断一个数据库表时，你也可以回收未使用的空间。这样配置的另一个好处是你可以将某些数据库表放在一个单独的存储设备。这可以大大提升你磁盘的I/O负载。独立表空间优点： 每个表都有自已独立的表空间。 每个表的数据和索引都会存在自已的表空间中。 可以实现单表在不同的数据库中移动。 空间可以回收（除drop table操作处，表空不能自已回收）缺点：单表增加过大，如超过100G结论：共享表空间在Insert操作上少有优势。其它都没独立表空间表现好。当启用独立表空间时，请合理调整：innodb_open_files#innodb_buffer_pool_instances = n #innodb_write_io_threads = 8 #innodb_read_io_threads = 8Innodb使用后台线程处理数据页上的读写 I/O(输入输出)请求,根据你的 CPU 核数来更改,默认是4 #注:这两个参数不支持动态改变,需要把该参数加入到my.cnf里，修改完后重启MySQL服务,允许值的范围从1-64#innodb_io_capacity = 1000innodb_io_capacity变量定义InnoDB可用的总体 I/O 容量。应该将其设置为大约系统每秒可以执行的 I/O 操作数(IOPS)。设置 innodb_io_capacity时，InnoDB根据设置的值估计可用于后台任务的 I/O 带宽。您可以将innodb_io_capacity设置为 100 或更大的值。默认值为200。通常，大约 100 的值适用于 Consumer 级别的存储设备，例如最高 7200 RPM 的硬盘驱动器。innodb_flush_log_at_trx_commit = 2这个选项决定着什么时候把日志信息写入日志文件以及什么时候把这些文件物理地写(术语称为”同步”)到硬盘上。当设为 0 ,log buffer每秒就会被刷写日志文件到磁盘，提交事务的时候不做任何操作（执行是由mysql的master thread线程来执行的。当设为 1 时，每次提交事务的时候，都会将log buffer刷写到日志。当设为 2 ,每次提交事务都会写日志，但并不会执行刷的操作。每秒定时会刷到日志文件。要注意的是，并不能保证100%每秒一定都会刷到磁盘，这要取决于进程的调度。innodb_log_buffer_size = 8M 此参数确定些日志文件所用的内存大小，以M为单位。缓冲区更大能提高性能，但意外的故障将会丢失数据。事务日志所使用的缓存区。InnoDB在写事务日志的时候为了提高性能，先将信息写入Innodb Log Buffer中，当满足innodb_flush_log_trx_commit参数所设置的相应条件（或者日志缓冲区写满）时，再将日志写到文件（或者同步到磁盘）中。可以通过innodb_log_buffer_size参数设置其可以使用的最大内存空间。默认是8MB，一般为16～64MB即可。innodb_log_file_size = 256M事务日志文件写操作缓存区的最大长度。更大的设置可以提高性能，但也会增加恢复故障数据库所需的时间 Galera specific MySQL parameter default_storage_engine = InnoDB 服务器启动时必须启用默认存储引擎，否则服务器将无法启动。默认设置是 MyISAM。 这项设置还可以通过–default-table-type选项来设置。#innodb_flush_log_at_trx_commit = 0当值为 1 时，默认情况下，日志缓冲区被写入InnoDB重做日志文件，并在每次事务处理后刷新到磁盘。要完全符合ACID。 当值为 0 时，提交时不做任何事情；而是将日志缓冲区每秒写入一次并刷新到InnoDB重做日志中。这样可以提供更好的性能，但是服务器崩溃可以清除事务的最后一秒。 当值为 2 时，每次提交后，日志缓冲区都会写入InnoDB重做日志，但刷新每秒发生一次。性能稍好一些，但是操作系统或断电可能导致最后一秒的事务丢失。#innodb_autoinc_lock_mode = 2为InnoDB表生成 AUTO_INCREMENT 值时使用的锁定模式。 有效值为:0 是传统锁定模式。 1 是连续锁定模式。 2 是交错锁定模式。#binlog_format = row #query_cache_type = 0设置为 0 时，则禁用查询缓存（尽管仍分配query_cache_size个字节的缓冲区）。设置为 1 时,除非指定SQL_NO_CACHE，否则所有SELECT查询都将被缓存。设置为 2 时，则仅缓存带有SQL CACHE子句的查询。请注意，如果在禁用查询缓存的情况下启动服务器，则无法在运行时启用服务器。扩展阅读：《如何在 MySQL / MariaDB 中查找和删除重复记录？ - 4 种 MySQL 数据去重法》WSREP 配置#wsrep_provider = /usr/lib/libgalera_smm.so wsrep 库的位置通常不同版本的 Linux 位置Debian 和 Ubuntu 在 /usr/lib/libgalera_smm.soRed Hat / CentOS 在 /usr/lib64/libgalera_smm.so#wsrep_cluster_name = "kalacloud.com Galera Cluster"集群的名称。节点无法连接到名称不同的集群，因此在同一集群中的所有节点上都必须相同。#wsrep_cluster_address = "gcomm://" #wsrep_cluster_address = "gcomm://192.168.0.2,192.168.0.3"启动时要连接的群集节点的地址#wsrep_node_name = "Node A" 此节点的名称。此名称可以在wsrep_sst_donor中用作首选供体。请注意，集群中的多个节点可以具有相同的名称。#wsrep_node_address = 192.168.0.1以 ip address[:port] 格式指定节点的网络地址。wsrep_node_incoming_address = 10.0.0.1这是节点用来侦听客户端连接的地址。如果未指定地址或将其设置为 AUTO （默认），则mysqld使用--bind-address或--wsrep-node-address，或尝试以相同顺序从可用网络接口列表中获取一个地址。#wsrep_causal_reads = 0 设置为 1 时（默认为 0 ），则在整个集群中强制执行读取提交的特征。如果主机比从机更快地应用事件，则两者可能会短暂地不同步。在将此变量设置为 1 的情况下，从属将等待事件应用，然后再处理其他查询。#wsrep_sst_method = mysqldump用于进行状态快照传输（SST）的方法。可选方法有 rsync，mysqldump ，xtrabackup ， xtrabackup-v2， mariabackup#wsrep_sst_auth = sst:sst 用于复制的用户名和密码。如果wsrep_sst_method设置为 rsync ，则不使用，而对于其他方法，它的格式应为 <user>:<password>。当使用SHOW VARIABLES查询值时，内容在日志中被屏蔽。#wsrep_sst_receive_address = 192.168.0.1 这是集群中其他节点（供体）连接到的地址，用于发送状态转移更新。如果未指定地址或将其设置为 AUTO （默认），则mysqld使用--wsrep_node_address的值作为接收地址。但是，如果未设置--wsrep_node_address，则它将使用--bind-address中的地址，或尝试以相同顺序从可用网络接口列表中获取一个地址。[mysql] no_auto_rehash关闭自动补全 SQL 命令功能max_allowed_packet = 16M数据包或生成的/中间的字符串的最大大小（以字节为单位）。数据包消息缓冲区使用net_buffer_length中的值进行初始化，但可以增长到max_allowed_packet个字节。设置为最大BLOB的最大值（1024的倍数）。如果更改此值，则也应该在客户端更改它。prompt = '\u@\h [\d]> '此为修改 mysql 提示符内容的变量。我们自定义提示符信息。通过配置可以显示登入的主机地址，登陆用户名，当前时间，当前数据库等信息。[mysqldump] max_allowed_packet = 16M限制接受的数据包大小，这里的值为 MySQL 服务器端和客户端在一次传送数据包的过程当中数据包的大小扩展阅读：《最好用的 10 款 MySQL GUI 管理工具横向测评》卡拉云 - 新一代低代码开发工具MySQL 配置文件对于优化数据库性能有着极大的意义，我们不仅要搞懂每一行代码的意义，更要结合实际情况，在实践中边改边测，最终达到性能最大化的目标。如果你想在你的 MySQL 数据库上构建应用工具，可以试试卡拉云，卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。不仅可以完成 Workbench 所有功能，还可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天，。卡拉云可一键接入常见的数据库及 API卡拉云可根据公司工作流需求，轻松搭建数据看板，并且可分享给组内的小伙伴共享数据下图为使用卡拉云在 5 分钟内搭建的「优惠券发放核销」后台，仅需要简单拖拽即可快速生成前端组件，只要会写 SQL，便可搭建一套趁手的数据库工具。欢迎试用卡拉云。有关 MySQL 教程，可继续拓展学习：如何远程连接 MySQL 数据库，阿里云腾讯云外网连接教程如何在 MySQL / MariaDB 中导入导出数据，导入导出数据库文件、Excel、CSV如何在两台服务器之间迁移 MySQL 数据库 阿里云腾讯云迁移案例MySQL 中如何实现 BLOB 数据类型的存取，BLOB 有哪些应用场景？MySQL 触发器的创建、使用、查看、删除教程及应用场景实战案例
-
发表了文章 2021-12-03
MySQL only_full_group_by 1055 报错的三种解决方案，临时关闭有影响吗？
本文首发：MySQL only_full_group_by 1055报错的三种解决方案，临时关闭有影响吗？当我们迁移到 MySQL 5.7+ 的版本时，常会碰到 ERROR 1055 only_full_group_by 错误，这是 5.7 之后 SQL_MODE 默认打开了严格模式导致的错误。说明你代码里有地方写的不严谨。ERROR 1055 (42000): Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'kalacloud.user_id' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by我看到大多数教程，只写了解决这个问题「术」的部分，并没有讲解什么原因导致这个错误。本教程先从原理讲起，先让大家理解为什么会出错。然后给出三种解决方案：「彻底解决」、「临时解决」和「折中解决」，你可根据自己的实际情况进行选择。SQL_MODE 是什么？讲 ONLY_FULL_GROUP_BY 错误前，我们先来说一下 SQL_MODE。理解 MySQL 工作原理能更好的帮你理解错误发生的本质原因。SQL_MODE 是 MySQL 中的一个环境变量，定义了 MySQL 支持的 SQL 语法和数据校验程度。SQL_MODE 一共三种模式ANSI 模式：宽松模式。对插入数据进行校验，如不符合定义类型或长度，对保存数据进行截断。TRADITIONAL 模式：严格模式。对插入数据进行严格校验，保证错误数据不能插入，ERROR 报错。用于事物时，事物会进行回滚。STRICT_TRANS_TABLES 模式：严格模式。对插入数据进行严格校验，错误数据不能插入，ERROR 报错。MySQL 5.7.4 之前，MySQL 默认不开启严格模式这是 MySQL 升级到5.7.5 之后默认SQL_MODE 为严格模式：扩展阅读：MySQL 连接数过多的处理方法合集 - Too many connectionsSQL_MODE 严格模式的意义在宽松模式下，即便 insert 一个错误的数据，MySQL 也会不加判断的全盘接受。我们来看一个实例我们首先关闭 SQL_MODE 严格模式set session sql_mode='';然后我们创建一个表并向其中插入一组超范围的数据create table kalacloud_t1(website char(9)); insert into kalacloud_t1 values('kalacloud.com');返回值：从返回值可以看出，我们向 websie cher(9) 中插入了一条长为 13 的值，没有报错，直接插入，但超过 9 的部分，即「.com」被截断丢掉了。接着我们在严格模式下试试，首先打开 SQL_MODE 严格模式：set session sql_mode='TRADITIONAL';create table kalacloud_t2(website char(9)); insert into kalacloud_t2 values('kalacloud.com');返回值：我们可以从返回值看出，MySQL 直接报错，告诉你插入的数据有问题。扩展阅读：MySQL 配置文件 my.cnf / my.ini 逐行详解ONLY_FULL_GROUP_BY 问题及解决方案接着我们来说说 ONLY_FULL_GROUP_BY 的问题。当我们数据库迁移至 5.7 或者 8.0 之后，最常见的错误就是 Error 1055 only_full_group_by 错误。正如我前文所写，这个错误的关键原因是不规范的 SQL 语法，5.7 之后默认 SQL_MODE 变为严格模式。我们来一起看一个实例，这是一组卡拉云用户点击网页的 log 记录：现在我们使用 GROUP BY 来排序找出访问量最大的网页。我们先关掉 sql_mode 的严格模式来试试：在宽松模式下，我们可以看出这个 query 虽然可以查询，但语法和逻辑上稍有问题。我们想对 page_url 进行排序，但 query 中也加入了 user_id ，在返回值中可以发现问题，index.html 这个页面不仅 user_id 1 的用户访问过，用户 2 和 3 也访问了，那么这张返回的表表格数据就是有问题的。user_id 1 列在返回数据里，到底代表什么？是第一个访问 index.html 还是最后一个访问这个页面的意思呢？没人知道，这是个随机盲盒，运行原理未知。我们打开 sql_mode 严格模式跑一下上面这段代码：返回一个 ERROR 1055 报错。ONLY_FULL_GROUP_BY 是 SQL_MODE 中TRADITIONAL 的选项参数，从 5.7 开始默认开启为严格模式。这就是为什么大家迁移到 MySQL 新版会报 1055 错误的原因。我们已经理解了这个问题的原理原因，接下来，碰到 ONLY_FULL_GROUP_BY 报错，我们应该怎么处理呢？扩展阅读：如何在 MySQL 中查询数据库中带有某个字段的所有表名解决方案 1 – 重写代码找到报错语法中错误的部分，根据逻辑重写 query，本示例中，我们去掉 user_id 即可。如果你有大量在旧版 SQL 完成的代码，检查这种错误很有可能是相当浩大的工程。这时就到了你的决断时刻了，你有两条路可选：（1）干脆推翻重写，让代码保持严谨和整洁，养成良好的习惯，避免未来出现的未知错误。（2）了解原理。知道可能会出现的问题，关掉严格模式，回到宽松模式，接着用旧版代码。解决方案 2 – 返回宽松模式如果你碰到 ERROR 1055 报错，但也不想在浩如烟海的代码中纠错，那么你可以回到「宽松模式」接着用。在 MySQL 5.7 及以上版本中 SQL_MODE 包含ONLY_FULL_GROUP_BY、STRINCT_TRANS_TABLES、NO_ZERO_IN_DATE、NO_ZERO_DATE、ERROR_FOR_DIVISION_BY_ZERO、NO_AUTO_CREATE_USER我们直接在 MySQL 配置文件中更改，或者临时全部关闭：SET GLOBAL sql_mode='';或者单关闭 ONLY_FULL_GROUP_BYMariaDB [kalacloud_demo]> SET GLOBAL sql_mode='STRICT_TRANS_TABLES,STRICT_ALL_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,TRADITIONAL,NO_ENGINE_SUBSTITUTION';解决方案 3 – 使用聚合函数如果某些特别的原因就是要查询 user_id ，但你又没空改代码，那么我可使用聚合函数来规避这类错误，算是一种折中的方案了，语法改严谨了，代码又不需要大动。我们可以使用MAX()、MIN()或者GROUP_CONCAT() 聚合函数。MySQL 还提供了 ANY_VALUE() 函数，来解决这类问题：扩展阅读：MySQL 分组查询实战 如何查询每组第一、最后、单多字段查询、分组筛选、最大小值排序总结和推荐在代码严谨、清晰的道路上走多远都不为过，我个人推荐使用第一种解决方案，趁着这一次机会，把你代码中潜藏的隐患一网打尽。之后遵循严谨的代码逻辑来写代码。当然，有很多特殊情况，你也可以参照方案二、三来临时处理。接着推荐一下我开发的卡拉云，只要你会写 MySQL ，就能使用卡拉云搭建自己的数据工具，比如，数据看板，企业 CRM、ERP，权限管理后台，对账系统等。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天。卡拉云可一键接入常见的数据库及 API卡拉云可根据公司工作流需求，轻松搭建数据看板或其他内部工具，并且可一键分享给组内的小伙伴。下图为使用卡拉云在 5 分钟内搭建的「优惠券发放核销」后台，仅需要简单拖拽即可快速生成前端组件，只要会写 SQL，便可搭建一套趁手的数据库工具。立即使用卡拉云。有关 MySQL 教程，可继续拓展学习：如何远程连接 MySQL 数据库，阿里云腾讯云外网连接教程MySQL 时间戳用什么类型 - MySQL 时间函数详解MySQL 中如何实现 BLOB 数据类型的存取，BLOB 有哪些应用场景？如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件MySQL 分组查询实战 如何查询每组最第一条、最后一条记录，单多字段查询、分组筛选、最大小值排序
-
发表了文章 2021-11-26
如何使用 MySQL Workbench 自动生成 ER 图、同步更新远程数据库 - MySQL Workbench 使用教程
MySQL Workbench 作为 MySQL 官方出品的数据库 GUI 管理工具，它的强大是其他免费管理工具无法匹敌的。特别是使用 MySQL Workbench 设计数据库，创建及同步 ER 图（实体关系图）的功能甚是强大。MySQL Workbench 不仅可以直接在软件中设计数据库 ER 实体关系图，而且还可以直接通过这个实体关系图，自动创建 MySQL 数据库（正向工程），也可以反过来，通过已有的 MySQL 数据库，生成 ER 图（逆向工程），当然，更厉害的地方是，可以在 MySQL ER 图上直接修改，MySQL 数据库会自动同步更新（模式同步）。本教程将详细讲解如何使用 MySQL Workbench 创建 ER 图及具体操作步骤。如果你是刚接触 MySQL Workbench 的新用户。推荐先学习：1.如何使用 Workbench 远程连接到 MySQL 服务器2.如何使用 Workbench 操作 MySQL 数据库中文指南在本教程中你将学习到如何生成 MySQL 数据库 ER 图（逆向工程）2.如何使用 Workbench 模式同步功能同步本地 ER 图与远程 MySQL 数据库3.导出 ER 图、协同工作使用 MySQL Workbench 将数据库 SQL 代码转化成 数据库 ER 关系图。一. 如何生成 MySQL 数据库 ER 图（逆向工程）我们在 MySQL Workbench 主界面的菜单栏选择「Database」→ 「Reverse Engineer...」连接需要通过 MySQL Workbench 直接生成 ER 图的数据库。（有关如何远程连接的教程可看我们前一篇教程：如何使用 Workbench 远程连接到 MySQL）点击「Continue」完成数据库连接。本教程演示的是连接到卡拉云（kalacloud.com）的 MySQL 测试服务器，各位可根据自己需求，选择需要创建 ER 图的数据库。这里大家根据自己的需求选择需要在 ER 图中显示的表。到这里，我们已经可以看到， MySQL Workbench 将我们选中的数据库生成了对应的 ER 图。这是一个简单的 CRM 管理系统的数据库 DEMO。当然，不论你的数据库结构多么错综复杂，Workbench 都能轻松搞定。更厉害的是，Workbench 有模式同步功能，即我们在本地修改了 ER 图后，Workbench 会把我们修改的部分同步到物理数据库中，这是在免费数据库 GUI 管理工具当中，是非常少见的杀手锏级的功能。扩展阅读：《如何配置开启 MySQL 远程连接，阿里云允许外网连接教程》二. 如何使用模式同步功能，同步本地 ER 图与远程 MySQL 数据库模式同步是指 MySQL Workbench 会比较 ERD 和 物理数据库中模式结构的差异，针对这个差异进行双向同步。也就是说，当我们在 ER 图上创建一个新表并配置好表属性后，我们的物理数据库中也将同步更新。1.在 ER 图中创建新表1.点击创建表功能，进入数据库表配置页。2.我们可以直接在 ER 图上创建一个新表 new_table_kalacloud，然后对这个新表进行基本的配置。3.Workbench 会在画布上生成一个对应的数据库表。这时候，创建的表仅显示在本地画布上，下面我们要把这个新建表同步到远端 MySQL 服务器上。2.将更新后的 ER 图同步至物理数据库接着我们将刚刚在 ER 图上画的 new_table_kalacloud 这个表同步到物理数据库中。选择「Database」→「Synchronize Model」 进入同步配置页。连接需要同步的远程数据库服务器（如果这里你不会配置，请看我们之前的教程《Workbench 远程连接到 MySQL》）连接到远程 MySQL 服务器后，选择需要同步的远端数据库。Workbench 会根据两边的数据提示你数据同步方向，当然你也可以选择反向同步或者忽略差异。一切确认后，Workbench 会帮你写好 SQL 代码，检查无误后就可以提交了。同步成功，此时本地 ER 图和远程 MySQL 数据库，数据结构保持一致。扩展阅读：《如何在 MySQL 中创建、查看、删除触发器，触发器的六种用法》三. 导出 ER 图与远程协同工作Workbench 提供多种格式的导出方式，不仅可以导出数据库模型（*.mwb）也可以导出可视化的图片文件（pdf、png）等。如果使用 *.mwb 格式保存，可将文件共享给需要协同的同事，他可在你的基础上继续对数据库进行编辑，以及 sync 修改数据库结构。当然我们也可以直接保存为 png 格式，不论是自己查看还是共享给协同工作的同事，都是非常好的数据库查询资料。直接导出 PNG 格式本教程导出范例：MySQL示例导出的 mwb 文件MySQL示例导出的 PNG 文件扩展阅读：《如何在 MySQL 中导入导出数据库、CSV、Excel》四. 卡拉云 - 新一代低代码开发工具MySQL Workbench 为我们提供了管理 MySQL 的图形界面管理工具，可以在本地轻松管理远程数据库，但 Workbench 只能做较底层的数据库操作。对于「构建在数据库之上，需要前端定制开发」的需求，并不适用。如果你有自己对数据库增删改查的工作流，推荐一下卡拉云。卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。不仅可以完成 Workbench 所有功能，还可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天。卡拉云可一键接入常见的数据库及 API卡拉云可根据公司工作流需求，轻松搭建数据看板或其他内部工具，并且可一键分享给组内的小伙伴。下图为使用卡拉云在 5 分钟内搭建的「优惠券发放核销」后台，仅需要简单拖拽即可快速生成前端组件，只要会写 SQL，便可搭建一套趁手的数据库工具。欢迎试用卡拉云。总结在本教程中，我们讲解了 MySQL Workbench 操作 MySQL 数据库的基础操作。更多数据库相关教程可访问 卡拉云 查看。有关 MySQL 教程，可继续拓展学习：MySQL 时间戳用什么类型 - MySQL 时间函数详解MySQL 中如何实现 BLOB 数据类型的存取，BLOB 有哪些应用场景？如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件MySQL 分组查询实战 如何查询每组最第一条、最后一条记录，单多字段查询、分组筛选、最大小值排序
-
发表了文章 2021-11-26
如何使用 Workbench 远程连接到 MySQL 数据库 -MySQL Workbench 使用教程
如何使用 Workbench 远程连接到 MySQL 数据库 -MySQL Workbench 使用教程MySQL Workbench 是一款专门为 MySQL 设计的可视化数据库 GUI 管理工具，我们可以在自己的计算机上，使用图形化界面（GUI）远程管理 MySQL 数据库。有关 MySQL 远程管理软件，你可以选择 Windows 下的 HeidiSQL，MacOS 下的 Sequel Ace 或者 MySQL 官方推出的跨平台客户端 MySQL Workbench 。如果你需要针对自己的工作流对数据库操作，定制开发，推荐一下卡拉云，详情见文末。本教程将详细讲解如何使用 MySQL Workbench 配置连接到你的远程数据库。一. 先决条件要跟随本教程学习，你需要准备：一台开启 SSH 登录的 Ubuntu 服务器服务器开启远程登录 MySQL（如何远程连接 MySQL 阿里云连接教程）安装好 MySQL Workbench（未安装可看：MySQL Workbench 使用教程）二. 配置 workbench 的第一个连接在你的计算机上安装 MySQL Workbench 后启动，点击 MySQL Connections 旁边的 + 图标创建一个新连接。点击 + 号，创建新连接。弹出「连接到数据库」的窗口：要创建连接，请输入以下详细信息：1.Connection Name：此连接配置项的名字，MySQL_for_kalacloud.com2.Connection Method：连接方式改为Standard TCP/IP over SSH3.SSH Hostname：使用 SSH 远程服务器的 IP 地址（本教程使用虚拟机，故是一个内网 IP）4.SSH Username：使用 SSH 登录服务器的用户名5.SSH Password：使用 SSH 登录服务器的密码6.MySQL Hostname：这里要特别注意，Workbench 的工作原理是先通过 SSH 登录服务器，再本地登录 MySQL 数据库，故此 Hostname 是本地 IP 地址，即 127.0.0.17.MySQL Server Port：MySQL 默认远程登录端口为 3306 可根据实际情况修改。8.Username：远程登录 MySQL 数据库的用户名（是 MySQL 里设置的用户名，和服务器配置没有关系）9.Password：上面登录 MySQL 数据库用户名对应的密码有关远程登录 MySQL 的教程可看《如何远程连接 MySQL 数据库，阿里云腾讯云外网连接教程》10.Test Connection：点击此按钮可测试以上配置是否正确，如不正确可根据返回错误信息进行调整。11.最后点击右下角 OK 保存配置信息。点击已经保存好的连接配置MySQL_for_kalacloud.com 登录远程 MySQL 服务器扩展阅读：《如何远程连接 MySQL 阿里云允许远程连接教程》三. 使用 MySQL Workbench 管理数据库连接数据库后，你可以查看 MySQL 实例信息，数据库状态、当前连接数、数据库配置以及用户和权限。MySQL Workbench 还支持导入和导出 MySQL 文件，你可以使用 workbench 对数据库进行备份和恢复。你可以在左侧导航栏「SCHEMAS」的标签下看到数据库具体情况。点击下拉箭头可以查看数据库的表和对象。所以你可以通过 MySQL Workbench 管理你的数据库，写复杂的 SQL 查询，直接编辑数据。扩展阅读：《如何使用 MySQL Workbench 自动生成 ER 图，自动同步更新远程数据库》四. 总结现在我们使用 MySQL Workbench 通过 SSH 访问远程服务器后，再登录 MySQL 数据库。可以在本地轻松管理远程数据库，但 Workbench 只能做较底层的数据库操作。对于「构建在数据库之上，做前端定制开发」的需求，并不适用。这里推荐一下卡拉云，卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。不仅可以完成 Workbench 所有功能，还可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天。卡拉云可一键接入常见的数据库及 API下图为使用卡拉云在 5 分钟内搭建的「优惠券发放核销」后台，仅需要简单拖拽即可快速生成前端组件，只要会写 SQL，便可搭建一套趁手的数据库工具。欢迎试用卡拉云。有关 MySQL 教程，可继续拓展学习：MySQL 时间戳用什么类型 - MySQL 时间函数详解MySQL 中如何实现 BLOB 数据类型的存取，BLOB 有哪些应用场景？如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件MySQL 触发器使用教程 - 创建、删除、查看
-
发表了文章 2021-11-23
MySQL Workbench 使用教程 - 如何使用 Workbench 操作 MySQL / MariaDB 数据库中文指南
本文首发：《MySQL Workbench 使用中文教程 - 卡拉云》MySQL Workbench 是一款专门为 MySQL 设计的可视化数据库管理软件，我们可以在自己的计算机上，使用图形化界面远程管理 MySQL 数据库。有关 MySQL 远程管理软件，你可以选择 Windows 下的 HeidiSQL，MacOS 下的 Sequel Ace 或者 MySQL 官方推出的跨平台客户端 MySQL Workbench 。本文使用 Mac 版 MySQL Workbench 进行讲解，Mac 版与 windows 版、Linux 版除 UI 界面稍有不同外，整个操作逻辑完全一致，不论你使用何种操作系统及版本，均可跟随本教程学习。本教程目录一. 如何下载及安装 MySQL Workbench二. 如何使用 Workbench 远程连接数据库三. 使用 Workbench 操作数据库MySQL Workbench 初始化界面连接远程 MySQL 数据库创建数据库在数据库中创建表查看表数据向 table 表中插入数据修改字段属性删除数据库中的表四. MySQL 数据导入导出导入 SQL 数据导出 SQL 数据五. 配置 MySQL 数据库表属性主键约束外键约束唯一约束：UQ 索引非空约束默认值约束六. 在 Workbench 中执行一条 SQL 查询七. 创建触发器及触发器的应用八. 用户账号和访问权限查看 MySQL 数据库中的账号情况创建 MySQL 数据库账号删除 MySQL 数据库账号九. Workbench 的升级版卡拉云一. 如何下载及安装 MySQL WorkbenchMySQL Workbench 作为 MySQL 官方出品的数据库操作软件，我们可以前往 MySQL Workbench 官方下载页 免费下载。在这个下载页中，可根据你的实际情况选择适合你的运行平台及版本。下载后一路 Next 安装即可。扩展阅读：《10 款 MySQL GUI 管理工具横向测评 - 免费和付费到底怎么选?》二. 如何使用 Workbench 远程连接数据库你的服务器需要打开 SSH 登录（如果选择 SSH 登录后再登录 MySQL 需要打开）调整服务器防火墙配置好 MySQL 远程登录（如果选择直接远程登录 MySQL 服务器时需要打开）有关 Workbench 远程登录的教程，请在《如何使用 Workbench 远程连接到 MySQL 服务器》查看全文。有关 MySQL 开启远程登录的教程，请在《如何远程连接 MySQL 数据库，配置阿里云外网连接》查看全文。三. 使用 Workbench 操作数据库1.MySQL Workbench 初始化界面Workbench 初始化界面2.连接远程 MySQL 数据库点击配置好的远程登录卡片，登录远程 MySQL 服务器。如果你还没配置好远程端，请参照《如何使用 Workbench 远程连接到 MySQL 服务器》这篇教程进行配置。登录远程数据库后，红框部分为当前远程 MySQL 数据库中已经创建好的数据库列表。3.创建数据库在 SCHEMAS 列表的空白处，点击鼠标右键，在弹出的菜单中选择「Create Schema…」，进入数据库创建流程页面。在 Schema Name 里填入新建数据库的数据库名，然后选择 ApplyMySQL Workbench 会自动帮助我们生成 SQL 命令，创建数据库。执行命令，创建成功。可以看到 Schemas 列表中多了我们刚刚创建的 kalacloud_demo 数据库4.在kalacloud_demo 数据库中创建表右键点击kalacloud_demo ，选择 Set as Default Schema 先把它设置成默认数据库。然后选择下箭头，右键点击 Tables 选择 Create Table 进入创建表的流程页。（1）Name：这里填写表名（2）这里创建表中的各列、列属性。（3）点击＜click to edit＞可添加一列。（4）点击 Apply 执行 SQL 命令。MySQL Workbench 会帮我们生成创建表的 SQL 命令。5.查看表数据（1）点击要查看的表名后面的「闪电 icon」标示（2）Workben 自动帮我们生成一段查看表的 SQL 命令（3）点击黄色闪电标志执行后，可在 Result Grid 看到查询表的表数据6.向 table 表中插入数据（1）使用 Select 查出表内容后，在表格内直添加需要写入的数据。（2）Workbench 会生成一段查看表的代码（3）在下方表格中展示表内数据，我们可以根据自己的需求在这里向表内添加数据。（4）最后点击应用生成添加数据的代码如上图所示，我们可以看到 id 为 1 的卡拉云这一行数据已经转化成 SQL 命令，点击应用即可将数据添加到数据库中。7.修改字段属性右键点击需要修改的表，选择「Alter Table...」，右侧会显示出表信息，修改需要修改的内容后，Apply 即可应用。8.删除数据库中的表右键选择需要删除的表，然后点击「Drop Table...」即可删除。注意：此操作不可撤回，谨慎选择。扩展阅读：《如何在 MySQL 中查找和删除重复记录？》四. MySQL 数据导入导出1.使用 MySQL Workbench 导入 SQL 数据在菜单栏中选择 File → Open SQL Script... 选择要导入的 SQL 文件在弹出的对话框中选择需要导入的 SQL 文件。这里非常关键，一定要仔细阅读。（1）在打开的 SQL 文件的头部，写入需要导入的数据库名，本教程将导入 kalacloud_demo 这个数据库。 所以在文件中写入 USE kalacloud_demo;（2）点击黄色闪电 icon 执行代码（3）将这 4 条数据写入数据库对应的 users 表中使用 SELECT 查询表，可以看到 4 条数据已经成功导入2.使用 MySQL Workbench 导出 SQL 数据（1）选择 Administration 标签（2）在 MANAGENMENT 中找到 Data Export（3）选择需要导出的数据库（4）选择需要导出数据库中的表（5）选择导出内容（6）选择导出 SQL 文件的存储路径（7）Start Export 开始导出扩展阅读：《如何在 MySQL 中导入导出 SQL 数据、Excel、CSV》五. 配置 MySQL 数据库表属性1.主键约束Primary Key（PK）：主键约束，指定某列的数据非空、唯一、不能重复（1）右键点击需要设置的表，选择「Alter Table...」（2）PK 为设置主键约束。2.外键约束Foreign Key：外键，指定该列记录属于主表中的一条记录，参照另一条数据（1）右键点击需要设置的表，选择「Alter Table...」（2）选择「Foreign Keys」的标签（3）选择要关联的表（4）当前表的列，选择要关联的键（5）被关联表的列，选择需要关联的键（6）Apply 应用，进行关联3.唯一约束：UQ 索引Unique：唯一约束，指定某列和几列组合的数据不能重复选中的列就是数据表的唯一约束索引，取消选中则取消该列的唯一约束索引。4.非空约束Not Null：非空约束，指定某列不能为 NULL 空选中 NN 的列为数据表的非空约束，取消选中则取消该列的非空约束。5.默认值约束默认值（Default）的完整名称是 默认值约束（Default Constraint）MySQL 默认值约束用来指定某列的默认值。红框部分，states 的默认值设定为「1」，即插入一条新的记录时没有为这个字段赋值，那么系统会自动为这个字段赋值为「1」。扩展阅读：《MySQL 重置自增 ID (AUTO_INCREMENT)教程 - 完美保留表数据的终极解决方案》六. 在 Workbench 中执行一条 SQL 查询我们也可以直接在 Workbench 执行一段 SQL 查询，下面这段代码是向kalacloud_demo数据库中kalacloud_table_demo表里插入一行数据。INSERT INTO `kalacloud_demo`.`kalacloud_table_demo` (`id`, `name`, `phone`, `wechat_id`, `wechat_name`, `states`) VALUES ('2', '卡拉云 kalacloud', '13777779999', 'kalacloud', '卡拉云 kalacloud.com', '2');直接在 Query 标签中写入 SQL 代码，然后点击「黄色闪电」即可执行代码。然后，我们运行 select 查看上一条命令是否已经写入表中。SELECT * FROM kalacloud_demo.kalacloud_table_demo;我们可以看到，红框部分，ID 2 这一条就是刚刚我们写入的数据。扩展阅读：《如何查看 MySQL 数据库、表、索引容量大小？找到占用空间最大的表》七. 创建 MySQL 触发器及触发器的应用1.鼠标右键点击需要添加触发器的表。2.选择 Triggers 标签，进入触发器设置页面3.选择需要添加的触发器类型。4.添加触发器代码MySQL 触发器一共有 6 种类型：BEFORE INSERT ： 在插入数据前，检测插入数据是否符合业务逻辑，如不符合返回错误信息。AFTER INSERT ： 在表 A 创建新账户后，将创建成功信息自动写入表 B 中。BEFORE UPDATE ：在更新数据前，检测更新数据是否符合业务逻辑，如不符合返回错误信息。AFTER UPDATE ：在更新数据后，将操作行为记录在 log 中BEFORE DELETE ：在删除数据前，检查是否有关联数据，如有，停止删除操作。AFTER DELETE ：删除表 A 信息后，自动删除表 B 中与表 A 相关联的信息。有关六类触发器的实际使用方法及应用场景的详细教程，可查看《MySQL 触发器 创建 、查看、删除 insert、update、delete 教程 - 卡拉云》文章。此教程以实际应用场景为线索，按照场景细致讲解了全部 6 种触发器的使用方法。八. 用户账号和访问权限1.查看 MySQL 数据库中的账号情况（1）在菜单栏选择 Server（2）选择 Users and Privileges 进入用户管理页面2.创建 MySQL 数据库账号（1）选择 Add Account（2）添加账号详细信息（3）Apply 应用3.删除 MySQL 数据库账号（1）选择需要删除的账号（2）点击 Delete（3）点击 Refresh 刷新列表最后，Workbench 有一些只有付费软件才独有的功能，比如画 ER 图，比如正逆向工程，数据库本地远程之间同步等，这类进阶功能我单独写了一篇，大家可以看这篇《如何使用 MySQL Workbench 自动生成 ER 图、同步更新远程数据库 - MySQL Workbench 使用教程》扩展阅读：《MySQL 权限管理查询手册 - 创建、授权、取消授权、删除、重命名账号》九. 卡拉云 - 新一代低代码开发工具MySQL Workbench 为我们提供了管理 MySQL 的图形界面管理工具，可以在本地轻松管理远程数据库，但 Workbench 只能做较底层的数据库操作。对于「构建在数据库之上，需要前端定制开发」的需求，并不适用。这里推荐一下卡拉云，卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。不仅可以完成 Workbench 所有功能，还可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。数月的开发工作量，使用卡拉云后可缩减至数天。卡拉云可一键接入常见的数据库及 API卡拉云可根据公司工作流需求，轻松搭建数据看板，并且可分享给组内的小伙伴共享数据下图为使用卡拉云在 5 分钟内搭建的「优惠券发放核销」后台，仅需要简单拖拽即可快速生成前端组件，只要会写 SQL，便可搭建一套趁手的数据库工具。欢迎使用卡拉云。总结在本教程中，我们讲解了 MySQL Workbench 操作 MySQL 数据库的基础操作。有关 MySQL 教程，可继续拓展学习：MySQL 时间戳用什么类型 - MySQL 时间函数详解MySQL 中如何实现 BLOB 数据类型的存取，BLOB 有哪些应用场景？如何在 MySQL / MariaDB 中跳过多张表导出或指定多张表导出备份如何将 MySQL / MariaDB 的查询结果保存到文件MySQL 分组查询实战 如何查询每组最第一条、最后一条记录，单多字段查询、分组筛选、最大小值排序
-
发表了文章 2021-07-16
如何设计财务对账系统 —— 从0到1搭建对账中心实战
本文首发「卡拉云产品技术博客」：《如何设计财务对帐系统 - 从零到一搭建实战》第一章：对账系统概览一、什么是对账？1.生活中的对账场景 - 煎饼摊老板的故事对账在我们的生活中非常常见。举个例子：下班回家路上，你有点饿，看到路边有个煎饼。于是过去买了个煎饼，老板把煎饼递给你，然后指着墙上的二维码贴纸说「8 块」。你拿出手机，扫码支付 8 元后，和老板说「8 块 ，过去啦」。紧接着老板听到自己手机播报说「微信收款：8元。」老板心里确认了这笔钱到账了。你宣称「已付8元」，老板收款账户确认「已收8元」，这就是一次最简单的对账。2.互联网公司中常见的对账场景 - 支付对账系统在互联网公司中，只要带交易，就需要对账。不论是售卖实体物品的淘宝店、虚拟物品的在线课程，还是销售各种会员服务的视频网站，都需要对账，对账是整个交易流程中最后一道安全防线。我们来举个淘宝店的例子，为了方便理解，这家淘宝店，只卖一种杯子，一个杯子20元，一个月只有 1 单生意，1 单卖1个杯子。当用户下单购时，打印机自动打印出一份发货订单，老板根据这份纸质订单到库房拣货，然后交给快递公司发货。用户收到杯子，确认收货。20元转入老板的账户。（1）发货次日，老板盘点库房，发现少了一个杯子。于此同时，发现自己的账户里多了20元，正好是1个杯子的售价。这个对账过程叫账实核对。（2）老板根据打印的订单对账，手里有一张纸质订单，订单总额20元，再看自己账户金额，多了20元。这个对账过程叫账证对账。（3）月底对账时，发现账户只多了10元，于是老板翻出全部账本，发现订单账多了20元，快递发货账因发货减少10元（快递费）。一计算，收入20元（增加），快递费10元（减少），即账户账应增加10元。这个对账叫账账对账。3.对账方式 - 杯子店出现的三种对账方式（1）账实对账：是指我们记录的账与实物资产的实际数量进行对账。（2）账证对账：是指将自己的账本与记账凭证进行核对。一般记账凭证由与你业务合作的第三方公司提供，在上面的杯子店的例子里，记账凭证由淘宝提供（订单）。（3）账账对账：是指在上下游相互关联的账本之间进行对账。在整个交易过程中，一般会涉及上下游多套账，上游比如外部进货账、内部采购账，下游比如快递发货账、第三方服务费等。这些账和总账之间有非常多的关联性，所以一般账账核对，通常用于修正内部账的数据不一致。「账证实」是对账的基础，后面我们会结合实例来讲解在对账系统搭建的过程中，如何把「账证实」融入进对账系统中。二、为什么要对账1.对账是整个支付系统中，最后一道安全防线。是交易流程中重要的纠错机制。2.避免意外和人为错误发生（1）意外错误：网络稳定性、内部系统（订单、支付、风控）的健壮性。（2）人为错误：人为操作失误、上游、内部恶意修改等行为。3.对账是财务流程中重要的一环，特别是当交易量上万/天，人工手动对账毫无可能时，为了避免订单差错越积越多，变成糊涂账，我们需要日日结清，对账也是保证公司财务健康的必要环节。第二章：对账系统的架构无论多么复杂、多么宏大的对账系统，都是由一个个「账与账」之间最简单的对比核查构成。我们只要搞清楚每一组账怎么核对，然后再将此逻辑应用至多组账即可，万变不离其宗。为了缩减案例复杂度，方便大家理解，本案使用大多数电商都会接入的「支付宝」、「微信」两个支付渠道来举例。其实不论是接入互联网风格的「支付宝」，还是接国企风格的「银行」，又或者是海外支付渠道「paypal」都是类似的。他们除了接口、文件格式、鉴权等细节上的差异外，在抽象层面，对账逻辑是一致的，一通百通。一、如何搭建一套对账系统1.设置对账的目标账对账的核心是在不同系统中找到记录相同事件的账本，用这些关联账进行对比，发现其中的差错。比如（1）我方后台订单系统中的日结算金额与第三方支付系统中的日结算金额进行对比。（2）我方库存系统中的库存量与我方订单系统中订单中发出的货品数量进行对比2.获得账单数据（账单获取模块）（1）出账时间：各渠道日结算账单生成时间不同，有凌晨生成的，也有上午9点生成的。搞清楚出账时间，设定好抓取/下载时间，让系统自动下载（或手动下载后再上传至对账系统）。（2）账单文件格式：各渠道账单格式并不统一，有 csv、xml、txt、json 等，针对不同渠道，设定好对应的格式解析程序。3.账单格式标准化（数据标准化模块）各渠道账单针对同一个数据有不同的字段和命名方式。比如同一个「订单号」，支付宝叫「商户订单号」，我方系统中同样的数据叫「商城订单号」。再比如，同一个订单的支付金额，支付宝中叫「商家实收」，我方系统中叫「结算金额」。他们虽然命名不同，实际上是同一个数据在两套系统的反映。所以我们首相要将来自支付宝、微信、银行系统、银联、paypal等三方机构的账单数据统一口径，使数据可读，可对比。这个过程我们叫账单数据标准化。4.账单核对（账单核对模块）这一步大家一定要结合自己公司的业务逻辑来设计，不同的业务逻辑、财务管理方式会有不同的设计方法。但最基本的宗旨不会变，找出两套系统中对同一个订单的数据，对比这两个数据是否一致，找出差异，标记差异，在下一个模块处理。账单核对的细节，我们在第六章展开讲。5.对账单差错处理（差异处理模块）如果差错是可预见和可自动修复的，我们可使用机器自动处理，比如经典的「跨日支付」问题，订单创建在当日23:59分，支付时间在次日00:01。这时，第三方支付渠道对应我方系统中订单的支付信息，会在T+1日出现。这种情况，等待拿到次日账单后，再对一次即可解决。如果差错不可以自动处理，那么进入人工处理流程。人工处理首先要对比两组数据，找到问题所在，再手动执行解决方案，使两边对平。如果当下无法对平，可选择「挂起」，暂时存档差错，未来合适的时间再解决。关于差错处理，我们会在第七章详解。第三章：对账文件获取对账文件获取是整个对账系统的起点，我们首先要将支付宝、微信、银行、银联、第三方支付等支付渠道的对账单下载到本地，解析入库后，才能进行后续对账动作。每个支付渠道都有自己的结算周期和结算文件生成时间，以及文件格式，我们首先要查看支付渠道文档，把这些问题搞清楚。一、对账文件下载目前常见的渠道对账单下载方式主要有这几种调用 API 下载账单：这种方式简单干净，设定好接口鉴权及每日下载时间即可。非常友好，支付宝、微信均为此种方式。SFTP/FTP 下载账单：也是比较简单直接的获取方式，设定好本地目录及命名逻辑后，直接下载即可。手动下载：少数渠道仍然需要手动下载，虽然也可以写前端自动代码去拿，但总归不太直接。二、对账文件获取时间每一家支付渠道，会根据自己的情况，约定日对账单生成时间，我们要搞清楚每一家支付渠道生成账单的时间，然后在这个时间之后一段时间再去拉账单，才能高效的让对账系统运转起来。比如：微信支付，一般在次日上午9点左右出账单，我们10点以后拉取微信支付的对账单会比较合适。更多信息还请前往渠道支付对应的官网文档中确认。总会有些特殊情况，比如银联的清分时间就跟大家不同，所以一定要看清文档。各支付渠道文档，见本文最后扩展资料部分。三、对账文件的格式不同渠道对账文件的格式也不同，总体来说分为 CSV、json、txt、xml等格式。下面列举两类常见文件格式，供大家参考。1.微信对账单： txt 文件2.支付宝对账单：csv 格式四、对账文档 API 获取通过 API 获取支付机构对账文件，本文文末附支付渠道文档微信支付下载交易账单的API 文档第四章：对账文件标准化入库每天从各第三方支付渠道获取的对账文件均为原始对账数据，一定要保存好这些原始文件，方便在未来整个支付或对账系统出错时，可以追根溯源。一、原始对账文件标准化命名我们需要将各个渠道的原始对账文件根据自身属性来重新统一命名，方便未来查找与使用。例：「业务类型_支付渠道_清算日期_序列号.文件格式：alipay_20210721_03.csv」当然，我们要根据自己公司接入的所有支付渠道的情况，更宏观的找到一套合适的命名方法。二、对账文件数据统一标准化由于各支付渠道有自己一套字段体系，我们需要将各渠道对账单中字段统一起来，标准化后再入库存储。我们可以根据自己内部系统使用的字段为原点，来设计转化后的字段。对于多余和暂时用不到的字段可直接丢弃，减少冗余。未来需要时，我们可以从对账文件存储管理器中找到源数据。通用对账单字段参考注：上图字段引用无敌码农的总结，感谢前辈的无私分享。文字版点这里下载如果公司未来业务需要接入更多支付渠道，可以提前考虑对账系统的扩展性问题，设计一套解析流程，财务人员在后台即可设置新增对账账单的字段与公司内部订单系统字段是如何对应关联。三、对账数据入库查看各渠道对账数据清洗冗余信息，统一格式，解析入库后。我们可以在后台方便的查看每一天，各渠道对账数据，清晰明了。当在对账的任何环节出现问题，财务人员都可以在这里查询到对账系统，在对账时使用的数据，便于定位问题。第五章：账单核对逻辑理解本地对账数据与第三方支付对账数据就绪后，接下来我们可以将两边数据进行核对了。对账一般只有四种状态，两边一致（对平）、支付渠道多收了一笔（长款）、支付渠道少收一笔（短款）、本地和支付渠道两边都有，但数字不同（金额不一致）。其他错误都是这几种状态的扩展。一、核对模块几种错误状态及处理方法1.收款类交易对账短款差错：我们的订单中有记录，但支付渠道对账单中没有记录。简单讲就是少收钱了。一般此类错误通常是碰到「跨日交易」，用户在23:59分下单，在00:01分支付。长款差错：我们的订单中没有记录，但支付渠道收到钱了。简单讲就是多收钱了。一般此类错误多是我们的系统未正确接受支付渠道下发的支付成功返回信息。这种手动调整交易状态即可。错账：两边都有记录，但金额对不上。2.退款类对账退款类对账的错误，其实和收款大同小异。一般有这几种情况。本地未退款，渠道已退款：一般是渠道返回数据异常，按照渠道状态修改本地退款状态即可。本地已退款，渠道无记录（或反过来本地无记录，渠道已退）：可能是「跨日交易」问题，如不是，只能人工排查处理。本地与本地均为退款状态，但两边金额不同：需要人工排查处理。如果会计的思路不好理解，我们也可以按数据组来分。如下表我们来看这两张表，左表为我方订单数据，右表为支付渠道数据。两表之间由订单ID关联。我们可以看到 ID1 两边数据一致，即「对平」 ；ID2和ID4 两表格分别缺失，即「单边」；ID3虽然两边都有数据，单交易金额不一致，即「错帐」。对账系统会自动标记「单边」和「错帐」的订单，这些订单需要进入「差错处理」来人工处理。第六章：对账引擎逻辑设计一、起终日期在对账系统中的作用1.按时间顺序对账因为订单付退款关联顺序、跨日等因素，对账必须按时间顺序，顺序对账，不能跨日对账。如项目其实日为1号，虽然今天已经是15号，对账时，也必须从1号开始对。因为 t 天单边账，需要在 t+1 天里继续核对。跳跃对账会产生非常多不必要的麻烦。2.对账引擎设计请务必从「开始」沿箭头方向走一遍这张图，此图信息量较大，请先仔细查看流程图，然后再继续阅读。以「我方对账数据」作为基点，用「订单号」作为关联键，将我方对账数据与渠道方对账数据进行逐条对比。对比结果包含「对平」、「单边（长短款）」、「错账」。3.对账任务创建与查询整个对账引擎跑在服务器内，前端是看不到的，也不需要看。财务人员在创建任务时，只需要设定对账的起始日期和终止日结，勾选需要对账的订单库即可，剩下的交给对账引擎来完成。对账完毕后，财务人员再继续差错处理。第七章：对账差错处理自动对账执行完毕后，总会有一些系统无法自动匹配的错误。这些错误会在对账过程中被标记出来。在上一章我们已经讲过，差异错误包含「长款」、「短款」、「错帐」三个大类，实际对账过程中，出现对账差异的原因，千奇百怪，但不论差异有多奇怪，我们设计的差错处理流程，都应该能覆盖到。一、差错处理逻辑设计对于常见的有规律的差错单，我们可以设计一些规则来自动处理，比如跨日交易问题、三方渠道优惠券减免计算规则细微差异、货币转化等问题。各家都有自己独特的交易流程，财务管理办法，业务特性，所以对账中出现的差错也是千奇百怪，好在这些差错均可以穷尽，我们只需要将碰到的差错归类，设计好解决方案，一个问题解决了，这一类问题就都解决了。当自动规则无法平账时，需要我们手工处理。当下无法处理的，可以考虑挂起账单，未来合适的时间再处理。二、差错处理业务规则系统化当差错无法自动处理，需要人工手动处理时，我们需要把一套规范的流程和标准步骤写在系统里。举例：当对账差错为「长款」时，支付渠道显示支付成功，我方订单查询为空，我方掉单。这时，财务人员需要发起「补单」，这个「补单」补单审核流程，我们可以把它当作一个处理选项，放在「人工手动处理」。三、核对模块四种状态对平正常：两边对比无异常，标记为正常。差错未处理：两边对比异常，标记异常等待人工处理。差错已处理：人工处理后标记已处理。差错已挂起：某些暂时无法处理或永久忽略的问题标记挂起。第八章：如何快速搭建对账系统我用卡拉云按照本文思路搭建了一套对账系统，几个月的活，5天干完。卡拉云帮助后端程序员解决了数据库接入、API 调用等问题，前端组件拖放即用，可快速构建企业内部工具。卡拉云接入数据库及 API 的页面，支持常见的数据库和 API ，只需简单填写表单即可完成复杂的数据接入。第九章：扩展资料一、支付对账系统快速搭建工具卡拉云 - 支持快速接入数据库、API，前端组件即拖即用。可快速搭建对账系统。二、支付渠道接入文档微信支付新版接入文档QQ 钱包接入文档支付宝开放平台文档翼支付开发文档中国银行开放平台招商银行一网通支付工商银行开放平台建设银行开放银行农业银行开放银行三、对账系统搭建参考资料及拓展阅读谈谈对账（一）谈谈对账（二）MapReduce实现账单统计有赞业务对账平台的探索与实践美团配送资金安全治理之对账体系建设美的支付-对账系统实现支付对账系统怎么设计？本文作者蒋川，卡拉云联合创始人，B端产品经理，专注研究企业内部效率工具实施搭建我的个人微信：HiJiangChuan ，欢迎一起交流。卡拉云面向产品与技术的企业内部工具开发平台，只要会写SQL，即可快速上手。如果本文对你有帮助，想了解更多，欢迎访问我们的网站「卡拉云」
2022年04月
-
04.22 14:39:09
发表了文章
2022-04-22 14:39:09
Vue + Node.js 搭建「文件上传」管理后台
Vue + Node.js 搭建「文件上传」管理后台
-
04.15 14:49:54发表了文章
2022-04-15 14:49:54
全球排名前 3 的开源低代码开发平台测评
全球排名前 3 的开源低代码开发平台测评
-
04.11 21:53:03发表了文章
2022-04-11 21:53:03
Retool 是什么，怎么样？ —— Retool 低代码工具测评
Retool 是什么，怎么样？ —— Retool 低代码工具测评
-
04.10 14:00:41发表了文章
2022-04-10 14:00:41
ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色
ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色
-
04.09 02:40:39发表了文章
2022-04-09 02:40:39
订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统
订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统
-
04.07 12:33:59发表了文章
2022-04-07 12:33:59
Element Plus for Vue 3 入门教程
Element Plus for Vue 3 入门教程
-
04.07 12:03:40发表了文章
2022-04-07 12:03:40
Element Plus 和 Ant Design Vue 对比测评，哪个更好？
Element Plus 和 Ant Design Vue 对比测评，哪个更好？
-
04.02 03:40:47发表了文章
2022-04-02 03:40:47
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
2022年03月
-
03.29 03:28:23发表了文章
2022-03-29 03:28:23
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
-
03.29 03:11:36发表了文章
2022-03-29 03:11:36
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
-
03.29 02:30:17发表了文章
2022-03-29 02:30:17
React Router 6 (React路由) 最详细教程
React Router 6 (React路由) 最详细教程
-
03.21 10:11:44发表了文章
2022-03-21 10:11:44
最好的 6 款 React 后台管理系统模板和框架
最好的 6 款 React 后台管理系统模板和框架
-
03.21 10:10:43发表了文章
2022-03-21 10:10:43
最好的 6 款 React 后台管理系统模板和框架
最好的 6 款 React 后台管理系统模板和框架
-
03.21 09:45:41发表了文章
2022-03-21 09:45:41
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
-
03.19 00:30:17发表了文章
2022-03-19 00:30:17
Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板
Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板
-
03.16 23:54:03发表了文章
2022-03-16 23:54:03
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型 - 卡拉云
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型 - 卡拉云
-
03.16 23:36:52发表了文章
2022-03-16 23:36:52
最棒的 7 个 Laravel admin 后台管理系统推荐
最棒的 7 个 Laravel admin 后台管理系统推荐
-
03.08 00:04:51发表了文章
2022-03-08 00:04:51
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
-
03.07 23:31:37发表了文章
2022-03-07 23:31:37
appsmith 怎么用？评价如何
appsmith 怎么用？评价如何
-
03.07 23:13:20发表了文章
2022-03-07 23:13:20
React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云
React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云
-
03.04 23:09:12发表了文章
2022-03-04 23:09:12
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
2022年02月
-
02.28 23:59:43发表了文章
2022-02-28 23:59:43
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐 - 卡拉云
-
02.28 23:34:04发表了文章
2022-02-28 23:34:04
最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
-
02.28 23:16:52发表了文章
2022-02-28 23:16:52
如何在 Vue 中加入图表 - Vue echarts 使用教程 - 卡拉云
如何在 Vue 中加入图表 - Vue echarts 使用教程 - 卡拉云
-
02.26 08:07:53发表了文章
2022-02-26 08:07:53
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
-
02.26 07:00:37发表了文章
2022-02-26 07:00:37
Vue Router 手把手教你搭 Vue3 路由 - 卡拉云
Vue Router 手把手教你搭 Vue3 路由 - 卡拉云
-
02.24 09:25:55发表了文章
2022-02-24 09:25:55
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
2022年01月
-
01.24 23:22:39发表了文章
2022-01-24 23:22:39
最好用的 7 款 Vue admin 后台管理系统测评
最好用的 7 款 Vue admin 后台管理系统测评
-
01.22 01:02:10发表了文章
2022-01-22 01:02:10
最好用的 7 款 Vue 3 富文本编辑器
最好用的 7 款 Vue 3 富文本编辑器
2021年12月
-
12.31 17:31:36发表了文章
2021-12-31 17:31:36
最好的 6 个免费天气 API 接口对比测评
最好的 6 个免费天气 API 接口对比测评
-
12.31 17:07:29发表了文章
2021-12-31 17:07:29
Postman 使用教程 - 手把手教你 API 接口测试
Postman 使用教程 - 手把手教你 API 接口测试
-
12.17 20:58:56发表了文章
2021-12-17 20:58:56
最好用的 5 款 React 富文本编辑器
最好用的 5 款 React 富文本编辑器
-
12.17 19:49:12发表了文章
2021-12-17 19:49:12
最好用的七大顶级 API 接口测试工具
最好用的七大顶级 API 接口测试工具
-
12.06 23:39:10发表了文章
2021-12-06 23:39:10
MySQL 连接数过多的处理方法合集 - Too many connections - 卡拉云
MySQL 连接数过多的处理方法合集 - Too many connections - 卡拉云
-
12.05 23:18:43发表了文章
2021-12-05 23:18:43
MySQL「 Every derived table must have its own alias」错误修复方法
MySQL「 Every derived table must have its own alias」错误修复方法
-
12.05 23:15:39发表了文章
2021-12-05 23:15:39
MySQL 配置文件 my.cnf / my.ini 逐行详解
MySQL 配置文件 my.cnf / my.ini 逐行详解
-
12.03 13:16:47发表了文章
2021-12-03 13:16:47
MySQL only_full_group_by 1055 报错的三种解决方案，临时关闭有影响吗？
MySQL only_full_group_by 1055 报错的三种解决方案，临时关闭有影响吗？
2021年11月
-
11.26 23:55:13发表了文章
2021-11-26 23:55:13
如何使用 MySQL Workbench 自动生成 ER 图、同步更新远程数据库 - MySQL Workbench 使用教程
如何使用 MySQL Workbench 自动生成 ER 图、同步更新远程数据库 - MySQL Workbench 使用教程
-
11.26 23:21:12发表了文章
2021-11-26 23:21:12
如何使用 Workbench 远程连接到 MySQL 数据库 -MySQL Workbench 使用教程
如何使用 Workbench 远程连接到 MySQL 数据库 -MySQL Workbench 使用教程
-
11.23 23:37:37发表了文章
2021-11-23 23:37:37
MySQL Workbench 使用教程 - 如何使用 Workbench 操作 MySQL / MariaDB 数据库中文指南
MySQL Workbench 使用教程 - 如何使用 Workbench 操作 MySQL / MariaDB 数据库中文指南
2021年07月
-
07.16 16:48:43发表了文章
2021-07-16 16:48:43
如何设计财务对账系统 —— 从0到1搭建对账中心实战
如何设计财务对账系统 —— 从0到1搭建对账中心实战
-
发表了文章
2022-04-22
Vue + Node.js 搭建「文件上传」管理后台
-
发表了文章
2022-04-15
全球排名前 3 的开源低代码开发平台测评
-
发表了文章
2022-04-11
Retool 是什么，怎么样？ —— Retool 低代码工具测评
-
发表了文章
2022-04-10
ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色
-
发表了文章
2022-04-09
订单管理系统(OMS)搭建实战 - 低代码拖拽定制订单管理系统
-
发表了文章
2022-04-07
Element Plus for Vue 3 入门教程
-
发表了文章
2022-04-07
Element Plus 和 Ant Design Vue 对比测评，哪个更好？
-
发表了文章
2022-04-02
Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件
-
发表了文章
2022-03-29
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
-
发表了文章
2022-03-29
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
-
发表了文章
2022-03-29
React Router 6 (React路由) 最详细教程
-
发表了文章
2022-03-21
最好的 6 款 React 后台管理系统模板和框架
-
发表了文章
2022-03-21
最好的 6 款 React 后台管理系统模板和框架
-
发表了文章
2022-03-21
手把手教你用 Vue 搭建带预览的「上传图片」管理后台
-
发表了文章
2022-03-19
Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板
-
发表了文章
2022-03-16
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型 - 卡拉云
-
发表了文章
2022-03-16
最棒的 7 个 Laravel admin 后台管理系统推荐
-
发表了文章
2022-03-08
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
-
发表了文章
2022-03-07
appsmith 怎么用？评价如何
-
发表了文章
2022-03-07
React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云
滑动查看更多
暂无更多信息
暂无更多信息