Web CURD cơ bản với Netcore API, ADO và Vuejs - Phần 1 Web CURD cơ bản với Netcore và Vuejs Web CURD cơ bản với Netcore API, ADO và Vuejs

Hi mọi người, hôm nay mình bắt đầu với loạt bài “Web CURD cơ bản với Netcore API + ADO + Vuejs“. Như tiêu đề đã rõ, trong project này mình sẽ tạo một Project web thao tác thêm sửa xóa cơ bản. Project sẽ bao gồm 2 phần:
+ Server side: NetCore Framework, ADO và Mariadb
+ Client side: Vuejs
OK, go

Tạo project Netcore Api và cấu hình trên Visual studio

Nào, mở Visual studio và chọn Create a new project -> ASP.NET Core Web Application, nhập vào tên project và chọn đường dẫn thư mục lưu Project.

Bước tiếp theo mình sẽ chọn template API. Vì Project mình viết sẽ theo dạng Client Render Side vậy nên sẽ tách riêng biệt thành 2 phần và tuân thủ chuẩn RESTful các bạn chưa biết về RESTful có thể đọc ở đây hoặc Gúc gồ nhé!

Vậy là xong rồi đó. Visual Studio sẽ tạo cho mình một Project với template API, vào code thôi

Cấu trúc thư mục

Mình chia Project thành 4 thư mục chính. Controller, Helpers, Models, và Repositories. Trong đó Repositories là nơi chứa các class thao tác trực tiếp với Database, Helpers sẽ chứa các class tiện ích, trong này mình có viết file Mapper mục đích Map dữ liệu từ MySqlDataReader sang Model.

Cấu hình file appsetting.json

Đây là file chứa các config khi làm việc với ứng dụng. ConnectionString được đặt vào đây và file này được truy cập thông qua IConfiguration.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "DbConnection": "Server=127.0.0.1;Port=3306;Database=studentmanagement;Uid=root;Pwd=12345678@Abc;"
  }

}

Trong file mình có config sẵn DbConnection, đây là ConnectionString đến Database local. Phần Database chính là tên database sử dụng, Uid và Pwd tương ứng sẽ là tài khoản, mật khẩu truy cập vào Mariadb đang được trỏ tới.
Để làm việc với Mariadb hay MySql thông qua ADO chúng ta sẽ cài Package MySql.Data vào Project.
Chuột phải vào tên Project, chọn Manage Nuget Package, tìm kiếm với tên MySql.Data rồi chọn Install.

Tạo Database và Procedure

CREATE TABLE studentmanagement.student (
  Id char(36) NOT NULL DEFAULT 'uuid()',
  Name varchar(50) NOT NULL,
  Age int(11) NOT NULL,
  Adress varchar(255) DEFAULT NULL,
  Class varchar(50) DEFAULT NULL,
  School varchar(255) DEFAULT NULL,
  PRIMARY KEY (Id)
)
ENGINE = INNODB,
AVG_ROW_LENGTH = 5461,
CHARACTER SET utf8,
COLLATE utf8_general_ci,
COMMENT = 'Bảng học sinh';

Mình sẽ tạo Database studentmanagement và tạo bảng student. Trong bảng có các cột đơn giản.

Id: Trường định danh học sinh, là khóa chính, kiểu CHAR(36) tương ứng với kiểu Guid trong c# , DEFAULT ‘uuid()’ sẽ sinh mới một Guid khi một bản ghi được insert vào bảng.

Các bạn có thể tạo table trực tiếp bằng SQL như mình hoặc Tool giao diện, mình thường dùng dbForge Studio.
Tạo xong bảng với các cột như trên, việc tiếp theo cần làm, chúng ta sẽ tạo các Procedure. Mục đích tạo Procedure vì chúng ta sẽ gọi đến Procedure và truyền các tham số cần thiết thông qua ADO trên code backend thay vì viết từng câu lệnh SQL, điều này khiến code trông dễ hiểu, tách biệt luôn phần code backend và database. Khi cần thay đổi chúng ta sửa trực tiếp dưới Procedure mà vẫn đảm bảo code chạy ngon lành.

