Để pass được cross domain: Enable Cross Domain (Chrome + Côc Cốc)

Để Test API có thể sử dụng postman

#Server Side:

#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 java.util.List;
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.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();
    }
}

#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 + " ]";
    }
    
}

#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;
    }
    
    
}

#Client Side:

#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'

#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>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="student.js"></script>
</head>
<body>
	<div class="container">
		<button class="btn btn-danger" onclick="showStudentList()">Show Student List</button>
		<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>
				</tr>
			</thead>
			<tbody id="result">
				
			</tbody>
		</table>
	</div>
</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>${data[i].birthday}</td>
					<td>${data[i].email}</td>
					<td>${data[i].address}</td>
				</tr>`)
		}
	})
}

/**
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 addStudent(std) {
	$.post(API_STUDENT_CREATE, {
		'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)
	})
}

#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>`)
		}
	})
}