Jouez avec Spring Boot combiné avec AngularJS et JDBC (4)

Reportez-vous à l'exemple officiel: http://spring.io/guides/gs/relational-data-access/

1. Préparation du projet

Créez une nouvelle table "T_Order" après avoir créé une base de données MySQL

 Définir Foreign_Key_Checks = 0; - ------------------------------ STRUCTURE DE TABLE pour `T_Order`-- ---------------------------- Déposez la table si existe` T_Order`; Créer la table `T_Order` (` Order_id` Varchar (36) Not Null, `Ordre_No` Varchar (50) Null,` Ordre_Date` NULL, clé primaire (`Order_id`)) Engine = Myisam Default Charset = UTF8; - ------------------------------ Records de T_Order-- ----------------------------

Modifier pom.xml

 <project xmlns = "http://maven.apache.org/pom/4.0.0" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" xsi: schemalation = "http://maven.apache.org/pom/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd "> <ModelVersion> 4.0.0 </ ModelVersion> <ProupId> com.github.carter659 </proupId> <Artifactid> Spring04 </ Artifactid> <version> 0.0.1-SNAPSHOT <name> printemps04 </name> <url> http://maven.apache.org </url> <parent> <proupId> org.springframework.boot </proupId> <Artifactid> printemps-boot-starter-Parent </ artifactid> <version> 1.4.2.release </Degel <project.build.sourceencoding> utf-8 </project.build.sourceencoding> <java.version> 1.8 </java.version> </properties> <dependces> <dependency> <proupid> org.springframework.boot </prounid> <artifactid> spring-boot-starter-web </pruisid> <dependency> <proupId> org.springframework.boot </proupId> <ArtifActid> printemps-boot-devtools </ artifactid> <Apultal> true </acultational> </pedigency> <dependency> <proupId> org.springframework.boot </proupId> </ptericid> spring-boot-starter-thymeleafrea <dependency> <proupId> org.springframework.boot </proupId> <ArtifActid> printemps-boot-starter-jdbc </ artifactid> </dependency> <dependency> <proupId> mysql </prouprid> <pelactid> mysql-connector-java </retifactid> </sependency> <dependency> <GroupId> Commons-dbcp </proupId> <Artifactid> Commons-dbcp </ ArtiFactId> </Dependency> </ Dependuces> <Duild> <Glugins> <Glugin> <GroupId> Org.SpringFramework.Boot </proupId> <Artifactid> Spring-Boot-Maven-Plugin </ Artifactid> </prètement> </cargin>

2. Écrivez des fichiers de classe:

Modifier app.java

 Package com.github.carter659.spring04; import org.springframework.boot.springapplication; import org.springframework.boot.autoconfigure.springbootapplication; / ** * Source du blog: http://www.cnblogs.com/goodhelper/ * * @author liu dong * * / @ SpringbootApplicationPublic class App {public static void main (String [] args) {SpringApplication.run (app.class, args); }}

Créez un nouveau fichier d'office de données "Order.java"

 package com.github.carter659.spring04; import java.util.date; / ** * Blog Source: http://www.cnblogs.com/goodhelper/ * @author liu dong * * / public class Order {public String id; chaîne publique no; Date publique Date; Quantité du public; / ** * OMIT Get Set * /}

Créer une nouvelle classe de couche de persistance de données "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.sterreotype.repository; / ** * Source du blog: http://www.cnblogs.com/goodhelper/ * @auther liu dong * * / @ repositorypubl JDBCTemplate JDBCTemplate; public list <ord> findall () {list <ord> list = new ArrayList <> (); String SQL = "SELECT * FROM T_ORDER"; SQLROWSET ROWS = JDBCTemplate.QueryForrowSet (SQL, nouvel objet [] {}); while (rows.next ()) {Order Order = new Ordre (); list.add (ordonnance); order.id = wows.getString ("order_id"); order.no = rows.getString ("order_no"); order.date = rows.getDate ("order_date"); Order.quantity = Rows.getInt ("Quantité"); } Retour List; } Ordre public get (String id) {Order Order = NULL; String sql = "SELECT * FROM T_ORDER WHERE ORDER_ID =?"; SQLROWSET ROWS = JDBCTemplate.QueryForrowSet (SQL, nouvel objet [] {id}); while (rows.next ()) {order = new Ordre (); order.id = wows.getString ("order_id"); order.no = rows.getString ("order_no"); order.date = rows.getDate ("order_date"); Order.quantity = Rows.getInt ("Quantité"); } RETOUR ORDRE; } public String insert (Order Order) {String id = uUid.randomuuid (). toString (); String sql = "Insérer dans T_Order (ORDER_ID, ORDRE_NO, ORDER_DATE, QUANTITÉ) VALUES (?,? ,?)"; JDBCTemplate.update (SQL, nouvel objet [] {id, order.no, new java.sql.date (ordonnance.date.getTime ()), order.quantity}); Retour ID; } public void Update (Order Order) {String sql = "Update t_Order set order_no =?, order_date =?, Quantity =? Where Order_id =?"; JDBCTemplate.update (SQL, nouvel objet [] {Ordre.No, new Java.sql.Date (Ordre.Date.getTime ()), Order.quantity, Order.Id}); } public void delete (String id) {String sql = "Delete de t_Order Where Order_id =?"; jdbCTemplate.update (sql, nouvel objet [] {id}); }}

