vue電商實戰-黑馬

原創 开水没有春天 2020-06-25 20:02

文章目錄


b站：https://www.bilibili.com/video/BV1bE411p7As?p=2

項目概述

1.電商系統基本業務概述

電商系統一般都提供了：pc端、移動app端、移動web端、微信小程序等多種終端訪問方式。
eg：京東：
1.pc端：https://www.jd.com/
2.移動web：https://m.jd.com/ （手機瀏覽器打開京東網站）
3.app：
4.小程序：
5.pc後臺管理：後臺管理員使用的，使我們準備學習的。

2.電商系統後臺管理系統的功能劃分

管理系統的功能

3項目的開發模式及技術選型

電商後臺管理系統整體採用前後端分離的開發模式，其中前端項目是基於Vue技術棧的SPA項目。

後端：主要操作數據庫，並向前端暴露一些api接口。
前端：繪製頁面，並通過ajax調用api接口。

技術選型：

  • 前端技術棧：
    Vue
    Vue-router
    Element-UI
    Axios
    Echarts

  • 後端技術棧
    Node.js
    Express
    Jwt：狀態保持的一個工具，模擬session的一個登陸記錄功能。
    Mysql：數據庫
    Sequelize：操作數據庫的一個框架。

項目初始化

前端項目初始化

1.vue-cli
2.通過cli創建項目
3.配置路由
4.配置Element-UI
5.配置Axios
6.初始化git遠程倉庫
7.託管項目到Github或者碼雲中

vue及cli的版本查看：

  • vue版本查看：
npm list vue // 進入項目中，使用這個命令

或者：進入項目中package.json文件直接查看

  • vue/cli版本查看：
vue -V  // 查看cli的版本，不是vue的版本  vue --version

npm uninstall vue-cli -g  // 卸載cli-2.x
npm install @vue/cli -g // 安裝cli-3.x

項目地址：https://github.com/ly1994lyy/Vue_Element_ShopManage

我是使用的版本：

@vue/cli 4.2.2 
vue@2.6.11

vue ui

在這裏插入圖片描述

在這裏插入圖片描述

手動配置

1.babel和linter/formatter默認是選中的，那麼必須安裝的。
2.選擇router，使用配置文件，下一步（選的比較少）

1.選擇模式：hash還是history的，我們用hash的（兼容性更強，所以關閉狀態），
2.linter/formatter使用standard的，
3.lint on save // 保存後，就格式化文件

  • 安裝element-ui（在ui界面）- 插件中：
    在這裏插入圖片描述

搜索：element，
結果：vue-cli-plugin-element 1.0.1 安裝即可，安裝完成後需要配置一下：

在這裏插入圖片描述

按需導入：import on demand

  • 安裝axios - UI界面- 在依賴中：
    安裝依賴，
    在這裏插入圖片描述
    啓動項目：（運行成功後，啓動app）
    啓動項目

  • 碼雲

https://gitee.com/
註冊登錄後，是要配置公鑰的。
在這裏插入圖片描述

在這裏插入圖片描述

在這裏插入圖片描述

生成公鑰：ssh-keygen -t rsa -C "[email protected]"，替換爲自己碼雲的郵箱（自己去設置中找去：基本設置-多郵箱管理）
路徑：/Users/likaipeng/.ssh/id_rsa
查看文件內容：cat ~/.ssh/id_rsa.pub // cat就有權限查看了，根sodu很像。

複製內容到公鑰中即可(碼雲後面的描述不正確)。

ssh -T git@gitee.com  // 添加信任

mac使用：
查找文件路徑：
拖拽文件到terminal中，會顯示文件路徑。
command+shift+g：跳轉到地址的快捷鍵。

創建倉庫：

注：使用readme文件初始化這個倉庫 ，一定不要選中。

// Git 全局設置:

git config --global user.name "神zhi殤"
git config --global user.email "[email protected]"


