12

時間 2019-11-16

原文原文鏈接

VUE項目-第十二天css

01-反饋html

姓名意見或建議
*** Promise和async同爲發送請求的異步操做是如何區分以及使用的？萌
*** 不知道axios.defaults.baseURL的值和接口文檔中的接口基準地址是什麼關係?前端

Promise async await 處理異步操做
- 只是寫法不同
- Promise 在處理異步操做的時候仍是須要使用 then catch 還不是特別方便
- async await 方便咱們在作異步操做的時候寫法能夠是同步寫法邏輯清晰
axios.defaults.baseURL
- baseURL 當前請求的接口地址在開頭有不少重複的字符串 http://localhost:8888/v1/private/
- 若是沒有跨域 /v1/private/

02-回顧vue

- 寫代碼
複製代碼

03-商品添加-組件基礎佈局webpack

麪包屑ios
卡片web
警告條vuex
步驟條npm
tab標籤頁element-ui
效果：切換tab的時候同時去切換步驟條
基本信息商品參數商品屬性商品圖片商品內容
changeTab (tab) { // 根據當去的tab的位置去切換步驟條的位置 // tab 當請點擊的tab的實例對象包含一些信息 // console.log(tab) tab.index 就是索引正好對應步驟條的active數據 this.active = +tab.index }

data () { return { // 是當前步驟的索引 active: 0 } },

04-商品添加-表單準備及驗證

表單的基礎佈局：

<el-form ref="form" :model="form" :rules="rules" label-width="200px" autocomplete="off">
  <el-form-item label="商品名稱" prop="goods_name">
    <el-input v-model="form.goods_name" style="width: 400px"></el-input>
  </el-form-item>
  <el-form-item label="商品分類" prop="goods_cat">
    <el-input v-model="form.goods_cat" style="width: 200px"></el-input>
  </el-form-item>
  <el-form-item label="商品價格" prop="goods_price">
    <el-input v-model="form.goods_price" style="width: 200px"></el-input>
  </el-form-item>
  <el-form-item label="商品數量" prop="goods_number">
    <el-input v-model="form.goods_number" style="width: 200px"></el-input>
  </el-form-item>
  <el-form-item label="商品重量" prop="goods_weight">
    <el-input v-model="form.goods_weight" style="width: 200px"></el-input>
  </el-form-item>
</el-form>

// 添加商品表單數據
form: {
  goods_name: '',
  goods_cat: '',
  goods_price: '',
  goods_number: '',
  goods_weight: '',
  goods_introduce: '',
  pics: [],
  attrs: []
},
rules: {
  goods_name: [
    {required: true, message: '商品名稱必填', trigger: 'blur'}
  ],
  goods_cat: [
    {required: true, message: '商品分類必填', trigger: 'blur'}
  ],
  goods_price: [
    {required: true, message: '商品價格必填', trigger: 'blur'}
  ],
  goods_number: [
    {required: true, message: '商品數量必填', trigger: 'blur'}
  ],
  goods_weight: [
    {required: true, message: '商品重量必填', trigger: 'blur'}
  ]
}
複製代碼

實現分類級聯功能：

<el-cascader
  clearable
  style="width: 200px"
  expand-trigger="hover"
  :options="categoryList"
  v-model="categoryValues"
  :props="{value:'cat_id',label:'cat_name'}"
  @change="handleChange">
</el-cascader>

// 級聯相關的數據
categoryList: [],
categoryValues: []

handleChange () {
},
async getData () {
  // 獲取三級分類數據  且賦值給級聯組件
  const {data: {data, meta}} = await this.$http.get('categories')
  if (meta.status !== 200) return this.$message.error('獲取分類數據失敗')
  this.categoryList = data
}
複製代碼

實現表單校驗：

級聯校驗須要加上
- 改爲 change 事件去觸發校驗文字提示該了一下
- 由於校驗的是字段 form.goods_cat 而在選擇級聯的時候沒有去修改這個字段
- 選擇級聯的時候去修改這個字段怎麼去修改？？？
- 思路：經過綁定事件去作能夠
- 使用的方式：經過偵聽器去監聽 categoryValues 字段值改變去修改 form.goods_cat
  
  watch: { categoryValues (now, old) { // 當 categoryValues 值改變的時候 // form.goods_cat 賦值 // 若是 categoryValues 的長度不等於3 就不賦值清空 if (now.length === 3) { // 覺得','分割的分類列表 this.form.goods_cat = now.join(',') } else { this.form.goods_cat = '' // this.categoryValues = [] } } }
離開第一個選項卡就該對整個表單進行校驗
- 若是校驗失敗阻止切換選項卡
- 若是成功放行
  
  changeTabBefore (activeName, oldActiveName) { console.log(activeName, oldActiveName) // 對整個表單進行校驗 // 若是校驗失敗阻止切換 // return false 便可阻止必須在當前函數的做用域下有效 // return Promise 對象執行 reject 阻止 if (oldActiveName === '0') { // 若是離開的是第一個選項卡去作校驗
  return new Promise((resolve, reject) => { this.$refs.form.validate(valid => { if (valid) { // 校驗成功隨着tab的索引去切步驟條 this.active = +activeName resolve() } else { // 阻止切換
  reject(new Error('校驗表單失敗')) } }) }) } else { // 若是不是第一個選項隨着tab的索引去切步驟條 this.active = +activeName } }

05-商品添加-渲染參數及屬性

參數及屬性數據須要請求兩次去獲取不一樣的屬性列表數據

// id 當前選中的第三級分類的ID const {data: {data, meta}} = await this.{id}/attributes`, { params: {sel: ‘many|only’} })

使用的代碼：

async getParams (type) {
  const id = this.categoryValues[2]
  const {data: {data, meta}} = await this.$http.get(`categories/${id}/attributes`, {
    params: {sel: type}
  })
  if (meta.status !== 200) return this.$message.error('獲取參數數據失敗')
  this[type + 'Attrs'] = data
}
複製代碼

校驗成功後使用：

// 獲取第二個和第三個選項卡的數據
this.getParams('many')
this.getParams('only')
複製代碼

html渲染

<el-tab-pane label="商品參數">
  <el-form label-width="200px">
    <el-form-item v-if="item.attr_vals" v-for="(item,i) in manyAttrs" :key="i" :label="item.attr_name">
      <el-tag v-for="(tag,i) in item.attr_vals.split(',')" :key="i">{{tag}}</el-tag>
    </el-form-item>
  </el-form>
</el-tab-pane>
<el-tab-pane label="商品屬性">
  <el-form label-width="200px">
    <el-form-item v-if="item.attr_vals" v-for="(item,i) in onlyAttrs" :key="i" :label="item.attr_name">
      <el-tag style="width: 300px">{{item.attr_vals}}</el-tag>
    </el-form-item>
  </el-form>
</el-tab-pane>
複製代碼

06-商品添加-完成圖片上傳

使用組件：

<el-upload
  :on-success="handleSuccess"
  :action="action"
  :headers="headers"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
複製代碼

action 是當前的上傳地址且全路徑

headers 請求的時候不是經過axios 因此你須要添加token

// 上傳圖片
dialogImageUrl: '',
dialogVisible: false,
action: this.$http.defaults.baseURL + '/upload/',
headers: {
  Authorization: sessionStorage.getItem('token')
}

// 上傳成功後須要給  form.pics 數組追加圖片
handleSuccess (res) {
  // 圖片地址？  在上傳成功後獲取響應數據   纔有圖片地址
  this.form.pics.push({pic: res.data.tmp_path})
},
handleRemove (file, fileList) {
  // 刪除圖片後臺觸發的事件
  console.log(file, fileList)
  // 移除 form.pics 中對應的圖片對象
  // 根據索引刪除一條便可
  // 在file中能夠獲取當前刪除圖片的臨時路徑
  // 根據路徑去 form.pics 獲取對應的索引
  const tmpPath = file.response.data.tmp_path
  const index = this.form.pics.findIndex(item => item.pic === tmpPath)
  this.form.pics.splice(index, 1)
},
handlePictureCardPreview (file) {
  // 預覽圖片
  this.dialogImageUrl = file.url
  this.dialogVisible = true
},
複製代碼

07-商品添加-使用富文本插件

vue-quill-editor 安裝
npm i vue-quill-editor

import VueQuillEditor from 'vue-quill-editor'

// require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)

組件：

<quill-editor v-model="form.goods_introduce"></quill-editor>
複製代碼

08-商品添加-商品的錄入

準備數據
- 數據在 form 中 attrs 的數據沒有準備
- 其餘數據均可以
提交便可
成功：去列表頁展現

09-訂單列表-組件基礎佈局

10-訂單列表-列表渲染

幾乎copy
搜索的時候接口有問題請忽略

11-訂單列表-收貨地址對話框

實現省市區聯動
- 準備 city.js 模塊包含數據
- 組件導入 city 模塊
- options 賦值

12-訂單列表-物流查詢對話框

<!--時間線-->
<el-timeline>
  <el-timeline-item
    v-for="(item, i) in wlList"
    :key="i"
    :timestamp="item.time">
    {{item.context}}
  </el-timeline-item>
</el-timeline>
複製代碼

數據：

wlList: [
  {
    'time': '2018-05-10 09:39:00',
    'ftime': '2018-05-10 09:39:00',
    'context': '已簽收,感謝使用順豐,期待再次爲您服務',
    'location': ''
  },
  {
    'time': '2018-05-10 08:23:00',
    'ftime': '2018-05-10 08:23:00',
    'context': '[北京市]北京海淀育新小區營業點派件員 順豐速運 95338正在爲您派件',
    'location': ''
  },
  {
    'time': '2018-05-10 07:32:00',
    'ftime': '2018-05-10 07:32:00',
    'context': '快件到達 [北京海淀育新小區營業點]',
    'location': ''
  },
  {
    'time': '2018-05-10 02:03:00',
    'ftime': '2018-05-10 02:03:00',
    'context': '快件在[北京順義集散中心]已裝車,準備發往 [北京海淀育新小區營業點]',
    'location': ''
  },
  {
    'time': '2018-05-09 23:05:00',
    'ftime': '2018-05-09 23:05:00',
    'context': '快件到達 [北京順義集散中心]',
    'location': ''
  },
  {
    'time': '2018-05-09 21:21:00',
    'ftime': '2018-05-09 21:21:00',
    'context': '快件在[北京寶勝營業點]已裝車,準備發往 [北京順義集散中心]',
    'location': ''
  },
  {
    'time': '2018-05-09 13:07:00',
    'ftime': '2018-05-09 13:07:00',
    'context': '順豐速運 已收取快件',
    'location': ''
  },
  {
    'time': '2018-05-09 12:25:03',
    'ftime': '2018-05-09 12:25:03',
    'context': '賣家發貨',
    'location': ''
  },
  {
    'time': '2018-05-09 12:22:24',
    'ftime': '2018-05-09 12:22:24',
    'context': '您的訂單將由HLA（北京海淀區清河中街店）門店安排發貨。',
    'location': ''
  },
  {
    'time': '2018-05-08 21:36:04',
    'ftime': '2018-05-08 21:36:04',
    'context': '商品已經下單',
    'location': ''
  }
]
複製代碼

13-數據報表-echarts使用

/* 1. 引入 echarts 插件 */
/* 2. 準備一個容器 */
/* 3. 實例化echarts對象 須要容器dom */
/* 4. 須要符合echarts規則的配置項 */
/* 5. 設置配置項給實例 */

async getData () {
  const {data: {data, meta}} = await this.$http.get('reports/type/1')
  if (meta.status !== 200) return this.$message.error('獲取報表數據失敗')
  // 後臺給的配置項  和 如今的options 進行合併 而後給圖表使用
  const myEcharts = echarts.init(this.$refs.box)
  // Object.assign(o1,o2)  注意：若是有相同key 後面的生效
  const options = {...this.options, ...data}
  myEcharts.setOption(options)
}
複製代碼

14-項目打包

把項目開發是須要依賴的資源合併
npm run build
是讓webpack進行打包
在 dist 目錄
- 發現：
  - app.xxx.css 較大（用本身的css 第三方的css）
  - vendor.xxx.js 較大第三方的依賴
  - app.xxx.js 本身寫的js代碼組件代碼

15-項目打包優化-路由懶加載

按需加載組件
路由懶加載按照如今當前的路由去加載須要的組件
- ```
const Foo = () => import('./Foo.vue')
複製代碼
```
  const Login = () => import('@/components/Login') const Home = () => import('@/components/home/Home') const Welcome = () => import('@/components/home/Welcome') const Users = () => import('@/components/users/Users') const Rights = () => import('@/components/auth/Rights') const Roles = () => import('@/components/auth/Roles') const Categories = () => import('@/components/goods/Categories') const Params = () => import('@/components/goods/Params') const Goods = () => import('@/components/goods/Goods') const GoodsAdd = () => import('@/components/goods/Goods-Add') const Orders = () => import('@/components/orders/Orders') const Reports = () => import('@/components/reports/Reports')

16-項目打包優化-cdn配置

把第三方的資源使用外鏈的方式來加載

cdn 服務提供前端的資源經過地址就能夠訪問

第一步找到 cnd 地址
第二步在index頁面的最底部

第三步告訴webpack 那些模塊不須要打包

是靠配置文件
加配置項排除打包模塊的配置

// 使用cdn的js包
  externals: {
    // key (包的名稱)  value (js文件暴露在全局的對象名稱)
    // 注意 導包後的 接受包的變量和 暴露在全局的對象名稱 一致
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'echarts': 'echarts'
  },
 module:｛｝
複製代碼

VUE擴展

17-組件傳值-父向子

在子組件的自定義標籤上寫動態屬性 :data='數據'
在子組件中定義 props 的選項 [‘data’]

18-組件傳值-子向父

自定義事件概念
- 綁定事件 <child-a :say="msg" @toParent="fn">
- 觸發事件 this.$emit('toParent', this.msg)
步驟
- 你須要在子組件的自定義標籤上綁定一個自定義事件。
- 若是須要傳值給父組件讓子組件去觸發這個事件觸發的同時是能夠傳參的。

19-組件傳值-非父子關係

事件總結
- 統一控制事件的綁定和觸發
- 這是一個模塊暴露vue實例的模塊
在A組件導入事件總線模塊獲得一個實例
- 用這實例綁定一個自定義事件
在B組件導入事件總線模塊獲得一個實例
- 用這個實例觸發你在 A 綁定的自定義事件
而後經過事件的回調函數能夠傳參

// 事件總線 // 1. 依賴一個VUE實例 import Vue from 'vue' const vm = new Vue() export default vm // 2. 在兩個組件中導入這個實例 // 3. 綁定事件 // 4. 在實例中綁定的事件只有當前實例能夠去觸發