關于第一個專案cms心得
cms是對內容管理系統，第一個專案cms開發主要是對于企業網站多個模塊進行curd操作，這其中包括了后臺對于article文章模塊slide輪播圖模塊等進行crud操作，并在前臺頁面進行展示，
整個專案的需求是在官網中的內容或者資訊啟用或者不啟用均來自后臺，需要做一個后臺內容管理系統，
整個專案的架構屬于bs架構，有前臺頁面的展示，和后臺頁面管理；在專案中我們用的技術選型為主要開發工具為eclipse，資料庫用到mysql，后端框架ssm，前端框架jQuery、bootstrap、gridmanager等，
本次專案中分為article模塊和slide輪播圖模塊，自選評論模塊及問題展示模塊和視頻展示模塊，
在article模塊中前臺頁面運用gridmanager框架向后臺發送資料，并接受后臺發送回來的資料，展示到表格中，回傳到前臺是需要由totals和data資料，我在后臺需要封裝一個物體類pageBean作為物件將資料回傳到前端，
在后臺頁面進行展示的時候我們根據對article判斷，需要高級查詢的欄位，設計一個articleQurey物體類繼承baseQuery，其中basequery是對當前頁localpage和頁長pagesize的封裝；
在前端資料發送到后臺之后，需要后臺利用controller層進行逐一反向變成，再創建相關service層介面，并創建介面實作類；然后在創建mapper層中介面，最后在去mapper.xml檔案中撰寫sql陳述句，其中在高級查詢中需要用到動態查詢陳述句，
<select id="findAll" resultType="cn.itsource.domain.Article">
select * from t_article
//引入sql陳述句
<include refid="query"></include>
//進行分頁處理
limit #{begin},#{pageSize}
</select>
<sql id="query">
<where>
<if test="typeId != null">
and typeId = #{typeId}
</if>
<if test="enable != null">
and enable = #{enable}
</if>
<if test="title != null and !''.equals(title.trim())">
and title like concat ('%',trim(#{title}),'%')
</if>
</where>
</sql>
對于article模塊中的增刪改：在后臺頁面中點擊添加或者洗掉修改按鈕時，觸發點擊事件彈出模態框，然后在進行相關操作
<!-- 添加或者修改的模態框 -->
<div class="modal fade bs-example-modal-lg" id="saveModel">
<div class="modal-dialog modal-lg">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/system/article/save" method="post"
class="form-horizontal" id="saveForm">
<input type="hidden" name="id" id="hid">
<div class="form-group row">
<label for="title" class="control-label col-md-3">文章標題</label>
<div class="col-md-9">
<input class="form-control" type="text" name="title">
</div>
</div>
<div class="form-group row">
<label for="typeId" class="control-label col-md-3">文章型別</label>
<div class="col-md-9">
<select name="typeId" class="form-control">
<c:forEach items="${list}" var="t">
<option value="${t.id}">${t.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group row">
<label for="enable" class="control-label col-md-3">是否啟用</label>
<div class="col-md-9">
<div class="form-check">
<label class="form-check-label"> <input
class="form-check-input" type="radio" checked="checked"
id="enable" name="enable" value="1">啟用
</label>
</div>
<div class="form-check">
<label class="form-check-label"> <input
class="form-check-input" type="radio" name="enable" value="0">禁用
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="content" class="control-label col-md-3">文章內容</label>
<div class="col-md-9">
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這里寫你的初始化內容
</script>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href='javascript:void(0);' id="saveButton"
class="btn btn-success">確定</a>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------------!>
/* 系結添加事件 */
$("#table-demo-ajaxPageCode").on("click","#addBtn",function(){
$("#saveForm")[0].reset();
$("#hid").val("");
//清空富文本內容
var ue = UE.getEditor('container');
$(document).ready(function () {
ue.ready(function () {
ue.setContent('');//賦值給UEditor
});
});
$("#saveModel").modal("show");
});
/* 系結修改事件 */
$("#table-demo-ajaxPageCode").on("click","a[data-obj]",function(){
var objs = $(this).data("obj");
//console.debug(objs);
$("#saveForm").setForm(objs);
//回顯富文本
var ue = UE.getEditor('container');
$(document).ready(function () {
ue.ready(function () {
ue.setContent(objs.content);//賦值給UEditor
});
});
$("#saveModel").modal("show");
});
點擊確定按鈕，向后端發送請求，在回應會網頁，，，
$("#saveButton").on("click",function(){
$.ajax({
type:"post",
url:"/system/article/save",
data:$("#saveForm").serialize(),
dataType:"json",
success:function(msg){
if(msg.result){
$("#saveModel").modal("hide");
GridManager.refreshGrid("demo-ajaxPageCode");
}else{
alert(msg.msg)
}
}
});
})
在整個后臺進行的curd操作中需要我們注意在模態框彈出時可能會因為沒有對隱藏域或者模態框中的表單資料進行清空從而造成在修改時資料回顯不對或者添加是進行之前序號那排資料的修改命令，
在完成后臺管理系統頁面的curd之后需要我們把后臺資料展示到前臺home網頁中；我們需要home前臺網頁向后臺發送請求全部查詢并其回傳一個list集合，然后通過前臺遍歷拼接，最終展示的前臺，
在本專案中我們按照article不同型別分為了三種type：分別是technology、industry和subject，
<script>
$(function() {
// 發送請求
$.ajax({
type: "post",
url: "/home/article/list",
dataType: "json",
success: function(msg){
//console.debug(msg);
// 技術文章
var technology = msg.technology;
$.each(technology,function(i,obj){
var tec = '<a target="_blank" href="/static/template/'+obj.url+'"><li class="flex-box"><div class="ellipsis-line" title="'+obj.title+'"></div><div class="date">'+obj.createDate+'</div></li></a>'
// 獲取ul
/* console.debug(obj.url); */
$("#technology").append(tec);
});
// 行業新聞
var industry = msg.industry;
$.each(industry,function(i,obj){
var ind = '<a target="_blank" href="/static/template/'+obj.url+'"><li class="flex-box"><div class="ellipsis-line" title="'+obj.title+'"></div><div class="date">'+obj.createDate+'</div></li></a>'
// 獲取ul
$("#industry").append(ind);
});
// 學科咨詢
var subject = msg.subject;
$.each(subject,function(i,obj){
var sub = '<a target="_blank" href="/static/template/'+obj.url+'"><li class="flex-box"><div class="ellipsis-line" title="'+obj.title+'"></div><div class="date">'+obj.createDate+'</div></li></a>'
// 獲取ul
$("#subject").append(sub);
});
}
});
// Title proxy.
$("#tech-zone .wrapper ul >a").each(function() {
$(this).attr("title", $(this).find(".ellipsis-line").attr("title"));
});
});
</script>
注意在后臺進行業務判斷是我們需要知道在前臺展示出來的文章enable屬性都是啟用狀態，所以在sql陳述句中進行條件選擇
@Override
public Map<String, Object> findAll() {
Map<String, Object> map = new HashMap<String, Object>();
List<Article> technology = articleMapper.findByCode(ArticleCode.TECHNOLOGY);
List<Article> industry = articleMapper.findByCode(ArticleCode.INDUSTRY);
List<Article> subject = articleMapper.findByCode(ArticleCode.SUBJECT);
map.put("technology", technology);
map.put("industry", industry);
map.put("subject", subject);
return map;
}
<!-- List<Article> findByCode(String code); -->
<select id="findByCode" resultType="cn.itsource.domain.Article">
select * from t_article t1, t_article_type t2 where t1.typeId=t2.id and
t2.code=#{code} and t1.enable=1 order by createDate desc limit 8
</select>
前臺展示出文章article串列之后，需要對相應資料進行靜態化頁面生成處理，這里我們運用到了freemarker框架，并對其進行封裝，
public static String createFreeMarker(String templatepath,String pathName,Object data,String suffix){
FileWriter out = null;
try {
Configuration config = new Configuration(Configuration.VERSION_2_3_28);
File file = new File(templatepath);
config.setDirectoryForTemplateLoading(file);
config.setDefaultEncoding("utf-8");
Template template = config.getTemplate(pathName);
String url = System.currentTimeMillis()+suffix;
out = new FileWriter(new File(file, url));
template.process(data, out);
return url;
} catch (Exception e) {
e.printStackTrace();
} finally {
if (out!=null) {
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return null;
}
在靜態化頁面中瀏覽次數的實作我們是通過獲取當前頁面的url，然后后端通過url找到與之對應的資料，拿到clickCount之后對其進行+1操作，然后通過set方法修改article和修改資料庫，并傳送到前端頁面展示出效果，
@Override
public Article findByUrl(String url) {
Article article= articleMapper.findByUrl(url);
Integer clickCount = article.getClickCount()+1;
article.setClickCount(clickCount);
articleMapper.update(article);
return article;
}
<script type="text/javascript">
$(function(){
var path = window.location.href;
var url = path.substring(path.lastIndexOf("/")+1);
$.ajax({
type:"post",
url:"/home/video/updateClickCount",
data:{"url":url},
dataType:"json",
success:function(msg){
console.debug(msg);
$("#clickCount").html(msg.clickCount);
$("#path").html('<video width="100%" heith="100%" src="'+msg.path+'" controls="controls"></video>');
}
});
})
</script>
在這個專案中我們還涉及到了關于輪播圖的curd和展示、在登錄和注銷操作通過session和cookie并對回應進行攔截，
在專案也出現了很多問題：
由于自己不造成的sql陳述句拼寫錯誤，會導致操作資料是直接拋出例外；
相關小問題有很多，印象最深的問題是：java.lang.NoSuchMethodException：‘Arrearage’ on class 'class com.yunrun.swys.archives.domain.feedback’這個問題是我最近遇到的，
說的是在這個物體類里面有一個屬性出問題了；
解決方法：我是使用的是在物體類中添加構造無參函式，
專案心得就是代碼不僅要敲，還要有感情的去敲······
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/34601.html
標籤：其他
上一篇：【Redis】主從復制