Spring之路(32)–SpringMVC+SpringJDBC+jQuery+Bootstrap博客系统完整实例

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: 本文目录1. 前情回顾2. 概述3. 新建项目4. 新建包及目录、文件5. 完整开发过程5.1 封装数据对象5.2 封装数据访问层,并注册为bean5.3 编写服务类,封装对博客的操作方法5.4 编写控制器,提供http接口5.5 编写html页面,调用api接口完成操作5.6 编写springmvc-config.xml5.7 编写web.xml6. 测试

1. 前情回顾

之前我们已经用SpringMVC+JSP+Boostrap+原生JDBC实现过博客系统。


然后我们将其改为了前后端分离的Spring Restful+jQuery+Bootstrap+原生JDBC实现的博客系统。


本篇我们将完整的实现一个Spring+SpringMVC+SpringJDBC+jQuery+Bootstrap的博客系统,说的很复杂,实际上后端还是Restful风格的API,前端还是通过jQuery调用后端,Bootstrap仅负责页面样式。


OK,通过本篇希望大家将之前的知识点都串起来,同时我们的项目规范上也更加贴近项目实战多一些。


OK,前情回顾完毕,开整~~


2. 概述

功能:很简单,就是实现博客的增删改查。


数据库:MySQL,表结构如下:

CREATE TABLE `blog` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '唯一标志',
  `title` varchar(255) DEFAULT '' COMMENT '标题',
  `author` varchar(255) DEFAULT '' COMMENT '作者姓名',
  `content` longtext COMMENT '内容',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=35 DEFAULT CHARSET=utf8;


/

项目分层:

视图层(Html+Bootstrap+jQuery),负责页面显示

控制层(Controller),负责接受页面请求,并调用服务层完成业务逻辑,最后返回数据

服务层(Service),负责调用数据访问层,完成对数据库的增删改查操作,并封装业务逻辑

数据访问层(DAO),负责操作数据库


3. 新建项目

新建Dynamic web project,项目名称【springjdbcblog】,然后将Spring相关jar包以及下面几个jar包放入lib目录下:


commons-logging-1.2.jar 日志相关

jackson-annotations-2.8.0.jar json相关

jackson-core-2.8.0.jar json相关

jackson-databind-2.8.0.jar json相关

mysql-connector-java-5.1.48.jar mysql驱动

druid-1.1.21.jar 数据库连接池

4. 新建包及目录、文件

建立如下图项目结构:

image.png

5. 完整开发过程

本次我们按照从底层到外层的开发方式,也就是从数据对象–数据访问层–服务层–控制器层–视图页面的顺序。


5.1 封装数据对象

数据对象与数据库表是一一对应关系,根据表中的列设计数据对象类的属性即可,代码如下:

package org.maoge.sjblog.xdo;
/**
 * @theme 数据对象--博客
 * @author maoge
 * @date 2020-01-29
 */
public class BlogDo {
  private Long id;
  private String title;
  private String author;
  private String content;
  // 省略get get
}
5.2 封装数据访问层,并注册为bean
我们将博客数据访问层封装为BlogDao,并通过@Repositoy注册为bean,然后通过@Autowired注入jdbcTemplate对象。
package org.maoge.sjblog.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.maoge.sjblog.xdo.BlogDo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate;
import org.springframework.stereotype.Repository;
/**
 * @theme DAO--博客
 * @author maoge
 * @date 2020-01-29
 */
