Demo实例-action接口和自定义HTML页面

504 阅读2分钟

测试项目

测试项目地址

码云地址 gitee.com/huhuanan/mo…

后台测试地址: test.ostudio.cc/admin admin 123456 (请勿修改密码,如不能登录请联系我,最下面有联系方式)

action接口

action类的方法就是接口

action类有注解,action的方法也有注解。

@ActionMeta(name="demoIndex",title="demo首页")
public class IndexAction extends ManageAction {
	private String p1;
	private Integer t1;
	
	@DocumentMeta(
		method=@DocumentMethodMeta(title="首页信息",description="获取首页所需数据"),
		params= {
			@DocumentParamMeta(name="p1",type=FieldType.STRING,length=20,description="p1描述"),
			@DocumentParamMeta(name="t1",type=FieldType.INT,description="t1描述")
		}
	)
	public JSONMessage getIndexData(){
		JSONMessage result=new JSONMessage();
		try {
			if(StringUtil.isSpace(p1)) throw new MException(this.getClass(),"p1参数不能为空");
			Map<String,Object[]> data=new HashMap<String,Object[]>();
			data.put("data1",new Object[] {p1,t1});
			result.push("data",data);
			result.push("code", 0);
		}catch(Exception e) {
			e.printStackTrace();
			result.push("code", 1);
			result.push("msg", e.getMessage());
		}
		return result;
	}
    ... 属性的get和set ...
}

配置注解的方法将会在后台菜单的开发指南里显示,可进行调用。

action接口的返回类型

常用返回类型JSONMessage,也可以返回map或者list,都会转换成json格式,还可以其他类型。

自定义页面

存放位置和访问方法

源文件存放位置src/main/resources/page

该目录会生成到WEB-INF/classes/page

demo的自定义页面位置src/main/resources/page/demo/index.html

访问方法http://ip/page/demo/index.html 该页面已加到菜单里

自定义页面结构

<page>
    <!-- html标签 -->
</page>
<script>
(function(){
    return { //vue对象属性
        data(){
            return {
                //key:'',
                //openKey:'',
            };
        },
        methods:{
            backHandler:function(success,msg){//打开窗体的回调
            }
        }
    };
})();
</script>

自定义页面样式组件是使用iView,请参考iviewui.com/

自定义页面方法

请求后台的方法

$.execJSON('action/demoIndex/getIndexData',{'p1':'浏览量','t1':12345},(function(json){
    if(json.code==0){
        this.indexData=json.data;
    }else{
        this.$Message.info(json.msg);
    }
}).bind(this));

引用注解页面或者自定义页面的方法

$.loadVuePage("#chart_div","action/demoDemo/toChart",{method:'demoChart',openKey:this.key});

开发指南

如何使用M快速开发框架创建项目

M:Demo实例讲解-model类及操作

持续更新中.....

码云地址 gitee.com/huhuanan/mo… 欢迎大家关注,喜欢的请点 star

点击链接加入群聊【M快速开发框架】交流讨论 群号:764581300

谢谢支持