Giới thiệu dự án

Hệ thống quản lý chấm công được phát triển bằng công nghệ Spring Boot cho backend và Vue.js cho frontend, cung cấp giải pháp quản lý nhân sự chuyên nghiệp với giao diện hiện đại và dễ sử dụng.

Công nghệ sử dụng

Backend - Spring Boot

Spring Boot là nền tảng phát triển ứng dụng Java nhanh chóng, dựa trên framework Spring. Nó đơn giản hóa quá trình khởi tạo và cấu hình ứng dụng Spring, cung cấp nhiều tính năng tiện ích như tự động cấu hình, Tomcat nhúng, cho phép nhà phát triển tập trung vào logic kinh doanh.

Đặc điểm nổi bật:

• Đơn giản hóa cấu hình: Spring Boot tự động cấu hình ứng dụng dựa trên các tệp quy ước và giá trị mặc định trên đường dẫn classpath.
• Container nhúng: Hỗ trợ nhúng nhiều container như Tomcat, Jetty, Undertow, cho phép đóng gói ứng dụng thành tệp JAR thực thi và chạy trực tiếp.
• Quản lý dependency tự động: Cơ chế quản lý dependency tự động, tự động引入 thư viện cần thiết dựa trên yêu cầu dự án.
• Giám sát và quản lý: Cung cấp nhiều tính năng giám sát và quản lý hiệu suất ứng dụng, kiểm tra tình trạng sức khỏe, xem thông tin môi trường.
• Testing tích hợp: Hỗ trợ testing tích hợp, dễ dàng thực hiện testing end-to-end.
• Cấu hình bên ngoài: Hỗ trợ external hóa cấu hình ứng dụng, sử dụng tệp thuộc tính, YAML, biến môi trường để quản lý cấu hình.

Backend - MyBatis

MyBatis là framework persistence layer dựa trên Java, áp dụng tư tưởng ORM để giải quyết vấn đề ánh xạ thực thể và cơ sở dữ liệu, đóng gói JDBC và che giấu chi tiết truy cập底层 JDBC API, cho phép hoàn thành thao tác persistence cơ sở dữ liệu mà không cần tương tác trực tiếp với JDBC API.

Frontend - Vue.js

Vue.js là framework JavaScript nguồn mở phổ biến, được sử dụng để xây dựng giao diện người dùng (UI) và ứng dụng trang đơn (SPA).

Đặc điểm nổi bật:

• Liên kết dữ liệu phản hồi: Vue sử dụng cách liên kết dữ liệu phản hồi, khi dữ liệu thay đổi, view sẽ tự động cập nhật, giúp nhà phát triển không cần thao tác DOM thủ công, tăng hiệu suất phát triển.
• Phát triển component hóa: Vue chia trang thành nhiều component, mỗi component là một đơn vị độc lập, có thể tái sử dụng, giúp code rõ ràng, cấu linh hoạt, dễ bảo trì và tái sử dụng.
• DOM ảo: Vue sử dụng công nghệ DOM ảo, so sánh sự khác biệt giữa cây DOM ảo, tối thiểu hóa thao tác DOM, tăng hiệu suất render trang, mang lại trải nghiệm người dùng mượt mà.
• Chỉ thị và plugin: Vue cung cấp nhiều chỉ thị (Directives) và plugin (Plugins) phong phú, dễ dàng mở rộng chức năng Vue, đáp ứng nhiều nhu cầu khác nhau.

Cơ sở dữ liệu - MySQL

MySQL là hệ thống quản lý cơ sở dữ liệu quan hệ nguồn mở, hỗ trợ nhiều storage engine như InnoDB, MyISAM, hỗ trợ ngôn ngữ SQL tiêu chuẩn, có độ tin cậy và ổn định cao, có thể xử lý lượng lớn dữ liệu và yêu cầu. Phù hợp với nhiều quy mô ứng dụng.

Môi trường phát triển

• Hệ điều hành: Windows, Linux (CentOS, Ubuntu)
• JDK: JDK 1.8
• Middleware: Tomcat 8, Redis, Nginx
• Phần mềm phát triển: IntelliJ IDEA
• Cơ sở dữ liệu: MySQL 5.7+, MySQL 8+
• Công cụ cơ sở dữ liệu: Navicat 15
• Quản lý dependency dự án: Maven 3.6.3, npm 6.14.13

Ví dụ mã nguồn

import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.spring.boot.autoconfigure.DruidDataSourceBuilder;
import com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean;
import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.SqlSessionTemplate;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.support.PathMatchingResourcePatternResolver;
import org.springframework.jdbc.datasource.DataSourceTransactionManager;

import javax.sql.DataSource;

@Configuration
@MapperScan(basePackages = {"com.viettech.attendance.**.mapper"}, sqlSessionTemplateRef = "attendanceSqlSessionTemplate")
public class HeThongDuLieu {

