github Source code
Angular、React、Vue 是三個最受歡迎的前端框架，這是三篇筆記分別使用這三個不同的框架來建立功能一模一樣的網路應用程式中的第三篇 - 使用 Vue 來建立網路應用程式。
這個網路應用程式的需求
産品訂購功能 表頭：訂購商品總數、總額及送出訂單功能 商品過濾功能：依産品類別來顯示商品 商品清單：顯示商品明細、商品售價、訂購數量下拉選單及加入購物車等功能 訂單確認功能：顯示訂購商品明細及總金額 訂購成功功能：顯示訂購完成資訊 使用技術:
Vue 3 Bootstrap 5 (UI Framework) Vue Router 4 Vuex 4 axios 0.27 NodeJS 18.5 & Express 4.18 json-server 0.17.0 npm-run-all 4.1.5 (npm 套件) @vue/cli 建立新專案 使用下列的 npx 語法即可建立最新版 Vue 預設的應用程式結構
$ npx @vue/cli create vueapp Vue CLI v5.0.8 ? Please pick a preset: Manually select features ?...
github Source code
Angular、React、Vue 是三個最受歡迎的前端框架，這是三篇筆記分別使用這三個不同的框架來建立功能一模一樣的網路應用程式中的第二篇。
這個網路應用程式的需求
産品訂購功能 表頭：訂購商品總數、總額及送出訂單功能 商品過濾功能：依産品類別來顯示商品 商品清單：顯示商品明細、商品售價、訂購數量下拉選單及加入購物車等功能 訂單確認功能：顯示訂購商品明細及總金額 訂購成功功能：顯示訂購完成資訊 使用技術:
React 18 Bootstrap 5 (UI Framework) React Router 6 React Redux 8 NodeJS & Express json-server npm-run-all (npm 套件) 建立新專案 使用下列的 create-react-app 語法即可建立最新版 React 預設的應用程式結構
$ npx create-react-app reactapp --template typescript Creating a new React app in /home/egs/cal-data/tech-test/typescript/book/reactapp. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template-typescript....
github Source code
Angular、React、Vue 是三個最受歡迎的前端框架，接下來的三篇筆記分別要紀錄使用這三個不同的框架來建立功能一模一樣的網路應用程式。
這個網路應用程式的需求
産品訂購功能 表頭：訂購商品總數、總額及送出訂單功能 商品過濾功能：依産品類別來顯示商品 商品清單：顯示商品明細、商品售價、訂購數量下拉選單及加入購物車等功能 訂單確認功能：顯示訂購商品明細及總金額 訂購成功功能：顯示訂購完成資訊 使用技術:
Angular 14 Bootstrap 5 (UI Framework) Angular Router Services NodeJS & Express json-server npm-run-all (npm 套件) 建立新專案 使用下列的 npm init 語法即可建立最新版 Angular 預設的應用程式結構
$ npm init @angular angularapp -- --routing --style=scss Need to install the following packages: @angular/create@14.1.3 Ok to proceed? (y) CREATE angularapp/README.md (1064 bytes) CREATE angularapp/....
github Source code
Technology:
NodeJs 17.6.0 Express 4.18.1 cors 2.8.5 crypto-js 4.1.1 # 加解密套件 jsonwebtoken 8.5.1 # Json Web Token 的功能套件 sequelize 6.20.2 # ORM 套件 mysql2 2.3.3 # MySQL client for Node.js MariaDB 10.8.3 # 使用的資料庫 專案完成後的檔案結構 ./專案目錄 ├── app/ │ ├── config/ │ │ └── db.config.js │ ├── middleware/ │ │ ├── auth.jwt.js │ │ ├── index.js │ │ └── verify.signup.js │ ├── models/ │ │ ├── index....
github Source code
Technology:
NodeJs 17.6.0 Express 4.18.1 cors 2.8.5 crypto-js 4.1.1 # 加解密套件 jsonwebtoken 8.5.1 # Json Web Token 的功能套件 sequelize 6.20.2 # ORM 套件 mysql2 2.3.3 # MySQL client for Node.js MySQL 8.0 # 使用的資料庫 專案完成後的檔案結構 ./專案目錄 ├── app/ │ ├── config/ │ │ └── db.config.js │ ├── middleware/ │ │ ├── auth.jwt.js │ │ ├── index.js │ │ └── verify.signup.js │ ├── models/ │ │ ├── index....