3.2.2 启动前端工程

本节核心是带大家直观的感受下我们上节构建的demo模块,并搭建前端环境为后续学习打下基础

一、使用vue-cli构建工程

##demo-front是项目名,可以替换成自己的
vue create --preset http://ss.gitlab.pamirs.top/:qilian/pamirs-archetype-front4 --clone demo-front --registry http://nexus.shushi.pro/repository/kunlun/

图3-2-2-1 使用vue-cli构建工程

如果启动报错,清除node_modules后重新npm i

mac清除命令:npm run cleanOs

windows清除命令: npm run clean

若安装失败,检查本地node、npm、vue对应的版本

image.png

图3-2-2-2 检查本地的版本

或者下载前端工程本地运行[oinone-front.zip](oinone-front)(575 KB)

二、启动前端工程

找到README.MD文件,根据文件一步一步操作就行。

  1. 找到vue.config.js文件,修改devServer.proxy.pamirs.target为后端服务的地址和端口
const WidgetLoaderPlugin = require('@kunlun/widget-loader/dist/plugin.js').default;
const Dotenv = require('dotenv-webpack');

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.widget$/,
          loader: '@kunlun/widget-loader'
        }
      ]
    },
    plugins: [new WidgetLoaderPlugin(), new Dotenv()],
    resolveLoader: {
      alias: {
        '@kunlun/widget-loader': require.resolve('@kunlun/widget-loader')
      }
    }
  },
  devServer: {
    port: 8080,
    disableHostCheck: true,
    progress: false,
    proxy: {
      pamirs: {
        // 支持跨域
        changeOrigin: true,
        target: 'http://127.0.0.1:8090'
      }
    }
  }
};

图3-2-2-3 修改后端服务地址与端口

注:要用localhost域名访问,.env文件这里也要改成localhost。如果开发中一定要出现前后端域名不一致,老版本Chrome会有问题,修改可以请参考https://www.cnblogs.com/willingtolove/p/12350429.html 。或者下载新版本Chrome

  1. 进入前端工程demo-front文件目录下,执行 npm run dev,最后出现下图就代表启动成功

image.png

图3-2-2-4 前端启动成功提示

  1. 使用 http://127.0.0.1:8081/login 进行访问,并用admin账号登陆,默认密码为admin

image.png

图3-2-2-5 系统登陆页面

  1. 点击左上角进行应用切换,会进入App Finder页面,可以看到所有已经安装的应用,可以对照boot的yml配置文件看。但细心的小伙伴应该注意到了,在App Finder页面出现的应用跟我们启动工程yml配置文件中加载的启动模块数不是一一对应的,同时也没有看到我们demo模块。

image.png

image.png

图3-2-2-6 已安装应用界面

boot工作的yml文件中加载模块 App Finder的应用 说明
- base- common- sequence- expression 模块的application = false,为非应用类的模块
- resource - user - auth - business- message - apps- my_center(show=INACTIVE )- sys_setting (show=INACTIVE ) 模块的application = true,为应用类的模块但show=INACTIVE 的则不展示,通过以下方式定义:@Module(show = ActiveEnum.INACTIVE)
- demo_core 刚建的oinoneDemo工程,默认为false
设计器:无 设计器:无 因为boot中没有加载设计器模块,所以App Finder中的设计器tab选项卡下没有应用

表3-2-2-1 boot工作的yml文件中加载模块及App Finder应用说明

  1. 只需要修改oinoneDemo工程的模块定义如下图,那么就可以在App Finder页面看见“oinoneDemo工程”。

image.png

图3-2-2-7 修改模块的application属性为true

image.png

图3-2-2-8 在App Finder 页面即可看见“OinoneDemo工程”

目前oinone的Demo模块还是一个全空的模块,所以我们点击后会进入一个空白页面。在后续的学习过程中我们会不断完善该模块。

至此恭喜您,前端工程已经启动完成。

三、前端工程结构介绍

