实操部署amis-admin

当需要做一个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 \lroot@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/cliroot@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.jsWeb 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 @@<linkrel="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" /><linkrel="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.rhkb.cn/news/450381.html

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

相关文章

c++常用库函数

c++常用库函数

一.sort排序 快排的改进算法&#xff0c;评价复杂度为(nlogn). 1.用法 sort(起始地址&#xff0c;结束地址下一位&#xff0c;*比较函数) [起始地址&#xff0c;结束地址) (左开右闭) #include<bits/stdc.h> using namespace std; int main() {//sortvector<int&g…
阅读更多...
基础sql

基础sql

在执行删除操作之前&#xff0c;建议先运行一个 SELECT 查询来确认你要删除的记录。这可以帮助你避免误删数据。 删除字段id默认值为空字符串的所有数据 delete from users where id ; 删除字段id默认值为null的所有数据 delete from users where id is null; 删除字段upd…
阅读更多...
msvcp140.dll重新安装的解决方法，msvcp140.dll丢失快速修复教程

msvcp140.dll重新安装的解决方法，msvcp140.dll丢失快速修复教程

msvcp140.dll丢失的问题是许多电脑用户经常遇到的问题。msvcp140.dll是Microsoft Visual C Redistributable Package的一部分&#xff0c;这个软件包包含了许多Windows系统运行所需的重要文件。当msvcp140.dll丢失时&#xff0c;可能会导致许多应用程序无法正常运行&#xff0c…
阅读更多...
基于华为云智慧生活生态链设计的智能鱼缸

基于华为云智慧生活生态链设计的智能鱼缸

一. 引言 1.1 项目背景 随着智能家居技术的发展和人们对高品质生活的追求日益增长&#xff0c;智能鱼缸作为一种结合了科技与自然美的家居装饰品&#xff0c;正逐渐成为智能家居领域的新宠。本项目旨在设计一款基于华为云智慧生活生态链的智能鱼缸&#xff0c;它不仅能够提供…
阅读更多...
初阶数据结构【2】--顺序表(详细且通俗易懂，不看一下吗？)

初阶数据结构【2】--顺序表(详细且通俗易懂，不看一下吗？)

本章概述 线性表顺序表顺序表问题与思考彩蛋时刻&#xff01;&#xff01;&#xff01; 线性表 概念&#xff1a;一些在逻辑上成线性关系的数据结构的集合。线性表在逻辑上一定成线性结构&#xff0c;在物理层面上不一定成线性结构。常见的线性表&#xff1a;顺序表&#xff0…
阅读更多...
学习文档（6）

学习文档（6）

Redis数据类型 Redis 常用的数据类型有哪些&#xff1f; Redis 中比较常见的数据类型有下面这些&#xff1a; 5 种基础数据类型&#xff1a;String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、Set&#xff08;集合&#xff09;、Hash&#xff08;散…
阅读更多...
影楼即将倒闭！！！！stable diffusion comfyui制作：AI人像摄影专业工作流

影楼即将倒闭！！！！stable diffusion comfyui制作：AI人像摄影专业工作流

最近我们在学习ComfyUI&#xff0c;并用它搭建的摄影写真工作流&#xff0c;只需几张照片即可生成可交付的艺术写真照。 AI写真有以下好处&#xff1a; 创意无限&#xff1a;AI写真可以创造出超越现实的场景和效果&#xff0c;为用户提供更多的创意空间。用户可以通过简单的输…
阅读更多...
MySQL 读写分离

MySQL 读写分离

优质博文&#xff1a;IT-BLOG-CN 一、背景 随着机票业务不断增长&#xff0c;订单库的读性能遇到了挑战&#xff0c;因此对订单库进行读写分离操作。主要目的是提高数据库的并发性能和可扩展性。当系统的所有写操作效率尚可&#xff0c;读数据请求效率较低时&#xff0c;比如…
阅读更多...
快速解决Windows端口被占用

快速解决Windows端口被占用

检查占用的端口号,显示9210端口被占用 使用运行打开cmd&#xff0c;直接输入如下命令 netstat -ano | find "9210"可以看到 9210端口执行的进程是PID为26836 知道PID后打开电脑的任务管理器-详细信息,找到PID是26836的进程,可以看到是QQ,关掉就解决了
阅读更多...
微软开源项目 Detours 详细介绍与使用实例分享

微软开源项目 Detours 详细介绍与使用实例分享

目录 1、Detours概述 2、Detours功能特性 3、Detours工作原理 4、Detours应用场景 5、Detours兼容性 6、Detours具体使用方法 7、Detours使用实例 - 使用Detours拦截系统库中的UnhandledExceptionFilter接口，实现对程序异常的拦截 C++软件异常排查从入门到精通系列教程…
阅读更多...
路由通信 的 VLAN技术

