开发者社区> 程序员大阳> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Spring之路(26)–Spring Restful+jQuery+Bootstrap开发博客系统实例(前端开发篇)

简介: 本文目录 1. 概述 2. 配置访问静态资源 3. 建立html网页 4. 浏览博客功能实现 5. 删除博客实现 6. 新增博客实现 7. 编辑博客实现
+关注继续查看

1. 概述

本篇来实现下前端部分,采用jQuery发起ajax请求访问后端Restful的API,Bootstrap主要负责显示样式部分。


2. 配置访问静态资源

之前我们已经配置了/*作为SpringMVC拦截的请求路径,这样导致我们的网页等静态资源实际上也无法访问了。


所以需要开放一个目录作为静态资源目录,对此目录的请求不被拦截,我们在WebContent下新建static目录存放html页面等静态资源。然后配置springmvc-config.xml,添加如下mvc:resources配置:


<context:component-scan base-package="org.maoge.restfulblog" />

<mvc:annotation-driven />

<!--静态资源映射-->

   <mvc:resources mapping="/static/**" location="/static/"/>


3. 建立html网页

此处不再需要使用jsp,直接建立一个简单的html网页,同时引入jquery和Bootstrap相关的js文件。


建立在static目录下新建blog.html网页代码如下:


<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"

 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>


<body>

<nav class="navbar navbar-inverse">

 <div class="container-fluid">

  <ul class="nav navbar-nav">

   <li><a href="#" onclick="viewBlogs()">浏览博客</a></li>

   <li><a href="#" onclick="addBlog()">新增博客</a></li>

  </ul>

 </div>

</nav>

<table id="blogTable" class="table table-striped">

 <tr>

  <th>ID</th>

  <th>标题</th>

  <th>作者</th>

  <th>操作</th>

 </tr>

</table>

</body>

<!--jQuery-->

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"

integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">

</script>

<script>

</script>


</html>


4. 浏览博客功能实现

调用restful接口获取博客列表:


   //浏览博客

function viewBlogs() {

 var row = "";

 //先清空表格

 $('#blogTable').find("tr:gt(0)").remove();

 $.ajax({

  type: "GET",

  url: "/restfulblog/blog",

  dataType: "json",

  contentType: "application/json; charset=utf-8",

  success: function (res) {

   console.log(res);

   $.each(res, function (i, v) {

    row = "<tr>";

    row += "<td>" + v.id + "</td>";

    row += "<td>" + v.title + "</td>";

    row += "<td>" + v.author + "</td>";

    row +=

     "<td><a class='btn btn-primary btn-sm' href='#' οnclick='editBlog(" + v.id +

     ")'>编辑</a>";

    row +=

     "<a class='btn btn-danger btn-sm' href='#' οnclick='deleteBlog(" + v.id +

     ")'>删除</a></td>";

    row += "</tr>";

    $("#blogTable").append(row);

   });

  },

  error: function (err) {

   console.log(err);

  }

 });

}


说白了就是用jQuery先去请求后端接口,然后修改前端页面显示,此时后端足够简单,前端是比较繁琐的,但是功能也实现了。具体效果如下:

image.png

5. 删除博客实现

咱们先实现比较简单的删除博客,在浏览博客功能实现时,我们已经预留了删除博客的js方法,此时我们完善下。注意因为我们封装的后端删除接口没有返回值,所以此处也不要设置dataType。


//删除

function deleteBlog(id) {

 $.ajax({

  type: "DELETE",

  url: "/restfulblog/blog/" + id,

  //dataType: "json",//由于删除方法无返回值,所以此处注释掉

  contentType: "application/json; charset=utf-8",

  success: function () {

   //删除后重新加载

   viewBlogs();

  },

  error: function (err) {

   console.log(err);

  }

 });

}


6. 新增博客实现

使用前端控制流程后,我们可以在一个页面中实现新增博客,而不用啰里啰嗦的跳转页面了,此处我们使用Boostrap弹窗来显示新增博客的表单。


点击新增后弹出弹窗:


   //新增

function addBlog() {

 $('#blogAddModal').modal('show');

}


同时在html中新增弹窗:


<!-- 新增弹窗 -->

<div id="blogAddModal" class="modal fade" tabindex="-1" role="dialog">

 <div class="modal-dialog" role="document">

  <div class="modal-content">

   <div class="modal-header">

    <h4 class="modal-title">新增博客</h4>

   </div>

   <div class="modal-body" style="padding:16px;">

    <!-- 新增博客的表单 -->

    <form>

     <div class="form-group">

      <label>标题</label>

      <input name="title" type="text" class="form-control">

     </div>

     <div class="form-group">

      <label>内容</label>

      <textarea name="content" class="form-control" rows="3"></textarea>

     </div>

     <div class="form-group">

      <label>作者</label>

      <input name="author" type="text" class="form-control">

     </div>

    </form>

   </div>

   <div class="modal-footer">

    <button type="button" class="btn btn-primary" onclick="addBlogSubmit()">提交</button>

    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

   </div>

  </div>

 </div>

</div>


最后点击提交后,首先要调用restful api保存新增的博客信息,然后关闭弹窗,最后还要加载最新的博客信息,代码如下:


//新增提交

function addBlogSubmit() {

 var data = {

  id: '',

  title: $("#blogAddModal input[name='title']").val(),

  author: $("#blogAddModal input[name='author']").val(),

  content: $("#blogAddModal textarea[name='content']").val()

 };

 $.ajax({

  type: "POST",

  url: "/restfulblog/blog",

  //dataType: "json",

  contentType: "application/json; charset=utf-8",

  data: JSON.stringify(data), //需要将对象转换为字符串提交

  success: function () {

   //新增后重新加载

   viewBlogs();

   //关闭弹窗

   $('#blogAddModal').modal('hide');

  },

  error: function (err) {

   console.log(err);

  }

 });

}


具体效果如下:

image.png

7. 编辑博客实现

点击编辑后,首先查询博客相关信息并显示到页面上,可用户编辑完成后将修改提交到后端,然后加载最新博客列表。


首先在html中新增编辑弹窗:


<!-- 编辑弹窗 -->

<div id="blogEditModal" class="modal fade" tabindex="-1" role="dialog">

 <div class="modal-dialog" role="document">

  <div class="modal-content">

   <div class="modal-header">

    <h4 class="modal-title">编辑博客</h4>

   </div>

   <div class="modal-body" style="padding:16px;">

    <!-- 编辑博客的表单 -->

    <form>

     <div class="form-group">

      <label>ID</label>

      <input name="id" type="text" class="form-control" readonly>

     </div>

     <div class="form-group">

      <label>标题</label>

      <input name="title" type="text" class="form-control">

     </div>

     <div class="form-group">

      <label>内容</label>

      <textarea name="content" class="form-control" rows="3"></textarea>

     </div>

     <div class="form-group">

      <label>作者</label>

      <input name="author" type="text" class="form-control">

     </div>

    </form>

   </div>

   <div class="modal-footer">

    <button type="button" class="btn btn-primary" onclick="editBlogSubmit()">提交</button>

    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

   </div>

  </div>

 </div>

</div>


点击编辑按钮后,查询博客信息,并显示到编辑弹窗中:


//编辑

function editBlog(id) {

 //查询博客信息

 $.ajax({

  type: "GET",

  url: "/restfulblog/blog/" + id,

  dataType: "json",

  contentType: "application/json; charset=utf-8",

  success: function (res) {

   console.log(res);

   //为编辑框赋值

   $("#blogEditModal input[name='id']").val(res.id);

   $("#blogEditModal input[name='title']").val(res.title);

   $("#blogEditModal input[name='author']").val(res.author);

   $("#blogEditModal textarea[name='content']").val(res.content);

   //显示编辑弹窗

   $('#blogEditModal').modal('show');

  },

  error: function (err) {

   console.log(err);

  }

 });

}


最后,当编辑完成提交时,应将信息更新到后端,然后加载最新的列表,代码如下:


//编辑提交

function editBlogSubmit() {

 var data = {

  id: $("#blogEditModal input[name='id']").val(),

  title: $("#blogEditModal input[name='title']").val(),

  author: $("#blogEditModal input[name='author']").val(),

  content: $("#blogEditModal textarea[name='content']").val()

 };

 $.ajax({

  type: "PUT",

  url: "/restfulblog/blog/" + data.id,

  //dataType: "json",

  contentType: "application/json; charset=utf-8",

  data: JSON.stringify(data), //需要将对象转换为字符串提交

  success: function () {

   //新增后重新加载

   viewBlogs();

   //关闭弹窗

   $('#blogEditModal').modal('hide');

  },

  error: function (err) {

   console.log(err);

  }

 });

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring Boot引用配置文件
Spring Boot程序默认从application.properties或者application.yaml读取配置,如何将配置信息外置,方便配置呢?
34 0
【Spring Boot系列2】还在为配置文件注解头疼?一文带你全部搞定!
本来想讲解SpringBoot的配置文件,但是里面一堆注解让我很是蒙圈,感觉用起来都差不多,比如@PropertySource、@ImportResource、@Value、@ConfigurationProperties等,加上之前掌握的@Configuration和@Bean。 一个配置文件,搞这么多注解,感觉头有点大,这篇文章主要是对这些注解进行扫盲,希望扫盲完后,我以后就不再怕它们了。
36 0
Spring Boot 应用可视化监控,一目了然!
Spring Boot 应用可视化监控,一目了然!
197 0
Spring Boot中使用Spring Security进行安全控制
Spring Boot中使用Spring Security进行安全控制
154 0
Spring Boot 实现定时任务的 4 种方式
定时任务实现的几种方式: Timer:这是java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务。使用这种方式可以让你的程序按照某一个频度执行,但不能在指定时间运行。一般用的较少。
116 0
Spring Boot 配置文件中的花样,看这一篇足矣!
在快速入门一节中,我们轻松的实现了一个简单的RESTful API应用,体验了一下Spring Boot给我们带来的诸多优点,我们用非常少的代码量就成功的实现了一个Web应用,这是传统的Spring应用无法办到的,虽然我们在实现Controller时用到的代码是一样的,但是在配置方面,相信大家也注意到了,在上面的例子中,除了Maven的配置之后,就没有引入任何的配置。
2536 0
企业级 SpringBoot 教程 (二)Spring Boot配置文件详解
springboot采纳了建立生产就绪Spring应用程序的观点。 Spring Boot优先于配置的惯例,旨在让您尽快启动和运行。在一般情况下,我们不需要做太多的配置就能够让spring boot正常运行。
1141 0
Spring boot 通用配置文件模板
001 # =================================================================== 002 # COMMON SPRING BOOT PROPERTIES 003 # 004 # This sample file is provided as a guideline.
1616 0
Spring Boot 启动加载数据 CommandLineRunner
实际应用中,我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求。 为了解决这样的问题,Spring Boot 为我们提供了一个方法,通过实现接口 CommandLineRunner 来实现。
966 0
+关注
程序员大阳
计算机技术哪家强,中国山东找大阳
593
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载