实操部署amis-admin

news2024/10/17 16:24:01

当需要做一个web服务的时候，前端的实现很令我头疼。搜了一圈前端低代码框架后，注意到百度贡献的amis，通过json来写前端，很酷啊。不得不说，一个好的demo项目，真的能让人迅速进入状态，比直接看文档要直观的多。

前期准备

  • clone amis-admin项目，可以从gitee上找个fork，下载速度快，例如 https://gitee.com/rocching/amis-admin
  • 为了不影响其它项目， 启动一个Ubuntu22.04的docker，将下载的项目挂载进去,将docker的3000端口映射为宿主机的3333端口，后续操作都在docker中进行
admin@my_pc:~/admin/amis_demo$ docker run -d --name amis_demo -p 3333:3000 --privileged -v ${PWD}:/root/amis_demo -v /sys/fs/cgroup:/sys/fs/cgroup:ro jrei/systemd-ubuntu:22.04
c14e1b652b7b7e89b48d1c28c7bd73418ce4de1e8948ee0bf9454bfe313f9180
admin@my_pc:~/admin/amis_demo$
  • apt更新后，安装必要的软件
admin@my_pc:~/admin/amis_demo$ docker exec -it amis_demo bash
root@c14e1b652b7b:/# cat /etc/issue
Ubuntu 22.04.5 LTS \n \l

root@c14e1b652b7b:/# 

root@c14e1b652b7b:/# apt install vim curl  wget git -y

node.js相关

  • amis是基于Vue二次开发的，因此需要安装node和vue
  • 直接使用apt安装node，版本太低，改为使用nvm
  • 首先下载并运行脚本安装nvm
root@c14e1b652b7b:/# curl -o- https://gitee.com/RubyMetric/nvm-cn/raw/main/install.sh | bash
  • source后确认nvm版本
root@c14e1b652b7b:/# source ~/.bashrc
root@c14e1b652b7b:/# 
root@c14e1b652b7b:/# nvm --version
0.39.5
root@c14e1b652b7b:/#
  • 安装node 20版本
root@c14e1b652b7b:/# nvm install 20
Downloading and installing node v20.18.0...
Downloading https://nodejs.org/dist/v20.18.0/node-v20.18.0-linux-x64.tar.xz...
################################################################################################################################################# 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.18.0 (npm v10.8.2)
Creating default alias: default -> 20 (-> v20.18.0)
root@c14e1b652b7b:/# 

root@c14e1b652b7b:/# node -v
v20.18.0
root@c14e1b652b7b:/#

root@c14e1b652b7b:/# npm -v
10.8.2
root@c14e1b652b7b:/#
  • 设置npm国内源
root@c14e1b652b7b:/# npm config set registry https://registry.npmmirror.com/
root@c14e1b652b7b:/# 
root@c14e1b652b7b:/# npm config get registry 
https://registry.npmmirror.com/
root@c14e1b652b7b:/#
  • 全局安装vue/cli
root@c14e1b652b7b:/# npm install -g @vue/cli

root@c14e1b652b7b:/# vue -V
@vue/cli 5.0.8
root@c14e1b652b7b:/#

部署amis

安装指定package

  • 在项目文件夹中，包含package.json,其中
root@c14e1b652b7b:~/amis_demo# cat package.json 
{
  "name": "amis-boilerplate",
  "version": "1.0.0",
  "description": "基于 amis 的项目模板",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "gh-pages": "rm -rf gh-pages && fis3 release gh-pages -c",
    "deploy-gh-pages": "git subtree push --prefix gh-pages origin gh-pages"
  },
  "keywords": [
    "amis",
    "boilerplate",
    "admin",
    "react"
  ],
  "author": "fex",
  "license": "MIT",
  "devDependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.7",
    "reload": "^3.1.1"
  }
}
root@c14e1b652b7b:~/amis_demo#
  • 输入npm install，安装json文件中"devDependencies"所列的package
root@c14e1b652b7b:~/amis_demo# npm install
  • 但是上述json中，没有把amis包含在内，那就手动安装一下
root@c14e1b652b7b:~/amis_demo# npm i amis
  • 可以看到node_module中多了amis文件夹
root@c14e1b652b7b:~/amis_demo# ls -lt node_modules/amis
total 4116
drwxr-xr-x 4 root root    4096 Oct 15 10:12 sdk
drwxr-xr-x 3 root root     262 Oct 15 10:12 esm
drwxr-xr-x 4 root root     302 Oct 15 10:12 lib
-rw-r--r-- 1 root root 4194599 Oct 15 10:12 schema.json
-rw-r--r-- 1 root root    6580 Oct 15 10:12 package.json
-rw-r--r-- 1 root root     190 Oct 15 10:12 revision.json
drwxr-xr-x 3 root root      32 Oct 15 10:12 node_modules
root@c14e1b652b7b:~/amis_demo#
  • 另外amis用到的页面，都在pages目录下，真的都是json啊
root@c14e1b652b7b:~/amis_demo# ls -lt pages/
total 52
-rw-rw-r-- 1 1003 1003   66 Oct 15 09:56 console.json
-rw-rw-r-- 1 1003 1003 7985 Oct 15 09:56 crud-advance.json
-rw-rw-r-- 1 1003 1003 1309 Oct 15 09:56 crud-edit.json
-rw-rw-r-- 1 1003 1003 3867 Oct 15 09:56 crud-list.json
-rw-rw-r-- 1 1003 1003 1387 Oct 15 09:56 crud-new.json
-rw-rw-r-- 1 1003 1003 1303 Oct 15 09:56 crud-view.json
-rw-rw-r-- 1 1003 1003  368 Oct 15 09:56 editor.json
-rw-rw-r-- 1 1003 1003 5809 Oct 15 09:56 form-basic.json
-rw-rw-r-- 1 1003 1003  202 Oct 15 09:56 jsonp.js
-rw-rw-r-- 1 1003 1003 3309 Oct 15 09:56 site.json
-rw-rw-r-- 1 1003 1003 2598 Oct 15 09:56 wizard.json
root@c14e1b652b7b:~/amis_demo#

直接运行

  • 默认web服务监听3000端口，可以自行修改
root@c14e1b652b7b:~/amis_demo# cat server.js | grep PORT
app.set('port', process.env.PORT || 3000);
root@c14e1b652b7b:~/amis_demo#
  • 运行
root@c14e1b652b7b:~/amis_demo# npm start

> amis-boilerplate@1.0.0 start
> node server.js

Web server listening on port http://localhost:3000
  • 此时在宿主机上打开 http://<host_ip>:3333/,就可以看到呈现的效果了
    在这里插入图片描述

资源本地化

  • 查看index.html，可以看到引用的css和js还是cdn的地址，而且还是amis@3.2.0版本
  • 下面的操作将它们本地化，不依赖于cdn
  • 创建目录，按照index.html内容中的地址将js下载到本地
root@c14e1b652b7b:~/amis_demo# mkdir -p static/js
root@c14e1b652b7b:~/amis_demo# cd static/js
root@c14e1b652b7b:~/amis_demo/static/js# 
root@c14e1b652b7b:~/amis_demo/static/js# wget https://unpkg.com/vue@2
root@c14e1b652b7b:~/amis_demo/static/js# wget https://unpkg.com/history@4.10.1/umd/history.js
root@c14e1b652b7b:~/amis_demo/static/js# ls -lt
total 464
-rw-r--r-- 1 root root  33415 Oct 26  1985 history.js
-rw-r--r-- 1 root root 434871 Oct 26  1985 vue@2
root@c14e1b652b7b:~/amis_demo/static/js#
  • 确认amis/sdk文件夹下面所需的文件都有
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name sdk.css
node_modules/amis/sdk/sdk.css
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name helper.css
node_modules/amis/sdk/helper.css
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name iconfont.css
node_modules/amis/sdk/iconfont.css
root@c14e1b652b7b:~/amis_demo# find node_modules/amis/sdk -name sdk.js
node_modules/amis/sdk/sdk.js
root@c14e1b652b7b:~/amis_demo#
  • 修改server.js，设置路径缩写
