【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的内容编辑如下:

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即可,修改后的代码如下:

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!

相关推荐
vvilkim4 分钟前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
猿究院_xyz1 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
前端大白话3 小时前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
喝拿铁写前端13 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
进取星辰20 小时前
13、性能优化:魔法的流畅之道——React 19 memo/lazy
前端·react.js·前端框架
zwjapple1 天前
React 的 useEffect 清理函数详解
前端·react.js·前端框架
Thomas游戏开发1 天前
Unity3D Audio Mixer自定义调制教程
前端框架·unity3d·游戏开发
旅行者1024号1 天前
vue3--手写手机屏组件
javascript·前端框架
知识分享小能手1 天前
JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
开发语言·javascript·学习·ajax·前端框架·css3·html5
我命由我123452 天前
Android Cordova 开发 - Cordova 快速入门(Cordova 环境配置、Cordova 第一个应用程序)
android·开发语言·前端框架·android studio·h5·安卓·android-studio