Ghi chú Web Koa Vue: Một Ứng dụng Ghi chú Đầy đủ Tính năng Xây dựng bằng Koa và Vue

Koa-Vue-Notes-Web

Đây là một Ứng dụng SPA đơn giản được xây dựng bằng Koa làm phần backend, Vue là phần frontend đầu tiên và React là phần frontend thứ hai.

• Frontend Vue GitHub
• Frontend Vue Demo
• Frontend React GitHub
• Frontend React Demo
• Backend Koa GitHub

Tính năng

• Vue 2.6.11 (Khởi tạo bởi Vue-CLI 3)
• TypeScript trong phạm vi càng nhiều ứng dụng càng tốt… ha. Sẽ cập nhật thêm khi Vue3 ra mắt.
• Hỗ trợ Storybook
• Vue-Router
• Vuex
• Được viết hoàn toàn bằng async/await
• Bootstrap 4 với Bootstrap-Vue
• SCSS
• Thư viện kiểm tra hợp lệ Vuelidate
• JWT để xác thực
• Axios
• Vue-Progressbar
• Jest để kiểm thử
• Và nhiều hơn nữa…

Cài đặt / Bắt đầu sử dụng

# Install dependencies
npm i

# Serve with hot reload at localhost:8080
npm run watch

# Build for production
npm run build

# Lint using eslint
npm run lint

# Run Storybook
npm run storybook:watch

# Run tests
npm run test:unit
npm run test:e2e

Thông tin Chung

Để tìm hiểu về cơ sở của dự án, hãy chắc chắn kiểm tra tài liệu Vue-CLI nếu bạn chưa làm điều đó. Cơ sở của dự án này được sắp xếp theo cách của Vue-CLI. Tôi chọn con đường này vì Evan đã làm một công việc thực sự tốt khi suy nghĩ qua các khía cạnh khác nhau của việc xây dựng một ứng dụng.

Mình đã bình luận rộng rãi trong mã nguồn và cố gắng cân bằng dự án sao cho đủ phức tạp để học hỏi nhưng không quá phức tạp đến mức khó theo dõi. Việc học từ một mã mẫu có quá nhiều hoặc quá ít thứ có thể khá khó khăn.

TypeScript

Thư mục src được sắp xếp như sau:

Tài nguyên

Ở đây bạn sẽ tìm thấy các tệp SCSS của chương trình. Có một loạt các tệp thành phần khi bạn tiếp tục đi sâu vào.

Chung

Cho các chức năng tiện ích. Export axios nằm ở đây. Nếu bạn đã để ý – thực ra mình import axios từ đây – không phải từ thư mục npm_modules. Điều này là do mình muốn thêm thuộc tính baseURL ở một nơi duy nhất.

Các thành phần

Bộ định tuyến

Đây là mã vue-router. Ở đây, bạn sẽ tìm thấy việc tạo và kết nối mỗi chế độ xem trong ứng dụng. Một điều bạn sẽ muốn xem xét là phương thức beforeEach trong đó chúng ta xử lý việc xác thực người dùng diễn ra trong ứng dụng.

Trên mỗi hành động định tuyến, chúng ta lấy accessToken và refreshToken từ localStorage của chúng ta. Nếu có accessToken, chúng ta đặt người dùng trong kho Vuex của chúng ta và tiếp tục con đường của chúng ta.

Quá trình Xác thực Người dùng

Như đã đề cập trong mã vue/koa, quy trình xác thực người dùng như sau:

• Người dùng tạo một tài khoản
• Người dùng đăng nhập
• Máy chủ gửi lại một accessToken và một refreshToken
• Chúng tôi lấy accessToken và giải mã nó bằng jwt-decode. Điều này cho chúng tôi thông tin của người dùng đã đăng nhập. Chúng tôi đặt nó trong kho Vuex/Redux user. Sau đó, chúng tôi lưu trữ refreshToken và accessToken trong localStorage của người dùng.
• Mỗi điểm cuối được bảo vệ sẽ mong đợi bạn đính kèm accessToken bạn có vào cuộc gọi (sử dụng Authentication: Bearer)
• Sau một khoảng thời gian ngắn, máy chủ sẽ phản hồi với 401 TOKEN EXPIRED. Khi bạn thấy điều này – điều đó có nghĩa bạn cần gửi refreshToken và user.email của bạn đến điểm cuối xử lý việc làm mới accessToken.
• Khi bạn làm điều đó, bạn sẽ nhận được một accessToken và refreshToken mới hoàn toàn
• Lặp lại quy trình khi cần

Kho

Tệp App.vue

Đây là thành phần ứng dụng chính của chúng ta. Các thành phần như navbar, footer-main, và vue-progress-bar được đặt ở đây.

Tệp main.js

Lối vào chính của mã JavaScript của chúng ta – tất cả các mô-đun chính như kho Vuex và bộ định tuyến được tải ở đây. Đây cũng là nơi chúng ta thực hiện phiên bản Vue chính của mình.

Liên hệ tôi

Hãy mạnh dạn sao chép dự án! Nhắn tin cho tôi tại đây nếu bạn có câu hỏi hoặc gửi một vấn đề nếu cần. Tôi sẽ thực hiện các điều chỉnh khi thời gian trôi qua. Chúc bạn vui vẻ với điều này!

Chi tiết tải về:

Tác giả: johndatserakis
Nguồn: https://github.com/johndatserakis/koa-vue-notes-web

Giấy phép: MIT license