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

程序员文章站 2024-03-08 16:46:46

参考官方例子：一、项目准备在建立mysql数据库后新建表“t_order” set foreign_key_checks=0; -- -...

参考官方例子：

一、项目准备

在建立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

完整的结构为：

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