欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前后端联调

程序员文章站 2022-06-03 21:34:27
...

           今天,在公司做了一个功能模块,就是前后端都写,并实现联调,首先,后端使用的是SpringMVC+Spring+MyBatis框架,下面是我写的简单的保存

	@ResponseBody
	@RequestMapping(value="addGuestbookHyt")
	public Msg addGuestbookHyt(GuestbookHyt guestbook)
	{
		if (StringUtils.isEmpty(guestbook.getName())) {
			guestbook.setDelFlag("2");
		}
		guestbookService.save(guestbook);
		return Msg.success();
	}
	

  前端(layui+jquery+css+html)实现的代码,

     

<script id="detail_tpl" type="text/html">
{{#  layui.each(d.result, function(index, item){ }}

<div class="xq-zw">
    <h1 style="text-align:center">{{item.title}}</h1>
</div>
<div class="zq-content">
    {{item.content}}
</div>
{{#  }); }}
</script>
<script type="text/javascript">
(function() {
	var id = common.getRequestParam("id");
	ajax.request({
   		url: config.sever.path+"rest/hytcms/article/findArticle",
   		data:{"id":id},
   		success: function(result) {
   			if(result.data.contentList){
   				console.log(result.data.contentList);
   				layui.laytpl($("#detail_tpl").html()).render({result: result.data.contentList}, function(html) {
					$("#detail").html(html);
				});
   			}
   		}
   	});
})();