// 本地沒有項目的時候：創建 git 倉庫:
mkdir vue_admin
cd vue_admin
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://gitee.com/lkp_ksbk/vue_admin.git
git push -u origin master

// 本地已經通過cli生成項目的：已有倉庫
cd existing_git_repo
git remote add origin https://gitee.com/lkp_ksbk/vue_admin.git
git push -u origin master

後端項目的環境安裝配置

1.安裝MySQL數據庫
2.安裝Node.js環境
3.配置項目相關信息
4.啓動項目
5.使用Postman測試後端項目接口是否正常

1.初始化mySql。
2.啓動node。
3.使用postman驗證接口是否成功。

phpStudy沒有mac版本的。

// node項目:
npm install 
node app.js

登錄、退出功能

登錄概述

登錄業務流程
1.登錄，2.調接口驗證，3.根據響應狀態跳轉到頁面，

登錄業務的技術點：
1.http是無狀態的。登錄成功後，需要記錄登錄的狀態。cookie、session方式，token方式。
2.通過cookie在客戶端記錄狀態。
3.通過session在服務端記錄狀態。
4.通過token方式維持狀態。

什麼情況下用cookie和session，什麼情況下用token？？？

  • 前後端不存在跨域問題的時候，用cookie和session。
  • 前後端存在跨域問題，使用token方式。

在這裏插入圖片描述

登錄頁面：

  • 語法錯誤vscode報一堆錯誤：
error  Trailing spaces not allowed     no-trailing-spaces // 空對象，不用有空行
Too many blank lines at the end of file. Max of 0 allowed  no-multiple-empty-lines // 文件結尾不能太多空行，只能有一個

Strings must use singlequote  quotes // 都是用單引號（vscode，搜索singlequote，修改爲單引號，格式化後就ok了）

error  Extra semicolon  semi  // 結尾有分號，那麼報錯；vscode，搜索semi，修改爲結尾不用分號，格式化後就ok了）
  • 路由報錯：
vue-router.esm.js?8c4f:16 [vue-router] Non-nested routes must include a leading slash character. Fix the following routes: 
- login

注：非嵌套路由必須包含前導斜槓字符

在這裏插入圖片描述

  • css解析錯誤
Error: Can't resolve 'less-loader'

UI視圖中：開發依賴中安裝less和less-loader，然後重啓項目。
在這裏插入圖片描述

全局樣式：
src/assets/css/global.css，在main.js中import後，可以生效。

  • element-ui 報錯
[Vue warn]: Unknown custom element: <el-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

按需導入的，所以要自己加組件。

imported multiple times  import/no-duplicates

// error, eg:
import { Button } from 'element-ui'
import { Form, FormItem } from 'element-ui'
import { Input } from 'element-ui'

// ok
import { Button, Form, FormItem, Input } from 'element-ui'

iconfont的使用：
src/assets/fonts/iconfont.css，直接在main.js中引用即可。

// fonts文件直接全部複製粘貼在assets下面。
import './assets/fonts/iconfont.css'

data() {} // data後面沒有空格，語法報錯。

// 錯誤信息
Missing space before function parentheses  space-before-function-paren

// 解決：
// 1.id方式，js的：
javascript.format.insertSpaceBeforeFunctionParenthesis

// 2.json方式，ts的：
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false

el-form綁定數據：

// <el-form label-width="0px" :model="loginForm"></el-form> // :model
<el-form label-width="0px" class="login_form" :model="loginForm">

  <el-form-item>
    <el-input
      v-model="loginForm.username"
      placeholder="請輸入賬號"
      prefix-icon="iconfont icon-user"
    ></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-input
    type="password"
      v-model="loginForm.password"
      placeholder="請輸入密碼"
      prefix-icon="iconfont icon-3702mima"
    ></el-input>
  </el-form-item>
  
  <el-form-item class="btns">
    <el-button type="primary">登錄</el-button>
    <el-button type="info">重置</el-button>
  </el-form-item>
  
</el-form>

