此贴为记录贴，是关于如何让菜单栏目变成动态主题的总结
以前在写表单的时候总是把表单的第一行主题给写死，比如像下面图片这样
当时没想那么多，只顾着完成当前的功能，但是后期在维护的时候真的是血亏
就比如说如果需求要让我们再加一个科目“化学”，那么我们有得重新打开编译器，找到所对应的前端代码，然后把这个页面再一次写死改好，如果是一个页面还好说，但这显然是不可能的。
那么这么做无疑是徒劳的，所以我们必须开发出一种解决方案来解决这个问题，那么下面我就来分享我的解决方案
解决方案
说到动态我们第一时间会想到用一个list+数据库把这些头部信息储存起来对吧，那么问题来了，我们是用一个字段存储还是多个呢，那么答案已经很明显了，如果咱们是多字段储存，那么在主题个数未知的情况下我们怎么知道该设计多少字段呢，所以我们必需得用一个字段来存储所有主体
那么，我们可以将主题转换为json字符串，然后把该字符串存到一个字段中，在读取的时候我们只需要将该字符串读取到String中，然后直接把这个字符串返回给前端页面即可
那下面的一串json打个比方
[{"sName":"语文"},{"sName":"数学"},{"sName":"英语"},{"sName":"物理"},{"sName":"化学"},{"sName":"历史"}]
将这一串字符储存在数据库中，然后我们从数据库中查询到该字段并且返回（我这里为了方便测试直接用的servlet，框架同理）
Course course = courseService.getCourseByTerm("1");
response.setContentType("text/html; charset=utf-8");
String s = course.getSubject();
response.getWriter().print(s);
然后在前端页面我们这么写，我用的是DOM
这是表单
<table border="1px" id ="showAllInfo_table">
<thead>
</thead>
<tbody>
</tbody>
</table>
这是JS
<script>
$.ajax({
url:"${path}/getCourseByTerm",
success:function(result){
var n = 0;
var subjectArray = [];
var info =JSON.parse(result);
var tr = $("<tr></tr>");
var td = null;
$.each(info,function(index,item){
td = $("<td></td>")
td.append(item.sName);
tr.append(td);
});
tr.appendTo($("#showAllInfo_table thead"));
}
});
</script>
这样我们就能达到动态改变主题的目的