root@c14e1b652b7b:~/amis_demo# diff -ruN server.js_bak server.js     
--- server.js_bak       2024-10-15 23:57:09.322313787 +0000
+++ server.js   2024-10-16 00:38:46.459088228 +0000
@@ -13,6 +13,9 @@
 
 app.use('/public', express.static('public'));
 app.use('/pages', express.static('pages'));
+app.use('/amis_sdk', express.static('node_modules/amis/sdk'));
+app.use('/sjs', express.static('static/js'));
+
 
 app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'index.html'));
root@c14e1b652b7b:~/amis_demo#
  • 修改index.html，使用上面定义的缩写，改为本地路径
root@c14e1b652b7b:~/amis_demo# diff -ruN index.html_bak index.html 
--- index.html_bak      2024-10-15 23:58:36.175041017 +0000
+++ index.html  2024-10-16 00:39:32.999628248 +0000
@@ -12,17 +12,16 @@
     <link
       rel="stylesheet"
       title="default"
-      href="https://unpkg.com/amis@3.2.0/sdk/sdk.css"
+      href="/amis_sdk/sdk.css"
     />
-    <link rel="stylesheet" href="https://unpkg.com/amis@3.2.0/sdk/helper.css" />
+    <link rel="stylesheet" href="/amis_sdk/helper.css" />
     <link
       rel="stylesheet"
-      href="https://unpkg.com/amis@3.2.0/sdk/iconfont.css"
+      href="/amis_sdk/iconfont.css"
     />
-    <script src="https://unpkg.com/amis@3.2.0/sdk/sdk.js"></script>
-    <script src="https://unpkg.com/vue@2"></script>
-    <script src="https://unpkg.com/history@4.10.1
-/umd/history.js"></script>
+    <script src="/amis_sdk/sdk.js"></script>
+    <script src="/sjs/vue@2"></script>
+    <script src="/sjs/history.js"></script>
     <style>
       html,
       body,
root@c14e1b652b7b:~/amis_demo#
  • 重新运行npm start，可以看到web呈现效果不变

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp 省、市、区、乡镇 数据层级选择插件 Ba-DataPicker

uniapp 省、市、区、乡镇 数据层级选择插件 Ba-DataPicker

Ba-DataPicker 是一款uniapp数据层级选择弹窗插件。支持省市区乡四级&#xff1b;支持自定义数据。 支持省、市、区、乡镇四级支持自定义数据支持字母检索 截图展示 支持定制、本地包、源码等&#xff0c;有建议和需要&#xff0c;请点击文章结尾“Uniapp插件开发”联系我&am…
阅读更多...
高级prompt工程技巧：如何引导模型生成更精确的输出

高级prompt工程技巧：如何引导模型生成更精确的输出

在人工智能领域&#xff0c;提示词工程&#xff08;Prompt Engineering&#xff09;是提升模型输出质量的关键技术之一。通过精心设计的提示词&#xff0c;我们可以引导模型生成更符合预期的结果。本文将深入探讨几种高级提示词工程技巧&#xff0c;并提供实际操作的示例&#…
阅读更多...
SpringBoot中集成海康威视SDK实现布防报警数据上传/交通违章图片上传并在linux上部署(附示例代码资源)

SpringBoot中集成海康威视SDK实现布防报警数据上传/交通违章图片上传并在linux上部署(附示例代码资源)

场景 需对接海康威视交通产品中的交通违章检测功能&#xff0c;实现车辆闯红灯时获取抓拍数据(车牌号)并获取上传的抓拍图片。 根据其官方资料设备网络SDK使用手册中说明&#xff0c;此流程需要可以通过报警布防方式进行。 访问官方下载SDK文档等资料 海康威视-引领智能物联…
阅读更多...
华三服务器R4900 G5在图形界面使用PMC阵列卡（P460-B4）创建RAID，并安装系统（中文教程）

