Hivelab Vina

Chúng ta đã bàn về Vue.js và Express ở Part1 , Express và MySQL ở Part2 . Và cuối cùng ở Part3 này, tôi sẽ giải thích những code chủ yếu để tạo tính năng đăng ký thành viên và login đơn giản bằng việc sử dụng cả Vue.js, Express, MySQL. Đăng ký Đây là form đơn giản để nhận 3 data là ID, tên, password. Ở front-end sẽ tạo component SignUp.vue. Ở mỗi trang nhập thì đều cho v-model directive rồi binding data nhận được. Khi phát sinh click event tại button đăng ký thì sẽ tiến hành signUp method. <div class="input_row"> <label for="id">ID</label> <input type="text" id="id" v-model="user.userid"> </div> <div class="input_row"> <label for="name">Name</label> <input type="text" id="name" v-model="user.name"> </div> <div class="input_row"> <label for="password">Password</labe...

Ở Part 1 chúng ta đã xử lý cách trao đổi thông tin giữa Front-end và Back-end bằng Vue.js và Express. Ở part này tôi sẽ giới thiệu một ví dụ để có thể nhập thông tin đơn giản của người dùng bằng việc liên kết MySQL trên Express, ngoại trừ Vue.js. Step1. Cài đặt và chạy MySQL Workbench Có nhiều cách để chạy MySQL server tuy nhiên MySQL Workbench được tạo bằng GUI nên có ưu điểm là tương đối dễ thiết lập. Có thể down MySQL Workbench tại địa chỉ dưới đây. https://dev.mysql.com/downloads/workbench/ Trong quá trình cài đặt sẽ nhận được password của tài khoản Root, bạn nhất định phải nhớ password đã nhập tại thời điểm này. Nếu như chạy Workbench đã cài đặt hoàn thành thì sẽ nhìn thấy màn hình dưới đây. Chạy mySQL server bằng tài khoản admin đã setting trong quá trình cài đặt. Màn hình đầu tiên tiến hành MySQL Workbench Step2. Tạo DB DB (Schema) mới sẽ được tạo ra khi ấn vào button có hình ổ đĩa (disk). Nhập tên DB và Charset. Màn hình tạo DB(Schema) Nếu ấn vào button Apply,...

Trước khi vào bài… Series này không chỉ giới thiệu quá trình xử lý Front-end bằng Vue.js mà còn có quá trình liên kết data thông qua API bằng cách sử dụng Express và MySQL. Tôi đã xây dựng sao cho người mới nhập môn Vue.js cũng có thể dễ dàng hiểu được, và đã ghi lại ở bên dưới một số tài liệu tham khảo trong quá trình này. Series được chia làm ba phần. Part1. Hiểu về trao đổi thông tin giữa Front-end và Back-end bằng Vue.js + Express Part2. Liên kết DB bằng Express + MySQL Part3. Mix All — Phát triển chức năng Log In / Đăng ký thành viên Đây là Part1, một ví dụ đơn giản giúp bạn có thể hiểu được Front-end và Back-end trao đổi data như thế nào bằng Vue.js + Express. Step1. Setting môi trường phát triển Front-end (Vue.js) Ta lập một folder để thực hành. Trong bài này tôi sẽ gọi là ‘movie’. Thực hiện lệnh sau trong folder movie và setting môi trường project Vue Cli 3.x npm install -g yarn npm install -g @vue/cli vue create frontend // create frontend folder cd frontend npm ...

Bối cảnh xây dựng Khi bạn càng phát triển markup nhiều, dần dần sẽ phát sinh những công việc phiền toái như là gắn một khối lượng text đồ sộ như điều khoản sử dụng vào từng tag. Tôi nghĩ rằng những công việc như vậy có thể trở nên dễ dàng hơn một chút nếu ta sử dụng markdown mà text format tương đối đơn giản. Tất nhiên có rất nhiều Markdown to HTML Converter (dưới đây gọi là Md2HTML) có thể sử dụng ngay. Tuy vậy, với mong muốn đơn thuần rằng “Liệu có thể cho cả class vào để áp dụng style hay không?”, tôi đã tạo ra Md2HTML sử dụng Vue.js. Step1. Markup HTML được tạo nên từ 3 vùng lớn. (1) Khai báo v-model=”md_text” để nội dung đã nhập tại chỗ nhập markdown chứa biến số md_text . Và tiếp theo, kết quả parsing sẽ được chứa trong previewText , sẽ có nơi khai báo bằng {{previewText}} và có nơi hiện kết quả rendering HTML sau khi dùng (3) v-html directive để có thể hiện ra (2) HTML y nguyên. &lttextarea class="viewer__cont" rows="16" v-model="md_text...

Step 1: News - More Tiếp nối nội dung đã được xây dựng ở Part2 , lần này chúng ta sẽ thêm tính năng xử lý với button Xem thêm (More). Cú pháp chính Cryptocurrency.vue // HTML template syntax <article> <div class="h_area"> <h2>Recent News</h2> </div> <ul> <li v-for="item in news" :key="item.id"> <a :href="item.url"> <div class="bx_thumb"> <img :src="item.imageurl" width="60" height="60" :alt="item.body"> </div> <dl> <dt>[{{item.published_on | moment}}] {{item.title}} </dt> <dd> <p>{{item.body}}</p> </dd> </dl> </a> </li> </ul> ...

Step 1: Ratio Tiếp nối nội dung đã được xây dựng ở Part1 , lần này chúng ta sẽ thêm data lượng giao dịch 24 giờ. Vì data giá (PRICE) và data tỷ lệ biến động 24 giờ (CHANGEPCT24HOUR) của data phản hồi API ở trong cùng một node nên sẽ tham khảo code xây dựng PRICE và thêm code vào. Nếu sử dụng Finder để tìm kiếm và trực quan hóa JSON Path phức tạp thì việc tạo code sẽ thuận lợi hơn. Cú pháp chính Cryptocurrency.vue // ① HTML 템플릿 구문 <tr> <td>{{cryptoPrice.BTC}}</td> <td>{{cryptoPrice.ETH}}</td> <td>{{cryptoPrice.XRP}}</td> </tr> <tr> <td>{{cryptoRatio.BTC}}</td> <td>{{cryptoRatio.ETH}}</td> <td>{{cryptoRatio.XRP}}</td> </tr> // ② 데이터 객체 data() { return { cryptoPrice: { BTC: 0, ETH: 0, XRP: 0 }, cryptoRatio: { BTC: 0, ETH: 0, XRP: 0 } } }, // ③ ...

Step 1: Project Setting [Ready] Node.js , Vue CLI phải được cài đặt đúng với OS của môi trường tiến hành. Tạo một dự án dựa trên phiên bản mới nhất của Vue CLI. (cài đặt Vue CLI) Tham khảo các cài đặt bên dưới và tiến hành cài đặt Preset bằng Manual Mode. vue create live-cryptocurrency Vue CLI v3.3.0 ┌───────────────────────────┐ │ Update available: 3.7.0 │ └───────────────────────────┘ ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS ? Pick a linter / formatter config: Basic ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated ...