小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

网站文章标签功能开发详解

发表于 9个月前   1992次查看    0评论  26 赞

QQ截图20180727223643.png
 QQ截图20180727223656.png

文章标签类似于文章的小分类,一般文章的分类对文章的细分是不够的,所以需要标签Tag来对文章进行更多的细化,这时标签Tag的作用就体现出来了,他对文章是多对一的关系,所以今天详细讲解下文章的标签功能开发

开发需求:需要在写文章时添加标签,不超过五个,来对文章进行小的分类,然后将标签增加到标签表里,文章表里,并且可以通过点击标签进行这一个标签下所有文章的展示(暂且没做,like操作即可很简单)。


开发过程

一、创建标签表

1
2
3
4
5
6
CREATE TABLE `tags` (
  `tagid` int(11) NOT NULL AUTO_INCREMENT,
  `tagname` varchar(32) DEFAULT NULL,
  `artcount` int(11) DEFAULT NULL,
  PRIMARY KEY (`tagid`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

我的表里有id、标签名称和该标签下面共有多少文章。


二、文章表加一列标签列,格式text即可,传入数据库的是如:JAVA,html,原创,我们用逗号隔开,便于以后操作


三、前端标签创建的样式

QQ截图20180727221714.png

这里没有固定的样式,你们可以自己创作,我是参照诚意博客里标签做的,仅供参考,原文地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 输入框的列表start -->
<!-- 这里遍历了数据库内的所有标签 -->
<datalist id="myDataList">
<c:forEach items="${Alltags }" var="tag">
   <option value="${tag.tagname }"></option>
   </c:forEach>
</datalist>
 
          <label style="margin-left:5%;">文章标签:</label>
          <input value="" name="tags"  autocomplete="off" role="combobox" 
          aria-expanded="false" list="myDataList" 
          aria-activedescendant="AutoComplet-366-45815-0" id="articletags"
           aria-haspopup="true" aria-owns="Popover-366-3250-content" class="Input" 
           placeholder="添加标签,多个用逗号分割"><span style="margin-left:10px;font-size:12px;color:red">*</span>
  <!-- 输入框的列表end -->


四、文章发表后的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//获取数据库内的所有标签
    List<Tags> DBTagsList=articleService.getAllTags();
    //将list变为数组
    int tagcount=DBTagsList.size();
    String[] DBTags=new String[tagcount];
    for(int p=0;p<DBTagsList.size();p++){
        DBTags[p]=DBTagsList.get(p).getTagname();
    }          
    //获取所发表文章标签
    article=houtaiService.getShenArt(article);
    String[] arttags=article.getTags().split(",");
    //与数据库标签表对比,如果有就不添加并且文章总数加1,没有就添加一行新数据set文章总数为1
    for(int i=0;i<arttags.length;i++){
    for(int j=0;j<DBTags.length;j++){
        if(DBTags[j].equals(arttags[i])){
    //如果数据库里有这个标签就该标签文章总数加一
    tags.setArtcount(DBTagsList.get(j).getArtcount()+1);
    tags.setTagid(DBTagsList.get(j).getTagid());
    //进行加一操作
    articleService.tagsAddOne(tags);
        break;
    }
    //如果数据库循环完没有数据就增加一条数据
        if(j==DBTags.length-1){
    //没有就添加一行新数据set文章总数为1
        tags.setTagname(arttags[i]);
        tags.setArtcount(1);
        //进行数据库操作
        articleService.AddTag(tags);
    }
    }  
    }

这里主要是完成对标签与数据库的对比,有则文章总数加一,无则添加一个新的标签,其中获取标签,增加标签的sql就不写了,挺简单的

五、文章加载时该文章的所有标签

1
2
3
4
//获取标签列数据
String[] Tags=article.getTags().split(",");
            //将数组转换成ArrayList
            List<String> TagsList=Arrays.asList(Tags);

然后将list转发到页面即可


这样差不多就完成了网站文章标签功能开发了,我简单的说了下思路,其他你网站具体功能开发还需自己完成,当然有些bug就是用户的逗号问题,我这里是英文逗号,好在我网站有审核功能,发现不妥重新编辑即可,你们可以在前端下些功夫,推荐看看csdn的博客发表标签添加方式,希望可以帮到你们,谢谢

26人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论0