欧美网站特点,免费psd模板素材,网络营销与直播电商,山西省太原建设工程信息网站请不要自我设限#xff0c;真正好的人生态度#xff0c;是现在就做#xff0c;不等、不靠、不懒惰。 ——小野《改变力》 一、什么是蓝图#xff1f;
蓝图(BluePrint) 是Epic Games 针对虚幻4引擎开发的可视化脚本语言。当你使用蓝图的时候#xff0c;其实就是在编写代码… 请不要自我设限真正好的人生态度是现在就做不等、不靠、不懒惰。 ——小野《改变力》 一、什么是蓝图
蓝图(BluePrint) 是Epic Games 针对虚幻4引擎开发的可视化脚本语言。当你使用蓝图的时候其实就是在编写代码只不过它采用更加可视化的方法它不需要你编写任何C代码只需要将不同功能的蓝图节点连接起来就能实现想要的功能。蓝图是一种允许你以可视化的方式创建内容的系统你所构建的内容通常称作“蓝图文件(Blueprints)”。你可以创建许多不同类型的蓝图蓝图相当于游戏内容的容器它包含了许多基本单元这些单元被称之为“组件Components”。举个例子一个汽车蓝图就可以包含车架组件、车轮组件、引擎组件等诸如此类的组件它门还能包含脚本功能让油门被踩下时引擎驱动汽车前进但我们也可以不编写任何功能只不过汽车不知道如何前进而已。蓝图还可以包含数据而且数据是可以调整的。蓝图节点的本质将功能不同的节点连接在一起。
二、实现原理 节点和连接 开发者通过拖拽不同类型的节点如事件、条件、动作等到工作区并通过连接线将这些节点连接起来形成一个逻辑流程。 图形界面 工具提供了一个直观的图形界面使得开发者可以更容易地理解和管理复杂的逻辑结构。 底层代码生成 在后台这些工具会将可视化的节点和连接转换为底层的代码如C、C#或GDScript并在运行时执行这些代码。 实时调试 大多数可视化编程工具还提供了实时调试功能允许开发者在运行时查看和修改节点的状态以便快速找到和修复问题。
三、我要实现的RS蓝图系统
1、应用场景
低代码 / 定制产品化 / 插件化
2、核心功能
1、蓝图组件
它负责具体某个功能的实现以及实现方式、规范标准、回调、触发条件
2、蓝图编辑器
它负责将各个蓝图组件拼接起来构成一个完整的蓝图结构树并保存起来
3、蓝图引擎
它负责解析蓝图结构树并按顺序/触发条件调用蓝图组件贯穿整个蓝图生命周期
4、可观测
蓝图生命周期的全局可视化
三、技术栈选型
1、前端
Vue3ViteTS
2、后端
Rust actix-web
3、数据库
Redis PgSQL MongoDB
4、监控
ELK
四、开发环境搭建
接下来我们搭建开发环境并且实现最基本的蓝图节点组件。
1、操作系统 Deepin
Virtual Box 安装 Deepin 系统_virtualbox 安装deepin-CSDN博客文章浏览阅读220次点赞10次收藏3次。Virtual Box 安装 Deepin 系统_virtualbox 安装deepinhttps://blog.csdn.net/weixin_47560078/article/details/133959287?spm1001.2014.3001.5502
2、搭建前端开发环境
安装 vs code 安装 nodejs
# 安装 nodejs
sudo apt-get install nodejs# 安装 npm
sudo apt-get install npm# node 版本
node -v
v10.21.0# n 模块是管理 nodejs 版本的
sudo npm install n -g# 安装稳定版 nodejs
sudo n stable # nodejs 版本
node -v
v20.18.0# npm 版本
npm -v
10.8.2# 升级 npm
# sudo npm install -g npm # 安装编译工具包
sudo apt install build-essential# 安装 cnpm
# sudo npm install -g cnpm --registryhttp://registry.npmmirror.com# 使用淘宝的镜像源
npm config set registry http://registry.npmmirror.com
3、搭建后端开发环境
安装 Rust
# 官网 https://www.rust-lang.org/
curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh 修改 Rust 镜像源
# $CARGO_HOME/.cargo/ 下创建 config.toml
$ touch config.toml# 添加以下内容[source.crates-io]
replace-with ustc[source.ustc]
registry git://mirrors.ustc.edu.cn/crates.io-index
4、搭建数据库环境
4.1、Redis
使用 apt 安装 redis
sudo apt install redis-server
# redis-cli --version redis 远程设置
sudo vim /etc/redis/redis.conf # 注释掉绑定地址让 Redis 可远程访问
# bind 127.0.0.1 ::1# 取消注释 requirepass 启动密码认证并设置访问密码
requirepass 0123456789# 以守护进程运行Redis
daemonize yes重启 redis
sudo systemctl restart redis-server4.2、PgSQL 最终会跳转到指南页面https://www.postgresql.org/download/linux/ubuntu/ 一般的流程是引入软件包下载源然后进行 apt 安装软件包Ubuntu 通常已经包含了 postgresql 软件源
sudo apt install -y postgresql-common
sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh
# 安装最新版本的 postgresql
sudo apt install postgresql -y 查看运行状态跟版本
sudo systemctl is-active postgresql
sudo systemctl is-enabled postgresql
sudo systemctl status postgresql
psql --version 安装过程会创建一个名为postgres的与默认postgres角色关联的用户账号我们可以通过该账号来访问 PostgreSQL
sudo -i -u postgres
(base) samsam-PC:~$ sudo -i -u postgres
postgressam-PC:~$ psql
psql (11.18 (Deepin 11.18-0deb10u1))
输入 help 来获取帮助信息.postgres# help
您正在使用psql, 这是一种用于访问PostgreSQL的命令行界面
键入 \copyright 显示发行条款\h 显示 SQL 命令的说明\? 显示 pgsql 命令的说明\g 或者以分号(;)结尾以执行查询\q 退出
postgres# \q
postgressam-PC:~$ exit
注销
(base) samsam-PC:~$
4.3、pgadmin4
pgsql 的官方可视化工具这里使用 pip 安装 创建文件夹并且配置 web 登录的账号密码
$ sudo mkdir /var/lib/pgadmin
$ sudo mkdir /var/log/pgadmin
$ sudo chown $USER /var/lib/pgadmin
$ sudo chown $USER /var/log/pgadmin
# 创建 pgadmin4 python 环境
$ python3 -m venv pgadmin4
$ source pgadmin4/bin/activate
# 安装 pgadmin4
(pgadmin4) $ pip install pgadmin4
...
(pgadmin4) $ pgadmin4
NOTE: Configuring authentication for SERVER mode.Enter the email address and password to use for the initial pgAdmin user account:Email address: userdomain.com
Password:
Retype password:
Starting pgAdmin 4. Please navigate to http://127.0.0.1:5050 in your browser.* Serving Flask app pgadmin (lazy loading)* Environment: productionWARNING: Do not use the development server in a production environment.Use a production WSGI server instead.* Debug mode: off
Conda 环境也可以 # 配置路径
(myenv3.8) samsam-PC:~/anaconda3/envs/myenv3.8/lib/python3.8/site-packages/pgadmin4$ ls
babel.cfg branding.py config_distro.py DEPENDENCIES jest.config.js migrations pgacloud pgAdmin4.py __pycache__ sbom.json version.py webpack.shim.js
babel.config.json commit_hash config.py docs LICENSE package.json pgadmin pgAdmin4.wsgi README.md setup.py webpack.config.js yarn.lock
(myenv3.8) samsam-PC:~/anaconda3/envs/myenv3.8/lib/python3.8/site-packages/pgadmin4$ 访问 url 输入刚刚在控制台设置的账号密码
http://127.0.0.1:5050/browser/ 配置 postgres 账号密码然后创建一个新的 Servers 连接
# psql
ALTER USER postgres WITH PASSWORD your_password; 配置 pgAdmin4 账号密码登录 开启语法提示【配置-查询工具-自动完成】 4.4、MongoDB
安装
# 下载地址
https://www.mongodb.com/try/download/community tar -zxvf mongodb-linux-x86_64-ubuntu2004-8.0.4.tgz 启动
# 创建MongoDB要使用的目录和文件
sudo mkdir -p mongodb/data mongodb/log mongodb/conf
sudo touch mongodb/conf/mongodb.conf修改配置文件内容
# sudo vim mongodb/conf/mongodb.confprocessManagement:fork: true
net:bindIp: localhostport: 27017
storage:dbPath: /home/sam/mongodb/data
systemLog:destination: filepath: /home/sam/mongodb/log/mongod.loglogAppend: true
storage:journal:enabled: true
使用配置文件启动
# 使用配置文件启动
bin/mongod -f /home/sam/mongodb/conf/mongodb.conf# 关闭 MongoDB
# bin/mongod --shutdown --dbpath /home/sam/mongodb/data
报错
./mongod: /lib/x86_64-linux-gnu/libm.so.6: version GLIBC_2.29 not found (required by ./mongod)
./mongod: /lib/x86_64-linux-gnu/libpthread.so.0: version GLIBC_2.30 not found (required by ./mongod)
看下当前系统存在哪些 GLIBC 版本
strings /usr/lib64/libc.so.6 |grep GLIBC_
# 或者
strings /lib/x86_64-linux-gnu/libc.so.6 |grep GLIBC_ 没有 29、30 的版本。
解决方案
1、MongoDB 降版本
2、操作系统升版本
3、升级 glibc 物理机慎操作
https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1804-6.0.19.tgz 再次启动 MongoDB成功。
# sudo bin/mongod -f /home/sam/mongodb/conf/mongodb.confabout to fork child process, waiting until server is ready for connections.
forked process: 4967
child process started successfully, parent exiting五、前端框架搭建
1、整合 Vue Vite ElementUI
# 创建 vite vue
cnpm create vitelatest # element-plus 国内镜像 https://element-plus.gitee.io/zh-CN/
# 安装 element-plus
cnpm install element-plus --save 按需引入 element plus
cnpm install -D unplugin-vue-components unplugin-auto-import 在 main.ts 引入 element-plus 和样式
// src\main.ts
import { createApp } from vue
//import ./style.css
import App from ./App.vue
import ElementPlus from element-plus
import element-plus/dist/index.csscreateApp(App).use(ElementPlus).mount(#app)
配置 vite
// vite.config.ts
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolvers// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
2、安装依赖
axios vue-draggable
cnpm install axios cnpm install vuedraggablenext cnpm install sass-embedded 3、创建基本组件
在src/components目录下创建两个文件Node.vue和Canvas.vue。
// Node.vue
templatediv classnode :style{ top: node.y px, left: node.x px }{{ node.name }}/div
/templatescript langts setup
import { defineProps } from vueinterface Node {x: number;y: number;name: string;
}const props defineProps{ node: Node }()
/scriptstyle scoped
.node {position: absolute;width: 100px;height: 50px;background-color: lightblue;border: 1px solid #000;text-align: center;line-height: 50px;cursor: move;
}
/style
// Canvas.vue
templatediv classcanvasdraggablev-model:liststate.nodes:disabled!state.enableditem-keyidclassw-100ghost-classghostchosen-classchosenstartstate.dragging trueendonDragEndanimation300template #item{ element }Node :nodeelement //template/draggable/div
/templatescript langts setup
import { reactive, ref } from vue
import draggable from vuedraggable
import Node from ./Node.vueinterface Node {id: number;name: string;x: number;y: number;
}const state reactive({enabled: true,nodes: [{ id: 1, name: Start, x: 50, y: 50 },{ id: 2, name: Process, x: 200, y: 50 }],dragging: false
})function onDragEnd(event: any) {state.dragging false;// Update node positions after drag
}/scriptstyle scoped langscss
.canvas {width: 100%;height: 100vh;position: relative;background-color: #f0f0f0;
}
.ghost {opacity: 0.5;border: 1px solid #18a058;
}
.chosen {border: 1px solid #18a058;
}
.item {width: 100%;:hover {background-color: #f0f0f0;}
}
.not-draggable {cursor: no-drop;
}
/style
更新App.vue
// App.vue
script setup langts
import Canvas from ./components/Canvas.vue/scripttemplate
Canvas/
/templatestyle scoped
/style运行效果 修改 Canvas.vue从后端获取数据
// ...import axios from axios// ...onMounted(() {axios.get(http://localhost:8080/nodes).then(response {state.nodes response.data;}).catch(error {console.error(error);});
})// ... 六、后端框架搭建
1、基础框架
首先创建一个新的二进制 Cargo 项目并切换到新目录
cargo new backend
cd backend
通过向 Cargo.toml 文件添加以下内容将 actix-web 添加为项目的依赖项。
[dependencies]
actix-web 4请求 handler 使用异步函数接受零个或多个参数。
use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};#[get(/)]
async fn hello() - impl Responder {HttpResponse::Ok().body(Hello world!)
}#[post(/echo)]
async fn echo(req_body: String) - impl Responder {HttpResponse::Ok().body(req_body)
}async fn manual_hello() - impl Responder {HttpResponse::Ok().body(Hey there!)
}
接下来创建 App 实例并注册请求 handler。
对于使用了路由宏的 handler使用 App::service 方法注册路由对不使用路由宏而注册自定义路由的情况使用 App::route 方法。
最后使用 HttpServer 启动应用程序。
#[actix_web::main]
async fn main() - std::io::Result() {HttpServer::new(|| {App::new().service(hello).service(echo).route(/hey, web::get().to(manual_hello))}).bind(127.0.0.1:8080)?.run().await
}
编译并运行程序
cargo run
访问 http://localhost:8080/ 2、序列化 Node 节点 修改 Cargo.toml新增序列化依赖对应序列化 Node 节点
serde { version 1.0, features [derive] }
serde_json 1.0
use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};
use serde::Serialize;#[derive(Serialize)]
struct Node {id: u32,name: String,x: i32,y: i32,
}#[get(/nodes)]
async fn get_nodes() - impl Responder {let nodes vec![Node { id: 1, name: Start.to_string(), x: 50, y: 50 },Node { id: 2, name: Process.to_string(), x: 200, y: 50 },];HttpResponse::Ok().json(nodes)
}#[actix_web::main]
async fn main() - std::io::Result() {HttpServer::new(|| {App::new().service(get_nodes)}).bind(0.0.0.0:8080)?.run().await
} 3、跨域请求
接口测试成功但是还有一个跨域问题 在 actix-web 里 我们需要配合 actix_cors 来处理关于跨域请求的配置
[dependencies]
actix-cors 0.7.0
// main.rs
use actix_web::{get, http, post, web, App, HttpResponse, HttpServer, Responder};
use serde::Serialize;
use actix_cors::Cors;#[derive(Serialize)]
struct Node {id: u32,name: String,x: i32,y: i32,
}#[get(/nodes)]
async fn get_nodes() - impl Responder {let nodes vec![Node { id: 1, name: Start.to_string(), x: 50, y: 50 },Node { id: 2, name: Process.to_string(), x: 200, y: 50 },];HttpResponse::Ok().json(nodes)
}#[actix_web::main]
async fn main() - std::io::Result() {HttpServer::new(|| {let cors Cors::default().allowed_origin(http://localhost:5173)// .allowed_origin_fn(|origin, _req_head| {// origin.as_bytes().ends_with(b.rust-lang.org)// }).allowed_methods(vec![GET, POST]).allowed_headers(vec![http::header::AUTHORIZATION, http::header::ACCEPT]).allowed_header(http::header::CONTENT_TYPE).max_age(3600);App::new().wrap(cors).service(get_nodes)}).bind(0.0.0.0:8080)?.run().await
}
效果 参考资料
介绍 - actix-web 中文文档 - Rust-Web 开发指南
actix_web - Rust
actix_cors - Rust
https://dev.epicgames.com/documentation/zh-cn/unreal-engine/overview-of-blueprints-visual-scripting-in-unreal-engine
PostgreSQL: The worlds most advanced open source database
pgAdmin - PostgreSQL Tools
