前端学习路径

准备工作

  • 环境准备-1h
    安装基础环境,需要NodePNPM如果已经安装检查对应版本,体验阶段建议版本保持一致

  • 克隆一个空工程-0.5h
    全新工程

  • 注意事项-0.5h
    静态资源解压,如果还没有对应的后端服务。可以使用:https://demo.oinone.top(Oinone演示环境),账号密码:admin/admin

前端基础

前端进阶

最后一步

当您实现玩基础和进阶的所有的效果,Oinone的整体使用您已经大致掌握了,接下来您可以找一个当前业务的场景来实现它把!

Oinone社区 作者:王海明原创文章,如若转载,请注明出处:https://doc.oinone.top/other/21654.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
王海明的头像王海明数式管理员
上一篇 2025年9月1日 pm2:16
下一篇 2025年9月4日 pm4:55

相关推荐

  • SSO单点登录

    SSO相关 1、SSO服务端:在应用中找到【单点登录】,创建一个应用标识2、SSO登录认证,选择grant_type=password,后面带上用户名和密码。参考下面的链接(POST请求):http://127.0.0.1:8190/pamirs/sso/authorize?redirect_uri=http://127.0.0.1:8193/page;module=ysps;model=ysps.notify.ProjectPosting;action=homepage;scene=homepage;target=OPEN_WINDOW;path=/ysps/homepage&response_type=code&client_id=替换为已创建的应用唯一标识&grant_type=password&username=admin&password=admin 其中: redirect_uri是认证通过后的跳转,目前的场景可忽略 client_id替换为在单点登录也上创建的应用唯一标识 认证方式grant_type=password固定,后面是实际的用户名和密码 操作步骤: 请求服务端工程SSO登录认证,会返回token信息,拿着这个信息去客户端工程访问即可。 请求服务端工程返回token信息: curl –location –request POST ‘http://127.0.0.1:8190/pamirs/sso/authorize’ \ –header ‘User-Agent: Apifox/1.0.0 (https://apifox.com)’ \ –header ‘Accept: */*’ \ –header ‘Host: 127.0.0.1:8190’ \ –header ‘Connection: keep-alive’ \ –header ‘Content-Type: application/x-www-form-urlencoded’ \ –header ‘Cookie: pamirs_uc_session_id=88fd2459446a4a20ab0a505bdaf78ebe’ \ –data-urlencode ‘appkey=1d2195bac42e44e895ea8e030aaa4e52’ \ –data-urlencode ‘appSecret=JNEyibFBIb2N3tdLmW/M9bnpf120/I6fFMMf86OQlP/wlL5qhJCF3KdAKHlJT0jECmXmJRfTCSlnmB5cWHRsenNGND+TMoXObzDPK7umxazCnaZYiW7JDeuZUOzqskhBPkEJSURAZR5xu1c6UYv542BlHAPsEi+ujnKeCYcKiFHyw7fIB1aijNyCz8d9teUEGYYTtYTXoNp/4Ts8AIJn8xkTjvEq6V9uYOExDEuYGxMgN76ZaiwpbT5387eZy4XCDIy0XWfZo/kv7X+s+rjwlsxWA7jp1w5dDaRmSd4rPO2GSEcL64Pje/Ct5xznhNwH6T5KDd2BLfbZikonh624nqW4hdlVxx/EQUpYp6Yc4Wet6b/DkggCVIZPpcO9pSuRJoC2jGPMrGHM3vYR0YtfFqCJ2/x3m/lQr2v+bP4pGzcRuuCy2tyOZA1uurA23xlssehz4geGiJArkpAUKKUkcafx+dLWODHOcgBKBz6wY38PAcbLkgn6gK6lmmR7cUiDmzmEEor6pYb64YG6tPmpm4AQeBoQYrsyCorA4Ds08nAiPFWUCXcHQCVUbHPTOwHHChFO1lXH/VjkfDv0OI1CD8mZI7ZeK794aIBZdvQGCI+ayQU+5CD1asDNg/M01nnNdWKB7rS9rMvbUOlSNguboAgRbiz3pEAxGJrZUPvkDHM=’ { “access_token”: “eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQyNTk2MTcsInN1YiI6IntcImNsaWVudElkXCI6XCJwYW1pcnNfMjc5YjcwMDBlNDE3NDMxMmFmNDAyMDM0YjhlZjFhOWRcIixcInJhbmRvbUFrSWRcIjpcIjM0MDBiYzY0Njk1MzQzODA4ZTlhNmZhNWRmZjU0MTc2XCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.iJ-meyxAGW189Y3aK9Z2rMbf9_MsTKVTfnf3XsDR4iq6qvCGYkiq5197r4A54wwdKAzPZ-iDgkQOjWDh8AYu4A”, “token_type”: null, “refresh_token”: “eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQ4NTcyMTcsInN1YiI6IntcImRhdGVUaW1lXCI6XCIxNzQ0MjUyNDE3NDc3XCIsXCJjbGllbnRJZFwiOlwicGFtaXJzXzI3OWI3MDAwZTQxNzQzMTJhZjQwMjAzNGI4ZWYxYTlkXCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.TZaK8OuPKudd3YX6AF23m7aplJF7OQlBEDkj0AnPkQdw7aja2WhS7q-VwjPfhqSmfAp-oaaUIcN7Zlune9VLTA”, “expires_in”: 7200, “refresh_token_expiresIn”: 604800 } 发起客户端工程请求。 注意:请求Headers中需携带token参数信息,token为服务端工程返回token信息,且请求时Authorization参数需加上标识 Bearer+空格 –header 'loginType: OAUTH' –header 'Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQyMDYwNjUsInN1YiI6IntcImNsaWVudElkXCI6XCJwYW1pcnNfMjc5YjcwMDBlNDE3NDMxMmFmNDAyMDM0YjhlZjFhOWRcIixcInJhbmRvbUFrSWRcIjpcImEzZWZkNjZkMDNlNjQ5MDY4OGU4Y2FhYmIwNjZmZGU4XCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.gapCpvM8PCit1oSHv-zJ2tATkCuVQBzqWGebvBcUX2O0bqP9aAhVqQxdNLM19vCqP5s3CXoNk-xzMUu-mo-hSg' curl –location –request POST ‘http://127.0.0.1:8092/pamirs/base’ \ –header ‘loginType: OAUTH’ \ –header ‘Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJleHAiOjE3NDQyMDYwNjUsInN1YiI6IntcImNsaWVudElkXCI6XCJwYW1pcnNfMjc5YjcwMDBlNDE3NDMxMmFmNDAyMDM0YjhlZjFhOWRcIixcInJhbmRvbUFrSWRcIjpcImEzZWZkNjZkMDNlNjQ5MDY4OGU4Y2FhYmIwNjZmZGU4XCIsXCJvcGVuSWRcIjpcIjEwMDAxXCJ9In0.gapCpvM8PCit1oSHv-zJ2tATkCuVQBzqWGebvBcUX2O0bqP9aAhVqQxdNLM19vCqP5s3CXoNk-xzMUu-mo-hSg’ \ –header ‘User-Agent: Apifox/1.0.0 (https://apifox.com)’ \ –header ‘Content-Type: application/json’ \ –data-raw ‘{“query”:”mutation {\n teacherMutation {\n queryTea(\n data: {id: 672564120180166836, teacherName: \”““`\”, readStatus: NO_READ, createDate: \”2024-11-05 11:30:36\”, writeDate: \”2024-11-05 11:30:36\”, createUid: 10001, writeUid: 10001}\n ) {\n id\n teacherName\n enumType\n petStoreId\n professionalId\n professional {\n professionalName\n id\n }\n readStatus\n nonStoredField\n createDate\n writeDate\n createUid\n writeUid\n }\n }\n}\n”,”variables”:{}}’ SSO服务端工程(5.3.X以上版本支持) 1、服务端工程依赖 1.1 pom依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-oauth2-server</artifactId> </dependency> 1.2 application.yml配置文件里面添加sso启动模块。 pamirs: boot: modules: – sso SSO客户端工程(5.3.X以上版本支持) 1、客户端工程依赖 客户端工程即需要加入SSO的应用 1.1 pom依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sso-oauth2-client</artifactId> </dependency> 1.2 application.yml配置 pamirs: sso: enabled: true client: # SSO服务端提供 client-id: pamirs_1fb51c50acbb4842b36844c5fbdc8d25 # SSO服务端提供 client-secret: B3ySNQEJdD8kZXuwmtaUtbWTo1vlIevmd0t4MIqRHfuM8VXzkMcs6YOox6cPPIESAL3yd2xQa+SCBNbLwYchQYSJonGPpvAmqapc5ZdskPicNENc8T2vTAMkc/YgvgUUK4U+/OuP5PrtRKC536nNXIZy1VHdf+whi44qOgd4RQYN0sIrog70CXsDQP3/2CHkcXWVRCqvZa/4mFmL1SBhQ+TLAIQg0jXlWr4lThUdL/X9M0YFXBaLJPKTlKi9l7K/8kTdJL2IgvSpByU0kGXjk0O/jZRBq1bHd/ZsC3Rw4kjiygIdxfL7Q/lw1/WAZ5XXibc5dlylUsnSJBZ9I4ZeCWq7lEZj//ctR7WZJCCeqi8rmCu+N2FQvye7kgiFIoZTFMNSRhW7ZMBBrsoJuf6DGWGvXvBE9w3P/IVFJMDmsopNbbFYTRcmY5e5tc775OCGMQDrW6j8IitTrOdRYzie0S2Jj9+Xw+Va1sEQLXWj0tBNQ9Tzv7fnRr5D6EBNtXra1TntKrvH/quBI5ujncBZXZ2cfEoMjFSw38edoTA8WPJv10WUA5EZsvfxqJLEiXFriJ9nleUBbCvL3Zuggn64CW4cH8mxGk7qvHQvXmwmp8phKyoKa8UDfDD2x7eNW3oNcQUMz+gdGNF5dNXt4iArpYK5/xktpLxdCM5Yz7SpHoc= # login-url和login-url根据实际情况修改 login-url: http://test1.oinone.top:9095/login logout-url: https://test1.oinone.top:9095/pamirs/sso/logout expires:…

    2025年4月25日
    27000
  • 无代码环境准备并快速启动

    注意: 启动无代码的过程中如果出现问题,请先在 常见问题 中寻找答案。如仍未解决,请及时在群里咨询。 视频教程(点此观看) docker安装从3分35秒开始 MySQL安装从6分30秒开始 部署无代码从21分50秒开始 一、进入服务器 ssh 用户名@服务器ip # 举例:ssh root@192.168.0.121 二、安装 Docker 1. 判断是否已安装 Docker docker -v 如果出现 Docker 版本号,说明已安装 Docker,如下图: 没有安装时显示如下图: 2. 安装并启动 Docker 已安装了 Docker:执行以下命令启动 Docker(未安装则忽略此步骤) # 启动 Docker systemctl start docker # 查看是否启动成功 docker -v 未安装 Docker 的情况:依次执行以下操作 # 删除原有版本 yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine yum install -y yum-utils yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo #提示 如果 docker 源异常,可以改用阿里云源: #yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin # 启动 Docker systemctl start docker # 查看是否启动成功 docker -v 3. 检查 Docker 是否启动成功 sudo systemctl status docker 出现如下图表示启动成功: 三、安装 MySQL 1. 判断是否已安装 MySQL mysql –version 如果出现 MySQL 版本号,说明已安装 MySQL。 没有安装会显示如下图: 2. 安装并启动 MySQL 查看服务器 glibc 版本 ldd –version 查看结果,如图: 下载 MySQL 压缩包 官网下载:MySQL 下载地址 在服务器上创建用户组和用户 # 添加用户组 groupadd mysql # 创建 MySQL 用户并添加到用户组 useradd -g mysql mysql 切换到mysql用户下 su mysql 上传mysql压缩包到服务器 # 注意:以下命令在新开的一个本地命令行执行,不进入服务器! scp path/to/your/mysql-8.0.40-linux-glibc2.17-x86_64.tar.xz(替换成本地电脑mysql压缩包的实际地址) username@ip_address:/home/mysql(替换成想要上传在服务器上的具体地址) 已经将mysql压缩包上传到服务器的某个文件夹成功之后,进入服务器的该文件内查看压缩包是否已经存在,执行ls,如图: 上传成功后,在服务器上解压 tar -Jxvf mysql-8.0.40-linux-glibc2.17-x86_64.tar.xz # 解压 MySQL 压缩包 创建软链 ln -s path/to/your/mysql-8.0.40-linux-glibc2.17-x86_64 mysql # 创建软链 进入mysql目录 cd mysql 配置文件与目录创建 MySQL 服务启动项很多,一般不通过命令行输入,而是写在配置文件中,启动时指定配置文件即可。如果没有指定配置文件,则会去 /etc/my.cnf 等默认路径下找配置文件。这里直接指定自己创建的配置文件,把一切都掌握在自己手里。 vi my.cnf # 执行此命令,然后写入以下配置 [mysqld] basedir=/home/mysql/mysql (改成mysql具体路径) datadir=/home/mysql/mysql/data/ (改成data具体路径) socket=/tmp/mysql.sock character-set-server=UTF8MB4…

    2024年10月30日
    1.0K00
  • 后台嵌入其他系统的界面,设计器:嵌入网页组件

    管理后台如何新增Iframe嵌入其他系统的界面: 1、新建一个模型。模型中有放【url】的字段2、3、切换组件4、点击发布5、测试环境验证下,后端那个字段返回嵌入的【url】就可以展示这个url的内容了6、最后效果如下:

    2024年12月27日
    78500
  • 前端 快速查询并替换默认组件

    可以借助vue的调试工具快速找到对应的组件,请参考这篇文章 使用vue调试工具快速找到对应的组件 Mask默认组件 重写Mask组件 重写AppSwitcherWidget import Com from './com.vue' /** * SPI注册条件保持根 AppSwitcherWidget 一致,即可覆盖 */ @SPI.ClassFactory( MaskWidget.Token({ widget: 'app-switcher' }) ) export class CustomAppSwitcherWidget extends AppSwitcherWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 MenuWidget import Com from './com.vue' /** * SPI注册条件保持根 MenuWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'nav-menu' })) export class CustomMenuWidget extends MenuWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 NotificationWidget import Com from './com.vue' /** * SPI注册条件保持根 NotificationWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class CustomNotificationWidget extends NotificationWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 LanguageWidget import Com from './com.vue' /** * SPI注册条件保持根 LanguageWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'language' })) export class CustomLanguageWidget extends LanguageWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 UserWidget import Com from './com.vue' /** * SPI注册条件保持根 UserWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class CustomUserWidget extends UserWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props);…

    2025年8月14日
    41900

Leave a Reply

登录后才能评论