STS上使用spring data jpa对数据库单表进行增删改查(2)

来源：互联网发布：python bytes函数编辑：程序博客网时间：2024/05/21 08:59

代码存放的位置

（一）后台的方法

com.b505.bean.User.java

package com.b505.bean;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.Id;import javax.persistence.Table;/** * @Name: * @Description:  user 实体类 * @Author: ***     * @Version: V1.00 （版本号） * @Create Date: 2017年5月5日下午9:29:18 * @Parameters:  * @Return:  */@Entity@Table(name="user")public class User {@Id//告诉系统id为主键@GeneratedValue//对主键提供生成策略private Integer id;@Column(name = "name")private String name;@Column(name = "age")private int age;@Column(name = "hobby")private String hobby;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getHobby() {return hobby;}public void setHobby(String hobby) {this.hobby = hobby;}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", age=" + age+ ", hobby=" + hobby + "]";}}

com.b505.dao.UserDao.java

package com.b505.dao;import org.springframework.data.jpa.repository.JpaRepository;import com.b505.bean.User;public interface UserDao extends JpaRepository<User, Integer> {/** * JpaRepository接口的 方法 * delete删除或批量删除 * findAll查询所用 * findOne查询单个 * save保存单个或保存批量 * saveAndFlush保存并刷新到数据库 * */}

com.b505.web.UserController.java

package com.b505.web;import java.util.List;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.RestController;import com.b505.bean.User;import com.b505.dao.UserDao;import com.fasterxml.jackson.core.sym.Name;/** * @Name: * @Description: user控制类 * @Author: ***     * @Version: V1.00 （版本号） * @Create Date: 2017年5月5日下午9:30:14 * @Parameters:  * @Return:  */@RestControllerpublic class UserController {@Autowiredprivate UserDao userDao;//删除    @RequestMapping(value ="/delete" ,method = RequestMethod.POST)    public  void weekdaylDelete(@RequestParam("id") Integer id){    System.out.println("删除执行");    userDao.delete(id);    }      //添加    @RequestMapping(value ="/add" ,method = RequestMethod.POST)    public void weekdayAdd(@RequestParam("name") String name,    @RequestParam("age") Integer age,@RequestParam("hobby") String hobby    ){    User user = new User();    user.setName(name);    user.setAge(age);    user.setHobby(hobby);    userDao.save(user);    }    //查询所有    @RequestMapping(value ="/getall" ,method = RequestMethod.GET)    public List<User> girlList(){    System.out.println("查询所有执行");        return  userDao.findAll();    }   //更改    @RequestMapping(value="/update",method = RequestMethod.POST)    public void  weekdayUpdate(@RequestParam("id") Integer id,@RequestParam("name") String name,    @RequestParam("age") Integer age,@RequestParam("hobby") String hobby)    {    User user =new User();    System.out.println("2");    user=userDao.findOne(id);    if(user==null)        System.out.println("1");    if(name!=null)user.setName(name);    //System.out.println(user.getName());if(age!= 0)user.setAge(age);if(hobby!=null)user.setHobby(hobby);userDao.save(user);        System.out.println("1");    }}

以上是页面后面运行的代码。比较基础这个还有前台的参与，所以我在印象笔记上只写了只有后台的代码，希望对你们有用spring Data JPA 这个是印象笔记的链接

下面是写的前台的东西，并与后面的数据连接起来

（二）view层，用户看见的。

1.先写一个html，在对这个文件进行优化。

index.html

<!DOCTYPE html><html lang="UTF-8" ng-app="myApp" ng-controller="myController"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/angular.min.js"></script>    <link href="css/directive_bind.css" rel="stylesheet" type="text/css" />    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">    <script src="js/service_http.js"></script></head><body><!--表格--><div class="box"><div class="portlet-title">    <div class="caption">        <img class="icon-reorder" src="tu/lantian.jpg" style="width:560px;height:80px"></img> </div></div><table class="table table-bordered" ng-style="myStyle">    <!-- ng-style 绑定myStyle属性，获取表格的css样式-->    <tr>        <td>姓名</td>        <td>年龄</td>        <td>爱好</td>        <td>操作</td>    </tr>    <tr ng-repeat="day in days" >        <td ng-class-even="'even'"> {{day.name}} </td>        <td>         {{day.age}}        </td>        <td>            {{day.hobby}}        </td>        <td>         <button class="delete" ng-click="removeDay(day.id)"><span class="glyphicon glyphicon-remove"></span>删除 </button>        <button class="update" ng-click="update()"><span class="glyphicon glyphicon-pencil"></span>编辑 </button>          <div  id="table1" ng-show='menuState1.show'>        <div class="portlet-title1">            <div class="caption">   <span class="glyphicon glyphicon-pencil"></span>编辑信息 </div>        </div>        <div class="content"  ng-init="name=day.name;age=day.age;hobby=day.hobby">            <span>姓名:</span> <input ng-model="name" type="text"  />        <br>            <span>年龄:</span> <input ng-model="age" type="text"  />        <br>            <span>爱好:</span> <input ng-model="hobby" class="hobby" type="text"  />        </div>         <input class="submit" ng-click="submit1(day.id,name,age,hobby)" type="button" value="修改" />    </div>        </td>    </tr></table>    <button ng-click="add()">添加人员信息</button>    <div  id="table1" ng-show='menuState.show'>        <div class="portlet-title1">            <div class="caption">                 <span class="glyphicon glyphicon-plus"></span> 添加信息 </div>        </div>        <div class="content" >            <span>姓名:</span> <input ng-model="name" type="text"  placeholder="请输入姓名" />        <br>            <span>年龄:</span> <input ng-model="age" type="text"  placeholder="请输入年龄" />        <br>            <span>爱好:</span> <input ng-model="hobby" class="hobby" type="text" placeholder="请输入爱好" />        </div>         <input class="submit" ng-click="submit(name,age,hobby)" type="button" value="提交" />    </div>           </div></body></html>

为这个页面进行了整理，使它更加美观，添加样式。

2.所以再建立一个css文件夹，里面创建了两个css文件

animate.css

.shrink-add, .shrink-remove {  -webkit-transition:all ease 2.5s;  -moz-transition:all ease 2.5s;  -o-transition:all ease 2.5s;  transition:all ease 2.5s;}.shrink,.shrink-add.shrink-add-active {  height:100px;}.start-class, .shrink-remove.shrink-remove-active {  height:200px;}

direction_bind.css

*{    font-family: "Microsoft YaHei UI";}.box{    width: 600px;margin: auto}.ng-cloak{    display: none;}.even{background-color:#eeeeee;}.rect{display:inline-block; height:40px; width:100px;}.table td {    padding: 8px;    line-height: 32px;    text-align: left;    vertical-align: top;    border-top: 1px solid #ddd;    border-left:1px solid #ddd;}.table-bordered {    border: 1px solid #ddd;   border-collapse: separate;  /*鏈夐噸鍙犵嚎*/}.table {    width: 100%;    margin-bottom: 20px;    max-width: 100%;    border-collapse: collapse;   /*涓鸿〃鏍艰缃悎骞惰竟妗嗘ā鍨�*/    border-spacing: 0;   /* 璁剧疆鐩搁偦鍗曞厓鏍肩殑杈规闂寸殑璺濈*/}.delete{    padding:6px;    border:none;    background: #eeeeee;    color: #333;}.message{    font-size: 12px;}/**/.portlet-title {    background-color: #35aa47;}.portlet-title {    margin-bottom: 0px;} .portlet-title {    padding: 8px 10px 8px 10px;    border-bottom: 1px solid #eee;    color: #fff !important;}#table1 {        width: 420px;    border: 1px solid gainsboro;}#table1 .portlet-title1{    background: #4b8df8;    color: #fff;    padding: 8px 10px 8px 10px;    width: 400px;}/*#table1 input{    padding:5px 30px;    border-color: #d5d5d5;    box-shadow: none;}*/#table1 .portlet-title1{    margin-bottom: 20px;}.content {    width:300px;margin: auto;    margin-bottom: 20px;}.content input{    margin-top: 15px;    padding: 5px 35px;}.submit{    padding: 10px 30px;    background: #4b8df8;    color: #ffffff; margin-left: 35%;    margin-bottom: 30px;    border: none;}

3.创建一个js文件夹

从网上下载这个angularJs.min.js 放入这个文件夹中

建立一个js文件

service_http.js

angular.module('myApp', []).  controller('myController', ['$scope', '$http',                              function($scope, $http) {   //初始化数据          $scope.name="";          $scope.age="";          $scope.hobby="";               $http.get('/getall')                .success(function(data, status, headers, config) {                  $scope.days = data;                   }).                    error(function(data, status, headers, config) {                       $scope.status = data;               });    $scope.menuState={show: false};    $scope.menuState1={show: false};        $scope.add = function(){        $scope.menuState.show=!$scope.menuState.show;    }    $scope.update = function(){        $scope.menuState1.show=!$scope.menuState1.show;    }    $scope.submit = function(name,age,hobby){    alert(name);    alert(age);    alert(hobby);        $scope.menuState={show: false};        $http.post('/add?name='+name+"&age="+age+"&hobby="+hobby)        .success(function(data,status,headers,config){            $scope.days =data;        }).error(function(data,status,headers,config){            alert("服务器错误");            $scope.status =data.msg;        })    }    $scope.submit1 = function(updateday,name,age,hobby){        alert(updateday);    alert(name);    alert(age);    alert(hobby);        $scope.menuState={show: false};        $http.post('/update?id='+updateday+'&name='+name+"&age="+age+"&hobby="+hobby)        .success(function(data,status,headers,config){            $scope.days =data;        }).error(function(data,status,headers,config){            alert("服务器错误");            $scope.status =data.msg;        })    }    $scope.days=[];    $scope.status = "";    $scope.removeDay = function(deleteDay){      $http.post('/delete?id='+deleteDay).        success(function(data, status, headers, config) {          $scope.days = data;        })        error(function(data, status, headers, config) {          $scope.status = data.msg;        });    };      $scope.resetDays = function(){      $scope.status = "";      $http.get('/reset/days')               .success(function(data, status, headers, config) {        $scope.days = data;      }).      error(function(data, status, headers, config) {        $scope.status = data;      });    };  }]);

这里的application.properties是存放连接数据库的方法的

阅读全文

1 0