博客系统项目中出现的一些问题

Posted 2022-12-30 吞吞吐吐大魔王

文章目录

• 1. 项目流程
• 2. 数据库设计出现的问题
• 3. 模板引擎出现的问题
• • 3.1 模板引擎初始化问题
  • 3.2 博客正文编辑的输入框设置
  • 3.3 页面的记录太多，超过指定区域
  • 3.4 显示的博客需要进行 markdown 渲染
• 4. 前后端分离出现的问题
• • 4.1 前后端分离的写法需要约定好交互的接口
  • 4.2 JavaScript 中的相关方法

1. 项目流程

1. 项目基本环境搭建

2. 数据库的设计以及代码的编写（Model）

   • 先创建 DBUtil 类封装建立连接和资源回收的过程
   • 再创建数据表的实体类
   • 最后创建 Dao 类，在里面封装针对实体类的一些增删改查

3. 实现处理前端请求的部分（Controller）

4. 实现前端展示的细节部分（View）

2. 数据库设计出现的问题

1. 通过设置主键（primary key），让指定字段唯一且不为空
2. 通过设置自增主键（primary key auto_increment），让指定字段自动自增
3. 对于外键的设置需要考虑，如果设置，那么表与表之间的耦合性就会加强，子表的数据就会存在父表中，父表的数据就无法修改和删除
4. 对于外键的设置，可以通过再增加一个字段，用于表示父表的数据是否删除

3. 模板引擎出现的问题

3.1 模板引擎初始化问题

问题：

模板引擎的初始化如果在每个 Servlet 的 init 方法中，则会增加代码量以及每创建一个实例都要加载模板，增加了内存消耗

解决方式：

借助 Servlet 自身的 ServletContext 机制，由于一个 webapp 内部的 Servlet 之间是共享一个 ServletContext，那么我们只要先创建好 TemplateEngine，再保存到 ServletContext 中，则所有的 Servlet 都能够获取到这个模板引擎对象

代码实现：

package controller;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;

@WebListener
public class ThymeleafListener implements ServletContextListener 

    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) 
        // 创建模板引擎对象
        TemplateEngine engine = new TemplateEngine();
        // 创建解析器
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(servletContextEvent.getServletContext());
        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");
        resolver.setCharacterEncoding("utf8");
        // 将模板关联解析器
        engine.setTemplateResolver(resolver);
        // 将模板引擎添加到 ServletContext
        servletContextEvent.getServletContext().setAttribute("engine", engine);
    

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) 

    

• 这里需要借助 Servlet 的监听器，增加监听器就是当该行为被创建时，监听器就可以检测到并执行自己的代码
• 使用监听器监听 ServletContext 的创建需要实现 ServletContextListener 接口，并且增加 @WebListener 注解
• 继承 ServletContextListener 接口的类需要重写 contextInitialized 和 contextDestroyed 方法。前者是 ServletContext 被创建时触发的，模板引擎的初始化就放在这个方法里面；后者是 ServletContext 被销毁之前触发的，这里不必使用
• 当模板引擎初始化好之后，通过 ServletContext 的 setAttribute 方法就可以通过键值对的方式，将模板引擎添加到 ServletContext 中
• 当需要使用模板引擎时，通过 ServletContext 的 getAttribute 方法就可以通过键值对的方式，从 ServletContext 中获取到 TemplateEngine 对象

3.2 博客正文编辑的输入框设置

问题：

博客正文编辑的输入框设置不能简单的使用 input 标签

解决方式：

• 首选需要引入 editormd 的依赖
• 然后在内容编辑区增加 textarea 多行文本编辑的输入框，设置隐藏
• 最后在 editormd 的初始化区域，增加一个 saveHTMLToArea 属性，值设为 true

实现代码：

3.3 页面的记录太多，超过指定区域

问题：

当新增的博客越多，已经超过原因的背景页面，导致超出的地方为白色

解决方式：

在显示博客的指定区域，增加一个 css 属性：overflow:auto。如果该元素里面的内容溢出，则会自动增加滚动条

实现代码：

3.4 显示的博客需要进行 markdown 渲染

问题：

当我们发布文章时，服务器接收到的正文内容包含了一些 markdown 语法，因此在博客详情页中查看的内容，如果没有进行 markdown 渲染，则会将 markdown 的语法也都显示出来

解决方式：

• 先从 html 中拿到要渲染的字符串
• 然后将原有的字符串设为空
• 通过 editomd 内置的方法将拿到的字符串进行 markdown 渲染，并放回到指定的 html 元素中

实现代码：

4. 前后端分离出现的问题

4.1 前后端分离的写法需要约定好交互的接口

问题：

前后端分离的写法需要约定好交互的接口

解决方式：

约定的接口包含请求和响应两部分

• 对于请求：方法、url、请求字符串
• 对于响应：版本号、状态码、正文的数据格式

4.2 javascript 中的相关方法

• location.search 用于获取当前页面 URL 的整个查询字符串

• location.assigh(要跳转的网址) 通过 JavaScript 的方式跳转到指定页面

• 对于 Ajax 发送的请求，Servlet 在处理的时候，如果需要重定向，是不能直接 sendRedirect 的。可以通过返回一个 302 的状态码，用于表示响应失败，然后在 Ajax 中设置一个 error，对于失败的响应进行处理，在该方法中通过 location.assigh(要跳转的网址) 来进行重定向