个人博客 |
您所在的位置：网站首页 › 前端基本标签怎么设置 › 个人博客 |
个人博客
|
标签模块简介
声明：该项目是GitHub上的开源项目，本人已购买作者相关课程，仅供个人学习使用。 课程链接：https://www.lanqiao.cn/courses/1367 标签是一种更为灵活、更有趣的分类方式，在书写博客时可以为每篇文章添加一个或多个标签，在博客系统中，文章的标签设计被广泛应用，我们可以看到大部分的博客网站中都会有标签设计，因此，在设计 personal-blog 这个项目时，也将标签运用了进来。 标签作用标签最明显的作用有如下两点： 一是传统意义上分类的作用，类似分类名称二是对文章内容进行一定程度的描述，类似于关键词 标签和分类的区别虽然与分类设计类似，但是标签和分类还有一些细区别： 同一篇文章标签可以用多个，但通常只能属于一个分类标签一般是在写作完成后，根据文章内容自行添加的内容标签可以把文章中重点词语提炼出来，有关键词的意义，但是分类没有标签通常更为主观，其内容相较于分类来说更加具体一些与分类的功能和设计思想类似，但是又有一定的不同，标签可以算是分类的细化版本，同时，一篇博客的分类最好只有一个，但是在设计的时候，一篇博客的标签是可以有多个的，标签设计的介绍就到这里，接下来是功能开发的讲解。 接口介绍标签模块的大部分实现逻辑是在维护文章表时处理的，后台管理系统中标签模块的功能比较简单，标签模块在后台管理系统中有 3 个接口，分别是： 列表分页接口添加标签接口删除标签接口 功能实现 数据库设计标签和文章表是多对多的关系 创建一个标签表，一个标签和文章的关系表 CREATE TABLE `blog_tag` ( `tag_id` INT(11) NOT NULL AUTO_INCREMENT COMMENT '标签表主键id', `tag_name` VARCHAR(100) NOT NULL COMMENT '标签名称', `is_deleted` TINYINT(4) NOT NULL DEFAULT '0' COMMENT '是否删除 0=否 1=是', `create_time` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`tag_id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8; CREATE TABLE `blog_tag_relation` ( `relation_id` BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '关系表id', `blog_id` BIGINT(20) NOT NULL COMMENT '博客id', `tag_id` INT(11) NOT NULL COMMENT '标签id', `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '添加时间', PRIMARY KEY (`relation_id`) ) ENGINE=INNODB DEFAULT CHARSET=utf8;对应的实体类 //标签类 @Data public class BlogTag { private int tagId; private String tagName; private byte isDeleted; @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" ,timezone = "GMT+8") private Date createTime; } //标签文章关联类 @Data public class BlogTagRelation { private int relationId; private int blogId; private int tagId; @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") private Date createTime; } 列表分页接口 jqgrid点击侧边栏的标签按钮，通过controller跳转到tag.html页面 //标签控制 @Controller @RequestMapping("/admin") public class TagController { //点击侧边栏跳转到标签页，同时该项path处于激活状态 @RequestMapping("/tags") public String tags(HttpServletRequest request){ request.setAttribute("path","tags"); return "admin/tag"; } }tag.html 标签管理 ;;; ;新增 ;删除通过在request中设置path的值，使该选项激活 只在一个请求内生效
dao层
PageUtil 该工具类的作用 根据前端获取的参数创建一个map集合该集合包括开始索引,起始页，每页显示数据数 //根据前端获取的参数创建一个map集合 //该集合包括开始索引,起始页，每页显示数据数 @Data public class PageUtil extends LinkedHashMap { //当前页码 private int currentPage; //每页条数 private int pageSize; //根据前端传递的参数构造一个LinkedHashMap存放开始索引， public PageUtil(Map params) { this.putAll(params); //分页参数page在前端默认就是page this.currentPage = Integer.parseInt(params.get("page").toString()); //limit在前端默认的是rows，通过prmNames进行映射，键值为limit this.pageSize = Integer.parseInt(params.get("limit").toString()); this.put("start", (currentPage - 1) * pageSize); this.put("page", currentPage); this.put("pageSize", pageSize); } }TagMapper 添加mapper注解或者在启动类上面扫描dao包 @Mapper @Repository //标签接口 public interface TagMapper { //查询所有标签 List findTagsList(PageUtil pageUtil); //查询总数 int getTotalTags(); }TagMapper.xml select * from blog_tag where is_deleted=0 order by create_time desc limit #{start},#{pageSize} select count(*) from blog_tag where is_deleted=0 service层PageResult 该工具类的作用 根据总数据，总数，每页展示的条数，当前页创建一个pageResult，以json数据格式返回给前端注意: 该类的属性名不能改变，和前端需要接收的json数据的键名一致如果想要改变，可以使用jsonReader进行映射 //分页工具类 @Data public class PageResult implements Serializable { //属性名不能修改，和js文件中的属性相同 //如果不同，可以使用jsonReader进行映射 //总记录数 private int records; //每页记录数 private int pageSize; //总页数 private int total; //当前页数 private int page; //列表数据 private List rows; public PageResult(List list, int total, int pageSize, int currentPage) { //数据 this.rows = list; //总数据数 this.records = total; //每页展示几条数据 this.pageSize = pageSize; //当前页 this.page = currentPage; //总页数ceil:向上取整，小数部分直接舍去如：16/5 就是共4页 this.total = (int) Math.ceil((double)records/pageSize); } }TagService @Service public interface TagService { //查询所有标签 List findTagsList(PageUtil pageUtil); //查询总数 int getTotalTags(); //根据总数，当前页，每页展示的条数创建一个结果页 PageResult getBlogTagPage(PageUtil pageUtil); }TagServiceImpl @Service public class TagServiceImpl implements TagService { //绑定mapper接口 @Autowired private TagMapper tagMapper; @Override public List findTagsList(PageUtil pageUtil) { return tagMapper.findTagsList(pageUtil); } @Override public int getTotalTags() { return tagMapper.getTotalTags(); } @Override public PageResult getBlogTagPage(PageUtil pageUtil) { //查询所有的数据 List blogTags = this.findTagsList(pageUtil); //查询总条数 int totalTags = this.getTotalTags(); //根据总数据，总数，每页展示的条数，当前页创建一个pageResult PageResult pageResult = new PageResult(blogTags, totalTags, pageUtil.getPageSize(), pageUtil.getCurrentPage()); return pageResult; } } controller层 //分页查询所有数据，并将结果数据以json格式传给前端 //不加@RequestParam会导致空指针异常 @PostMapping("/tags/list") @ResponseBody public PageResult getBlogTagPage(@RequestParam Map params){ //{_search=false, nd=1615201443843, limit=5, page=1, sidx=, sord=asc} System.out.println(params); PageUtil pageUtil = new PageUtil(params); return tagService.getBlogTagPage(pageUtil); } 前端jstag.html 标签管理 ;;; ;新增 ;删除页面布局 tag.js $(function () { //标签列表展示 $("#jqGrid").jqGrid({ //从服务器接收json数据的请求 url: '/admin/tags/list', //接收到的数据格式 datatype: "json", mtype:"POST", /* colModel:表格的列属性 label:如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name值 */ colNames:["id","标签名称","添加时间"], colModel: [ {name: 'tagId', index:'tagId', key: true, hidden: true}, {name: 'tagName',index: 'tagName'}, {name: 'createTime',index: 'createTime'} ], rowNum: 5, styleUI: 'Bootstrap', autowidth: true, multiselect: true, height:443, pager: "#jqGridPager", //传递给后端的数据，page默认1，limit是rowNum设置的值,默认10 prmNames: { page: "page", rows: "limit" }, gridComplete: function () { //隐藏grid底部滚动条 $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"}); } }); });显示效果 在输入框输入标签名，然后点新增，就添加成功了 通过get方式传递参数 /** * jqGrid重新加载 */ function reload() { var page = $("#jqGrid").jqGrid('getGridParam', 'page'); $("#jqGrid").jqGrid('setGridParam', { page: page }).trigger("reloadGrid"); } function tagAdd() { var tagName = $("#tagName").val(); var url = '/admin/tags/save?tagName='+tagName; //如果标签名为空，提示输入标签名 if (tagName==''){ alert("请输入标签名"); return; } else { $.ajax({ type: 'POST',//方法类型 url: url, dataType:'json',//后端返回的是json数据格式 success: function (result) { if (JSON.parse(result)>0) { alert("添加成功") reload(); } else { alert("添加失败") } }, error: function () { alert("添加失败") } }); } } dao层 //添加标签 int addTag(String tagName); insert into rm_blog.blog_tag (tag_name) values (#{tagName}); service层 //添加标签 int addTag(String tagName); @Override public int addTag(String tagName) { return tagMapper.addTag(tagName); } controller层 @PostMapping("/tags/save") @ResponseBody public int save(@RequestParam("tagName") String tagName) { return tagService.addTag(tagName); } 列表删除接口根据id将对应id的标签isdelete修改为1 软删除这样就查询不出来了，但是数据库中并不会真正删除 dao层 //删除标签 int deleteTag(int id); update rm_blog.blog_tag set is_deleted = 1 where tag_id=#{id}; service层 //删除标签 int deleteTag(int id); @Override public int deleteTag(int id) { return tagMapper.deleteTag(id); } controller层 //删除标签 @PostMapping("/tags/delete") @ResponseBody public int delete(@RequestBody Integer[] ids) { int i=0; for (Integer id : ids) { i=tagService.deleteTag(id); } return i; } js文件 function deleteTag() { //获取选择行的id，可以多选 var ids = getSelectedRows(); $.ajax({ type: "POST", url: "/admin/tags/delete", contentType: "application/json", data: JSON.stringify(ids), success: function (r) { if (r > 0) { alert("删除成功"); //重加载页面 $("#jqGrid").trigger("reloadGrid"); } else { alert("删除失败") } } }); } |
【本文地址】