利用Thymeleaf在JavaScript中取出model里面List数据，并且利用Vue框架将数据完美地呈现在用户界面上

利用Thymeleaf在JavaScript中取出model里面List数据，并且利用Vue框架将数据完美地呈现在用户界面上

#第一步：构建数据
我们先写好我们想要的类（方便构建我们想要的数据）
//学生类
public class Student
{

public int id;
public String name;
public boolean sex;

public String cellphone;

public Student()
{		
}

public Student(int id, String name, boolean sex, String cellphone)
{
	this.id = id;
	this.name = name;
	this.sex = sex;
	this.cellphone = cellphone;
}

}

//构建多个学生的数据（我们主要构建List类型数据，模拟数据库）
package my.data;
import java.util.ArrayList;
import java.util.List;

public class StudentDB
{

public static List<Student> list = new ArrayList<>();

static {
	list.add(new Student(1000, "小春", true, "0012310"));
	list.add(new Student(1001, "小夏", false, "021342101"));
	list.add(new Student(1002, "小秋", false, "0112340"));
	list.add(new Student(1003, "小冬", true, "01213411"));
	list.add(new Student(1004, "小A", true, "101234120"));
	list.add(new Student(1005, "小B", true, "21341234"));
	list.add(new Student(1006, "小C", false, "23123130"));
	list.add(new Student(1007, "小D", false, "123134108"));
	list.add(new Student(1008, "小E", true, "12312409410"));
}

public static Student select(int id)
{
	for(Student s: list)
	{
		if(s.id == id)
			return s;
	}
	return null;
}

public static List<Student> selectList()
{
	return list;
}

public static List<Student> selectList(boolean sex)
{
	List<Student> result = new ArrayList<>();
	for(Student s : list)
	{
		if(s.sex == sex)
		{
			result.add( s );
		}
	}
	return result;
}

}

到了这里后台数据就已经构建完毕了。

#第二步：在Spring框架里将List数据放到model里面
核心代码如下：
import java.util.ArrayList;
@Controller
public class HelloController
{
@RequestMapping("/test6")
public String test6 (Model model)
{
List list = StudentDB.selectList();
model.addAttribute(“list”, list);
return “test6”;
}
}

#第三步：将model传过来这一行一行的数据，传到JavaScript里面。
关键就在于在《script》标签上声明一下th:inline=“javascript”，
也即《script th:inline=“javascript”》代码《/script》，（注：文章不不支持用<>编辑，所以用《》代替)。
具体如图所示：
中间放JavaScript代码

这样，我们就能将model里面的数据传到JavaScript里面进行处理。

#第四步：将取来的数据通过List形式，选取适当的Vue框架展示出来。在使用Vue框架之前，建议大家先到官网上下载vue.js这个包。这样才能使用Vue框架（此为基础，在此我不再赘述）。

我在element ui上选取的是带边框表格(因为我觉得这个样式展示我们的数据很美观，当然也可以选取其他你认为美观的样式，具体操作类比我们所讲的方法即可)，如下图所示：

表格下面有个小箭头，直接展开，把代码拷贝下来即可。

然后把里面的数据替换成你自己的数据，例如我们这次的示例：

	<div id="app">		
	 <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
		<el-table-column prop="id" label="学号" width="180">
		</el-table-column>
		<el-table-column prop="name" label="姓名" width="180">
		</el-table-column>
		<el-table-column prop="sex" label="性别"  width="180">
		</el-table-column>
		<el-table-column prop="cellphone" label="手机">
		</el-table-column>
	</el-table>		 
	</div>

然后就在script里面取出我们自己的List数据。
注意，核心就在于取数据的技巧。一定要利用循环操作，将model数据取出放到一个对象里，凑出vue里面合适的数据样式。在script 里面的核心代码示例如下：

    var info=
			[[# th:each="listdata : ${list}"]
			  {id:[[${listdata.id}]],
			   name:[[${listdata.name}]],
			   sex:[[${listdata.sex?'男':'女'}]],
			   cellphone:[[${listdata.cellphone}]]},
			[/]]
	
	var app = new Vue({
	  el: '#app',
	  data: {
		  tableData: info
	  }
	})	

具体如图所示：

到了这一步，我们的所有工作就都结束了，完成了利用Thymeleaf在JavaScript中取出model里面List数据，并且利用Vue框架将数据呈现在用户界面上。运行结果展示：

值得一提的是， 在此以后，我们在处理数据库数据时，或者处理其他数据表时，可以按照类似的思路，选取你所想要的Vue框架样式，展示在用户面前。