Proc_GetStudents – Lấy về tất cả học sinh

CREATE PROCEDURE studentmanagement.Proc_GetStudents()
  SQL SECURITY INVOKER
  COMMENT 'Lấy về tất cả học sinh'
BEGIN
  SELECT Id,
         Name,
         Age,
         Adress,
         Class,
         School FROM student;
END

Proc_InsertStudent – Thêm một bản ghi vào bảng

CREATE PROCEDURE studentmanagement.Proc_InsertStudent(IN Name VARCHAR(50), IN Age INT, IN Adress VARCHAR(255), IN Class VARCHAR(50), IN School VARCHAR(255))
  SQL SECURITY INVOKER
  COMMENT 'Thêm mới bản ghi học sinh'
BEGIN
  INSERT HIGH_PRIORITY INTO student(
    Name, Age, Adress, Class, School)
    VALUES (Name, Age, Adress, Class, School);
  
END

Proc_UpdateStudentById – Cập nhật một bản ghi theo Id

CREATE PROCEDURE studentmanagement.Proc_UpdateStudentById(IN Id char(36), IN Name varchar(50), IN Age int, IN Adress varchar(255), IN Class varchar(50), IN School varchar(255))
  SQL SECURITY INVOKER
  COMMENT 'Cập nhật thông tin học sinh'
BEGIN
  UPDATE student s
  SET s.Name = Name,
      s.Age = Age,
      s.Adress = Adress,
      s.Class = Class,
      s.School = School
  WHERE s.Id = Id;
END

Proc_GetStudentById – Lấy về thông tin một bản ghi theo Id

CREATE PROCEDURE studentmanagement.Proc_GetStudentById(IN Id CHAR(36))
  SQL SECURITY INVOKER
  COMMENT 'Lấy về thông tin student theo Id'
BEGIN
  SELECT s.Id,
         s.Name,
         s.Age,
         s.Adress,
         s.Class,
         s.School FROM student s WHERE s.Id = Id;
END

Proc_DeleteStudentById – Xóa một bản ghi theo Id

CREATE PROCEDURE studentmanagement.Proc_DeleteStudentById(IN Id CHAR(36))
  SQL SECURITY INVOKER
  COMMENT 'Xóa bản ghi student theo Id'
BEGIN
  DELETE LOW_PRIORITY QUICK
    FROM student WHERE student.Id = Id;
END

Phần 1 kết thúc tại đây, ở phần tiếp theo chúng ta sẽ hoàn thiện phần backend bằng việc viết các Controller và Repository.

Share on Facebook

4 Comments

Nguyễn Thành Biên
30/09/2020 1:55 sáng

Kính gửi Nguyễn Mạnh,
Em có xem bài viết phần 1 rồi,
Muốn tham khảo phần 2 nhưng không tìm thấy.
Mong thông tin giúp.
Cảm ơn Anh.
- Mạnh Nguyễn
  30/09/2020 4:29 sáng
  
  Chào bạn, do thời gian vừa rồi mình khá bận dự án nên chưa viết được phần 2. Mình sẽ hoàn thiện và update cho các bạn.
  Cám ơn bạn đã quan tâm!
Nguyễn Mạnh Tuấn
25/08/2022 8:16 sáng

Bài viết rất hay và rõ ràng. Cảm ơn anh!
Rất mong được đọc những bài viết tiếp theo của anh!
Mark
10/09/2022 9:14 chiều

Thanks for your blog, nice to read. Do not stop.

Web CURD cơ bản với Netcore API, ADO và Vuejs – Phần 1

Tạo project Netcore Api và cấu hình trên Visual studio

Cấu trúc thư mục

Cấu hình file appsetting.json

Tạo Database và Procedure

4 Comments

Bài viết mới

Phản hồi gần đây

Web CURD cơ bản với Netcore API, ADO và Vuejs – Phần 1

Tạo project Netcore Api và cấu hình trên Visual studio

Cấu trúc thư mục

Cấu hình file appsetting.json

Tạo Database và Procedure

4 Comments

Bài viết mới

Phản hồi gần đây

Thẻ