表單驗證

  • 表單驗證：參考項目。
    1.表單綁定rules。:rules="loginRules"
    2.編寫rules規則。
    3.el-form-item增加prop屬性。rop="username"。

  • 重置表單數據：參考項目。
    1.el-form添加一個ref引用（eg：loginFormRef）。
    2.使用：this.$refs.loginFormRef.resetFields()。resetFields是 form中的methods。

  • 提交前的校驗(表單預驗證)

this.$refs.loginFormRef.validate((valid) => {
  console.log(valid)
})

validate是 form中的methods。

  • 請求數據
    axios安裝包了，但是還沒配置。
// main.js中：
import axios from 'axios' // 引入包
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // 設置根路徑
Vue.prototype.$http = axios // 掛載到原型對象上，使用：this.$http
  • 接口的處理
const result = this.$http.post('login', this.loginForm)
console.log(result) // result返回是Promise。

如果方法返回值是promise，可以使用async和await方法來簡化這次promise操作。
await只能用在被async修飾的方法中。

// 箭頭函數修飾爲異步函數，返回值爲await。
this.$refs.loginFormRef.validate(async valid => {
  console.log(valid) // 返回false，驗證不通過；返回true，調用登錄接口
  if (!valid) return false
  const result = await this.$http.post('login', this.loginForm)
  console.log(result) // {data:{},config:{},headers:{},request:{},status:200,statusText:'OK'}
})

返回的result是一個axios修飾過的對象，我們只要data就好了。所以，結構賦值：

const { data: res } = await this.$http.post('login', this.loginForm)
console.log(res) // res就是data（我們想要的數據）

注：async和await
解構賦值

message的使用：

// main.js
import { Message } from 'element-ui'
Vue.prototype.$message = Message

// 使用：
this.$message.error('登錄了要')

登錄後，token存儲在客戶端，存在session中，然後跳轉到home頁面。

sessionStorage.setItem('token', '123abc')
window.sessionStorage.setItem('token', '123abc')

文件最後一行是newLine：

"files.insertFinalNewline": true

路由守衛

全局前置守衛：

router.beforeEach((to, from, next) => {
  console.log(to) // 要訪問的路徑
  console.log(from) // 從哪個路徑來的額
  next() // next()；放行。next('/login')；強制跳轉。
})

退出

語法格式化

根目錄下新建.prettierrc文件，這是一個json格式的配置文件：

{
  "semi": false, // 末尾不加分號
  "singleQuote": true // 使用單引號
}

禁用部分語法規則，eg：

logout() {} // logout與括號之間沒有空格，但是也會報錯，eg：

Missing space before function parentheses  space-before-function-paren

複製：space-before-function-paren，在.eslintrc.js中，rules：

'space-before-function-paren':0

重新編譯後，就ok了。

element-ui，按需導入的時候，import語句合併。

主頁佈局

header：

Container佈局容器，參考項目。

menu：

  • 佈局和樣式：菜單樹，NavMenu導航菜單，參考項目。
  • 請求數據
    通過axios請求攔截器添加token。
// axios請求攔截
axios.interceptors.request.use(config => {
  console.log(config) // {baseURL:'xxx',data:{},headers:{},method:'post'}
  // 爲請求頭對象，添加Token驗證的Authorization
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config // 最後必須return config
})

baseURL：是自己配置的。
data：接口的body。
header：頭部信息。

注：
1.路由守衛：token
2.攔截器：token

調用菜單接口（異步及結構賦值）：

methods: {
  async getMenuList () {
    const { data: res } = await this.$http.get('menus')
    if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
    this.menuList = res.data
    console.log(res)
  }
},

問題：
1.vscode：console.log的快捷鍵
2.複製了一個菜單list在vue中，但是語法報錯，且太多報錯，不能挨個解決，怎麼辦？
3.

設置代碼片段：
首選項->用戶代碼判斷->javascript，設置（有一個默認註釋的example）：

"Print to console": {
  "prefix": ".log",
  "body": [
    "console.log('$1')$2"
  ],
  "description": "Log output to console"
}

