Ứng dụng Ghi chú Koa Vue: Một Ứng dụng Ghi chú Đầy Đủ Tính năng Xây dựng với 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 như phần backend, Vue là phần giao diện trước, và React là phần giao diện 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ủa ứng dụng càng nhiều càng tốt… ha. Sẽ cập nhật thêm khi Vue3 được phát hành.
• Hỗ trợ Storybook
• Vue-Router
• Vuex
• Hoàn toàn viết bằng async/await
• Bootstrap 4 với Bootstrap-Vue
• SCSS
• Thư viện kiểm tra hợp lệ Vuelidate
• JWT cho xác thực
• Axios
• Vue-Progressbar
• Jest để kiểm tra
• Và nhiều tính năng khác…

Cài đặt / Bắt đầu

# 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

Để xây dựng 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 thiết kế theo cách của Vue-CLI. Tôi chọn con đường này vì Evan đã làm rất tốt việc suy nghĩ về các khía cạnh khác nhau của việc xây dựng ứng dụng.

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

TypeScript

Thư mục src được xây dựng theo cấu trúc sau:

Tài liệu
Ở đâ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 đi vào chi tiết.

Chung

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

Các thành phần

Đị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 từng chế độ xem trong ứng dụng. Một điều bạn sẽ muốn xem xét là phương thức beforeEach, nơi chúng ta xử lý việc xác thực người dùng diễn ra trong ứng dụng.

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

Quy 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 accessToken và refreshToken
• Chúng tôi lấy accessToken và giải mã bằng cách sử dụ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 lưu thông tin này vào trong kho lưu trữ user của Vuex/Redux. 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ẽ yêu cầu bạn đính kèm accessToken khi gọi (sử dụng Authentication: Bearer)
• Sau một thời gian ngắn, máy chủ sẽ trả lại thông báo 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 tới đ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 hoàn toàn mới
• Lặp lại quy trình khi cần

Kho Lưu trữ (Store)

Tập tin App.vue

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

Tập tin main.js

Đây là cửa vào chính của mã JavaScript của chúng tôi – tất cả các mô-đun chính như kho lưu trữ Vuex và định tuyến được tải ở đây. Đây cũng là nơi triển khai phiên bản chính của Vue của chúng tôi.

Liên hệ Với Tôi

Hãy tiến hành nhân bản dự án! Gửi tin nhắn cho 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!

Thông tin tải về:

Tác giả: johndatserakis
Nguồn: https://github.com/johndatserakis/koa-vue-notes-web
* Chúng tôi lấy accessToken và giải mã bằng cách sử dụ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 lưu thông tin này vào trong kho lưu trữ user của Vuex/Redux. 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ẽ yêu cầu bạn đính kèm accessToken khi gọi (sử dụng Authentication: Bearer)
* Sau một thời gian ngắn, máy chủ sẽ trả lại thông báo 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 tới đ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 hoàn toàn mới
* Lặp lại quy trình khi cần

Kho Lưu trữ (Store)

Tập tin App.vue

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

Tập tin main.js

Đây là cửa vào chính của mã JavaScript của chúng tôi – tất cả các mô-đun chính như kho lưu trữ Vuex và định tuyến được tải ở đây. Đây cũng là nơi triển khai phiên bản chính của Vue của chúng tôi.

Liên hệ Với Tôi

Hãy tiến hành nhân bản dự án! Gửi tin nhắn cho 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!

Thông tin tải về:

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