Từ lâu mình đã ấp ủ mình làm một ứng dụng trò chuyện để trò chuyện với bạn bè. Nghỉ dịch này, mình có nhiều thời gian để học thêm công nghệ mới và trong đó có Vuejs. Học thì phải đi đôi với hành nên mình vừa thực hành Vuejs tiện để thực hiện dự định của mình luôn
Mình sẽ viết lại quá trình mà mình thực hiện với dự án
$ yarn add vuex vue-router axios vue-axios socket.io-client
5. Các bạn cùng học và thực hành với mình nhéSeries này sẽ có các phần
- Cài đặt môi trường phát triển VueJS, NodeJS, Express, SocketIO và đăng nhập xây dựng
- Phát triển tính năng trò chuyện nhóm trò chuyện riêng tư
- Hoàn chỉnh máy chủ phụ trợ, kết nối MongoDB, bổ sung các tính năng Xác thực và lưu trữ tin nhắn
- Triển khai sản phẩm lên Netlify và Heroku
Và hôm nay chúng ta sẽ đến với phần đầu tiên của series này
I. Cài đặt môi trườnggiao diện người dùng
With VueJS mình sử dụng Vue CLI để tạo project
Trước hết, các bạn cần cài đặt Vue CLI bằng npm
$ npm install --global vue-cli
Tạo dự án với Vue CLI
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
Cài đặt thư viện cần thiết
Để việc phát triển ứng dụng diễn ra nhanh chóng, mình sẽ sử dụng thành phần thư việc dành cho VueJS là Vuetify
$ vue add vuetify
> Chọn Defalut
$ yarn add vuex vue-router axios vue-axios socket.io-client
Chạy dự án
$ vue serve
Configure the library
- Vuetify
Khi chạy
$ yarn add vuex vue-router axios vue-axios socket.io-client
6 là vue đã tự động cấu hình- Vuex
cửa hàng / cửa hàng. js
import Vue from"vue";import Vuex from"vuex";
Vue.use[Vuex];const store =newVuex.Store[{
state:{},
mutations:{},
actions:{},
getters:{},}];exportdefault store;
chủ yếu. js
________số 8- Bộ định tuyến Vue
tuyến/bộ định tuyến. js
import Vue from"vue";import VueRouter from"vue-router";
Vue.use[VueRouter];const routes =[];const router =newVueRouter[{
routes,}];exportdefault router;
chủ yếu. js
$ npm install --global vue-cli
0- Dotenv – Khởi tạo biến môi trường
env and. env. mặc định
$ npm install --global vue-cli
1cấu hình/hằng số. js
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
0phụ trợ
Với NodeJS – Express mình sẽ tạo project từ đầu
Các bạn tạo thư mục mới với tên dự án và mở thư mục đó lên thiết bị đầu cuối và thực hiện theo các bước sau
Khởi tạo
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
1Cài đặt thư viện
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
2Cấu trúc dự án
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
3Thiết lập các công cụ phát triển
- Nodemon – Tự động tải lại máy chủ khi có mã thay đổi
nodemon. json
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
4- Babel + jsconfig + đường dẫn tuyệt đối
babelrc. js
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
5jsconfig. json
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
6- Dotenv – Khởi tạo biến môi trường
env and. env. mặc định
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
7src/configs/hằng số. js
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
8Thiết lập tập lệnh trong gói. json
$ vue create
> Chọn Defalut [[Vue2] babel, eslint]
9Máy chủ tập tin mã
người phục vụ. js
$ vue add vuetify
> Chọn Defalut
0Chạy máy chủ
$ vue add vuetify
> Chọn Defalut
1Như vậy là đã hoàn thành phần thiết lập dự án, các bạn đang thử chạy cả backend và frontend
$ vue add vuetify
> Chọn Defalut
2____31Sau đó mở trình duyệt và vào địa chỉ http. //máy chủ cục bộ. 8080 và http. //máy chủ cục bộ. 4000 lượt xem chưa được nhé
Tiếp theo mình sẽ đến phần mã hóa
II. Cấu hình ổ cắmConfigure socket side client
ổ cắm/ổ cắm. js
$ vue add vuetify
> Chọn Defalut
4cửa hàng / cửa hàng. js
$ vue add vuetify
> Chọn Defalut
5Configure socket side server
cấu hình/ổ cắm. js
$ vue add vuetify
> Chọn Defalut
6Các bạn đã sửa lại toàn bộ máy chủ tập tin. js as after
người phục vụ. js
$ vue add vuetify
> Chọn Defalut
7III. Xây dựng tính năng Đăng nhậpVới phần 1 của loạt bài này mình sẽ làm 2 màn hình.
$ yarn add vuex vue-router axios vue-axios socket.io-client
7 và $ yarn add vuex vue-router axios vue-axios socket.io-client
8. Khi vào ứng dụng, màn hình Đăng nhập sẽ hiển thị yêu cầu người dùng nhập Tên, sau khi nhập xong tên sẽ chuyển sang trang Trang chủ là trang trò chuyện chínhCụ thể quy trình công việc đăng nhập như sau
Ảnh 1. quy trình đăng nhập
Nhập tên người dùng, sau đó máy khách kết nối với máy chủ socket và gửi thông tin tên người dùng mỏng. Ở phía máy chủ khi kết nối sẽ phát ra sự kiện “USER_INFO”, gửi thông tin tên người dùng và socketId về phía máy khách
Sự kiện lắng nghe socket phía client “USER_INFO”, đợi khi socket gửi thông tin người dùng xuống, lưu vào Vuex store sau đó chuyển hướng sang trang Home
Khách hàng
trang/Trang chủ. vue
$ vue add vuetify
> Chọn Defalut
8trang/Đăng nhập. vue
$ vue add vuetify
> Chọn Defalut
9Ứng dụng. vue
$ yarn add vuex vue-router axios vue-axios socket.io-client
0cửa hàng / cửa hàng. js
$ yarn add vuex vue-router axios vue-axios socket.io-client
1ổ cắm/ổ cắm. js
$ yarn add vuex vue-router axios vue-axios socket.io-client
2tuyến/bộ định tuyến. js
$ yarn add vuex vue-router axios vue-axios socket.io-client
3ảnh 2. Giao diện Đăng nhập
Người phục vụ
Khi người dùng được kết nối, sẽ gửi lại thông tin người dùng về phía khách hàng
cấu hình/ổ cắm. js
$ yarn add vuex vue-router axios vue-axios socket.io-client
4Lời kếtOK có lẽ mình nên tạm dừng ở đây, ban đầu mình định làm
$ yarn add vuex vue-router axios vue-axios socket.io-client
9 ở phần này nhưng bài đã quá dài rồi