Les opérations de la base de données, comme son nom l'indique:

findall -> interroger toutes les données

Obtenez -> obtenir des données via ID

insérer -> insérer des données

Mise à jour -> Modifier les données

Supprimer -> Supprimer les données

Créez un nouveau contrôleur "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.sterreotype.conTroller; import org.springframework.web.bind.annotation; ImportMendMense org.springframework.web.bind.annotation.postmapping; import org.springframework.web.bind.annotation.requestbody; import org.springframework.web.bind.annotation.responsebody; Importer com.mysql.jdbc. 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 (ordonnance.id)) order.id = orderDao.insert (ordonnance); else {orderDao.update (ordonnance); } result.put ("id", order.id); Résultat de retour; } @Postmapping ("/ get") public @ResponseBody objet get (String id) {return orderDao.get (id); } @Postmapping ("/ findall") public @ResponseBody objet 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); Résultat de retour; }}

3. Créez un nouveau modèle de thymeleaf

Créez un nouveau fichier "Src / Main / Resources / Templates / index.html"

 <! Doctype html> <html xmlns: th = "http://www.thymeleaf.org"> <éad> <meta http-equiv = "contenu-ype" contenu = "text / html; charset = utf-8" /> <title> play spring boot - Combinced with jdbc </ title> 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', fonction ($ rootscope, $ scope, $ http) {$ scope.data = {}; $ scope.rows = []; // add $ scope.add = function () {$ scope.data = {no: 'n ° 1234567890' } // Edit $ scope.edit = function (id) {pour (var i dans $ scope.rows) {var row = $ scope.rows [i]; $ $ scope.get (r.id);});} // delete $ scope.del = function (id) {$ http ({Url: '/ delete? $ http ({url: '/ get? id =' + id, méthode: '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. quantic $ scope.Rows.push (data);});} // Initialise les données de charge $ http ({url: '/ findall', méthode: 'post'}). / *]]> * / </ script> </ head> <body ng-app = "app" ng-controller = "MainController"> <h1> Play Spring Boot - Combined avec jdbc </h1> <h4> <a href = "http://www.cnblogs.com/goodhelper/"> à partir du blog de liu dong </a> Type = "Button" value = "add" ng-Click = "add ()" /> <input type = "Button" value = "Save" ng-Click = "Save ()" /> <br /> <br /> <h3> Informations sur la liste: </ h3> <entrée id = "id" type = "HIDDEN" ng-model = "data.id" /> <table celluleping = "1" 1 "style = banderned:" # a0c6e5 "> <tr> <td> no.: </td> <td> <input id =" no "ng-model =" data.no "/> </td> <td> date: </td> <td> <entrée id =" date "ng-model =" data.date "/> </td> <td> Quantity: </ td> <date" id="quantity" ng-model="data.quantity" /></td> </tr> </table> <br /> <h3>List list: </h3> <table cellpacing="1" style="background-color: #a0c6e5"> <tr style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: Bold "> <td> Opération </td> <Td> Number </td> <Td> Date </td> <Td> Quantité </td> </tr> <ttr ng-repeat =" Row in Rows "bgColor = '# f4faff'> <td> <entrée ng-Click =" edit (row.id) " ng-click = "del (row.id)" value = "delete" type = "Button" /> </td> <td> {{row.no}} </td> <td> {{row.date}} </td> <td> {{row.quantity}} </td> </r> </r> </r> </r> </r> </r> href = "http://www.cnblogs.com/goodhelper/"> Cliquez pour accéder au blog original </a> </ody> </html>

Utilisez AngularJS 'AJAX pour appeler la méthode d'arrière-plan de Spring Boot MV.

4. Connexion de la base de données

Créer un nouveau fichier "SRC / Main / Resources / Application.properties"

 printemps.datasource.initialize = falsèspring.datasource.url = jdbc: mysql: // localhost: 3306 / démospring.datasource.username = rootspring.datasource.password = printemps.datasource.driver-class-name = com.mysql.jdbc.Diver

La structure complète est:

5. Effet de fonctionnement

Entrez "http: // localhost: 8080 /" dans votre navigateur

Ajouter des données:

Enregistrer les nouvelles données:

Modifier les données:

Supprimer les données:

Supprimer l'effet de l'achèvement:

Code: https://github.com/carter659/spring-boot-04.git

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.