當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Spring MVC+layui（基于bootstrap）+t 新增功能（页面和数据传递）
生活随笔
收集整理的這篇文章主要介紹了
Spring MVC+layui（基于bootstrap）+t 新增功能（页面和数据传递）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為開發的規范，更易于擴充，將新增與列表頁分開為:list.html、add.html
list.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1"></meta>
<title>中國光電網</title>
<link rel="stylesheet" href="/layui/css/layui.css"></link>
</head>
<body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><!-- 頭部區域 --><head th:include="/manage/top"></head><!-- 左側菜單欄 --><head th:include="/manage/menu"></head><div class="layui-body"><!-- 內容主體區域 --><div style="padding: 15px;"><fieldset class="layui-elem-field site-demo-button"><legend>操作</legend><a id="add" class="layui-btn layui-btn-primary" href="javascript:;">新增</a></fieldset><table id="demo" lay-filter="test"></table></div></div><!-- 底部固定區域 --><div class="layui-footer">中國光電網</div></div><script src="/layui/layui.js"></script><script src="/js/jquery-3.2.1.min.js"></script><script>layui.use('table', function() {var table = layui.table;//第一個實例table.render({elem : '#demo',height : 315,url : '/manage/attribution/datatable', //數據接口page : true, //開啟分頁cols : [ [ //表頭{field : 'id',title : 'ID',width : 80,sort : true,fixed : 'left'}, {field : 'name',title : '欄目名',width : 80}, {field : 'createTime',title : '創建時間',width : 160,sort : true}, {field : 'updateTime',title : '更新時間',width : 160}, {field : 'language',title : '語言',width : 80} ] ]});});</script><!-- 彈出事件 --><script>//詢問框$("#add").click(function(){//iframe層layer.open({type: 2,title: '新增',shadeClose: true,shade: 0.8,area: ['380px', '50%'],content: '/manage/attribution/add' //iframe的url}); })</script><script>//JavaScript代碼區域layui.use('element', function() {var element = layui.element;});</script>
</body>
</html>
add.html
<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">欄目名稱</label><div class="layui-input-block"><input type="text" name="name" lay-verify="required"placeholder="請輸入" autocomplete="off" class="layui-input"></input></div></div><div class="layui-form-item"><label class="layui-form-label">語言</label><div class="layui-input-block"><input type="radio" name="language" value="0" title="中文"checked="checked"></input> <input type="radio" name="language"value="1" title="英文"></input></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button></div></div></form><script src="/layui/layui.js"></script><script src="/js/jquery-3.2.1.min.js"></script><script>//Demolayui.use('form', function() {var form = layui.form;//監聽提交form.on('submit(formDemo)', function(data) {layer.msg(JSON.stringify(data.field));var param = JSON.stringify(data.field);$.get('/manage/attribution/save?param='+param , function(data) {console.log(data);layer.msg(data);});return false;});});</script><script>//JavaScript代碼區域layui.use('element', function() {var element = layui.element;});</script>AttributionController.java
package com.cioe.optochina.controller;import java.util.HashMap; import java.util.Map;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody;import com.alibaba.fastjson.JSONObject; import com.cioe.optochina.entity.Attribution; import com.cioe.optochina.service.AttributionService;@Controller @RequestMapping("/manage/attribution") public class AttributionController {@Autowiredprivate AttributionService attributionService;@RequestMapping(value = "/list")String list() {return "/manage/attribution/list";}@RequestMapping(value = "/add")String add() {return "/manage/attribution/add";}@RequestMapping(value = "/datatable")@ResponseBodyString datatable(Map<String, Object> map) {Page<Attribution> pages = attributionService.findAll(1, 10);map.put("code", 0);map.put("msg", "success");map.put("count", pages.getTotalElements());map.put("data", pages.getContent());String result = JSONObject.toJSONString(map);return result;}@RequestMapping(value = "/save")@ResponseBodyString save(HttpServletRequest request, HttpServletResponse response) {Map<String, Object> map = new HashMap<String, Object>();String param = request.getParameter("param");//這樣可以獲取前臺參數，然后轉成對應對象Attribution t = JSONObject.parseObject(param, Attribution.class);attributionService.save(t);map.put("msg", "success");return JSONObject.toJSONString(map);} }總結
以上是生活随笔為你收集整理的Spring MVC+layui（基于bootstrap）+t 新增功能（页面和数据传递）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 生化危机6怎么设置单机模式？
- 下一篇： 重新学习Spring一--Spring在