实操部署amis-admin

server/2024/10/18 2:59: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 \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_72">部署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.ppmy.cn/server/132657.html

相关文章

从HCI和空口分析HFP通话和eSCO建立

从HCI和空口分析HFP通话和eSCO建立

背景 HFP作为经典蓝牙通话建立和断开的协商服务&#xff0c;通话数据则是通过eSCO链路进行传输&#xff0c;下面以手机和蓝牙耳机为例&#xff0c;结合HCI和空口分析从HFP连接建立&#xff0c;到AT命令协商会话&#xff0c;再到eSCO通话数据链路的建立 。 1&#xff1a;HFP连…
阅读更多...
this指针—静态成员—单例模式

this指针—静态成员—单例模式

01 this指针 C是在C语言的基础上发展而来的&#xff0c;第一个C的编译器实际上是将C程序翻译为C语言&#xff0c;然后再使用C语言编译器编译 C语言中没有类的概念&#xff0c;只有结构&#xff0c;函数都是全局函数&#xff0c;没有成员函数的概念 翻译的时候&#xff0c;将cla…
阅读更多...
24/10/12 算法笔记 LeNet

24/10/12 算法笔记 LeNet

LeNet-5的成功在于其能够自动从图像中学习特征&#xff0c;而不需要人工设计特征提取器。这种能力使得LeNet-5在图像识别和分类任务中表现出色&#xff0c;并且对后来的深度学习模型产生了深远的影响。尽管现在的深度学习模型在规模和复杂性上远超LeNet-5&#xff0c;但LeNet-5…
阅读更多...
好用的python相关的AI工具Bito介绍

好用的python相关的AI工具Bito介绍

插件名称&#xff1a;Bito 好用的python相关的AI工具Bito介绍 step 1:点插件step 2&#xff1a;搜索bito并安装step3 &#xff1a;需要登录&#xff0c;要有真实邮箱&#xff0c;按步骤走就行&#xff0c;完后就可以使用 step 1:点插件 step 2&#xff1a;搜索bito并安装 step3…
阅读更多...
鸿蒙fork()功能

鸿蒙fork()功能

fork功能 上层通过使用fork()函数创建新进程。 fork是什么&#xff1f; #include <sys/types.h> #include <unistd.h> #include <stdio.h> #include <stdlib.h>int main(void) {pid_t pid;char *message;int n;pid fork();if (pid < 0) {perror…
阅读更多...
CTFHUB技能树之SQL——字符型注入

CTFHUB技能树之SQL——字符型注入

开启靶场&#xff0c;打开链接&#xff1a; 直接指明是SQL字符型注入&#xff0c;但还是来判断一下 &#xff08;1&#xff09;检查是否存在注入点 1 and 11# 返回正确 1 and 12# 返回错误 说明存在SQL字符型注入 &#xff08;2&#xff09;猜字段数 1 order by 2# 1 order…
阅读更多...
Java基础03-应用程序编程接口（API）

Java基础03-应用程序编程接口（API）

三、应用程序编程接口&#xff08;API&#xff09; 1、包 什么是包&#xff1a;包是用来分门别类的管理各种不同程序的&#xff0c;类似于文件夹&#xff0c;建包有利于程序的管理和维护。 注意事项&#xff1a; 同一个包下可以直接访问。不同包下要导包才可以使用自己程序下使…
阅读更多...
动态规划-简单多状态dp问题——面试题17.16.按摩师

动态规划-简单多状态dp问题——面试题17.16.按摩师

多状态问题的核心就是每个位置不止有一个状态&#xff0c;因此需要多个dp表表示不同状态对应位置的值&#xff0c;然后根据题目考虑特定情况写出状态转移方程即可 1.题目解析 题目来源&#xff1a;面试题17.16.按摩师——力扣 测试用例 2.算法原理 1.状态表示 这里与路径问…
阅读更多...
最新文章

Copyright @ 2022~2023