// .log是快捷鍵，迅速調到$1，且有引號，tab後，調到$2，沒加引號。

如果太多錯誤，不想解決了的話：

You may use special comments to disable some warnings.
1.Use // eslint-disable-next-line to ignore the next line.
2.Use /* eslint-disable */ to ignore all warnings in a file.

修改菜單的icon：
接口沒有返回，怎麼改icon呢？
1.可以直接使用iconfont的圖標。
2.使用一個對象，根據id匹配icon。

<i :class="icnosObj[item.id]"></i>

icnosObj: {
  125: 'iconfont icon-users',
  103: 'iconfont icon-tijikongjian',
  101: 'iconfont icon-danju',
  102: 'iconfont icon-shangpin',
  145: 'iconfont icon-baobiao',
}

菜單默認只能展開一個，其他的關閉：

// el-menu加一條屬性：
unique-opened='true'

菜單默認右多1px：

.el-menu {
    border-right: solid 1px #e6e6e6; // 去掉border即可。
}

摺疊和展開菜單的問題：
el-menu中collapse屬性可以控制.
摺疊動畫可以關閉掉：collapse-transition。

路由重定向：

  {
    path: '/home',
    component: Home,
    redirect: '/welcome', // 顯示路由：/welcome；顯示/home重定向到了/welcome
    children: [
      { path: '/welcome', component: Welcome }
      // { path: '/', redirect: 'welcome' } // 顯示路由：/home/welcome
    ]
  }

菜單開啓路由模式：

       <el-menu
          unique-opened="true"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409eff"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
// router:相當於：`:router="true"`,index就是跳轉地址。
  • 菜單高亮：default-active 當前激活菜單的 index：
:default-active="activePath"
  • card的使用（帶box-shadow的）：
<el-card class="box-card">
      123
</el-card>
  • table的使用
<el-table-column label="狀態">
  // 作用域插槽,scope.row：當前行數據的所有內容
  <template slot-scope="scope">
    {{scope.row}}
  </template>
</el-table-column>

<el-table-column label="狀態">
  // 作用域插槽
  <template slot-scope="scope">
    <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
  </template>
</el-table-column>

序號列：

<el-table-column type="index"></el-table-column>

tooltip劃入消失：

enterable	// 鼠標是否可進入到 tooltip 中

vscode快捷鍵：
ctr+b：摺疊目錄欄

input的事件：

Input Events
事件名稱	說明	                    回調參數
blur	在 Input 失去焦點時觸發	(event: Event)
focus	在 Input 獲得焦點時觸發	(event: Event)
change	僅在輸入框失去焦點或用戶按下回車時觸發	(value: string | number)
input	在 Input 值改變時觸發	(value: string | number)
clear	在點擊由 clearable 屬性生成的清空按鈕時觸發

