JRESPLUS开发-视图开发.pptx

JRESPLUS开发 --视图开发 视图开发-目录结构 WebRoot components components.css components.js component folder1 img component folder2 img css userstyle.css module sub module xx.css images module sub module scripts module sub module xx.js plugins jquery jquery.min.js other lib WEB-INF views components components.vm layout default.vm module default.vm sub module default.vm xx.vm screen index.vm login.vm module sub module xx.vm common 500.vm 404.vm xx.vm 视图开发-布局与内容 视图 一个页面视图分为布局和内容两部分 1，可以提高复用（多个内容复用一套布局） 2，可以提高需求的应变性（改版快捷、统一） 3，提高人工利用率（职责分明，并行开发） 布局 内容 = + (coc) 美工与设计 业务开发 WEB-INF views layout default.vm screen module module default.vm sameName.vm sameName.vm 1，首先匹配同名目录下的同名布局文件 2，其次匹配同名目录下的default布局文件 4，最后匹配布局根目录下的default布局文件 Sub Module Sub Module default.vm 3，再次匹配上级目录下的default布局文件 内容页面与布局页面匹配规则 视图开发-布局与内容 #@screen() #crud({ “query”:[ {‘type’:’text’,’name’:’userName’,’label’:’用户名’}， {‘type’:’number’,’name’:’userAge’,’label’:’用户年龄’}, …… ], ”tool”:[ {‘label’:’新增’,’event’:’add()’}, {‘label’:’修改’,’event’:’update()’}, ….. ], ”cols”:[ {‘label’:’用户名’,’field’:’userName’}, {‘label’:’用户年龄’,’field’:’userAge’}, …… ] }) #end #jscode() function add(){……} function update(……) #end DOCTYPE html head……/head body div class=“site_nav”…/div div class=“site_banner”…/div div class=“navigation”…/div div class=“main” $screen_content /div div class=“foot”…/div /body /html layout screen layout中使用变量“$screen_content”为内容占位符; screen中的内容最终会被合并到layout中$screen_content所占的位置 编码规则 Layout页面中可以允许出现具有布局特性的dom结构和影响渲染的css样式； Screen页面中不允许出现具有布局特性的dom结构和css样式,原始的html代码，使用velocity宏的方式封装为宏指令（页面组件），screen中使用这些页面组件开发页面内容 视图开发-页面中的URL 类型 SpringBean ID request变量 相关配置（perties） 静态资源请求 imageServerBroker imageServer image.server.host=localhost image.server.port=8100 tocol=http 应用请求 ap