华三服务器R4900 G5在图形界面使用PMC阵列卡（P460-B4）创建RAID，并安装系统（中文教程）

环境以用户需求安装Centos7.9&#xff0c;服务器使用9块900G硬盘&#xff0c;创建RAID1和RAID6&#xff0c;留一块作为热备盘。 使用笔记本通过HDM管理口&#xff08;&#xff09;登录 使用VGA&#xff08;&#xff09;线连接显示器和使用usb线连接键盘鼠标&#xff0c;进行窗…
阅读更多...
生成 Excel 表列名称

生成 Excel 表列名称

Excel 大家都用过&#xff0c;它的列名是用字母编号的&#xff0c;A 表示第一列&#xff0c;B 表示第二列&#xff0c;AA 表示第27列&#xff0c;AB 表示第28列等等。 现给定一个数字&#xff0c;如何得到列名称呢。比如输入28&#xff0c;输出 AB。 一开始以为就是一个简单的…
阅读更多...
C++ 算法学习——1.9 Kruskal算法

C++ 算法学习——1.9 Kruskal算法

Kruskal算法是一种用于解决最小生成树&#xff08;Minimum Spanning Tree&#xff09;问题的贪婪算法。 Kruskal算法步骤&#xff1a; 初始化&#xff1a;将图中的所有边按照权值从小到大进行排序。 创建并查集&#xff1a;为每个顶点创建一个集合&#xff0c;用于判断两个顶…
阅读更多...
中国灌溉农田空间分布

中国灌溉农田空间分布

针对全国灌溉农田空间分布数据缺失的现状&#xff0c;融合MODIS植被指数和统计数据生成MIrAD-GI临时灌溉数据集&#xff0c;再利用约束统计和协同绘图方法将其与中国区域现有灌溉数据进行集成、整合&#xff0c;生成了2000-2019年中国逐年灌溉农田分布数据集&#xff08;500米空…
阅读更多...
5、JavaScript(四)

5、JavaScript(四)

25.ajax : 前端向后端异步的取数据而无需刷新页面的技术 1 公司中的整体工作流程 1、项目开发的流程 每个职位该做的工作&#xff1a; 产品经理&#xff1a;提需求的 与客户沟通 画出原型图给程序员使用 UI设计师&#xff1a;美化 替换UI框架&#xff1a;antd element-ui e…
阅读更多...
python将照片集导出成视频

python将照片集导出成视频

shigen坚持更新文章的博客写手&#xff0c;记录成长&#xff0c;分享认知&#xff0c;留住感动。个人IP&#xff1a;shigen 背景 一个安静的下午&#xff0c;看着电脑里乱七八糟的照片&#xff0c;有大有小&#xff0c;宽高不一&#xff0c;突然想找个方式把他们统一起来&…
阅读更多...
SketchUp Pro 2024 for Mac 3D建模 草图设计大师软件安装【保姆级教程，简单小白轻松上手】

SketchUp Pro 2024 for Mac 3D建模 草图设计大师软件安装【保姆级教程，简单小白轻松上手】

Mac分享吧 文章目录 SketchUp Pro 3D建模 草图设计大师软件 安装完成&#xff0c;软件打开效果一、Mac中安装SketchUp Pro 3D建模 草图设计大师软件——v241️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件&#xff0c;将安装包从左侧拖入右侧文件夹中3️⃣&#xff1a;应…
阅读更多...
【数据结构】7道经典链表面试题

【数据结构】7道经典链表面试题

目录 1.返回倒数第K个节点【链接】 代码实现 2.链表的回文结构【链接】 代码实现 3.相交链表【链接】 代码实现 4.判断链表中是否有环【链接】 代码实现 常见问题解析 5.寻找环的入口点【链接】 代码实现1 代码实现2 6.随机链表的复制【链接】 代码实现 7.顺序…
阅读更多...
DS堆的特性和实现(9)

