1、建立數(shù)據(jù)庫(kù)名為bbs
1.1建立表名Model扑毡、article胃榕、reply分別為板塊名、文章列表和回復(fù)表
Model下字段為:mid瞄摊、mtitle勋又、muser,分別為板塊號(hào)、板塊標(biāo)題换帜、板塊管理員楔壤，將mid設(shè)置為自增主鍵，mtitle設(shè)置為varchar惯驼，mid和muser設(shè)置為int
Article下字段為:aid蹲嚣、atitle、acontent祟牲、mid隙畜、auserId、acreatetime,分別為文章號(hào)说贝，文章標(biāo)題禾蚕，文章內(nèi)容和板塊id,文章發(fā)布者id,創(chuàng)建的時(shí)間,aid和mid設(shè)置為int,atitle和acontent設(shè)置為varchar,acreatetime設(shè)置為DataTime
Reply字段下為:rid、rcontent狂丝、ruserId换淆、aid哗总、rcreatetime,分別為回復(fù)號(hào),回復(fù)的內(nèi)容,回復(fù)者id,文章id，回復(fù)時(shí)間倍试。其中讯屈，rid,ruserId、aid設(shè)置為int县习，rcontent設(shè)置為varchar,rcreatetime設(shè)置為TIMEStamp.
注：article靠mid來(lái)判斷板塊涮母，replay靠aid來(lái)判斷所屬文章
2、建立article.jsp文件來(lái)存放輸出內(nèi)容
2.1 在body中添加一個(gè)下拉菜單躁愿，將從數(shù)據(jù)庫(kù)返回的數(shù)據(jù)叛本，存入id為articlelist的div塊中
<select name="mid" id="mid">
<option value="1">王者榮耀</option>
<option value="2">dota</option>
<option value="3">魔獸世界</option>
</select>
<div id="articList">
</div>
2.2 在article.jsp中導(dǎo)入需要的js文件：
<script src="js/jquery1.11.3.min.js"></script>
<script src="js/article.js"></script>
2.3下載并導(dǎo)入需要的一個(gè)將數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)轉(zhuǎn)換成json的一個(gè)包
包名為：fastjson-1.2.5.jar,將其放在WebContent 下的WEB-INF下的lib文件夾下，然后彤钟，右鍵選擇build path, 選擇add path来候。
此時(shí)，還有一個(gè)與數(shù)據(jù)庫(kù)相連的包需要導(dǎo)入逸雹，名為：
mysql-connector-java-5.1.7-bin.jar,方法相同
3营搅、在article.js中寫入以下代碼，用來(lái)提取從服務(wù)器返回的數(shù)據(jù)
$(function(){
$("#mid").change(function(){
var mid=$(this).val();
//傳到服務(wù)器查詢?cè)摪鍓K下的帖子
$.getJSON("GetArticSevlet?mid="+mid,function(obj){
//alert(obj);
//清空div
$("#articList").empty();
//obj存放的是json數(shù)組
$.each(obj,function(k,v){
//追加當(dāng)前板塊下的帖子
$("#articList").append(v.atitle+"<br/>");
})
})
})
})
4梆砸、在GetArticSevlet.servlet下寫入以下代碼转质，用來(lái)建立與數(shù)據(jù)庫(kù)的連接并且將返回?cái)?shù)據(jù)轉(zhuǎn)換為 json數(shù)據(jù)
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
//1.獲得mid
String mid=request.getParameter("mid");
//2.查詢?cè)摪鍓K下的帖子
String sql="select * from article where mid=?";
List<Object> paramList=new ArrayList<Object>();
paramList.add(mid);
DbHelper dbHelper=new DbHelper();
List<Map<String, Object>> list= dbHelper.executeQuery(sql, paramList);
//3、自動(dòng)轉(zhuǎn)換成json
String jsonstr=JSON.toJSONString(list);
response.getWriter().println(jsonstr);
}
注：如果不導(dǎo)fastjson包帖世，可以自己寫以下代碼休蟹，用來(lái)替換最后兩句，將數(shù)據(jù)庫(kù)返回?cái)?shù)據(jù)修改為json數(shù)據(jù)
//4日矫、轉(zhuǎn)換為json字符串,json格式：{"aid":1,"atitle":"hello"},{"aid":2,"atitle":"hello2"},
StringBuilder jsonstr=new StringBuilder();
jsonstr.append("[");
for(Map<String, Object> map:list)
{
jsonstr.append("{");
Set<String> keys= map.keySet();
for(String key:keys)
{
jsonstr.append(key);
jsonstr.append(":");
jsonstr.append("'"+map.get(key)+"',");
}
jsonstr.delete(jsonstr.length()-1, jsonstr.length());
jsonstr.append("},");
}
jsonstr.delete(jsonstr.length()-1, jsonstr.length());
jsonstr.append("]");
注：其中還用到了一個(gè)db.properties的數(shù)據(jù)庫(kù)相關(guān)配置文件赂弓，放在GetArticSevlet上級(jí)目錄的根目錄下，內(nèi)容為
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/數(shù)據(jù)表名?characterEncoding=utf-8
uname= 數(shù)據(jù)庫(kù)用戶名
pwd=數(shù)據(jù)庫(kù)密碼