    @Bean(name = "attendanceDS", initMethod = "init", destroyMethod = "close")
    @ConfigurationProperties(prefix = "spring.datasource.hethong")
    @Primary
    public DruidDataSource nguonDuLieu() {
        return DruidDataSourceBuilder.create().build();
    }

    @Bean(name = "attendanceSqlSessionFactory")
    @Primary
    public MybatisSqlSessionFactoryBean sqlSessionFactory(@Qualifier("attendanceDS") DataSource nguonDuLieu) throws Exception {
        MybatisSqlSessionFactoryBean bean = new MybatisSqlSessionFactoryBean();
        bean.setDataSource(nguonDuLieu);
        bean.setConfigLocation(new ClassPathResource("mybatis/mybatis-config.xml"));
        bean.setMapperLocations(new PathMatchingResourcePatternResolver().getResources("classpath*:mybatis/mapper/attendance/**/*.xml"));
        return bean;
    }

    @Bean(name = "attendanceTransactionManager")
    @Primary
    public DataSourceTransactionManager quanLyTransaction(@Qualifier("attendanceDS") DataSource nguonDuLieu) {
        DataSourceTransactionManager transactionManager = new DataSourceTransactionManager(nguonDuLieu);
        transactionManager.setEnforceReadOnly(true);
        return transactionManager;
    }

    @Bean(name = "attendanceSqlSessionTemplate")
    @Primary
    public SqlSessionTemplate sqlSessionTemplate(@Qualifier("attendanceSqlSessionFactory") SqlSessionFactory sqlSessionFactory) {
        return new SqlSessionTemplate(sqlSessionFactory);
    }
}

Ví dụ cơ sở dữ liệu

/*Cấu trúc bảng `t_sinh_vien` */

CREATE TABLE `t_sinh_vien` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Khóa chính',
  `addtime` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 'Thời gian tạo',
  `ma_sinh_vien` varchar(200) NOT NULL COMMENT 'Mã sinh viên',
  `mat_khau` varchar(200) NOT NULL COMMENT 'Mật khẩu',
  `ho_ten` varchar(200) NOT NULL COMMENT 'Họ tên sinh viên',
  `anh_dai_dien` longtext COMMENT 'Ảnh đại diện',
  `gioi_tinh` varchar(200) DEFAULT NULL COMMENT 'Giới tính',
  `so_dien_thoai` varchar(200) DEFAULT NULL COMMENT 'Số điện thoại',
  `email` varchar(200) DEFAULT NULL COMMENT 'Email',
  PRIMARY KEY (`id`),
  UNIQUE KEY `ma_sinh_vien` (`ma_sinh_vien`)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8 COMMENT='Bảng sinh viên';

/*Dữ liệu cho bảng `t_sinh_vien` */

INSERT INTO t_sinh_vien (id, addtime, ma_sinh_vien, mat_khau, ho_ten, anh_dai_dien, gioi_tinh, so_dien_thoai, email) VALUES
(11, '2023-02-11 14:45:07', 'SV2023001', '123456', 'Nguyễn Văn An', 'upload/sinh_vien_anh1.jpg', 'Nam', '0987654xxx', 'annguyenxx@gmail.com');
INSERT INTO t_sinh_vien (id, addtime, ma_sinh_vien, mat_khau, ho_ten, anh_dai_dien, gioi_tinh, so_dien_thoai, email) VALUES
(12, '2023-02-11 14:45:07', 'SV2023002', '123456', 'Trịnh Thị Bình', 'upload/sinh_vien_anh2.jpg', 'Nữ', '0987654xxx', 'binhtrinhxx@gmail.com');
INSERT INTO t_sinh_vien (id, addtime, ma_sinh_vien, mat_khau, ho_ten, anh_dai_dien, gioi_tinh, so_dien_thoai, email) VALUES
(13, '2023-02-11 14:45:07', 'SV2023003', '123456', 'Lê Văn Cường', 'upload/sinh_vien_anh3.jpg', 'Nam', '0987654xxx', 'cuongleexx@gmail.com');

Đảm bảo chất lượng mã nguồn

Tất cả mã nguồn và script cơ sở dữ liệu đã được kiểm tra và kiểm thử kỹ lưỡng, có thể khởi động bình thường và tất cả tính năng đều hoạt động tốt. Người dùng có thể sử dụng ngay khi nhận được!

Nhiều case study thành công đã được triển khai:

• Hệ thống quản lý nhân sự 500+ người dùng
• Hệ thống chấm công tự động cho 10+ công ty
• Ứng dụng di động quản lý công việc

Thông tin liên hệ

Để nhận được mã nguồn đầy đủ, vui lòng liên hệ qua email hoặc để lại bình luận dưới đây.