【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成


前端技术路线太多了,知识点更多,感觉前端的技术都是搞艺术的文科生搞出来的,没有任何逻辑可言,都是东一块,西一块,南一榔头,北一锤子,中间就是补丁摞补丁拼凑在一起的。一点都不科学。
发发牢骚,改变不了历史的进程,只能适应。下面开始基于amis-admin构建json2web自己的框架。

1 目录结构

Step 1 :复制 amis-admin的目录,目录名修改为JSON2WEB,结果如下图:
在这里插入图片描述
Step 2 :删除不需要的页面
删除/page/目录下不需要的页面。

Step 3 : 准备Logo图标
拷贝logo图标文件5217.jpg到/public/目录下。

2 结构文件修改

2.1 创建服务启动批处理npm-start.bat

npm-start.bat的内容编辑如下:

npm start

在这里插入图片描述
这样鼠标双击npm-start.bat即可启动服务
在这里插入图片描述

2.2 修改服务版本信息

打开package.json文件,修改name及version节点。
在这里插入图片描述

2.3 配置服务信息

修改server.js即可,主要是增加本地静态目录sdk(为了使用本地sdk),服务端口,启动入口等信息根据需要适当修改。
在这里插入图片描述

2.4 引入本地SDK

index.html主要进入文件有sdk.css 、helper.css 、 sdk.js 、history.js 共4个文件。其中前3个来自amis的SDK目录,history.js 从https://cdn.jsdelivr.net/npm/history/umd/history.js 下载并另存到本地sdk目录下。
在这里插入图片描述
注释掉原来的引入文件,改为本地导入,外部引入我这里网络很不稳定,有时能连接,大部分时候不行。
另:注释掉 vue@2的引入,这个框架中貌似没有用到,
修改Logo和系统名称:
在这里插入图片描述
修改页脚区域:版权没有,翻版不究

2.5 配置左侧导航树

修改/pages/site.json即可,修改后的代码如下:

{"status": 0,"msg": "","data": {"pages": [{"label": "Home","url": "/","redirect": "/hello"},{"label": "导航树","children": [{"label": "Json2Web","children": [{"label": "Hello","url": "hello","schemaApi": "get:/pages/hello.json"},{"label": "Atop","url": "atop","schemaApi": "get:/pages/atop.json"},{"label": "HelloFrom","url": "form","schemaApi": "get:/pages/hello-form.json"}              ]}]},{"label": "示例","children": [{"label": "用户管理","schema": {"type": "page","title": "用户管理","body": "页面C"}},{"label": "amis文档","link": "http://baidu.gitee.io/amis"},{"label": "部门管理","schemaApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/service/form?tpl=tpl3"}]}]}
}

3 JSON2WEB启动及演示效果

3.1 启动服务

双击npm-start.bat启动服务:
在这里插入图片描述

3.2 浏览器打开

浏览器打开 http://localhost:3000 显示结果如下:

在这里插入图片描述
服务窗口显示运行日志信息如下:
在这里插入图片描述
切换atop页面:
在这里插入图片描述
OK!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HC32F460 是否有 RTC?在电池供电方案中该如何使用?