DS堆的特性和实现(9)

文章目录 前言一、堆的概念和结构二、堆的调整算法向下调整算法向上调整算法两种算法建堆的时间复杂度 三、堆的实现结构体定义初始化和销毁堆的插入堆的删除挪移数据覆盖删除首尾交换再删除 获取堆顶元素获取有效数据个数判断是否为空 总结 前言 继续&#xff0c;本篇较难   …
阅读更多...
我的创作纪念日-365天的感悟

我的创作纪念日-365天的感悟

时光荏苒&#xff0c;岁月如梭。转眼间&#xff0c;自己在CSDN注册已经整整15个年头了。回想起当初&#xff0c;还是个满怀憧憬、对未来充满无限好奇的学生哥。如今&#xff0c;虽然身份和角色发生了诸多变化&#xff0c;但CSDN始终陪伴着我&#xff0c;见证了我的成长与蜕变。…
阅读更多...
JavaWeb环境下的Spring Boot在线考试系统开发

JavaWeb环境下的Spring Boot在线考试系统开发

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理基于JavaWeb技术的在线考试系统设计与实现…
阅读更多...
深入探讨C++多线程性能优化

深入探讨C++多线程性能优化

深入探讨C多线程性能优化 在现代软件开发中&#xff0c;多线程编程已成为提升应用程序性能和响应速度的关键技术之一。尤其在C领域&#xff0c;多线程编程不仅能充分利用多核处理器的优势&#xff0c;还能显著提高计算密集型任务的效率。然而&#xff0c;多线程编程也带来了诸…
阅读更多...
OpenAI的新功能Canvas，效果还不错

OpenAI的新功能Canvas，效果还不错

时隔两年&#xff0c;ChatGPT终迎来界面全新升级&#xff01; 这一次&#xff0c;OpenAI官宣推出类似 Anthropic 的 Artifacts 的界面交互功能 canvas&#xff0c;并称这是一种使用 ChatGPT 写作和编程的新方式。不论是写作&#xff0c;还是编码&#xff0c;都可以开启全新的交…
阅读更多...
什么！我上传的文件不见了?

什么！我上传的文件不见了?

什么&#xff01;我上传的文件不见了? 前言&#xff1a; 最近在实现一个文件上传功能时使用了异步处理&#xff0c;但是在异步处理文件时&#xff0c;却提示NoSuchFileException错误。简化代码如下&#xff1a; PostMapping("/upload")void testFileUpload(Reques…
阅读更多...
Flume抽取数据（包含自定义拦截器和时间戳拦截器）

Flume抽取数据（包含自定义拦截器和时间戳拦截器）

flume参考网址&#xff1a;Flume 1.9用户手册中文版 — 可能是目前翻译最完整的版本了https://flume.liyifeng.org/?flagfromDoc#要求&#xff1a; 使用Flume将日志抽取到hdfs上&#xff1a;通过java代码编写一个拦截器&#xff0c;将日志中不是json数据的数据过滤掉&#xf…
阅读更多...
学习文档10/16

学习文档10/16

MySQL 字符集&#xff1a; MySQL 支持很多种字符集的方式&#xff0c;比如 GB2312、GBK、BIG5、多种 Unicode 字符集&#xff08;UTF-8 编码、UTF-16 编码、UCS-2 编码、UTF-32 编码等等&#xff09;。 查看支持的字符集 你可以通过 SHOW CHARSET 命令来查看&#xff0c;支持…
阅读更多...
一次性理清Environment体系

一次性理清Environment体系

在Spring中&#xff0c;我们可以通过配置文件等方式去进行一些属性值的配置&#xff0c;比如通过Value注解去获取到对应的属性值&#xff0c;又或者说是想在程序运行时获取系统环境变量&#xff0c;类似的这些操作其实都是去获取一些配置数据&#xff0c;所以在Spring中对这些数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023