├── public 发布用的目录,index.html入口文件将在这里
│ 
├── src 源代码
│ ├── action 扩展动作的目录
│ ├── field 模型字段对应控件目录
│ ├── layout 布局控件目录
│ ├── mask 母版控件目录
│ ├── view 自定义视图目录 
│ └── main.ts 应用入口文件 这里会注册providers/application.ts
│ └── theme.ts 定义主题文件
├── .env.example 启动的环境变量,后端api的请求地址在这里
├── package.json 包描述文件
├── tsconfig.json ts配置文件,可配置语法校验
└── vue.config.js vue的配置文件,里面可以配置webpack参数和开发模式的后端api请求地址

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9229.html

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:53
下一篇 2024年5月23日 am9:55

相关推荐

  • 工作台

    1. 工作台介绍 工作台用于呈现集成相关的统计数据,包括: 连接器总数:集成资源连接器总数; 数据流程总数:定义的数据连接流程总数; 任务总执行数:任务总执行数(统计流程实例数量); 总异常任务数:总执行异常的任务数; 开放接口数:合计开放接口数量(包含所有状态)。 2. 快捷连接 快捷连接是通过快捷筛选所需要链接的集成资源(应用/Oinone平台应用/数据库等),进入【数据流程创建页】,同时展示平台提供的数据流程模版,点击开始连接可使用数据流程模型创建数据流程。 开始连接后进入流程创建页:

    2024年6月20日
    1.0K00
  • 4.2.4 框架之网络请求-HttpClient

    oinone提供统一的网络请求底座,基于graphql二次封装 一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置,请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置,后端请求的路径 图4-2-4-1 初始化代码示例 二、HttpClient详细介绍 获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例 接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址 图4-2-4-3 接口地址 请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调 业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口,打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口,打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化 在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接 设置接口请求回调 业务实战 前文说到自定义新增宠物表单,让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

    2024年5月23日
    1.0K00
  • 庄卓然

    从2009年加入阿里至今,经历了“三淘”时期、天猫时期、双十一,到最后的all in无线手淘时期,几乎是赶上了淘系发展的所有历史性事件。在这个过程中,每一次业务的变革都催生着技术的变迁,倒逼着我们用技术的方式去解决业务问题:在存储、IO、网络等环节满足不了淘系的业务规模时,开始去IOE,最后演化成了阿里云;当业务的规模大到不能通过简单加机器的方式去做调整、当开发的规模大到所有人在一起开发会互相影响的的时候,我们开始做SOA改造,最后演化成了业务中台;在经历了几届双十一后的巨大挑战后,我们开创了里程碑式的全链路压测;在手淘时代,为了解决动态发版问题,我们植入容器概念,搭建了可动态插拔的三层架构,一年实现了500多次的发版;为了同时满足写一套代码就解决多端开发和高并发的性能问题,我们做了weex,最后还捐给了开源社区…… 每一次的业务需求推动技术进步,而技术的进步永远会超出我们的想象! 同为技术宅,我在Oinone身上能清晰地感受到技术演进的脉络,企业在数字化时代,需要一个能快速上手、全面设计、灵活适应且低成本的技术工具,时代的变迁推动了Oinone的诞生。Oinone是一种全新的开发方式,在数字化时代,Oinone在提升研发效率上做出的创新性“低无一体”的设计对传统软件代码开发或者无代码开发一定会有巨大冲击,这种冲击会对软件市场格局造成什么样的变化,我拭目以待。 最后,愿我们这些追光人,在时代的洪流中,都能留下一抹印迹,不辜负时代,不辜负自己。 现任阿里巴巴副总裁,飞猪总裁,曾任阿里大文娱CTO兼优酷COO、淘宝CTO 庄卓然(南天)

    Oinone 7天入门到精通 2024年5月23日
    1.2K00
  • 3.4.3 函数的相关特性

    本小章会从oinone的函数拥有三方面特性,展开介绍 面向对象,继承与多态 面向切面编程,拦截器 SPI机制,扩展点

Leave a Reply

登录后才能评论