About the first project cms experience
cms is a content management system, the first project cms development is mainly for the curd operation of multiple modules of the corporate website, which includes the crud operation of the article article module slide carousel diagram module in the background, and display it on the foreground page .
The requirement of the entire project is that the content or information in the official website is enabled or not enabled from the background, and a background content management system is required.
The architecture of the entire project belongs to the bs architecture, with front-end page display and back-end page management; in the project we use the technology selection as the main development tool for eclipse, the database uses mysql, the back-end framework ssm, the front-end framework jQuery, bootstrap , Gridmanager, etc.
This project is divided into article module and slide carousel diagram module, optional comment module, question display module and video display module.
In the article module, the foreground page uses the gridmanager framework to send data to the background, and accepts the data sent back by the background, and displays it in the table. Returning to the front desk requires totals and data data. I need to encapsulate an entity class pageBean as an object to return the data to the front end in the background.
When displaying the background page, we design an articleQurey entity class to inherit baseQuery based on the fields that need advanced query according to the judgment of the article, where basequery is an encapsulation of the current page localpage and page length pagesize;
After the front-end data is sent to the back-end, the back-end needs to use the controller layer to reverse one by one, and then create the relevant service layer interface, and create the interface implementation class; then create the interface in the mapper layer, and finally write in the mapper.xml file sql statement, dynamic query statement is needed in advanced query.
<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>
For the addition, deletion and modification in the article module: when you click the add or delete modification button in the background page, the click event will be triggered to pop up the modal box, and then perform related operations
<!-- 添加或者修改的模态框 -->
<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");
});
Click the OK button to send a request to the backend, and the web page will be responded to. . .
$("#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)
}
}
});
})
In the entire background of the curd operation, we need to pay attention to the fact that when the modal box pops up, the hidden field or the form data in the modal box may not be cleared, which will cause the data to be displayed incorrectly during modification or the addition is the previous serial number. Row data modification commands.
After completing the curd of the background management system page, we need to display the background data to the front home page; we need the home front page to send the request to the background and return a list collection, and then traverse the stitching through the front desk to finally display the front desk.
In this project, we are divided into three types according to different types of articles: technology, industry and 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>
Note that the business judgment in the background is that we need to know that the enable attributes of the articles displayed in the foreground are all enabled, so the conditional selection in the sql statement
@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>
After the article list is displayed at the front desk, the corresponding data needs to be statically generated. Here we use the freemarker framework and encapsulate it.
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;
}
In the realization of the number of views in the static page, we obtain the url of the current page, and then the backend finds the corresponding data through the url, and performs the +1 operation on the clickCount after getting the clickCount, and then modifies the article and the database through the set method , And send it to the front page to show the effect.
@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>
In this project, we also involved the curd and display of the carousel, and intercept the response through session and cookie during login and logout operations.
There are also many problems in the project:
due to the misspelling of the SQL statement that I did not cause, it will cause the operation data to throw an exception directly;
there are many related small problems, the most impressive problem is: java.lang.NoSuchMethodException:'Arrearage' on The problem of class'class com.yunrun.swys.archives.domain.feedback' is a problem I encountered recently. It
says that there is a problem with an attribute in this entity class; the
solution: I am using the entity class Add construct parameterless function.
The project experience is that not only the code must be typed, but also emotionally typed.······