Framework Version
Front End React Js 18.3.1
Java Spring Boot Spring boot 3.x, 21
Back-End Express JS ?
Data SQL Server 2022
Suport Folder in Update
Tailwind, AntDesign, React Router Dom, Icon: https://iconify.design/ Front End
Lombok, OAuth2, Map Struct, JPA , Hibernate,... Back End
Back End
Back End
IDE
VS code 1.91.1
Intellij
SQL Server Management Studio 22
Mock Project - React Coding Convention
File and Folder Sử dụng React bản mới nhất
Tên File và Folder
Tên file, folder, component viết
hoa mỗi chữa cái đầu của từ
Mỗi trang Page thì đặt name+page
Với mỗi trang page nên đặt tên là tên
của page + chữ page phía sau
Các Page sẽ được bỏ trong folder Page và trong folder Page sẽ có các folder của từng page lớn thí dụ Home, Acc
Những Page Sẽ được tạo ở Folder Page và
trong folder page sẽ chia thành 2 folder
AdminPages và ClientPages tự bỏ vào đúng
phần của giao diện -> Trong 2 folder vừa đề
cập tạo 1 folder là tên của page đang làm
trong folder tiếp theo đặt tên giao diện phải
có chữ page
Các tài nguyên file có định dạng khác sẽ bỏ trong folder Assets thí dụ file png, .doc,..
Các tài nguyên như logo, tài liệu đọc
hay nhưng gì không phải file js sẽ bỏ
vào folder Assets
Các tài nguyên như logo, tài liệu đọc
hay nhưng gì không phải file js sẽ bỏ
vào folder Assets
Folder Components sẽ chưa các components của từng page
Trong folder components sẽ tạo ra
folder trùng với tên folder bên phía
page để xác định components nào
của page nào và nhưng components
dùng chung sẽ bỏ trong folder
SharedComponents
Folder Routes sẽ chứa các đường dẫn của từng page tương ứng với từng folder bên trong folder Pages
Layout sẽ được bỏ trong folder layout
Layout của các page sẽ bỏ trong
folder Layout và tạo folder tương
ứng với layout, component của
layout sẽ được bỏ trong
SharedComponents
Unltis sẽ là folder chứa các hàm mà sử dụng để thực hiện chức năng nào đó chung
Cấu hình Redux sẽ được bỏ trong folder Redux
File css và scss
Trong mỗi Folder của page thì
tạo thêm 1 folder css nếu
dùng css trong đó sẽ chứa
các file css của các page con
Trong mỗi Folder của page thì
tạo thêm 1 folder css nếu
dùng css trong đó sẽ chứa
các file css của các page con
Biến và Hàm
Các biến sử dụng chung sẽ được để ở bên trong redux
Sử dụng lowCamelCase khi đặt tên
currentUser biến bình thường, hàm, hằng số hằng, biến và hàm, UpperCamelCas
CurrentUser đặt cho class (cả chữ cái đầu tiên viết hoa) khi đặ
CURRENT_USER Biến tĩnh và toàn cục tên lớp và UPPER_SNAKE_CASE
khi đặt tên biến toàn cục hoặc biến
tĩnh. Điều này sẽ giúp bạn dễ dàng
phân biệt giữa các biến đơn giản,
hàm, lớp yêu cầu khởi tạo và các
biến được khai báo ở phạm vi mô-
đun toàn cục.
Công cụ hỗ trợ
Css: Tailwind, AntDesign
Icon: React Icon, AntDesign, https://iconify.design/
Modal: AntDesign, React Modal
Lấy Api: axios
IDE: Visua Studio Code
g React bản mới nhất
Cấu Hình Tổng quát
được tạo ở Folder Page và
age sẽ chia thành 2 folder
ClientPages tự bỏ vào đúng
ện -> Trong 2 folder vừa đề
là tên của page đang làm
theo đặt tên giao diện phải
ó chữ page
Trong Folder Route chứa các file route
tương ứng với mỗi folder trong pages hình
1-> trong mỗi file route cấu hình theo mảng
và export hình 2 -> sau khi có mảng thì gọi
nó bên file index trong folder routes hình 3 -
> gọi route cấu hình ở file app.js hình 4
ng lowCamelCase khi đặt tên
iến và hàm, UpperCamelCase
ữ cái đầu tiên viết hoa) khi đặt
p và UPPER_SNAKE_CASE
t tên biến toàn cục hoặc biến
Điều này sẽ giúp bạn dễ dàng
biệt giữa các biến đơn giản,
lớp yêu cầu khởi tạo và các
ược khai báo ở phạm vi mô-
đun toàn cục.
ng Folder Route chứa các file route
ứng với mỗi folder trong pages hình
ng mỗi file route cấu hình theo mảng
ort hình 2 -> sau khi có mảng thì gọi
file index trong folder routes hình 3 -
i route cấu hình ở file app.js hình 4
Mock Project - NodeJs Coding Convention
File and Folder Cấu Hình Tổng
Tên File và Folder
Đặt theo kiểu camelCase.
Các Thư Mục trong Source Code
src/: Chứa mã nguồn chính của dự án.
controllers/: Chứa các controller.
models/: Chứa các model.
routes/: Chứa các file định tuyến.
services/: Chứa các service.
middlewares/: Chứa các middleware.
config/: Chứa các cấu hình.
utils/: Chứa các tiện ích chung.
tests/: Chứa các test case.
Tên Biến, Tên Method
Biến: Đặt theo camelCase. Ví dụ: userName.
Method: Đặt theo camelCase. Ví dụ: getUserName().
Tạo một thư mục common/ chứa các file định nghĩa hằng số và biến môi trường
Viết Comment
Line Comment: Đặt trên dòng cần chú thích, bắt đầu bằng '//'
Khối try catch
Block Comment: Đặt trên khối code cần chú thích, bắt đầu và kết thúc bằng '/* */'
Method Comment: Sử dụng JSDoc để mô tả function/method.
Framework và Thư Viện
Framework chính: Express.js
Thư viện:
Database: mssql
Authentication: JWT
IDE
IDE: Visual Studio Code (VSCode)
Phiên bản: Sử dụng phiên bản mới nhất
u Hình Tổng quát
Mock Project - Java Coding Convention
package model.dao; Tên package phải viết bằng chữ thường
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
Phần import các class của java
import util.Constant; được đặt ở cùng nhóm với nhau
import util.Util; và đặt ngay sau khai báo package
import model.bean.Departments;
import model.bean.Designation;
import model.bean.EmpStatus;
import model.bean.EmployeeDetails;
import model.bean.Establishment;
import model.bean.Functions; Phần import các class của mình tự viết thì
import model.form.EmployeeDetailsForm; để ở sau cùng trong vùng import
/**
* EmploymentDetailsDAO
*
* Version 1.0
* Tạo comment cho phần mô tả class tương tự
* Date: 12-11-2013 như thế này
*
* Copyright Lưu ý: Date ở đây được định dạng theo format
* là DD-MM-YYYY
* Modification Logs:
* DATE AUTHOR DESCRIPTION
* -----------------------------------------------------------------------
* 12-11-2013 HuyNT2 Create
*/
public class EmploymentDetailsDAO extends BaseDAO {
Connection con;
PreparedStatement preState; Tên class phải bắt đầu bằng chữ Hoa, các
ResultSet rs; từ nối cũng viết hoa chữ cái đầu
Tên class phải bắt đầu bằng chữ Hoa, các
từ nối cũng viết hoa chữ cái đầu
/**
* get data for Job Details page
* @param establishmentCode
* @return
* @throws DAOException
*/
public EmployeeDetailsForm getDataForUpdateJobDetails(String establishmentCode) throws DAOException {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER, Constant.PASSWORD);
EmployeeDetailsForm form = new EmployeeDetailsForm();
try {
//select data form EmployeeDetails Tạo comment cho hàm tương tự như thế
này
preState = con.prepareStatement("SELECT establishmentCode, jdEmpStatus, jdDoj, jdFunctions, "+
preState.setString(1, establishmentCode);
rs = preState.executeQuery(); "get data for Job Details page" là ví dụ về
nội dung mô tả nhiệm vụ của hàm
while(rs.next()) {
form.setEstablishmentCode(rs.getString(1));
form.setJdEmpStatus(rs.getString(2));
}
//select data from EmpStatus
ArrayList<EmpStatus> arrayEmpStatus = new ArrayList<EmpStatus>(); Comment cho 1 đoạn code thì có 2 dấu /
EmpStatus empStatus = null; ở trước và đặt ngay phía trên dòng code
preState = con.prepareStatement("SELECT empStatusId, empStatusNameđầuFROM
tiên EmpStatus");
của đoạn code cần comment
rs = preState.executeQuery();
while(rs.next()) {
empStatus = new EmpStatus();
empStatus.setEmpStatusId(rs.getInt(1));
empStatus.setEmpStatusName(rs.getString(2));
arrayEmpStatus.add(empStatus);
}
} catch (SQLException e) {
throw new DAOException("Method getDataForUpdateJobDetails error.");
Đối với khối try catch thì tuân thủ theo convention:
} finally { try {
closeConnect(con); // TODO
} } catch (ABCException e) {
return form; // TODO
} } finally {
// TODO
}
Ví dụ như sau là KHÔNG ĐÚNG:
try
// TODO
} catch (ABCException e) {
// TODO
} finally {
// TODO
/** }
* check existence of employee
* @param establishmentCode Ví dụ như sau là KHÔNG ĐÚNG:
* @return try
* @throws DAOException {
*/ // TODO
public boolean checkEmployeeDetailsIsExist(String establishmentCode) throws DAOException
} catch (ABCException e) {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING,
{ Constant.USER, Constant.PASSWORD);
// TODO
try {
}
preState = con.prepareStatement("SELECT establishmentCode FROM EmployeeDetails " +
finally {
WHERE establishmentCode = ?);
// TODO
}
preState.setString(1, establishmentCode);
rs = preState.executeQuery();
if(rs.next()) {
return true;
}
} catch (SQLException e) {
throw new DAOException("Method checkEmployeeDetailsIsExist error.");
} finally {
closeConnect(con);
}
return false;
}
Tên hàm phải bắt đầu bằng chữ thường,
/** các từ nối tiếp theo sẽ viết hoa chữ cái
* insert data for employee đầu
* @param employee
* @throws DAOException
*/
public void insertJobDetails(EmployeeDetails employee) throws DAOException {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER, Constant.PASSWORD);
try {
preState = con.prepareStatement("INSERT INTO EmployeeDetails VALUES(?, ?, ?, ?, ?, ?, NULL, ?, ?) ");
Tên biến phải bắt đầu bằng chữ thường,
preState.setInt(1, employee.getEstablishmentCode()); các từ nối tiếp theo sẽ viết hoa chữ cái
preState.setInt(2, employee.getJdEmpStatus()); đầu
preState.setDate(3, employee.getJdDoj());
Tên biến phải bắt đầu bằng chữ thường,
các từ nối tiếp theo sẽ viết hoa chữ cái
đầu
preState.setInt(4, employee.getJdFunctions());
preState.setInt(5, employee.getJdDept());
preState.setInt(6, employee.getJdDesignation());
preState.setString(7, employee.getNdPFnum());
preState.setString(8, employee.getNdEPSnum());
preState.executeUpdate();
} catch (SQLException e) { Không được dùng tab để canh biên mà
throw new DAOException("Method insertJobDetails error."); phải thay thế 1 tab bằng 4 space
} finally {
closeConnect(con);
}
}
/**
* get data for Update to Details page
* @param establishmentCode
* @return
* @throws DAOException Khối lệnh while có convention như sau:
*/
while throws
public EmployeeDetailsForm getDataForUpdateReportToDetails(String establishmentCode) (điều kiện) {
DAOException {
// TODO Constant.PASSWORD);
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER,
EmployeeDetailsForm form = new EmployeeDetailsForm(); }
try { Ví dụ như sau là KHÔNG ĐÚNG:
preState = con.prepareStatement("SELECT rdEmpCode FROM EmployeeDetails
while (điều kiện)WHERE establishmentCode = ?"
preState.setInt(1, Integer.parseInt(establishmentCode)); {
rs = preState.executeQuery(); // TODO
while(rs.next()) { }
form.setRdEmpCode(rs.getString(1));
}
ArrayList<Establishment> arrayEstablishment = new ArrayList<Establishment>();
Establishment establishment = null;
preState = con.prepareStatement("SELECT establishmentCode, firstName FROM Establishment");
rs = preState.executeQuery();
while(rs.next()) {
establishment = new Establishment();
establishment.setEstablishmentCode(rs.getInt(1));
establishment.setFirstName(rs.getString(2));
establishment.setDisplayName(rs.getString(2) + " - " + rs.getInt(1));
arrayEstablishment.add(establishment);
Comment như thế này là KHÔNG Đ
về nguyên tắc comment phải có tác
cho 1 hay nhiều dòng code đứng ng
dòng Comment.
} Comment như thế này là KHÔNG Đ
form.setArrayEstablishment(arrayEstablishment); về nguyên tắc comment phải có tác
cho 1 hay nhiều dòng code đứng ng
} catch (SQLException e) { dòng Comment.
throw new DAOException("Method getDataForUpdateReportToDetails error.");
} finally { Do đó, trong trường hợp này dấu }
closeConnect(con); dòng trên không được dính với com
}
ở dòng dưới. Tức là phải có 1 dòng
giữa dấu } (ở dòng trên) với dòng
return form;
}
/**
* insert data of salary for employee
* @param fr
* @throws DAOException
*/
public void insertSalaryDetails(EmployeeDetailsForm fr) throws DAOException {
con = connectDb(Constant.DRIVER, Constant.CONNECT_STRING, Constant.USER, Constant.PASSWORD);
try {
preState = con.prepareStatement("INSERT INTO Salary VALUES(?, ?, ?, ?)");
preState.setString(1, fr.getEstablishmentCode());
preState.setDate(2, Util.convertStringToSqlDate(fr.getSdDate()));
if("".equals(fr.getSdFixedCTC())) {
preState.setString(3, null);
} else {
preState.setInt(3, Integer.parseInt(fr.getSdFixedCTC()));
} Khối lệnh if có convention như sau:
if (điều kiện) {
preState.executeUpdate(); // TODO
} else {
} catch (SQLException e) { // TODO
throw new DAOException("Method insertSalaryDetails error."); }
} finally {
closeConnect(con); Ví dụ như sau là KHÔNG ĐÚNG:
} if (điều kiện)
} {
} // TODO
}
else {
// TODO
}
Ví dụ như sau là KHÔNG ĐÚNG:
if (điều kiện)
{
// TODO
}
else {
// TODO
}
Variable : userAddress
Method: getUserAddress
File and folder: userController
framework: spring boot 3.3.2
jdk phiên bản 21
ide inteliji phiên bản 2014.1.4
phiên bản java 11
maven https://drive.google.com/drive/folders/1t_ipYM4IfxSUe2xtSCCwWMH8NPc5pLkN?usp=
yaml
Biến common: SCREAMING_SNAKE_CASE
tên bảng + tên cột : snake_case
response entity để trả về frontend
Cấu trúc folder dự án
Folder Controller sẽ chứa những file controller của từng service.
Folder entity sẽ dùng để chứa các class được ánh xạ với các table trong sql
Folder repository chứa các interface được kế thừa lại JpaRepository để tương tác trực tiếp vớ
Mỗi repository sẽ tương ứng với 1 entity
Folder service để chứa các folder của từng service riêng
Từng folder service sẽ chứa 1 interface để định nghĩa các phương thức và 1 cla
Folder dto sẽ chứa 2 folder con là request
Trong mỗi folder request, response thì sẽ chứa các lớp tương ứng với đối tượng được
Folder commons dùng để lưu các enum để lưu trữ hằn
Folder configuration để chứa các class cấu hình chung
Folder base_exception chứa các lỗi trong hệ
Folder mapper để chứa các interface để chu
hì
class tương tự
ạng theo format
Y
a, các
u
a, các
u
m tương tự như thế
y
ails page" là ví dụ về
iệm vụ của hàm
ạn code thì có 2 dấu /
y phía trên dòng code
n code cần comment
mentCode = ?);
thường,
chữ cái
NULL, ?, ?) ");
chữ thường,
hoa chữ cái
chữ thường,
hoa chữ cái
để canh biên mà
ằng 4 space
ntion như sau:
ĐÚNG:
stablishmentCode = ?");
ư thế này là KHÔNG ĐÚNG,
c comment phải có tác dụng
ều dòng code đứng ngay sau
dòng Comment.
ư thế này là KHÔNG ĐÚNG,
c comment phải có tác dụng
ều dòng code đứng ngay sau
dòng Comment.
g trường hợp này dấu } của
ông được dính với comment
Tức là phải có 1 dòng trắng
(ở dòng trên) với dòng /**
n như sau:
G ĐÚNG:
G ĐÚNG:
MH8NPc5pLkN?usp=sharing
để tương tác trực tiếp với cơ sở dữ liệu
entity
service riêng
các phương thức và 1 class implement lại interface và hiện thực các phương thức đó
ứa 2 folder con là request và response
ứng với đối tượng được gửi từ frontend lên hoặc hệ thống trả về đổi với response
các enum để lưu trữ hằng số
các class cấu hình chung cho hệ thống
ption chứa các lỗi trong hệ thống có thể bắt được.
hứa các interface để chuyển đổi giữa dto và entity
