Vue
響應式數據綁定和組件化開發（單頁應用）
Vue是一套用於構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。響應式實現頁面數據和代碼數據的自動同步更新，使開發可以簡化爲操作業務數據，跟視圖層分離
組件化開發將頁面不同功能的模塊獨立開發，使開發更加條理清晰和獨立
vue-cli 是 運行在 NodeJS 環境下 幫助我們開發 基於Vue框架的項目 的腳手架。
創建的項目目錄結構：
├── node_modules// 項目依賴的模塊、
├── src// 源碼目錄
│ ├── assets// 資源目錄
│ ├── components// vue公共組件
│ ├──router// 前端路由
│ │ └── index.js// 路由配置文件
│ ├── App.vue// 頁面入口文件（根組件）
│ └── main.js// 程序入口文件（入口js文件）
└── public// 靜態文件，比如一些圖片，json數據等
│ └── index.html// 入口頁面
├── .editorconfig// 定義代碼格式
├── .gitignore// git上傳需要忽略的文件格式
├── .babel.config.js
├── package.json// 項目基本信息
├── README.md// 項目說明
組件代碼結構
<template>
//html模板
</template>
<script>
//業務邏輯
</script>
<style scoped> //scoped 樣式只在組件內生效，防止樣式衝突
//樣式
</style>
Express
基於Node 靈活，輕量。利用其配置前端所需服務器，從而實現Web請求處理的功能非常便捷。
而且因爲對前端JavaScript較爲熟悉，所以學習使用Express容易上手。
express路由
路由（Routing）是由一個 URI（或者叫路徑）和一個特定的 HTTP 方法（GET、POST 等）組成的，涉及到應用如何響應客戶端對某個網站節點的訪問。每一個路由都可以有一個或者多個處理器函數，當匹配到路由時，這個/些函數將被執行。
通過 Express 應用生成工具（express-generator）可以快速創建一個Express
應用的基礎框架
生成的Express應用 的目錄結構：
- bin：真實的執行程序
- db: 連接數據庫
- node_module：存放項目所需要的依賴模塊
- public：存放靜態文件
- routes：路由文件
- views：頁面模板文件
- app.js：程序啓動文件
- package.json：項目依賴配置及開發者信息，運行npm install
後端開發步驟：
- 功能分析及路由規劃
- 安裝所需依賴
- 連接數據庫
- 針對前端請求編寫後端接口，操作數據庫，返回相應數據
後端對前端的請求進行響應，拉取數據庫內容，返回JSON數據，前端利用預先寫的html模板，循環讀取JSON數據，並插入頁面
//主要代碼基本編寫結構
const express = require('express');//引入nodejs express框架
const router = express.Router();
const conn = require('./../db/db')//連接數據庫
//例：處理post請求
//修改用戶信息
router.post('/uppassword',(req,res) => {
//...判斷處理的邏輯代碼
//數據庫操作語句
const sqlStr = 'UPDATE userdata SET ? WHERE username = ?';
conn.query(sqlStr,[req.body.changedata,req.body.username], (error, results) => {
if (error) {
res.json({err_code: 0, message: '更新數據失敗'});
}else {
res.json({suc_code: 200, message: '更新數據成功'});
}
});
});
node.js
javascript運行環境，使js代碼可以運行於瀏覽器之外，也可編寫服務器等功能
node.js 運用大量異步調用回調，即非同步執行代碼，代碼非順序執行，node使用npm管理包，即依賴的各種功能均可直接使用npm安裝
設計開發時，由於對前端掌握相較後端更爲了解熟悉，系統構建編寫偏向前端，邏輯處理和判斷基本都在前端編寫，後端基本只進行對應數據庫操作。
Axios
在項目中，和後臺交互獲取數據使用的是axios。
項目的src目錄中，新建了一個api文件夾，然後在裏面新建一個http.js和一個index.js文件。http.js文件用來封裝axios，index.js用來統一管理接口。
//http.js 例：
export async function httpPost(url, params) {
var ret =await axios.post(url, params)
return ret.data
}
//index.js 例：
//修改用戶信息
export const upUserData = (params) => httpPost('/users/uppassword',params)
難點
開發難點：
- 項目初始開發時，只懂前端頁面製作，不瞭解後端，所以express、axios的學習用於前後端交互花費大量時間。
功能設計難點：
- 登陸狀態判斷，用於用戶權限開放
- 購物車利用勾選功能進行批量刪除和結算
- 分頁組件功能
- 數據批量加入數據庫時，數據格式的加工
對應解決辦法：
5. 利用Session Storage,在用戶登陸時，sessionStorage.setItem(“userName”, this.username);保存用戶名數據到瀏覽器。通過router.beforeEach控制路由，判斷sessionStorage.getItem(“userName”)是否存在來進行相應處理。
6. 在從數據庫請求到數據後，爲每一條數據添加屬性 this.$set(item,‘select’,false)，select用於判斷是否勾選。批量刪除和結算時，遍歷數組元素判斷屬性值來篩選。
3.將分頁功能拆分，一步步添加。先做頁號點擊跳轉，再加上一頁和下一頁，最後加輸入跳轉。並將邏輯操作計算的各固定數字儘量設置爲變量，利於理解和編寫。每一分步都添加console.log(),通過控制檯輸出，監控各步邏輯輸出。
4. 多次模擬數據操作，判斷所要求格式。最後將每條數據的key/value存爲一維數組元素，一條數據就是一個一維數組，再將其組成二維數組，成功存入數據庫。