添加用戶：

  • 自定義校驗器
  • 彈框(事件)
  data () {
    // 校驗郵箱
    var checkEmail = (rule, value, cb) => {
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (reg.test(value)) {
        return cb()
      }
      cb(new Error('請輸入合法的郵箱'))
    }
    // 校驗手機號
    var checkMobile = (rule, value, cb) => {
      var reg = /^1[34578]\d{9}$/
      if (reg.test(value)) {
        return cb()
      }
      cb(new Error('請輸入合法的手機號'))
    }
    return {
      userList: [],
      total: 10
    }
  },

        email: [
          { required: true, message: '請輸入郵箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],

Events
事件名稱	說明	   回調參數
open	Dialog 打開的回調	—
opened	Dialog 打開動畫結束時的回調	—
close	Dialog 關閉的回調	—
closed	Dialog 關閉動畫結束時的回調	—

confirm的使用：
confirm返回是一個promise，可以使用async-await的方法。
確認的時候，返回：confirm（一個字符串）
但是cancel的時候，報錯，所以需要一個catch方法，返回錯誤信息。


    async removeUserById (id) {
      const confirmResult = await this.$confirm('此操作將永久刪除該用戶，是否繼續？', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .catch(err => {
          return err
        })
        // .catch(err => err) // 去除{},然後省略return。
      console.log(confirmResult) // confirm || cancel
    }

提交新分支：

git push -u origin user

用戶、角色、權限

在這裏插入圖片描述
用戶：登錄的每一個賬號
權限：賬號擁有的能力，eg：列表的增、刪、改、查的某個權限。
沒有把權限直接綁定在用戶上，而是通過角色。
權限分配給角色，然後角色分配給用戶。

表格展開用：

<el-table-column type="expand"></el-table-column> // 展開列
<el-table-column type="index"></el-table-column> // 索引列

角色列表：
新增、編輯和刪除功能跟用戶列表一樣，自己去做。

權限摺疊顯示：
1.先渲染一級菜單，然後修改樣式（tag，border，右箭頭icon）
2.渲染二級彩打，修改樣式（tag，border，右箭頭icon）
3.渲染三級
4.樣式優化
4.1：頁面加min-width
4.2：垂直居中對齊（el-row加flex佈局樣式）
5.刪除後，刷新列表，但是會摺疊住，體驗不好；
刪除後返回是最新權限的內容，直接替換是不是就可以了。

class類：

// 125: 'iconfont icon-users',
<i :class="icnosObj[item.id]"></i>

:class="['bdbottom',index1===0?'bdtop':'']"

tree的實現：
1.樹渲染
2.改變label字段
3.checkbox
4.選中是id
5.摺疊展開
6.默認選中的（回寫）

// 代碼
<!-- 樹結構 -->
<el-tree
  :data="rightsList"
  :props="treeProps"
  show-checkbox
  node-key="id"
  default-expand-all
  default-checked-keys="defKeys"
></el-tree>
>
>
// 變量：默認選中的節點id值
defKeys: [105, 116]

// 錯誤信息
Invalid prop: type check failed for prop "defaultCheckedKeys". Expected Array, got String with value "defKeys".

如果樹結構的數據使用一個，那麼會有問題的：
樹結構都是一樣的（整個tree），所以準備請求一次，放在data中，那麼每次關閉彈框後，重新打開彈框顯示的還是之前的數據（checkbox選中狀態的），哪怕我checked的list爲空，都不行了。
解決方法：
1.每次彈框打開都重新賦值一次。
2.使用重新賦值checked的方法。

// 使用setCheckedKeys方法（element官網有使用方法）
this.$refs.rightsTree.setCheckedKeys(this.defKeys) 

// 獲取節點：
this.$refs.tree.getCheckedNodes() // 有參數，是否只獲取leaf節點
this.$refs.tree.getCheckedKeys() // 有參數，是否只獲取leaf節點

商品分類，eg：
1.一級分類：家用電器
2.二級分類：電視、空調、洗衣機、等
3.三級分類：

  • 曲面電視，超薄電視，OLED電視，55英寸，65英寸
  • 中央空調，懸掛式空調，櫃式空調
  • 洗衣機一體機，滾筒洗衣機，烘乾機

在這裏插入圖片描述

git push -u origin goods_cate // 提交到遠程，且沒有該分支
git push --set-upstream origin goods_params // 默認提示的

路由沒有跳轉成功的問題：

// com=>快捷生成的居然死 comments，艹 
{ path: '/categories', comments: Cate }

剛他媽發現該用人家接口地址的，不一定用本地的…好蠢。

產品分類中，使用了樹狀的table，需要用第三方的：
在這裏插入圖片描述

columns而不是column。

總是把函數寫在了data中，這樣總是報錯！！！！

商品管理-參數管理

動態參數：顏色，版本（可以選擇的）
靜態屬性：重量，長寬，上市年份，（用戶不可選擇的，只讀的）
在這裏插入圖片描述

參數列表：
1.切換tab的時候，如果是當前tab，那麼不用調用函數了，不做處理就是了。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章