玩转spring boot 结合AngularJs和JDBC（4）

参考官方例子：http://spring.io/guides/gs/relational-data-access/

 一、项目准备

在建立mysql数据库后新建表“t_order”

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `t_order`
-- ----------------------------
DROP TABLE IF EXISTS `t_order`;
CREATE TABLE `t_order` (
 `order_id` varchar(36) NOT NULL,
 `order_no` varchar(50) DEFAULT NULL,
 `order_date` datetime DEFAULT NULL,
 `quantity;` int(11) DEFAULT NULL,
 PRIMARY KEY (`order_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of t_order
-- ----------------------------

修改pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.github.carter659</groupId>
  <artifactId>spring04</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>spring04</name>
  <url>http://maven.apache.org</url>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.2.RELEASE</version>
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <dependency>
      <groupId>commons-dbcp</groupId>
      <artifactId>commons-dbcp</artifactId>
    </dependency>


  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

二、编写类文件：

修改App.java

package com.github.carter659.spring04;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 博客出处：http://www.cnblogs.com/GoodHelper/
 * 
 * @author 刘冬
 *
 */
@SpringBootApplication
public class App {

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }
}

新建数据载体类文件“Order.java”

package com.github.carter659.spring04;

import java.util.Date;
/**
 * 博客出处：http://www.cnblogs.com/GoodHelper/
 * @author 刘冬
 *
 */
public class Order {
  public String id;
  public String no;
  public Date date;
  public int quantity;

  /**
   * 省略 get set
   */
}

新建数据持久层类“OrderDao.java”

package com.github.carter659.spring04;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.support.rowset.SqlRowSet;
import org.springframework.stereotype.Repository;

/**
 * 博客出处：http://www.cnblogs.com/GoodHelper/
 * @author 刘冬
 *
 */
@Repository
public class OrderDao {

  @Autowired
  private JdbcTemplate jdbcTemplate;

  public List<Order> findAll() {
    List<Order> list = new ArrayList<>();
    String sql = " select * from t_order ";
    SqlRowSet rows = jdbcTemplate.queryForRowSet(sql, new Object[] {});
    while (rows.next()) {
      Order order = new Order();
      list.add(order);
      order.id = rows.getString("order_id");
      order.no = rows.getString("order_no");
      order.date = rows.getDate("order_date");
      order.quantity = rows.getInt("quantity");
    }
    return list;
  }

  public Order get(String id) {
    Order order = null;
    String sql = " select * from t_order where order_id = ? ";
    SqlRowSet rows = jdbcTemplate.queryForRowSet(sql, new Object[] { id });
    while (rows.next()) {
      order = new Order();
      order.id = rows.getString("order_id");
      order.no = rows.getString("order_no");
      order.date = rows.getDate("order_date");
      order.quantity = rows.getInt("quantity");
    }
    return order;
  }

  public String insert(Order order) {
    String id = UUID.randomUUID().toString();
    String sql = " insert into t_order ( order_id , order_no , order_date , quantity ) values (?,?,?,?) ";
    jdbcTemplate.update(sql,
        new Object[] { id, order.no, new java.sql.Date(order.date.getTime()), order.quantity });
    return id;
  }

  public void update(Order order) {
    String sql = " update t_order set order_no = ? , order_date = ? , quantity = ? where order_id = ? ";
    jdbcTemplate.update(sql,
        new Object[] { order.no, new java.sql.Date(order.date.getTime()), order.quantity, order.id });
  }

  public void delete(String id) {
    String sql = " delete from t_order where order_id = ? ";
    jdbcTemplate.update(sql, new Object[] { id });
  }
}

其中对数据库的操作，顾名思义：

findAll-->查询所有数据

get-->通过id获取数据

insert-->插入数据

update-->修改数据

delete-->删除数据

新建控制器“MainController.java”

package com.github.carter659.spring04;

import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

import com.mysql.jdbc.StringUtils;

@Controller
public class MainController {

  @Autowired
  private OrderDao orderDao;

  @GetMapping("/")
  public String index() {
    return "index";
  }

  @PostMapping("/save")
  public @ResponseBody Map<String, Object> save(@RequestBody Order order) {
    Map<String, Object> result = new HashMap<>();
    if (StringUtils.isNullOrEmpty(order.id))
      order.id = orderDao.insert(order);
    else {
      orderDao.update(order);
    }
    result.put("id", order.id);
    return result;
  }

  @PostMapping("/get")
  public @ResponseBody Object get(String id) {
    return orderDao.get(id);
  }

  @PostMapping("/findAll")
  public @ResponseBody Object findAll() {
    return orderDao.findAll();
  }

  @PostMapping("/delete")
  public @ResponseBody Map<String, Object> delete(String id) {
    Map<String, Object> result = new HashMap<>();
    orderDao.delete(id);
    result.put("id", id);
    return result;
  }
}

三、新建thymeleaf模板

新建文件“src/main/resources/templates/index.html”

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>玩转spring boot——结合JDBC</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
  /*<![CDATA[*/
  var app = angular.module('app', []);
  app.controller('MainController', function($rootScope, $scope, $http) {

    $scope.data = {};
    $scope.rows = [];

    //添加
    $scope.add = function() {
      $scope.data = {
        no : 'No.1234567890',
        quantity : 100,
        'date' : '2016-12-30'
      };
    }

    //编辑
    $scope.edit = function(id) {
      for ( var i in $scope.rows) {
        var row = $scope.rows[i];
        if (id == row.id) {
          $scope.data = row;
          return;
        }
      }
    }

    //移除
    $scope.remove = function(id) {
      for ( var i in $scope.rows) {
        var row = $scope.rows[i];
        if (id == row.id) {
          $scope.rows.splice(i, 1);
          return;
        }
      }
    }

    //保存
    $scope.save = function() {
      $http({
        url : '/save',
        method : 'POST',
        data : $scope.data
      }).success(function(r) {
        //保存成功后更新数据
        $scope.get(r.id);
      });
    }

    //删除
    $scope.del = function(id) {
      $http({
        url : '/delete?id=' + id,
        method : 'POST',
      }).success(function(r) {
        //删除成功后移除数据
        $scope.remove(r.id);
      });
    }

    //获取数据
    $scope.get = function(id) {
      $http({
        url : '/get?id=' + id,
        method : 'POST',
      }).success(function(data) {
        for ( var i in $scope.rows) {
          var row = $scope.rows[i];
          if (data.id == row.id) {
            row.no = data.no;
            row.date = data.date;
            row.quantity = data.quantity;
            return;
          }
        }
        $scope.rows.push(data);
      });
    }

    //初始化载入数据
    $http({
      url : '/findAll',
      method : 'POST'
    }).success(function(rows) {
      for ( var i in rows) {
        var row = rows[i];
        $scope.rows.push(row);
      }
    });
  });
  /*]]>*/
</script>
</head>
<body ng-app="app" ng-controller="MainController">
  <h1>玩转spring boot——结合JDBC</h1>
  <h4>
    <a href="http://www.cnblogs.com/GoodHelper/">from 刘冬的博客</a>
  </h4>
  <input type="button" value="添加" ng-click="add()" />
  <input type="button" value="保存" ng-click="save()" />
  <br />
  <br />
  <h3>清单信息：</h3>
  <input id="id" type="hidden" ng-model="data.id" />
  <table cellspacing="1" style="background-color: #a0c6e5">
    <tr>
      <td>编号：</td>
      <td><input id="no" ng-model="data.no" /></td>
      <td>日期：</td>
      <td><input id="date" ng-model="data.date" /></td>
      <td>数量：</td>
      <td><input id="quantity" ng-model="data.quantity" /></td>
    </tr>
  </table>

  <br />
  <h3>清单列表：</h3>
  <table cellspacing="1" style="background-color: #a0c6e5">
    <tr
      style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold">
      <td>操作</td>
      <td>编号</td>
      <td>日期</td>
      <td>数量</td>
    </tr>
    <tr ng-repeat="row in rows" bgcolor='#F4FAFF'>
      <td><input ng-click="edit(row.id)" value="编辑" type="button" /><input
        ng-click="del(row.id)" value="删除" type="button" /></td>
      <td>{{row.no}}</td>
      <td>{{row.date}}</td>
      <td>{{row.quantity}}</td>
    </tr>
  </table>

  <br />
  <a href="http://www.cnblogs.com/GoodHelper/">点击访问原版博客</a>
</body>
</html>

使用angularjs的ajax调用spring boot mv的后台方法。

四、数据库连接

新建“src/main/resources/application.properties”文件

spring.datasource.initialize=false
spring.datasource.url=jdbc:mysql://localhost:3306/demo
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

完整的结构为：

五、运行效果

在浏览器输入“http://localhost:8080/”

添加数据：

保存新数据：

编辑数据：

删除数据：

删除完成的效果：

代码：https://github.com/carter659/spring-boot-04.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# spring  # boot  # AngularJs  # JDBC  # SpringBoot与Angular2的集成示例  # Angular+Bootstrap+Spring Boot实现分页功能实例代码  # Spring Boot+AngularJS+BootStrap实现进度条示例代码  # 玩转spring boot 结合jQuery和AngularJs（3）  # 详解springboot和vue前后端分离开发跨域登陆问题  # SpringBoot+Vue.js实现前后端分离的文件上传功能  # vue+springboot前后端分离实现单点登录跨域问题解决方法  # spring boot+vue 的前后端分离与合并方案实例详解  # springboot+angular4前后端分离 跨域问题解决详解  # 博客  # 玩转  # 移除  # 顾名思义  # 大家多多  # optional  # true  # dependency  # dependencies  # devtools  # web  # plugin  # plugins  # package  # App  # dbcp 

相关文章： 在线ppt制作网站有哪些,请推荐几个好的课件下载的网站？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  大同网页,大同瑞慈医院官网？  制作宣传网站的软件,小红书可以宣传网站吗？  深圳网站制作培训,深圳哪些招聘网站比较好？  香港服务器租用每月最低只需15元？  如何在腾讯云免费申请建站？  如何用VPS主机快速搭建个人网站？  宁波自助建站系统如何快速打造专业企业网站？  魔方云NAT建站如何实现端口转发？  css网站制作参考文献有哪些,易聊怎么注册？  广州顶尖建站服务：企业官网建设与SEO优化一体化方案  如何快速配置高效服务器建站软件？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  在线流程图制作网站手机版,谁能推荐几个好的CG原画资源网站么？  C#如何序列化对象为XML XmlSerializer用法  网站网页制作电话怎么打,怎样安装和使用钉钉软件免费打电话？  台州网站建设制作公司,浙江手机无犯罪记录证明怎么开？  定制建站如何定义？其核心优势是什么？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  网站制作公司排行榜,抖音怎样做个人官方网站  安徽网站建设与外贸建站服务专业定制方案  设计网站制作公司有哪些,制作网页教程？  linux top下的 minerd 木马清除方法  建站之星如何助力网站排名飙升？揭秘高效技巧  自助网站制作软件,个人如何自助建网站？  建站之星图片链接生成指南：自助建站与智能设计教程  如何使用Golang安装API文档生成工具_快速生成接口文档  如何配置FTP站点权限与安全设置？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  如何做网站制作流程,*游戏网站怎么搭建？  测试制作网站有哪些,测试性取向的权威测试或者网站？  如何零基础在云服务器搭建WordPress站点？  如何快速生成高效建站系统源代码？  建站主机选哪种环境更利于SEO优化？  如何获取PHP WAP自助建站系统源码？  武汉外贸网站制作公司,现在武汉外贸前景怎么样啊？  如何在宝塔面板创建新站点？  Bpmn 2.0的XML文件怎么画流程图  用v-html解决Vue.js渲染中html标签不被解析的问题  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  香港服务器部署网站为何提示未备案？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  交易网站制作流程,我想开通一个网站，注册一个交易网址，需要那些手续？  建站之星如何快速解决建站难题？  如何选择靠谱的建站公司加盟品牌？  如何快速登录WAP自助建站平台？  如何选择香港主机高效搭建外贸独立站？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  导航网站建站方案与优化指南：一站式高效搭建技巧解析