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

代码存放的位置
   
    
    
    
  
 
（一）后台的方法
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;
	}
	
	
	@Override
	public 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: 
	 */
@RestController
public class UserController {
	
	@Autowired
	private 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 这个是印象笔记的链接

扫描二维码关注公众号，回复： 3396995 查看本文章

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

（二）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是存放连接数据库的方法的

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

猜你喜欢