前端頁(yè)面用靜態(tài)HTML編寫(xiě)，嵌入JQuery和Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示和提交評(píng)論恃轩。
以“發(fā)表評(píng)論”為例结洼，season后臺(tái)大致數(shù)據(jù)流動(dòng)過(guò)程理解為：前端通過(guò)Ajax將評(píng)論comment的數(shù)據(jù)提交到Controller控制層，在控制層通過(guò)注解查找saveComment方法，方法中將評(píng)論對(duì)象實(shí)例化一個(gè)評(píng)論vo甸私，依次通過(guò)工廠類ServiceFactory身堡、服務(wù)層CommentService、工廠類DaoFactory到數(shù)據(jù)層CommentDao氮发，通過(guò)save方法實(shí)現(xiàn)數(shù)據(jù)持久化。
1.IDEA中新建項(xiàng)目，并配置數(shù)據(jù)庫(kù)
配置mysql.png
配置mysql.png
2.錄入數(shù)據(jù)庫(kù)信息連接數(shù)據(jù)庫(kù)酥艳，用建表語(yǔ)句建表
錄入數(shù)據(jù)庫(kù)名等信息.png
連接數(shù)據(jù)庫(kù)建表.png
- 項(xiàng)目結(jié)構(gòu)
工程結(jié)構(gòu).png
3.season后臺(tái)：創(chuàng)建啟動(dòng)類
package com.main;
import com.season.core.spring.SeasonApplication;
import com.season.core.spring.SeasonRunner;
/**
* Created by mwkang on 2016/12/19.
* 啟動(dòng)類
*/
public class App extends SeasonApplication {
public static void main(String[] args) {
SeasonRunner.run(App.class);
}}
4.創(chuàng)建實(shí)體類
package com.vo;
import com.season.core.db.Pojo;
import com.season.core.db.annotation.Column;
import com.season.core.db.annotation.TableInfo;
import com.season.core.db.annotation.Transient;
import java.util.Date;
/**
* Created by mwkang on 2016/12/19.
* 實(shí)體類
*/
@TableInfo(tableName = Comment.tableName,pkName = "comment_id")
public class Comment extends Pojo<Comment>{
public static final String tableName = "comment";
@Column(name = "comment_id")
private int commentId;
@Column(name = "product_name")
private String productName;
@Column(name = "comment_content")
private String commentContent;
@Column(name = "create_date")
private String createDate;
@Transient
private String remark;
public Comment(){}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public int getCommentId() {
return commentId;
}
public void setCommentId(int commentId) {
this.commentId = commentId;
}
public String getProductName() {
return productName;
}
public void setProductName(String productName) {
this.productName = productName;
}
public String getCommentContent() {
return commentContent;
}
public void setCommentContent(String commentContent) {
this.commentContent = commentContent;
}
public String getCreateDate() {
return createDate;
}
public void setCreateDate(String createDate) {
this.createDate = createDate;
}
public Comment(int commentId, String productName, String commentContent, String createDate) {
this.commentId = commentId;
this.productName = productName;
this.commentContent = commentContent;
this.createDate = createDate;
}
}
5.創(chuàng)建數(shù)據(jù)層
package com.dao;
import com.vo.Comment;
import com.season.core.db.Dao;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
* Created by DELL on 2016/12/19.
* 數(shù)據(jù)層
*/
@Repository
public class CommentDao {
//查詢?nèi)吭u(píng)論
public List<Comment> findAll(){
return Dao.findAll(Comment.class);
}
//增加評(píng)論數(shù)據(jù)
public void save(Comment vo){
Dao.save(vo);
}
//刪除評(píng)論數(shù)據(jù)
public void delete(int commentId){
Dao.deleteById(Comment.class,commentId);
}
//修改評(píng)論數(shù)據(jù)
public void update(Comment vo){
Dao.update(vo);
}
}
6.服務(wù)層
package com.service;
import com.factory.DaoFactory;
import com.vo.Comment;
import java.util.List;
/**
* Created by mwkang on 2016/12/19.
* 服務(wù)層
*/
public class CommentService {
public List<Comment> findAll(){
return DaoFactory.getCommentDAOInstance().findAll();
}
public void insert(Comment vo){
DaoFactory.getCommentDAOInstance().save(vo);
}
public void delete(int commentId){
DaoFactory.getCommentDAOInstance().delete(commentId);
}
public void update(Comment vo){
DaoFactory.getCommentDAOInstance().update(vo);
}
}
7.創(chuàng)建控制層
package com.controller;
import com.factory.ServiceFactory;
import com.vo.Comment;
import com.season.core.ActionKey;
import com.season.core.Controller;
import com.season.core.ControllerKey;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
/**
* Created by mwkang on 2016/12/19.
* 控制層
*/
@ControllerKey("product")
public class CommentController extends Controller {
//查詢顯示所有評(píng)論
@ActionKey("findAllComments")
public void findAllComments(){
List<Comment> all = ServiceFactory.getCommentServiceInstance().findAll();
renderJson("comments",all);
}
//新增
@ActionKey("saveComment")
public void saveComment(){
String content = getPara("comment");
Comment vo = new Comment();
vo.setCommentContent(content);
vo.setProductName("computer");
vo.setCreateDate(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date().getTime()));
//new java.sql.Date(System.currentTimeMillis()));
ServiceFactory.getCommentServiceInstance().insert(vo);
renderJson();
}
//刪除
@ActionKey("delete")
public void delete(){
int id=getParaToInt("id");
ServiceFactory.getCommentServiceInstance().delete(id);
}
//修改
@ActionKey("update")
public void update(){
String changecontent = getPara("comment");
Comment vo = new Comment();
vo.setCommentId(getParaToInt("id"));
vo.setCommentContent(changecontent);
vo.setProductName("computer");
vo.setCreateDate(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date().getTime()));
ServiceFactory.getCommentServiceInstance().update(vo);
renderJson();
}
}
8.工廠類
- DaoFactory
package com.factory;
import com.dao.CommentDao;
/**
* Created by mwkang on 2016/12/19.
* 工廠類
*/
public class DaoFactory {
public static CommentDao getCommentDAOInstance(){
return new CommentDao();
}}
- ServiceFactory
package com.factory;
import com.service.CommentService;
/**
* Created by DELL on 2016/12/19.
* 工廠類
*/public class ServiceFactory {
public static CommentService getCommentServiceInstance(){
return new CommentService();
}}
9.前端頁(yè)面
<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<html>
<head>
<title>商品詳情</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
function cc(id) {
//刪除評(píng)論
$.ajax({
type: "post",
dataType: "json",
url: "http://localhost:8080/season/product/delete?id=" + id,
data: id,
success: function (data) {
location.href = "http://localhost:8080/season/index.html"
}
});
}
function dd(id, comment) {
//修改評(píng)論
$("#comment").val(comment);
$("#div1").append("<button id='b_c' >確認(rèn)修改</button>");
$("#a_c").css('display:none');
$("#b_c").click(function () {
var changeComment = $("#comment").val();
$.ajax({
type: "get",
dataType: "json",
url:"http://localhost:8080/season/product/update?id="+id,
data: {
comment: changeComment
},
success: function (data) {
location.href = "http://localhost:8080/season/index.html"
}
})
})
}
$(document).ready(function() {
$(function bb () {
//查詢顯示所有評(píng)論
$.ajax({
type: "get",
dataType: "json",
url: "http://localhost:8080/season/product/findAllComments",
data: null,
success: function (data) {
$("#commentDiv").empty();
var commentsText = "";
$.each(data.comments, function (commentIndex, comment) {
commentsText += "<li>" +
"<div style='background-color: #d9fff7'>" + "游客" + comment.commentId + "說(shuō)：</div>" +
"<div style='background-color: #fff3f3'><b>" + comment.commentContent + "</b></div>" +
"<div style='background-color: #fff3f3'>" + "評(píng)論時(shí)間：" +comment.createDate+
// new Date(comment.createDate).getFullYear()+"."+
// new Date(comment.createDate).getUTCMonth()+"."+
// new Date(comment.createDate).getDate()+"    "+
// new Date(comment.createDate).getHours()+" : "+
// new Date(comment.createDate).getMinutes() +
"  "+"<button id='"+comment.commentId+"' onclick='cc("+comment.commentId+")'>"+"刪除"+"</button>"+
"  "+"<button id='"+comment.commentId+"' onclick='dd("+comment.commentId+","+comment.commentContent+")'>"+"修改"+"</button>"+
"</div>"+"</li>";
});
$("#commentDiv").append(commentsText);
}
});
});
//發(fā)表提交評(píng)論
$("#a_c").click(function aa () {
var enterComment = $("#comment").val();
$.ajax({
type: "post",
dataType: "json",
url: "http://localhost:8080/season/product/saveComment",
data: {
comment: enterComment
},
success: function (data) {
location.href="http://localhost:8080/season/index.html"
}
});
});
});
</script>
</head>
<body>
<p align=center>
<font style="font-size:12pt">
<span> 冰箱 </span>
</font>
<br><br>
<FONT style="font-size:9pt" color=darkgray>
來(lái)源：<TRS_DOCUMENT FIELD="DOCSOURCE" AUTOLINK="TRUE">來(lái)源 </TRS_DOCUMENT>
時(shí)間：<TRS_DATETIME>時(shí)間</TRS_DATETIME>
</FONT>
<br><br>
<img align="center" style="width: 25%; height: 50%" src='./bx.png' border=0/>
<br><br>
<font style="font-size:15pt">
<span> 642升變頻風(fēng)冷對(duì)開(kāi)門冰箱；優(yōu)雅香檳金爬骤，時(shí)尚百搭充石；變頻壓縮機(jī)，節(jié)能靜音霞玄；手機(jī)操控骤铃，智能飲食養(yǎng)生，低溫凈味系統(tǒng) </span>
</font>
<br><br>
</p>
<br><br>
<div id="div1">
請(qǐng)發(fā)表您的評(píng)論：<br>
<textarea type="text" id="comment" cols="80" rows="2"></textarea>
<input type="button" id="a_c" value="發(fā)表"/>
</div>
<div id="commentDiv"></div>
</body>
</html>
10.http://localhost:8080/season/index.html 運(yùn)行結(jié)果顯示如下：
- 首頁(yè)
首頁(yè).png
- 錄入評(píng)論內(nèi)容并點(diǎn)擊發(fā)表按鈕
錄入評(píng)論內(nèi)容.png
- 發(fā)表同時(shí)刷新頁(yè)面顯示結(jié)果
顯示結(jié)果.png
- 刪除操作
點(diǎn)擊刪除
點(diǎn)擊刪除.png
刪除成功
刪除成功.png
-
修改操作
點(diǎn)擊修改按鈕坷剧，評(píng)論內(nèi)容同步到錄入框中惰爬，后邊出現(xiàn)一個(gè)“確認(rèn)修改”按鈕
點(diǎn)擊修改.png
點(diǎn)擊確認(rèn)修改，修改成功同時(shí)刷新當(dāng)前頁(yè)面
12修改完成.png