路由通信 的 VLAN技术

一、VLAN基础 虚拟局域网&#xff08;Virtual Local Area Network&#xff0c;VLAN&#xff09; 根据管理功能、组织机构或应用类型对交换局域网进行分段而形成的逻辑网络。 交换机最多支持4094个VLAN&#xff0c;其中默认管理VLAN是VLAN1&#xff0c;不能创建&#xff0c;也…
阅读更多...
Python爬虫使用示例-古诗词摘录

Python爬虫使用示例-古诗词摘录

一、分析需求 目标地址&#xff1a; https://www.sou-yun.cn/Query.aspx?typepoem&id二、提取诗句 import os import re import requests import parsel#url https://www.sou-yun.cn/PoemIndex.aspx?dynastyTang&author14976&typeJie urlhttps://www.sou-yun.…
阅读更多...
关于md5强比较和弱比较绕过的实验

关于md5强比较和弱比较绕过的实验

在ctf比赛题中我们的md5强弱比较的绕过题型很多&#xff0c;大部分都是结合了PHP来进行一个考核。这一篇文章我将讲解一下最基础的绕过知识。 MD5弱比较 比较的步骤 在进行弱比较时&#xff0c;PHP会按照以下步骤执行&#xff1a; 确定数据类型&#xff1a;检查参与比较的两…
阅读更多...
【文心智能体 | AI大师工坊】如何使用智能体插件，完成一款购物类智能体的开发，来体验一下我的智能体『科技君Tom』

【文心智能体 | AI大师工坊】如何使用智能体插件，完成一款购物类智能体的开发，来体验一下我的智能体『科技君Tom』

目录 1.1、智能体运行效果1.2、创作灵感来源智能体平台拥有个人化且人性化的大致框架&#xff0c;可以让小白也能搭建出一个智能体其次是拥有丰富的插件&#xff0c;可以更加快速的得到自己想要的效果~ 1.3、如何制作智能体常见问题与解决方案关于人设与回复逻辑插件使用模型的…
阅读更多...
【02】Windows特殊权限-Trustedinstaller

【02】Windows特殊权限-Trustedinstaller

知识点&#xff1a; “TrustedInstaller” 是 Windows 操作系统中的一个特殊账户&#xff0c;用于管理和保护重要的系统文件。它是 Windows 模块安装程序 (Windows Modules Installer) 的一部分&#xff0c;负责安装、修改和删除 Windows 更新和可选组件。默认情况下&#xff…
阅读更多...
【Java SE 】类和对象详解

【Java SE 】类和对象详解

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1&#xff0c; 面向对象认识 1.1 什么时面向对象 1.2 面向对象和面向过程 1.2.1 一个例子理解对象和过程 1. 对于电脑来说 2. 对于我们人来说 2. 类的定…
阅读更多...
linux用户态条件变量和内核态完成变量

linux用户态条件变量和内核态完成变量

如果我们的线程要等一个条件满足之后才可以继续向下执行&#xff0c;这个条件不满足的话&#xff0c;就要等待这个条件。这种场景经常见到&#xff0c;比如我们使用recv接收网络数据的时候&#xff0c;或者使用epoll_wait来等待事件的时候&#xff0c;在默认情况下&#xff0c;…
阅读更多...
双指针 — 复写零

双指针 — 复写零

目录 1. 题目解析 2. 算法讲解 1.算法原理 2.“异地”操作 3.“就地”操作 误解 正解 从后往前完成复写操作 找到最后一个复写的数 处理边界情况 3. 编写代码 正解顺序 1.找到最后一个复写的数 2.处理边界情况 3.从后往前完成复写操作 性能分析&#xff1a; …
阅读更多...
【白话文通俗易懂搞明白并解决】跨域问题

【白话文通俗易懂搞明白并解决】跨域问题

文章目录 跨域出现的场景跨域的定义解决跨域的方法方法一&#xff1a;JSONP方法二&#xff1a;添加响应头方法三&#xff1a;通过nginx代理跨域 跨域过滤器代码示例 跨域出现的场景 在前后端分离项目中&#xff0c;经常会出现跨域问题&#xff0c;表现为&#xff1a; 当在浏览…
阅读更多...
拟声 0.37.0 | 拟物风格，超级优美，功能丰富

拟声 0.37.0 | 拟物风格，超级优美，功能丰富

拟声是一款功能丰富的音视频播放器&#xff0c;支持多种音频来源&#xff0c;并具备独特的歌词弹幕、音源转换、跨设备共享与控制等功能。其创新的LRC歌词编解码器和新拟物风格的UI设计为用户提供了一个全新的视听体验。 大小&#xff1a;36M 百度网盘&#xff1a;https://pan…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023