@Repository // 注册为组件
public class BlogDao {
  @Autowired // 自动注入
  private NamedParameterJdbcTemplate namedTemplate;
  /**
  * 新增
  */
  public void insert(BlogDo blog) {
  Map map = new HashMap<>();
  map.put("author", blog.getAuthor());
  map.put("content", blog.getContent());
  map.put("title", blog.getTitle());
  // 注意使用:xxx占位
  namedTemplate.update("insert into blog(author,content,title)values(:author,:content,:title)", map);
  }
  /**
  * 删除
  */
  public void delete(Long id) {
  Map map = new HashMap<>();
  map.put("id", id);
  namedTemplate.update("delete from blog where id =:id", map);
  }
  /**
  * 更新
  */
  public void update(BlogDo blog) {
  Map map = new HashMap<>();
  map.put("author", blog.getAuthor());
  map.put("content", blog.getContent());
  map.put("title", blog.getTitle());
  map.put("id", blog.getId());
  namedTemplate.update("update blog set author=:author,content=:content,title=:title where id=:id", map);
  }
  /**
  * 按id查询
  */
  public BlogDo getById(Long id) {
  Map map = new HashMap<>();
  map.put("id", id);
  return namedTemplate.queryForObject("select * from blog where id=:id", map, new RowMapper() {
    @Override
    public BlogDo mapRow(ResultSet rs, int rowNum) throws SQLException {
    BlogDo blog = new BlogDo();
    blog.setAuthor(rs.getString("author"));
    blog.setContent(rs.getString("content"));
    blog.setId(rs.getLong("id"));
    blog.setTitle(rs.getString("title"));
    return blog;
    }
  });
  }
  /**
  * 查询列表
  */
  public List getList() {
  return namedTemplate.query("select * from blog", new RowMapper() {
    @Override
    public BlogDo mapRow(ResultSet rs, int rowNum) throws SQLException {
    BlogDo blog = new BlogDo();
    blog.setAuthor(rs.getString("author"));
    blog.setContent(rs.getString("content"));
    blog.setId(rs.getLong("id"));
    blog.setTitle(rs.getString("title"));
    return blog;
    }
  });
  }
}




5.3 编写服务类,封装对博客的操作方法

直接我们是在控制器中直接调用数据接口层,这种封装会导致当业务逻辑比较复杂时,控制器层会有很多操作代码。


实际上控制器层应该只负责接受输入,调用方法完成业务逻辑,然后返回结果。


DAO层方法只是简单的对数据源完成增删改查等操作,显然不足以支撑业务逻辑。


所以一般在控制器层和DAO层之间,有一个服务层,封装业务逻辑和对数据源的操作,此处编写一个BlogService类实现该部分功能。

package org.maoge.sjblog.service;
import java.util.List;
import org.maoge.sjblog.dao.BlogDao;
import org.maoge.sjblog.xdo.BlogDo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
 * @theme 服务--博客
 * @author maoge
 * @date 2020-01-27
 */
@Service//替代@Component
public class BlogService {
  @Autowired // 自动注入BlogDao组件
  private BlogDao blogDao;
  /**
  * 获取博客列表
  */
  public List getBlogList() {
  return blogDao.getList();
  }
  /**
  * 按id获取博客信息
  */
  public BlogDo getBlogById(Long id) {
  return blogDao.getById(id);
  }
  /**
  * 新增博客
  */
  public void addBlog(BlogDo blog) {
  blogDao.insert(blog);
  }
  /**
  * 根据博客id更新博客信息
  */
  public void updateBlog(BlogDo blog) {
  blogDao.update(blog);
  }
  /**
  * 根据博客id删除对应博客
  */
  public void deleteBlog(Long id) {
  blogDao.delete(id);
  }
}
5.4 编写控制器,提供http接口
然后我们编写BlogController,按照Restful风格提供http接口,代码如下:
package org.maoge.sjblog.controller;
import java.util.List;
import org.maoge.sjblog.service.BlogService;
import org.maoge.sjblog.xdo.BlogDo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
/**
 * @theme 控制器--博客
 * @author maoge
 * @date 2020-01-28
 */
