F1V3.0-18 快速开发一个UI模块
来源:互联网 发布:电脑课教学软件 编辑:程序博客网 时间:2024/05/22 03:32
文章主要介绍如何在V3.0的前端开发环境上部署一个新前端项目,具体的前端环境搭建请参看:前端开发环境搭建
请注意,在参看这篇文章之前如果对nginx的使用有不理解的地方,还请参看Nginx F1平台3.0的配置和使用,这篇文章中也提到了新项目的构建,具体的步骤请阅读下文
1 新项目放置位置
nginx会有以下几个变量
######################### 设置全局变量 ########################### bundle的扩展目录名set $extend "extend";# bundle的当前目录名(开发环境为src, 生产环境为dist)set $switch "src";# bundles的根目录set $rootpath "E:\work\F1V3.0\f1-platform-modules";# zuul的地址set $zuulPath "http://192.168.1.20:8081";# uaa授权服务器的地址set $authorizationServicePath "http://192.168.1.20:8080";# index的配置set $indexPath "permission/views/team1/enter.html";###################################################################
$rootPath配置的位置就是新模块存放的位置
2 新模块的构建规范
如果要新添加一个业务模块,就把这个业务模块放到之前$rootpath设置到的那个路径下边就可以了,这样通过nginx的路由就可以访问到这个路径下的静态资源了,这个业务模块要按照以下步骤构建:
(1) 以‘F1UI_模块名_bundle‘这种形式命名模块,如:F1UI_permission_bundle
(2) 模块下所有的文件放到src目录下,如下图:
这里的src目录为开发环境,经过gulp打包会产生一个同级的dist目录,这里两种环境的区分请参考:gulp 打包
3 添加nginx代理
新添加了一个新的模块要到nginx添加代理,和其他的location块一样,只需要根据新模块修改下图两个部分就可以。
## new 微服务 #### new根据业务模块访问的地址配置location ^~ /new/ { set $temple $extend; ## F1UI_new_bundle为新配置的业务模块名 alias $rootpath/F1UI_new_bundle/$temple/; if (!-e $request_filename) { set $temple $switch; }}
如上图的例子中,配置了一个名叫“F1UI_new_bundle“的模块,访问‘new‘的时候会路由到这个模块下。详细的新增模块的nginx配置实例亲参看Nginx F1平台3.0的配置和使用的第四节
接下来重启nginx就可以了:nginx -s reload
4 html文件编写(引入三方组件、平台组件)
新建一个html,要添加平台组件和三方包的引用,以及业务模块使用到的三方插件,要使用如下方式添加:
(1) 添加base标签
将如下代码添加到head标签中,用来配置base标签
<script type="text/javascript"> var getRootPath = function () { //Path名称 var pathName = window.location.pathname.substring(1); //rootPat路径 return window.location.protocol + '//' + window.location.host + '/'; }; //设置rootPath; document.writeln("<base href='" + getRootPath() + "'/>");</script>
(2) 先引用平台依赖的三方包
<script type="text/javascript" src="/public/dll.bundle.js"></script>
(3) 再引用平台组件包
<script type="text/javascript" src="/jquery/scripts/widget.bundle.js"></script><link rel="stylesheet" type="text/css" href="/jquery/css/blue/widget.bundle.css">
(4) 引用业务模块使用到的三方插件包(例如echarts)
平台提供了F1UI_plugins_libraries来存放这些业务模块使用到的三方包,把要使用的三方包放到这个模块下,例如echarts:
引用的路径如下
<script src="/plugins/echarts/build/dist/echarts.js"></script>
- F1V3.0-18 快速开发一个UI模块
- F1V3.0-13 UI模块开发规范
- F1V3.0-20 UI模块常用功能开发
- F1V3.0-16 快速开发一个微服务
- F1V3.0-24 UI前端模块的发布及部署
- F1V3.0-图形-绘图类库快速搭建一个页面绘图应用实例
- F1V3.0-图形-前端如何快速搭建一个地图相关的应用
- F1V3.0-15 前端开发环境搭建
- F1V3.0-12 微服务开发规范
- F1V3.0-14 微服务开发环境
- F1V3.0-6 平台V3.0 UI体系架构
- F1V3.0-19 UI新控件及新功能简介
- F1V3.0-图形-地图模块主要对象说明
- F1V3.0-图形-微服务模块打包部署
- F1V3.0-3 前端开发问题之解决之道
- F1V3.0-11 开发规范——常规模式
- F1V3.0-17 微服务常用功能开发
- 如何快速的进行一个新模块的开发
- tcp断开侦测
- ArcGIS水文分析实战教程(2)ArcGIS水文分析工具的基本原理
- 创业成长系列.搭建基础
- Kinect开发-如何判断关节在UI上
- 手工检测Web应用指纹(分析网站技巧)
- F1V3.0-18 快速开发一个UI模块
- 深入浅出RxJava(一:基础篇)
- 双链表实现冒泡排序
- ORACLE DECODE函数
- CSS 变量教程
- 【转载】使用Maltlab中的plotroc()函数绘制ROC曲线
- mysql 多重查询
- JS删除数组指定元素
- 6.20 JLL--实习日志-- teneat关联Availabilty,retail 增删改插的函数理解