By GokiSoft.com|
10:56 06/03/2021|
Spring MVC
[Share Code] Hướng dẫn tại Resfull API - Spring MVC - Quản lý sinh viên - Spring MVC Res API - Full Source Code
[Share Code] Hướng dẫn tại Resfull API - Spring MVC - Quản lý sinh viên - Spring MVC Res API
Backend:
#persistence.xml
<?xml version="1.0" encoding="UTF-8"?>
<persistence version="2.1" xmlns="http://xmlns.jcp.org/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd">
<persistence-unit name="StudentMgrPU" transaction-type="RESOURCE_LOCAL">
<provider>org.eclipse.persistence.jpa.PersistenceProvider</provider>
<class>aptech.entity.Student</class>
<properties>
<property name="javax.persistence.jdbc.url" value="jdbc:mysql://localhost:3306/student_management?serverTimezone=UTC"/>
<property name="javax.persistence.jdbc.user" value="root"/>
<property name="javax.persistence.jdbc.driver" value="com.mysql.jdbc.Driver"/>
<property name="javax.persistence.jdbc.password" value=""/>
</properties>
</persistence-unit>
</persistence>#StudentController.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package aptech.controller;
import aptech.entity.Student;
import aptech.model.ObjectMessage;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Map;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
import javax.persistence.Query;
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;
/**
*
* @author DiepTV
*/
@RestController
@RequestMapping(value = "/student")
public class StudentController {
@RequestMapping(value = "/list", method = RequestMethod.GET, produces = "application/json")
public List<Student> list() {
//Ket noi toi database
EntityManagerFactory factory = Persistence.createEntityManagerFactory("StudentMgrPU");
EntityManager em = factory.createEntityManager();
Query q = em.createNamedQuery("Student.findAll", Student.class);
return q.getResultList();
}
@RequestMapping(value = "/find", method = RequestMethod.POST, produces = "application/json")
public Student findStudent(@RequestParam Map<String, String> form) throws ParseException {
//Error: trong truong hop -> rollno da ton tai.
String rollno = form.get("rollno");
//Ket noi toi database
EntityManagerFactory factory = Persistence.createEntityManagerFactory("StudentMgrPU");
EntityManager em = factory.createEntityManager();
Student stdFind = em.find(Student.class, rollno);
return stdFind;
}
@RequestMapping(value = "/delete", method = RequestMethod.POST, produces = "application/json")
public ObjectMessage deleteStudent(@RequestParam Map<String, String> form) throws ParseException {
//Error: trong truong hop -> rollno da ton tai.
String rollno = form.get("rollno");
//Ket noi toi database
EntityManagerFactory factory = Persistence.createEntityManagerFactory("StudentMgrPU");
EntityManager em = factory.createEntityManager();
Student stdFind = em.find(Student.class, rollno);
if(stdFind != null) {
em.getTransaction().begin();
em.remove(stdFind);
em.getTransaction().commit();
return new ObjectMessage(1, "Delete student successfully!!!");
}
return new ObjectMessage(0, "Failed: rollNo not exist");
}
/**
* {
* status: 0 (failed), 1 (success)
* message: noi dung thong bao.
* }
* @param form
* @return
* @throws ParseException
*/
@RequestMapping(value = "/create", method = RequestMethod.POST, produces = "application/json")
public ObjectMessage addStudent(@RequestParam Map<String, String> form) throws ParseException {
//Error: trong truong hop -> rollno da ton tai.
String rollno = form.get("rollno");
String fullname = form.get("fullname");
String email = form.get("email");
String address = form.get("address");
String birthday = form.get("birthday");
//convert birthday string to date
Date birthdayDate = new SimpleDateFormat("yyyy-mm-dd").parse(birthday);
Student std = new Student();
std.setRollno(rollno);
std.setFullname(fullname);
std.setBirthday(birthdayDate);
std.setAddress(address);
std.setEmail(email);
//Ket noi toi database
EntityManagerFactory factory = Persistence.createEntityManagerFactory("StudentMgrPU");
EntityManager em = factory.createEntityManager();
Student stdFind = em.find(Student.class, rollno);
if(stdFind != null) {
return new ObjectMessage(0, "Failed: rollno exist!!!");
}
em.getTransaction().begin();
em.persist(std);
em.getTransaction().commit();
return new ObjectMessage(1, "Add new student successfully!!!");
}
@RequestMapping(value = "/update", method = RequestMethod.POST, produces = "application/json")
public ObjectMessage updateStudent(@RequestParam Map<String, String> form) throws ParseException {
//Error: trong truong hop -> rollno da ton tai.
String rollno = form.get("rollno");
String fullname = form.get("fullname");
String email = form.get("email");
String address = form.get("address");
String birthday = form.get("birthday");
//convert birthday string to date
Date birthdayDate = new SimpleDateFormat("yyyy-mm-dd").parse(birthday);
//Ket noi toi database
EntityManagerFactory factory = Persistence.createEntityManagerFactory("StudentMgrPU");
EntityManager em = factory.createEntityManager();
Student stdFind = em.find(Student.class, rollno);
if(stdFind != null) {
em.getTransaction().begin();
stdFind.setFullname(fullname);
stdFind.setBirthday(birthdayDate);
stdFind.setAddress(address);
stdFind.setEmail(email);
em.getTransaction().commit();
return new ObjectMessage(1, "Update student successfully!!!");
}
return new ObjectMessage(0, "Failed: rollno not exist!!!");
}
}
#TestController.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package aptech.controller;
import aptech.model.Test;
import java.util.ArrayList;
import java.util.List;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
/**
*
* @author DiepTV
*/
@EnableWebMvc
@RestController
@RequestMapping(value = "/test")
public class TestController {
@RequestMapping(value = "/message", method = RequestMethod.GET)
public String showMessage() {
return "Hello Worlds!!!";
}
@RequestMapping(value = "/create", method = RequestMethod.GET, produces = "application/json")
public Test createTestObject() {
Test t = new Test("Test", "OKOK");
return t;
}
@RequestMapping(value = "/list", method = RequestMethod.GET, produces = "application/json")
public List<Test> createTestList() {
List<Test> list = new ArrayList<>();
list.add(new Test("A", "ABC"));
list.add(new Test("B", "ABC"));
list.add(new Test("C", "ABC"));
list.add(new Test("D", "ABC"));
list.add(new Test("E", "ABC"));
return list;
}
}
#Student.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package aptech.entity;
import java.io.Serializable;
import java.util.Date;
import javax.persistence.Basic;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.NamedQueries;
import javax.persistence.NamedQuery;
import javax.persistence.Table;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import javax.xml.bind.annotation.XmlRootElement;
/**
*
* @author DiepTV
*/
@Entity
@Table(name = "student")
@XmlRootElement
@NamedQueries({
@NamedQuery(name = "Student.findAll", query = "SELECT s FROM Student s")
, @NamedQuery(name = "Student.findByRollno", query = "SELECT s FROM Student s WHERE s.rollno = :rollno")
, @NamedQuery(name = "Student.findByFullname", query = "SELECT s FROM Student s WHERE s.fullname = :fullname")
, @NamedQuery(name = "Student.findByBirthday", query = "SELECT s FROM Student s WHERE s.birthday = :birthday")
, @NamedQuery(name = "Student.findByEmail", query = "SELECT s FROM Student s WHERE s.email = :email")
, @NamedQuery(name = "Student.findByAddress", query = "SELECT s FROM Student s WHERE s.address = :address")})
public class Student implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@Basic(optional = false)
@NotNull
@Size(min = 1, max = 50)
@Column(name = "rollno")
private String rollno;
@Basic(optional = false)
@NotNull
@Size(min = 1, max = 50)
@Column(name = "fullname")
private String fullname;
@Column(name = "birthday")
@Temporal(TemporalType.DATE)
private Date birthday;
// @Pattern(regexp="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", message="Invalid email")//if the field contains email address consider using this annotation to enforce field validation
@Size(max = 200)
@Column(name = "email")
private String email;
@Size(max = 200)
@Column(name = "address")
private String address;
public Student() {
}
public Student(String rollno) {
this.rollno = rollno;
}
public Student(String rollno, String fullname) {
this.rollno = rollno;
this.fullname = fullname;
}
public String getRollno() {
return rollno;
}
public void setRollno(String rollno) {
this.rollno = rollno;
}
public String getFullname() {
return fullname;
}
public void setFullname(String fullname) {
this.fullname = fullname;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public int hashCode() {
int hash = 0;
hash += (rollno != null ? rollno.hashCode() : 0);
return hash;
}
@Override
public boolean equals(Object object) {
// TODO: Warning - this method won't work in the case the id fields are not set
if (!(object instanceof Student)) {
return false;
}
Student other = (Student) object;
if ((this.rollno == null && other.rollno != null) || (this.rollno != null && !this.rollno.equals(other.rollno))) {
return false;
}
return true;
}
@Override
public String toString() {
return "aptech.entity.Student[ rollno=" + rollno + " ]";
}
}
#ObjectMessage.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package aptech.model;
/**
*
* @author DiepTV
*/
public class ObjectMessage {
/**
* status: 0 -> xu ly failed
* status: 1 -> thanh cong
*/
int status;
String message;
public ObjectMessage() {
}
public ObjectMessage(int status, String message) {
this.status = status;
this.message = message;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
#StudentModel.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package aptech.model;
/**
*
* @author DiepTV
*/
public class StudentModel {
String rollno, fullname, birthday, email, address;
public StudentModel() {
}
public StudentModel(String rollno, String fullname, String birthday, String email, String address) {
this.rollno = rollno;
this.fullname = fullname;
this.birthday = birthday;
this.email = email;
this.address = address;
}
public String getRollno() {
return rollno;
}
public void setRollno(String rollno) {
this.rollno = rollno;
}
public String getFullname() {
return fullname;
}
public void setFullname(String fullname) {
this.fullname = fullname;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
#Test.java
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package aptech.model;
import java.io.Serializable;
/**
*
* @author DiepTV
*/
public class Test implements Serializable{
String name, result;
public Test() {
}
public Test(String name, String result) {
this.name = name;
this.result = result;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
}
Frontend:
#add.html
<!DOCTYPE html>
<html>
<head>
<title>Add New Student - Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="student.js"></script>
</head>
<body>
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-info navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-light" href="student.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Add Student</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Contact Us</a>
</li>
</ul>
</nav>
<div class="container" style="margin-top: 15px;">
<div class="card">
<div class="card-header" style="font-weight: bold;">
Input Student's Detail Information
</div>
<div class="card-body">
<form method="post" onsubmit="return submitDataStudent();">
<div class="form-group">
<label for="rollno">RollNo: <font color="red">*</font></label>
<input required="true" type="text" name="rollno" class="form-control" id="rollno" pattern="[a-zA-Z0-9]{3,20}">
</div>
<div class="form-group">
<label for="fname">Full Name: <font color="red">*</font></label>
<input required="true" type="text" name="fullname" class="form-control" id="fname" minlength="6">
</div>
<div class="form-group">
<label for="birthday">Birthday: <font color="red">*</font></label>
<input required="true" type="date" name="birthday" class="form-control" id="birthday">
</div>
<div class="form-group">
<label for="email">Email: <font color="red">*</font></label>
<input required="true" type="email" name="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" name="address" class="form-control" id="address">
</div>
<button class="btn btn-success">Save</button>
<button type="reset" class="btn btn-danger">Reset</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
var rollno = getParameterByName('rollno')
if(rollno != null && rollno != '') {
findStudent(rollno)
}
})
</script>
</body>
</html>#config.js
// DOMAIN
var DOMAIN = 'http://localhost:8080/student-management'
// API TEST
var API_TEST_MESSAGE = DOMAIN + '/test/message'
var API_TEST_LIST = DOMAIN + '/test/list'
var API_TEST_CREATE = DOMAIN + '/test/create'
// API Student
var API_STUDENT_LIST = DOMAIN + '/student/list'
var API_STUDENT_CREATE = DOMAIN + '/student/create'
var API_STUDENT_UPDATE = DOMAIN + '/student/update'
var API_STUDENT_DELETE = DOMAIN + '/student/delete'
var API_STUDENT_FIND = DOMAIN + '/student/find'#guideline.txt
Nội dung kiến thức:
- API Resful Spring MVC
Xậy dựng 1 website theo yêu cầu sau:
- Server Side:
API: /student
- /list => Trả về danh sách sinh viên -> GET
- /add => Thêm 1 sinh viên mới -> POST
- /delete => Xóa sinh viên -> POST
- /update => Sửa thông tin 1 sinh viên -> POST
DB: student_management
Student
rollno
fullname
birthday
email
address
- Client Side:
Website => bootstrap/jquery => Phát triển dự án.
Mobile: Android/iOS -> API
Bước để xấy dựng 1 dự:
B1. Xây dựng dự án Server Side:
- Tạo 1 API Resfull TEST
- Student
- list
- them
- sua
- xoa
- Tao database
create table Student (
rollno varchar(50) primary key,
fullname varchar(50) not null,
birthday date,
email varchar(200),
address varchar(200)
)
B2. Client Side:#student.html
<!DOCTYPE html>
<html>
<head>
<title>Student List Management - Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="student.js"></script>
</head>
<body>
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-info navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-light" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="add.html">Add Student</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Contact Us</a>
</li>
</ul>
</nav>
<div class="container" style="margin-top: 15px;">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>No</th>
<th>RollNo</th>
<th>Full Name</th>
<th>Birthday</th>
<th>Email</th>
<th>Address</th>
<th width="50"></th>
<th width="50"></th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function() {
showStudentList()
})
</script>
</body>
</html>#student.js
function showStudentList() {
$.get(API_STUDENT_LIST, function(data) {
console.log(data)
$('#result').empty()
for (var i = 0; i < data.length; i++) {
$('#result').append(`<tr>
<td>${i + 1}</td>
<td>${data[i].rollno}</td>
<td>${data[i].fullname}</td>
<td>${convertIntToDate(data[i].birthday)}</td>
<td>${data[i].email}</td>
<td>${data[i].address}</td>
<td><a href="add.html?rollno=${data[i].rollno}"><button class="btn btn-warning">Edit</button></a></td>
<td><button class="btn btn-danger" onclick="deleteStudent('${data[i].rollno}')">Delete</button></td>
</tr>`)
}
})
}
function deleteStudent(rollno) {
var option = confirm('Do you want to delete this student?')
if(!option) return;
$.post(API_STUDENT_DELETE, {
'rollno': rollno
}, function(data) {
alert(data.message)
if(data.status == 0) {
return;
}
location.reload()
})
}
/**
std = {
'rollno': 'R003',
'fullname': 'TRAN VAN C',
'email': 'c@gmail.com',
'address': 'Ninh Binh',
'birthday': '1999-02-06'
}
-> Hoat dong nhu submit form -> input form (quan ly sinh vien)
*/
function saveStudent(api_name, std) {
$.post(api_name, {
'rollno': std.rollno,
'fullname': std.fullname,
'email': std.email,
'address': std.address,
'birthday': std.birthday
}, function(data) {
//Du lieu tra ve sau khi add sinh vien xong
// console.log(data)
// alert(data)
alert(data.message)
if(data.status == 0) {
return;
}
location.reload()
})
}
function submitDataStudent() {
var rollno = getParameterByName('rollno')
var std = {
'rollno': $('[name=rollno]').val(),
'fullname': $('[name=fullname]').val(),
'email': $('[name=email]').val(),
'address': $('[name=address]').val(),
'birthday': $('[name=birthday]').val()
}
console.log(std)
if(rollno != null && rollno != "") {
//update data
saveStudent(API_STUDENT_UPDATE, std)
} else {
//insert data
saveStudent(API_STUDENT_CREATE, std)
}
return false;
}
function findStudent(rollNo) {
$.post(API_STUDENT_FIND, {
'rollno': rollNo,
}, function(std) {
if(std == null) {
alert('Not found by rollNo')
return
}
console.log(std)
$('[name=rollno]').val(std.rollno)
$('[name=fullname]').val(std.fullname)
$('[name=email]').val(std.email)
$('[name=birthday]').val(convertIntToDate(std.birthday))
$('[name=address]').val(std.address)
})
}
//lay rollno tu URL bang js -> goi toi chuc nang tim sinh vien.
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function convertIntToDate(number) {
var d = new Date(number)
var month = d.getMonth() + 1
var day = d.getDate()
if(month < 10) {
month = '0' + month
}
if(day < 10) {
day = '0' + day
}
str = d.getFullYear() + '-' + month + "-" + day
return str;
}#test.html
<!DOCTYPE html>
<html>
<head>
<title>API - TEST</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div class="container">
<button class="btn btn-warning" onclick="showMessage()">Show Message</button>
<button class="btn btn-success" onclick="showStudent()">Show Student</button>
<button class="btn btn-danger" onclick="showStudentList()">Show Student List</button>
<p id="message_id"></p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Result</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</div>
</body>
</html>#test.js
function showMessage() {
$.get(API_TEST_MESSAGE, function(data) {
console.log(data)
$('#message_id').html(data)
})
}
function showStudent() {
$.get(API_TEST_CREATE, function(data) {
console.log(data)
$('#result').append(`<tr>
<td>${data.name}</td>
<td>${data.result}</td>
</tr>`)
})
}
function showStudentList() {
$.get(API_TEST_LIST, function(data) {
console.log(data)
$('#result').empty()
for (var i = 0; i < data.length; i++) {
$('#result').append(`<tr>
<td>${data[i].name}</td>
<td>${data[i].result}</td>
</tr>`)
}
})
}
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
