提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Eclipse使用Maven ajax+artTemplate+json完成渲染的SpringBoot启动的Demo(HelloApp)

SpringBootMaveneclipseAJAXJSONJSON 启动 完成
2023-09-11 14:17:08 时间

使用ajax+artTemplate完成表格的渲染(HelloApp)

对应的css,js文件在这里，https://download.csdn.net/download/kjcxmx/11033189 点击下载(包含源码压缩包哦)即可，或者自己百度找一下，都是官方通用的

pom.xml(依赖的jar包)

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.nmd</groupId>
  <artifactId>HelloApp</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.3.RELEASE</version>
	</parent>  
	
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-freemarker</artifactId>
		</dependency>
		<dependency>
		    <groupId>com.alibaba</groupId>
		    <artifactId>fastjson</artifactId>
		    <version>1.2.56</version>
		</dependency>
		<dependency>
	  		 <groupId>org.freemarker</groupId>
	 		 <artifactId>freemarker</artifactId>
	 	</dependency>
	</dependencies>	
  
</project>

IndexController(核心控制器)

package com.nmd.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

@Controller
public class IndexController {
	
	public static JSONArray getJsonArray() {
		JSONArray array = new JSONArray();
		for(int i=1;i<10;i++){
			JSONObject object = new JSONObject();
			object.fluentPut("id", 100+i);
			object.fluentPut("sex", "男"+i);
			object.fluentPut("name", "你好");
			object.fluentPut("age", (int)18+i);
			array.add(object);
		}
		return array;
	}
	
	@RequestMapping("/")
	public String index(HttpServletRequest request,HttpServletResponse response,Model model){
		model.addAttribute("array", getJsonArray());
		return "index";
	}
	
	@RequestMapping("/ajax")
	@ResponseBody
	public JSONArray ajax(){
		return getJsonArray();
	}
	
	@RequestMapping("/ajax1")
	public String ajax1(){
		return "ajax";
	}
	
	//测试
	@RequestMapping("/template")
	public String template(){
		return "template";
	}
	
}

NmdApp(SpringBoot启动类)

package com.nmd.controller;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author lemon
 */
@SpringBootApplication
public class NmdApp {

	public static void main(String[] args) {
		SpringApplication.run(NmdApp.class, args);
	}

}

application.properties(配置属性文件)

server.port=8080

spring.freemarker.cache=false
spring.freemarker.suffix=.ftl
spring.freemarker.charset=UTF-8
spring.freemarker.template-loader-path=classpath:/templates/

index.ftl

<html>
<head>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="/css/layoutit.css" />
	<link rel="stylesheet" type="text/css" href="/css/bootstrap-combined.min.css" />
    <title>Welcome!</title>

</head>
<body>
	<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3>
				<a href="/ajax">点击跳转REST Ajax传值页面</a>
				<a href="/ajax1">点击跳转Ajax传值页面</a>
			</h3>
			<table class="table">
				<thead>
					<tr>
						<th>
							学号
						</th>
						<th>
							名字
						</th>
						<th>
							性别
						</th>
						<th>
							年龄
						</th>
						<th>
							操作
						</th>
					</tr>
				</thead>
				<tbody>
				<#list array as content>
					<#if content_index%2 == 0>
						<tr class="warning">
							<td>${content.id}</td>
							<td>${content.name}</td>
							<td>${content.sex}</td>
							<td>${content.age}</td>
							<td><button class="btn">删除</button></td>
						</tr>
					</#if>	
					<#if content_index%2 != 0>
						<tr class="errors">
							<td>${content.id}</td>
							<td>${content.name}</td>
							<td>${content.sex}</td>
							<td>${content.age}</td>
							<td><button class="btn">删除</button></td>
						</tr>
					</#if>	
					</#list>
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
</html>

ajax.ftl

<html>
<head>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="/css/layoutit.css" />
	<link rel="stylesheet" type="text/css" href="/css/bootstrap-combined.min.css" />
	<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/js/template.js"></script>
	<script type="text/javascript" src="/js/template-web.js"></script>
	
    <title>Welcome!</title>
	<script type="text/javascript">
	    function getData(){
	        $.ajax({
	            url:'ajax',
	            type:'post',
	            success:function (data) {
	                console.log(data);
	                var datas={
	                	items: data
	                };
					var html = template('data', datas);
					document.getElementById('content').innerHTML = html;
	            }
	        });
	    }
	    getData();
	</script>
</head>
<body>
	<script id="data" type="text/html">
	<%for(var i in items){%> 
		<tr>
			<td><%=items[i].id%></td>
			<td><%=items[i].name%></td>
			<td><%=items[i].sex%></td>
			<td><%=items[i].age%></td>
			<td><button class="btn">删除</button></td>
		</tr>
	<%}
	%>
	</script>
	
	
	<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h3>
				这里是Ajax传值页面.<a href="javascript:history.back(-1)" class="primary">返回上一页</a>
			</h3>
			
			<table class="table">
				<thead>
					<tr>
						<th>
							学号
						</th>
						<th>
							名字
						</th>
						<th>
							性别
						</th>
						<th>
							年龄
						</th>
						<th>
							操作
						</th>
					</tr>
				</thead>
				<tbody id="content">
				</tbody>
			</table>
		</div>
	</div>
</div>
</body>
</html>

template.ftl(测试模板，可以不使用)

<html>
<head>
	<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/js/template.js"></script>
	<script type="text/javascript" src="/js/template-web.js"></script>
    <title>Welcome!</title>
</head>
<body>
	<script type="text/javascript">
	    function getData(){
	        $.ajax({
	            url:'ajax',
	            type:'post',
	            success:function (data) {
	                console.log(data);
	                var datas={
	                	items: data
	                };
	                var dataq ={
					    items:[{'name':'名字一','val':'数据一'},
					    {'name':'名字二','val':'数据二'},
					    {'name':'名字三','val':'数据三'},
					    {'name':'名字四','val':'数据四'}
					    ]
					};
					var html = template('data', datas);
					document.getElementById('content').innerHTML = html;
	            }
	        });
	    }
	    getData();
	</script>

<a href="javascript:history.back(-1)" class="primary">返回上一页</a>

<table id="content">

</table>

<script id="data" type="text/html">
{{$data}}

<ul>
	<%for(var i in items){%>   
		<li>
			name:<%=items[i].name%>  id:<%=items[i].id%>  sex:<%=items[i].sex%>  age:<%=items[i].age%>
		</li>
	<%}%>
</ul>

<%for(var i in items){%> 
	<tr>
		<td><%=items[i].id%></td>
		<td><%=items[i].name%></td>
		<td><%=items[i].sex%></td>
		<td><%=items[i].age%></td>
	</tr>
<%}%>
</script>

<div id="content1"></div>
<script id="test" type="text/html">
{{$data}}
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

<script>
var data = {
	title: '嵌入子模板',
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content1').innerHTML = html;
</script>

</body>
</html>

相关文章