@RestController // 通过该注解,第一将BlogController注册为控制器,第二将其中方法返回值转换为json
public class BlogController {
  @Autowired // 自动装配blogService
  private BlogService blogService;
  /**
  * 查询博客信息
  * 1、@GetMapping表示可以使用get方法请求该api
  * 2、"/blog/{id}"表示请求路径为/blog/{id}的形式,其中{id}为占位符
  * 3、@PathVariable("id")表示将占位符{id}的值传递给id
  * 4、也就是说/blog/123请求的话,会将123传递给参数id
  */
  @GetMapping(value="/blog/{id}")
  public BlogDo getOne(@PathVariable("id") long id) {
  return blogService.getBlogById(id);
  }
  /**
  * 查询博客列表,使用get方法
  */
  @GetMapping("/blog")
  public List getList(){
  return blogService.getBlogList();
  }
  /**
  * 新增博客
  * 1、@PostMapping表示使用post方法
  * 2、@RequestBody表示将请求中的json信息转换为BlogDo类型的对象信息,该转换也是由SpringMVC自动完成的
  */
  @PostMapping("/blog")
  public void add(@RequestBody BlogDo blog) {
  blogService.addBlog(blog);
  }
  /**
  * 修改博客
  * 实际上此处也可以不在路径中传递id,而是整个使用json传递对象信息,但是我查询了一些文档,貌似使用路径传递id更加规范一些,此处不用纠结
  */
  @PutMapping("/blog/{id}")
  public void update(@PathVariable("id") long id,@RequestBody BlogDo blog) {
  //修改指定id的博客信息
  blog.setId(id);
  blogService.updateBlog(blog);
  }
  /**
  * 删除博客
  */
  @DeleteMapping("/blog/{id}")
  public void delete(@PathVariable("id") long id) {
  blogService.deleteBlog(id);
  }
}



5.5 编写html页面,调用api接口完成操作

