创建一个属于自己的博客
1.遇到的坑
1.样式导入不进来
- 创建springboot项目时，勾选了thymeleaf模板，以为这样就可以不在手动导入依赖了。结果在定制首页时，样式怎样也加载不进来。试了好多种办法，最后发现是thymeleaf依赖的问题。导入之后，样式就出来了。
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
这个是因为 templates 里的文件夹和static 里面的文件夹重名了。 将static 里面的文件夹重命名就ok了。
之前两个文件夹都为admin，就出现 script 加载失败的问题。修改名称后成功解决。
-
样式表单 http://localhost:8080/css/me.css 未载入，因为它的 MIME 类型 “text/html” 不是 “text/css”。
出现这个错误是因为static里面的静态资源没加载进来，看一下拦截器是否拦截。
2. type=Bad Request, status=400
- 原因：一般是页面的数据与数据库的Date数据类型不同导致的。
解决方法： 需要对页面中的数据进行格式化。
- 主键值为空时，也会报这个错，只需给主键赋一个值即可。
3.登录页面进不去
问题： 纯文本文件的字符编码未声明。如果该文件包含 US-ASCII 范围之外的字符，该文件将在某些浏览器配置中呈现为乱码。该文件的字符编码需要在传输协议层声明，或者在文件中加入一个 BOM（字节顺序标记）。
4.运行时报错
- org.thymeleaf.exceptions.TemplateOutputException: An error happened during template rendering
5.数据库字段问题
### Error updating database. Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'describe,labels,commentsNum,date,hits,content,type,tid) values
(null,'12' at line 1
### The error may exist in file [D:\SSM\myblog\target\classes\mapper\ArticleMapper.xml]
### The error may involve com.dz.dao.ArticleMapper.addArticle-Inline
### The error occurred while setting parameters
### SQL: insert into blog.article (id,title,titlePic,status,describe,labels,commentsNum,date,hits,content,type,tid) values (?,?,?,?,?,?,?,?,?,?,?,?)
- 现在也不知道是什么原因，不过将字段describe变成info后就不报错了。
6.请求头过长
java.lang.IllegalArgumentException: Request header is too large
-
将请求改成Post
-
server: max-http-header-size=10000000:
2.解决的问题
1.在script标签中取值
之前一直在用 th:value 取值，一直取不出来。 在外边取值（即用[[${}]]）又会出现转义的问题。
后来使用 th:utext={} 完美解决。
2.在实现更新操作时，数据没有改变
原因是没有添加主键id的name。 加上之后就可以显示修改的数据了。
<input type="hidden" name="id" th:value="${type.getId()}">
3.留言
-
现阶段没有子留言，即不能对留言进行留言。这个作为以后的改进吧。
-
将评论放在一个表单里边，输入的信息如果符合要求，则提交到后台。
<!-- 新增留言-->
<form th:action="@{/addComment}">
<div id="message-form" class="ui form">
<input type="hidden" name="id">
<!-- 外键-->
<input type="hidden" name="cid" th:value="${article.getId()}">
<input type="hidden" name="date">
<!-- 留言区-->
<div class="field">
<textarea name="content" id="content" placeholder="请输入留言信息..."></textarea>
</div>
<div class="ui grid">
<!--输入姓名-->
<div class="five wide column">
<div class="field m-mobile-wide m-margin-bottom-small">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="nickname" id="nickname" placeholder="name">
</div>
</div>
</div>
<!-- 输入邮箱-->
<div class="five wide column">
<div class="field m-mobile-wide m-margin-bottom-small">
<div class="ui left icon input">
<i class="mail icon"></i>
<input type="text" name="email" id="email" placeholder="Email">
</div>
</div>
</div>
<div class="right aligned six wide column">
<div class="field m-mobile-wide m-margin-bottom-small">
<button id="messagepost-btn" type="submit" class="ui teal button m-mobile-wide" onclick="return check()"><i class="edit icon"></i>发布</button>
</div>
</div>
</div>
</div>
</form>
- 表单在提交时，onclick的优先级比action高，所以可以在js代码里判断输入的信息是否符合要求。
function check() {
var name = $("#nickname").val();
var content=$("#content").val();
var email=$("#email").val();
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (name == null || name == "") {
$("#nickname").css("border-color", "red");
return false;
}
else {
$("#nickname").css("border-color", "blue");
}
if (content == null || content == "") {
$("#content").css("border-color", "red");
return false;
}
else {
$("#content").css("border-color", "blue");
}
if (email == null || email == "" || email.search(reg) == -1) {
$("#email").css("border-color", "red");
return false;
}
else {
$("#email").css("border-color", "blue");
}
return true;
}
Controller层
- 设置评论的日期，并跳转到评论的文章页面。这里没有后台审核，提交后可以直接显示。这里后边也需要改进。
@RequestMapping("/addComment")
public String addComment(Comment comment){
if (comment.getDate()==null){
comment.setDate(new Date());
}
commentService.addComment(comment);
Integer cid = comment.getCid();
return "redirect:/toarticle"+cid;
}
4.分类
思路： 文章和类型属于多对一的关系。因此需要在文章的表中设置外键 tid。在添加文章时，选择对应的类型时，可以给tid赋值。
在分类页面时，就可以根据tid的值将同一类型的文章全部找出来。
去文章分类页面
- 这里的id默认为1，所以会将tid=1的文章展示出来。
//去分类页面
@RequestMapping("/toTypes{id}")
public String toTypes(@PathVariable("id")Integer id, Model model){
List<Type> types = typeService.allTypes();
model.addAttribute("types",types);
List<Article> articles = articleService.allArticles();
List<Article> articleList = new ArrayList<>();
for (Article article : articles) {
if (article.getTid()==id){
articleList.add(article);
}
}
model.addAttribute("articles",articleList);
return "blog/types";
}
文章分类界面
- 为了方便理解，这里只展示一部分代码。
- 将type通过循环展示出来，点击时跳转到上边的Controller层中，并将tid=id的文章展示出来。
<div class="ui segment m-padded-tb-large m-opacity">
<div class="ui container" align="center">
<div class="ui labeled button m-margin-tb-tiny" th:each="type:${types}">
<a th:href="@{toTypes}+${type.getId()}" class="ui basic button" th:text="${type.getName()}"></a>
<div class="ui basic left pointing label" th:text="${type.getNumber()}"></div>
</div>
</div>
</div>
5.查询
查询操作一开始我认为挺难的，没想到是最简单的一个。
查询的显示框
<form action="" method="post" class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" autocomplete="off" maxlength="15">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">搜索</button>
</span>
</form>
Controller层
@RequestMapping("/toSearch")
public String toSearch(String query, Model model){
List<Article> articleList = articleService.queryArticlesByInfo(query);
int size = articleList.size();
model.addAttribute("size",size);
model.addAttribute("articles",articleList);
return "blog/search";
}
核心 对应的mapper.xml
- 因为写的是博客网站，所以主要是根据文章的标题和所属的类型进行查询。
- like是模糊查询，%是任意数量的占位符。%info%这个写法是突发奇想，没想到竟然成功了。开心。
<select id="queryArticlesByInfo" resultType="Article">
select * from blog.article where title like concat('%',#{query},'%') or type like #{%info%}
</select>
6.浏览数量
当点击进入文章的链接时，点击数量加一。主要是对文章点击数量进行更新。
对应的mapper.xml
- 两个参数，文章id和点击量。
<update id="updataHitNum">
update blog.article set hits=#{hits} where id=#{id}
</update>
Controller层
Article article = articleService.getArticleByid(id);
Integer hits = article.getHits();
articleService.updataHitNum(id,hits+1);
model.addAttribute("article",article);
7.向提取的公共部分进行传参
- 有时候我们需要向提取的公共部分传递参数。
<div th:fragment="footbar(articlesNum,commentsNum,hits)">
<div class="m-text-thin" style="text-align: left;margin-left: 75px;">
文章总数： [[${articlesNum}]]篇
</div>
<div class="m-text-thin" style="text-align: left;margin-left: 75px">
访问总数：[[${hits}]]</h2> 次
</div>
<div class="m-text-thin" style="text-align: left;margin-left: 75px">
评论总数： [[${commentsNum}]]条
</div>
</div>
<div th:replace="~{common/blogcommon::footbar(articlesNum=${articlesNum},commentsNum=${commentsNum},hits=${hits})}"></div>
- 调用的时候也可以不按顺序，不过必须要对应起来。例如：articlesNum=${articlesNum}
- 提取公共部分本意是为了实现代码的复用，但是向各个页面传递参数的时候，Controller层的代码重复了很多遍。现在还不知道如何解决。
3.注意事项
- 新增一个页面时，一定要有查询所有数据（展示数据页面），通过id（name）查询数据（修改数据时，需要携带原有的数据）操作。
- 设置外键时，在多的一方设置外键。例如评论和文章是多对一的关系，在评论的表中设置外键。
- 创建一个表时，可以把id设为自动递增，这样添加对象时，就不需要管id了。直接将它设为一个隐藏属性即可。
- Service层可以写逻辑代码。
- 上传的png类型的图片显示不出来，jpg类型的可以显示。
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