[技术问答]HC32F460 是否有 RTC?在电池供电方案中该如何使用?_hc32f460 rtc-CSDN博客 华大HC32A460 系列介绍(三)_华大单片机内部温度传感器-CSDN博客 HC32F460PETB-LQFP100-华大半导体有限公司 [【HC32F460开发板测评】&#xf…

8.题目:编号191 特别数的和

###这道题主要考察枚举 #include<bits/stdc.h> using namespace std; bool f(int x){while(x){int yx%10;if(y2||y0||y1||y9){return true;}x/10;}return false; } int main(){int n;cin>>n;int ans0;for(int i1;i<n;i){if(f(i)){ansi;}}cout<<ans<&…

【Redis 常见的5种数据类型】List | Set | Zset

文章目录 [toc] 1 :peach:List:peach:1.1 :apple:lpush:apple:1.2 :apple:lpushx:apple:1.3 :apple:rpush:apple:1.4 :apple:rpushx:apple:1.5 :apple:lrange:apple:1.6 :apple:lpop:apple:1.7 :apple:rpop:apple:1.8 :apple:lindex:apple:1.9 :apple:linsert:apple:1.10 :appl…

QT摄像头采集

主界面为显示框&#xff0c;两个下拉框&#xff0c;一个是所有相机&#xff0c;一个是相机支持的分辨率 系统根据UI界面自动生成的部分不再描述&#xff0c;以下为其他部分源码 widget.h #include <QWidget> #include <QMouseEvent> class QCamera; class QCamer…

阿里云ECS服务器vCPU是什么意思?

阿里云ECS服务器vCPU和CPU是什么意思&#xff1f;CPU和vCPU有什么区别&#xff1f;一台云服务器ECS实例的CPU选项由CPU物理核心数和每核线程数决定&#xff0c;CPU是中央处理器&#xff0c;一个CPU可以包含若干个物理核&#xff0c;通过超线程HT&#xff08;Hyper-Threading&am…

Linux——静态库

Linux——静态库 静态库分析一下 ar指令生成静态库静态库的使用第三方库优化一下 gcc -I(大写的i) -L -l(小写的l)&#xff0c;头文件搜索路径&#xff0c;库文件搜索路径&#xff0c;连接库 今天我们来学习静态库的基本知识。 静态库 在了解静态库之前&#xff0c;我们首先来…

MongoDB - readConcern

readConcern 是 MongoDB 提供的一个功能&#xff0c;用于控制在读取操作期间所使用的数据一致性级别。在分布式环境中&#xff0c;可能会出现数据读取时的一致性问题&#xff0c;readConcern 允许您指定在读取数据时所需的一致性级别&#xff0c;以满足特定的业务需求。 在 Mo…

云服务器ECS价格表出炉_2024年最新价格表——阿里云

2024年最新阿里云服务器租用费用优惠价格表&#xff0c;轻量2核2G3M带宽轻量服务器一年61元&#xff0c;折合5元1个月&#xff0c;新老用户同享99元一年服务器&#xff0c;2核4G5M服务器ECS优惠价199元一年&#xff0c;2核4G4M轻量服务器165元一年&#xff0c;2核4G服务器30元3…

BL0942 内置时钟免校准计量芯片 用于智能家居领域 低成本

BL0939是上海贝岭股份有限公司开发的一款用于智能家居领域进行电能测量的专用芯片&#xff0c;支持两路测量&#xff0c;可同时进行计量和漏电故障检测&#xff0c;漏电检测电流可设&#xff0c;响应时间快&#xff0c;具有体积小&#xff0c;外围电路简单&#xff0c;成本低廉…

模拟器和电脑端adb版本不一致解决办法

window电脑和模拟器的adb版本不一致&#xff0c;如何解决&#xff1f; 1.查看自己电脑的adb版本&#xff1b;使用adb --version 2.查看模拟器的adb版本 cmd切换至模拟器bin目录&#xff0c;输入nox_adb --version 3.要找到电脑端的adb在哪个目录下&#xff1b;where adb 4.打…

六、防御保护---防火墙内容安全篇

六、防御保护---防火墙内容安全篇 一、IAE&#xff08;Intelligent Awareness Engine&#xff09;引擎二、深度检测技术(DFI和DPI&#xff09;2.1 DPI -- 深度包检测技术2.1.1 基于“特征字”的检测技术2.1.2 基于应用网关的检测技术2.1.3 基于行为模式的检测技术 2.2 DFI -- 深…

【Go 快速入门】协程 | 通道 | select 多路复用 | sync 包

文章目录 前言协程goroutine 调度使用 goroutine 通道无缓冲通道有缓冲通道单向通道 select 多路复用syncsync.WaitGroupsync.Mutexsync.RWMutexsync.Oncesync.Map 项目代码地址&#xff1a;05-GoroutineChannelSync 前言 Go 1.22 版本于不久前推出&#xff0c;更新的新特性可…

git describe

git describe一般用于查看当前提交距离上次最近的tag是什么&#xff0c;并且还可以知道差了多少个commit&#xff0c;在工程实践当中是个非常好用的命令 如果git describe后面什么都不加的话&#xff0c;默认找的是最近的有注释的tag 如何打有注释的tag打注释&#xff1f; g…

vue-router4 (五) 路由传参的2种方法

以A组件向B组件传参为例&#xff1a; 方法1&#xff1a; A组件中传数据&#xff08;用path query&#xff09;&#xff1a; const toDetail (item:TtemType)>{router.push({path:"/reg", //对应路由中的path路径query: item //将传递的数据放在query中&a…

【Git】解决‘每次初始化一个新仓库时,都需要执行git config --global --add safe.directory命令‘

问题 这个命令是用来将一个安全目录添加到全局的 Git 配置中。但每次克隆一个仓库或者新建一个仓库&#xff0c;并且对该仓库进行操作时&#xff0c;都需要执行该命令&#xff0c;十分麻烦&#xff01; 这是因为&#xff0c;Git 近期进行了版本升级&#xff0c;添加了新的目录…

【python + flask】字典字段对模型字段的自动赋值,抽象编程思维培养,框架能力

场景&#xff1a; 客户端提交上来的数据 # Time :2024-2024/2/27-10:40 # Author :Justin # Email :514422868qq.com # file :demo1.py # Software :FisherBook# class A(): # def __enter__(self): # print("I am enter!") # …

Python3学习笔记39-passlib

passlib处理密码哈希的python包,支持很多哈希算法和工具 bcrypt 安装 pip install passlib[bcrypt] 会安装passlib包和bcrypt两个包 密码哈希与校验 from passlib.context import CryptContext# 创建CryptContext对象&#xff0c;指定加密算法 pwd_context CryptContext…

大语言模型构建的主要四个阶段(各阶段使用的算法、数据、难点以及实践经验)

大语言模型构建通常包含以下四个主要阶段&#xff1a;预训练、有监督微调、奖励建模和强化学习&#xff0c;简要介绍各阶段使用的算法、数据、难点以及实践经验。 预训练 需要利用包含数千亿甚至数万亿 单词的训练数据&#xff0c;并借助由数千块高性能 GPU 和高速网络组成的…

【测试】微软测试框架playwright的使用

Playwright常用知识点 1.playwright2.配置要求3.安装4.打开浏览器4.1 上下文模式4.2 交互模式4.3 异步打开 5.常用对象5.1 Browser5.2 BrowserContext5.3 Page 6.元素定位器&#xff08;Locator&#xff09;6.1 css、xpath、text定位器6.2 文本定位器6.3 get_by_role6.4 get_by…

非阻塞式 I/O 模型的工作原理【NIO】

非阻塞式 I/O&#xff08;Non-blocking I/O&#xff0c;NIO&#xff09;是一种改进的 I/O 模型&#xff0c;引入了通道&#xff08;Channel&#xff09;和缓冲区&#xff08;Buffer&#xff09;的概念。相比于阻塞式 I/O&#xff0c;非阻塞式 I/O 允许在进行读/写操作时不会导致…