编写html页面,通过jQuery的ajax调用BlogController里面的api方法,代码如下:

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div> integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></div><div>
</div><div> //浏览博客</div><div> function viewBlogs() {</div><div>  var row = "";</div><div>  //先清空表格</div><div>  $('#blogTable').find("tr:gt(0)").remove();</div><div>  $.ajax({</div><div>   type: "GET",</div><div>   url: "/restfulblog/blog",</div><div>    dataType: "json",</div><div>    contentType: "application/json; charset=utf-8",</div><div>    success: function (res) {</div><div>    $.each(res, function (i, v) {</div><div>      row = "<tr>";</div><div>      row += "<td>" + v.id + "</td>";</div><div>      row += "<td>" + v.title + "</td>";</div><div>     row += "<td>" + v.author + "</td>";</div><div>      row +=</div><div>      "<td><a class='btn btn-primary btn-sm' href='#' οnclick='editBlog(" + v.id +</div><div>      ")'>编辑</a>";</div><div>     row +=</div><div>      "<a class='btn btn-danger btn-sm' href='#' οnclick='deleteBlog(" + v.id +</div><div>      ")'>删除</a></td>";</div><div>     row += "</tr>";</div><div>      $("#blogTable").append(row);</div><div>    });</div><div>   },</div><div>   error: function (err) {</div><div>    console.log(err);</div><div>    }</div><div>  });</div><div>  }</div><div>  //新增</div><div> function addBlog() {</div><div>  $('#blogAddModal').modal('show');</div><div> }</div><div>  //新增提交</div><div> function addBlogSubmit() {</div><div>  var data = {</div><div>    id: '',</div><div>    title: $("#blogAddModal input[name='title']").val(),</div><div>   author: $("#blogAddModal input[name='author']").val(),</div><div>   content: $("#blogAddModal textarea[name='content']").val()</div><div>  };</div><div>  $.ajax({</div><div>   type: "POST",</div><div>    url: "/restfulblog/blog",</div><div>    //dataType: "json",</div><div>    contentType: "application/json; charset=utf-8",</div><div>    data: JSON.stringify(data), //需要将对象转换为字符串提交</div><div>    success: function () {</div><div>    //新增后重新加载</div><div>    viewBlogs();</div><div>    //关闭弹窗</div><div>    $('#blogAddModal').modal('hide');</div><div>   },</div><div>   error: function (err) {</div><div>    console.log(err);</div><div>    }</div><div>  });</div><div>  }</div><div>  //编辑</div><div> function editBlog(id) {</div><div>  //查询博客信息</div><div>  $.ajax({</div><div>    type: "GET",</div><div>   url: "/restfulblog/blog/" + id,</div><div>    dataType: "json",</div><div>    contentType: "application/json; charset=utf-8",</div><div>    success: function (res) {</div><div>    console.log(res);</div><div>    //为编辑框赋值</div><div>    $("#blogEditModal input[name='id']").val(res.id);</div><div>    $("#blogEditModal input[name='title']").val(res.title);</div><div>    $("#blogEditModal input[name='author']").val(res.author);</div><div>    $("#blogEditModal textarea[name='content']").val(res.content);</div><div>    //显示编辑弹窗</div><div>    $('#blogEditModal').modal('show');</div><div>    },</div><div>   error: function (err) {</div><div>    console.log(err);</div><div>    }</div><div>  });</div><div>  }</div><div>  //编辑提交</div><div> function editBlogSubmit() {</div><div>  var data = {</div><div>   id: $("#blogEditModal input[name='id']").val(),</div><div>    title: $("#blogEditModal input[name='title']").val(),</div><div>    author: $("#blogEditModal input[name='author']").val(),</div><div>    content: $("#blogEditModal textarea[name='content']").val()</div><div>  };</div><div>  $.ajax({</div><div>    type: "PUT",</div><div>   url: "/restfulblog/blog/" + data.id,</div><div>   //dataType: "json",</div><div>    contentType: "application/json; charset=utf-8",</div><div>    data: JSON.stringify(data), //需要将对象转换为字符串提交</div><div>    success: function () {</div><div>    //新增后重新加载</div><div>    viewBlogs();</div><div>    //关闭弹窗</div><div>    $('#blogEditModal').modal('hide');</div><div>    },</div><div>   error: function (err) {</div><div>    console.log(err);</div><div>    }</div><div>  });</div><div>  }</div><div>  //删除</div><div> function deleteBlog(id) {</div><div>  $.ajax({</div><div>   type: "DELETE",</div><div>    url: "/restfulblog/blog/" + id,</div><div>    //dataType: "json",//由于删除方法无返回值,所以此处注释掉</div><div>    contentType: "application/json; charset=utf-8",</div><div>    success: function () {</div><div>    //删除后重新加载</div><div>    viewBlogs();</div><div>    },</div><div>   error: function (err) {</div><div>    console.log(err);</div><div>    }</div><div>  });</div><div>  }</div><div>

5.6 编写springmvc-config.xml

上面我们使用到的bean包括:namedParameterJdbcTemplate、blogDao、blogService、blogController,此外namedParameterJdbcTemplate还需要注入dataSource。


其中blogDao、blogService、blogController是使用注解标识的,我们可以直接开启扫描即可。namedParameterJdbcTemplate和dataSource是Spring提供的类,我们需要在xml手工配置。


所以springmvc-config.xml编写如下:

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xsi:schemaLocation="http://www.springframework.org/schema/beans 
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
  base-package="org.maoge.sjblog" />
  class="com.alibaba.druid.pool.DruidDataSource">
    value="com.mysql.jdbc.Driver">
    value="jdbc:mysql://127.0.0.1:3306/myblog?useUnicode=true&characterEncoding=utf-8">
  class="org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate">



5.7 编写web.xml

最后我们实现下web.xml,当web服务启动时配置好加载的DispatcherServlet及对应的容器配置信息。

xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  id="WebApp_ID" version="3.1">
  springjdbcblog
 springmvc
 org.springframework.web.servlet.DispatcherServlet
  contextConfigLocation
  /WEB-INF/springmvc-config.xml
 1
 springmvc
 /*




6. 测试

部署到Tomcat上启动,界面如下,还是不错滴。


哈哈,虽然跟之前一版的博客系统从界面上讲没任何差别,但是后端代码变化不少啊,数据库操作引擎已经由自定义的DbHelper变为SpringJDBC封装的NamedParameterJdbcTemplate,而且还使用了Druid这样先进滴数据库连接池,稳啊!


相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
17天前
|
存储 安全 Java
Spring Boot 3 集成Spring AOP实现系统日志记录
本文介绍了如何在Spring Boot 3中集成Spring AOP实现系统日志记录功能。通过定义`SysLog`注解和配置相应的AOP切面,可以在方法执行前后自动记录日志信息,包括操作的开始时间、结束时间、请求参数、返回结果、异常信息等,并将这些信息保存到数据库中。此外,还使用了`ThreadLocal`变量来存储每个线程独立的日志数据,确保线程安全。文中还展示了项目实战中的部分代码片段,以及基于Spring Boot 3 + Vue 3构建的快速开发框架的简介与内置功能列表。此框架结合了当前主流技术栈,提供了用户管理、权限控制、接口文档自动生成等多项实用特性。
69 8
|
5月前
|
Java UED Sentinel
微服务守护神:Spring Cloud Sentinel,让你的系统在流量洪峰中稳如磐石!
【8月更文挑战第29天】Spring Cloud Sentinel结合了阿里巴巴Sentinel的流控、降级、熔断和热点规则等特性,为微服务架构下的应用提供了一套完整的流量控制解决方案。它能够有效应对突发流量,保护服务稳定性,避免雪崩效应,确保系统在高并发下健康运行。通过简单的配置和注解即可实现高效流量控制,适用于高并发场景、依赖服务不稳定及资源保护等多种情况,显著提升系统健壮性和用户体验。
113 1
|
1月前
|
Java 数据库 数据安全/隐私保护
轻松掌握Spring依赖注入:打造你的登录验证系统
本文以轻松活泼的风格,带领读者走进Spring框架中的依赖注入和登录验证的世界。通过详细的步骤和代码示例,我们从DAO层的创建到Service层的实现,再到Spring配置文件的编写,最后通过测试类验证功能,一步步构建了一个简单的登录验证系统。文章不仅提供了实用的技术指导,还以口语化和生动的语言,让学习变得不再枯燥。
48 2
|
3月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
19 1
|
2月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
74 0
|
4月前
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
21 3
|
5月前
|
Java 微服务 Spring
SpringBoot+Vue+Spring Cloud Alibaba 实现大型电商系统【分布式微服务实现】
文章介绍了如何利用Spring Cloud Alibaba快速构建大型电商系统的分布式微服务,包括服务限流降级等主要功能的实现,并通过注解和配置简化了Spring Cloud应用的接入和搭建过程。
SpringBoot+Vue+Spring Cloud Alibaba 实现大型电商系统【分布式微服务实现】
|
5月前
|
消息中间件 Java RocketMQ
微服务架构师的福音:深度解析Spring Cloud RocketMQ,打造高可靠消息驱动系统的不二之选!
【8月更文挑战第29天】Spring Cloud RocketMQ结合了Spring Cloud生态与RocketMQ消息中间件的优势,简化了RocketMQ在微服务中的集成,使开发者能更专注业务逻辑。通过配置依赖和连接信息,可轻松搭建消息生产和消费流程,支持消息过滤、转换及分布式事务等功能,确保微服务间解耦的同时,提升了系统的稳定性和效率。掌握其应用,有助于构建复杂分布式系统。
87 0
|
5月前
|
XML Java 数据库
Spring5入门到实战------10、操作术语解释--Aspectj注解开发实例。AOP切面编程的实际应用
这篇文章是Spring5框架的实战教程,详细解释了AOP的关键术语,包括连接点、切入点、通知、切面,并展示了如何使用AspectJ注解来开发AOP实例,包括切入点表达式的编写、增强方法的配置、代理对象的创建和优先级设置,以及如何通过注解方式实现完全的AOP配置。
|
5月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
55 0