CMS内容管理系统
技术选型
开发工具：eclipse
数据库：Mysql
后端框架：SSM
前端框架：jQuery、Bootstrap、GridManager表格插件
项目架构
BS架构的项目
前台：1.公司官网信息维护
2.轮播图显示
3.文章显示
4.技术视频显示
等…
后台：1.后台管理系统
2.轮播图管理
3.文章管理
4.用户登录登出
实现思路和环境搭建
思路：后台实现内容的管理，包括图片文章视频的增删改查，然后在前台显示
环境搭建：后端框架使用ssm框架，导入需要的jar包，配置xml文件，搭建三层架构
轮播图实现演示
后端代码：
controller
@Controller
@RequestMapping("/system/slide")
public class SlideController {
@Autowired
private ISlideService service;
/**
*
* @Description:(跳转轮播图管理页面)
* @param:@param map
* @param:@return
* @return:String
* @author:Rock
* @date:2020年9月6日
* @version:V1.0
*/
@RequestMapping("/slide")
public String toSlide() {
return "slide/slide";
}
/**
*
* @Description:(查询展示)
* @param:@param query
* @param:@return
* @return:PageBean<Article>
* @author:Rock
* @date:2020年9月6日
* @version:V1.0
*/
@RequestMapping("/selectAll")
@ResponseBody
public PageBean<Slide> selectAll(SlideQuery query) {
return service.selectAll(query);
}
/**
*
* @Description:(文件上传)
* @param:@param article
* @param:@param req
* @param:@return
* @return:AjaxResult
* @author:Rock
* @date:2020年9月6日
* @version:V1.0
*/
@RequestMapping("/save")
@ResponseBody
public AjaxResult save(Slide slide,HttpServletRequest req,MultipartFile img) {
try {
service.save(slide,req,img);
return new AjaxResult();
} catch (Exception e) {
return new AjaxResult(false, "上传失败");
}
}
/**
*
* @Description:(删除)
* @param:@param slide
* @param:@param req
* @param:@param img
* @param:@return
* @return:AjaxResult
* @author:Rock
* @date:2020年9月8日
* @version:V1.0
*/
@RequestMapping("/del")
@ResponseBody
public AjaxResult del(Long id ,HttpServletRequest req) {
try {
service.del(id,req);
return new AjaxResult();
} catch (Exception e) {
return new AjaxResult(false, "删除失败");
}
}
}
service
@Service
public class SlideServicdImpl implements ISlideService {
@Autowired
private SlideMapper mapper;
@Override
public PageBean<Slide> selectAll(SlideQuery query) {
// 总条数
Integer totalCount = mapper.selectCount(query);
if(totalCount==0){
return new PageBean<>();//如果一条数据都没有就返回默认值
}
List<Slide> list = mapper.selectAll(query);
return new PageBean<>(totalCount, list);
}
@Override
public void save(Slide slide, HttpServletRequest req,MultipartFile img) throws Exception {
if (img !=null) {
//获取真实路径
String realPath = req.getServletContext().getRealPath("/static/upload");
File file = new File(realPath);
if (!file.exists()) {
file.mkdirs();
}
//获取上传文件名
String filename = img.getOriginalFilename();
//获取后缀
String suffix = filename.substring(filename.lastIndexOf("."));
String name = System.currentTimeMillis() + suffix;
//获取输出流
FileOutputStream output = new FileOutputStream(new File(realPath, name));
//获取输入流
InputStream input = img.getInputStream();
//核心代码
IOUtils.copy(input, output);
//关流
output.close();
input.close();
slide.setName(name);
slide.setPath("/static/upload/"+name);
}
if (slide.getId() == null) {
if (img != null) {
mapper.add(slide);
}
}else{
if (img !=null) {//图片不为空，意味着要修改图片
// Long id = slide.getId();//拿到id
// Slide s1 =mapper.selectById(id);
String realPath = req.getServletContext().getRealPath("/static/upload");
String name = slide.getName();
File file = new File(realPath,name);
if (file.exists()) {
file.delete();
}
mapper.update(slide);
}else{//不修改图片，不上传图片，最上面的代码就不执行，name 和path 就是空的，也不必修改，所以mapper.xml需要判断非空
mapper.update(slide);
}
}
}
@Override
public void del(Long id, HttpServletRequest req) {
//获取真实路径
String realPath = req.getServletContext().getRealPath("/static/upload");
Slide slide =mapper.selectById(id);
mapper.del(id);//删除对象
//删除路径下图片
String name = slide.getName();
File file = new File(realPath, name);
if (file.exists()) {
file.delete();
}
}
@Override
public List<Slide> selectSlide() {
return mapper.selectSlide();
}
}
mapper
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.itsource.mapper.SlideMapper">
<!-- List<Slide> selectSlide(); -->
<select id="selectSlide" resultType="cn.itsource.domain.Slide">
select * from t_slide where enable = 1
</select>
<!-- void del(Long id); -->
<delete id="del">
delete from t_slide where id = #{id}
</delete>
<!-- Slide selectById(Long id); -->
<select id="selectById" resultType="cn.itsource.domain.Slide">
select * from t_slide where id=#{id}
</select>
<!-- void update(Slide slide); -->
<update id="update" parameterType="Slide">
update t_slide
<set>
<if test="name != null">
name = #{name},
</if>
<if test="path != null">
path = #{path},
</if>
createDate=#{createDate},enable = #{enable}
</set>
where id= #{id}
</update>
<!-- void add(Slide slide); -->
<insert id="add" >
insert into t_slide (name,path,enable,createDate)
values(#{name},#{path},#{enable},#{createDate})
</insert>
<!-- List<Slide> selectAll(SlideQuery query); -->
<select id="selectAll" resultType="cn.itsource.domain.Slide">
select * from t_slide
<include refid="query"></include>
limit #{begin},#{pageSize}
</select>
<!-- Integer selectCount(SlideQuery query); -->
<select id="selectCount" resultType="int">
select count(id) from t_slide
<include refid="query"></include>
</select>
<sql id="query">
<where>
<if test="enable != null">
and enable = #{enable}
</if>
<if test="name != null and '' != name.trim()">
and name like concat('%',trim(#{name}),'%')
</if>
</where>
</sql>
</mapper>
前端展示
<script>
$(function() {
$.ajax({
type: "post",
url: "/home/slide/select",
dataType: "json",
success: function(msg){
$.each(msg,function(index,obj){
var slide= '<a target="_blank" href="" class="swiper-slide swiper-lazy"'
+' data-background="'+obj.path+'">'
+'<div class="swiper-lazy-preloader"></div></a>'
$("#showSlide").append(slide);
})
var bannerSwiper = new Swiper ('#banner.swiper-container', {
autoplay: { disableOnInteraction: false },
loop: true,
pagination: {
el: '.swiper-pagination',
bulletElement: 'div',
clickable: true
},
lazy: true
});
$("#banner .swiper-slide")
.mouseenter(function() {
bannerSwiper.autoplay.stop();
})
.mouseleave(function() {
bannerSwiper.autoplay.start();
});
}
});
});
</script>
js代码：
document.querySelector('#table-demo-ajaxPageCode').GM({
gridManagerName: 'demo-ajaxPageCode',
ajaxData: '/system/slide/selectAll',
ajaxType: 'POST',
supportAjaxPage: true,
sizeData: [5,10,15,20],
pageSize: 5,
currentPageKey: "currentPage",
pageSizeKey: "pageSize",
height: "100%",
columnData: [
{
key: 'name',
align: 'center',
text: '图片名称'
},{
key: 'path',
align: 'center',
text: '文件路径',
template: function(cell, row, index, key){
return '<img width="60px" src="'+cell+'" alt="没有图片"/>';
}
},{
key: 'createDate',
align: 'center',
text: '创建日期'
},{
key: 'enable',
align: 'center',
text: '是否启用',
template: function(cell, row, index, key){
return cell?"启用":"禁用";
}
},{
key: 'id',
align: 'center',
text: '操作 <a id="addButton" style=color:green; href="javascript:;" >新增</a>',
template: function(cell, row, index, key){
// 对象转成json格式的string串
var rows = JSON.stringify(row);
return '<a data-id='+cell+' style="color:red" href="javascript:;">删除</a> '
+ "<a data-obj='"+rows+"' style='color:blue' href='javascript:;'>修改</a>";
}
}
]
});
//入口函数
$(function(){
//高级查询
$("#queryButton").click(function(){
//获取数据
var datas = $("#queryForm").serializeObject();
// 发送请求
GridManager.setQuery("demo-ajaxPageCode", datas);
})
//新增，事件委托
$("body").on("click","#addButton",function(){
//清空数据
$("#saveForm")[0].reset();
//清空隐藏域
$("#hid").val("");
$("#enable").prop("checked",true)
//弹出模态框
$("#saveModal").modal("show");
})
//修改，事件委托
$("body").on("click","a[data-obj]",function(){
//清空数据
$("#saveForm")[0].reset();
//清空隐藏域
$("#hid").val("");
//获取数据
var objs = $(this).data("obj");
console.debug(objs);
//将数据传入作用域
$("#saveForm").setForm(objs);
//弹出模态框
$("#saveModal").modal("show");
})
//保存按钮绑定事件 发送请求
$("#saveButton").click(function(){
$("#saveForm").ajaxSubmit({
success:function(msg){
if(msg.result){
//关闭添加和修改模态框
$("#saveModal").modal("hide");
//刷新表格
GridManager.refreshGrid('demo-ajaxPageCode');
}else{
alert(msg.error);
}
}
});
})
//删除---->事件委托
$("body").on("click","a[data-id]",function(){
//获取id
var id = $(this).data("id");
//弹出模态框
$("#delModal").modal("show");
//解绑删除按钮，避免多次点击后绑定多次事件
$("#delModelButton").off("click");
//确定删除按钮绑定--发送请求
$("#delModelButton").click(function(){
$.ajax({
type: "post",
url: "/system/slide/del",
data: {"id":id},
dataType: "json",
success: function(msg){
if (msg.result) {
//关闭模态框
$("#delModal").modal("hide");
//刷新页面
GridManager.refreshGrid("demo-ajaxPageCode");
} else {
alert(msg.error);
}
}
})
})
})
})
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
