created by 2006 at 2020-9-14
環(huán)境
windows 64bit
node.js v10+
調(diào)試工具：谷歌瀏覽器+devTools
技術(shù)棧：vue + vue-router + vuex + sass + vant + axios
項(xiàng)目架構(gòu)
1、項(xiàng)目配置
vue.config.js
把端口號(hào)改成 8001
package.json
項(xiàng)目運(yùn)行：npm start
項(xiàng)目打包：npm run build
2、路由集成
cnpm install vue-router -S
創(chuàng)建 /src/router.js 并編寫路由規(guī)則
在main.js掛載
使用 <router-view></router-view>
3、使用sass
cnpm install sass-loader -D
cnpm install node-sass -D
組件中的style標(biāo)簽，使用lang='scss'指定CSS語(yǔ)言類型
4、安裝vant組件庫(kù)
Vant官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN/
cnpm install vant -S
cnpm install babel-plugin-import -D
Babel是運(yùn)行在Node.js環(huán)境中的JS編譯器。
它的作用是把ES6代碼轉(zhuǎn)化成瀏覽器兼容性更好的ES5代碼。
# babel.config.js
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
# 配置完成后，重啟項(xiàng)目即可
在組件中如何使用vant組件呢？
# 導(dǎo)入所需要的組件
import { Button } from 'vant'
# 把Vant組件變成局部組件
components: {
[Button.name]: Button
}
# 在視圖中使用vant組件
<van-button type='danger'>按鈕</van-button>
rem布局
dpr = 屏幕像素(px) / 物理尺寸
dpr = 2 二倍屏
dpr = 3 三倍屏
移動(dòng)端布局：vw/vh，flexible，rem（最常用）
rem：相對(duì)html標(biāo)簽的根字體大小，倍數(shù)關(guān)系
em：相對(duì)于父級(jí)字體的大小，倍數(shù)關(guān)系
px：絕對(duì)單位
目標(biāo)：10rem等于滿屏
做法：把當(dāng)前頁(yè)面的根字體的大小等于當(dāng)前屏幕寬度的1/10
第一步獲取html標(biāo)簽dom對(duì)象 oHTML
第二步通過(guò)js獲取當(dāng)前屏幕的寬度 w（單位是px）
第三步，oHTML.fontSize = w*0.1 + 'px'
原理：等比縮放
建議在vscode安裝一個(gè)cssrem的插件，它的作用是自動(dòng)幫我把px單位轉(zhuǎn)化成rem單位。
它需要進(jìn)行基準(zhǔn)單位設(shè)置，設(shè)置成75（1rem=75px）
接口文檔
baseURL = 'http://10.36.138.122:9999'
注冊(cè)：/jd/regist
入?yún)? username, password, password2
方法: POST
登錄：/jd/login
入?yún)? username, password
方法: POST
獲取首頁(yè)推薦商品：/jd/getHotGoodList
方法：GET
入?yún)ⅲ?br>
hot: Boolean 非必填, 默認(rèn)是 false, 傳true時(shí)返回?zé)徜N推薦的產(chǎn)品，如果不傳或傳false就返回所有商品
page: Number 非必填，默認(rèn)是 1, 用于實(shí)現(xiàn)分頁(yè)功能
size: Number 非必填，默認(rèn)是 10
獲取全部品類：/jd/getAllCates
方法：GET
入?yún)ⅲ簾o(wú)
基于品類進(jìn)行篩選：/jd/getCateGoodList
方法：GET
入?yún)ⅲ?br>
cate: String 品類的英文字段
獲取商品詳情：/jd/getGoodDetail
方法：GET
入?yún)ⅲ?br>
good_id: String 商品id
添加到購(gòu)物車：/jd/addToCart
方法：POST
入?yún)ⅲ?br>
num: Number 選填，購(gòu)買數(shù)量
good_id: String 商品id
獲取購(gòu)物車列表：/jd/getCartList
方法：GET
入?yún)ⅲ簾o(wú)
更改購(gòu)物車中的商品數(shù)量：/jd/updateCartNum
方法：POST
入?yún)ⅲ?br>
num: Number 新的數(shù)量
id: String 購(gòu)物車id
刪除購(gòu)物車中的商品：/jd/deleteToCart
方法：GET
入?yún)ⅲ?br>
id: String 購(gòu)物車id
提交購(gòu)物：/jd/submitToCart
方法：POST
入?yún)ⅲ?br>
goods: String 購(gòu)物車id字符串，多個(gè)商品id要用英式;進(jìn)行連接。
添加商品：/jd/addGood
方法：POST
入?yún)ⅲ?br>
img: String, // 圖片
name: String, // 商品名稱
desc: String, // 商品描述
price: Number, // 價(jià)格
cate: String, // 品類
hot: Boolean, // 是否推薦
