仿樂優商城後臺管理-前端vue+後端thinkphp5.1+數據庫mysql項目開發----前端第一天

仿樂優商城前端後臺管理開發文檔

---

目錄

---

---

內容

---

1、功能要求

• 功能詳細目錄
  • 菜單列表
  • 首頁
    • 商品統計
  • 商品管理
    • 分類管理
      • 列表展示
        • 分頁
        • 搜索
      • 新增
      • 修改
      • 刪除
    • 品牌管理
      • 列表展示
        • 分頁
        • 搜索
      • 新增
      • 修改
      • 刪除
    • 商品列表
      • 列表展示
        • 分頁
        • 搜索
      • 新增
      • 修改
      • 刪除
    • 規格參數
      • 列表展示
        • 分頁
        • 搜索
      • 新增
      • 修改
      • 刪除
  • 會員管理
    • 會員統計
    • 會員管理
  • 銷售管理
    • 交易統計
    • 訂單管理
    • 物流管理
    • 促銷管理
  • 權限管理
    • 權限管理
    • 教師管理
    • 人員管理

二、技術選擇

2.1、要求

• 高效數據渲染
• 頁面簡潔
• 功能明確

2.2、技術選型

名稱	版本	簡介	功能
vue-cli	4.0.15	vue腳手架	搭建vue項目工具
vue	2.6.10	前端框架	高效的數據渲染
vue-router	3.1.3	vue路由	前端路由導航
axios	0.19.0	網絡請求	實現對後端數據請求
vue-axios	2.1.5	axios簡單封裝	axios接口使用更加簡潔
vuetify	2.1.15	UI	UI界面組件
moment	2.24.0	時間模塊	日期時間處理

三、開發

3.1、項目搭建

    本項目使用vue-cli4腳手架搭建，vue-cli安裝與項目創建不在詳述，下面貼出參考地址：https://blog.csdn.net/mengxianglong123/article/details/102949138

    項目搭建成功，自動打開瀏覽器，界面如圖所示：
項目運行效果圖：

tips : 關於windows cmd窗口創建項目期間不能使用方向鍵的問題，給出連接地址：https://blog.csdn.net/gaogzhen/article/details/103601526

3.2、目錄結構

初始項目目錄結構圖：

其中config與register目錄爲後面自定義添加。下面爲目錄簡單介紹：

• node_modules: npm 包管理工具安裝的模塊位置
• public: 公共目錄
• src： 源代碼目錄
  • assets : 公共資源目錄，存放css，image，font等。
  • components: 自定義組件目錄
  • plugins: 自定義插件或者需要簡單封裝的第三方插件，比如vuetify,element-ui等
  • router: 路由組件
    • index.js： 路由組件配置入口文件
  • views : 視圖目錄
  • APP.vue： vue根組件
  • main.js：項目入口文件
  • .browserslistrc
  • .eslintrc.js: eslint配置文件
  • .gitignore: git管理忽略配置文件
  • babel.config.js: babel配置文件
  • package.json:

自定義目錄，爲src子目錄：

• config: 公共配置目錄
  • config.js: 配置文件
• register: 註冊目錄,簡化入口mian.js配置
  • asserts.js : css導入文件
  • component.js: 組件註冊文件
  • filter.js: 自定義全局過濾器註冊文件

3.2、基礎配置

3.2.1、入口文件main.js

• 位置：@/main.js
• 源代碼：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
// 導入樣式註冊器
import './register/assets'

//導入組件註冊器
import './register/component'

// 導入全局過濾器註冊器
import './register/filter'


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router, // 路由組件註冊
  vuetify, // vuetify註冊
  render: h => h(App)
}).$mount('#app')

2.3.1、全局基礎配置

• 位置：@/config/config.js
• 源代碼：

const baseUrl = 'http://api.leyou.com'
const config = {
  locale: 'zh-CN', // en-US, zh-CN
  url: baseUrl,
  debug: {
    http: false // http request log
  },
  api: `${baseUrl}/api`,
  theme:{ // vuetify主題
    primary: "#2196F3",
    secondary: "#455A64",
    accent: "#9c27b0",
    error: "#f44336",
    warning: "#FFC107",
    info: "#64B5F6",
    success: "#4caf50"
  },
  isDark:true,
  unitOption:[ // 單位配置
    { header: '長度' },
    { value: 'mm'},
    { value: 'cm'},
    { value: 'dm'},
    { value: 'm'},
    { value: '寸'},
    { value: '英寸'},
    { value: '尺'},
    { divider: true },
    { header: '重量' },
    { value: 'mg'},
    { value: 'g'},
    { value: 'kg'},
    { value: 't'},
    { divider: true },
    { header: '像素' },
    { value: '萬像素'},
    { divider: true },
    { header: '頻率' },
    { value: 'Hz'},
    { value: 'mHz'},
    { value: 'gHz'},
    { divider: true },
    { header: '存儲' },
    { value: 'KB'},
    { value: 'MB'},
    { value: 'GB'},
    { divider: true },
    { header: '電壓' },
    { value: 'V'},
    { value: 'KV'},
    { divider: true },
    { header: '電池容量' },
    { value: 'mAh'},
    { divider: true },
    { header: '功率' },
    { value: 'w'},
    { value: 'Kw'},
    { divider: true },
    { header: '電流' },
    { value: 'μA'},
    { value: 'mA'},
    { value: 'A'},
    { divider: true },
    { header: '電阻' },
    { value: 'Ω'},
    { value: 'KΩ'},
    { value: 'A'},
    { divider: true },
  ]
}

export default config

3.2.2、路由組件導入和註冊

    路由組件可以直接導入，也可以通過懶加載實現，這裏推薦懶加載實現。本例只有一個組件-Category.vue組件使用懶加載，如果要實現性懶加載，照做就可以。

本例router/index.js源代碼@3.2.1.1：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../views/Layout.vue'
import Reports from '../views/home/Reports.vue'
import Brand from '../views/item/Brand.vue'
// import Category from '../views/item/Category.vue'  // 下面懶加載模式
import GoodsList from '../views/item/GoodsList.vue'
import Specification from '../views/item/Specification.vue'
import Statistics from '../views/user/Statistics.vue'
import UserList from '../views/user/UserList.vue'
import Statistics1 from '../views/sale/Statistics.vue'
import Order from '../views/sale/Order.vue'
import Logistics from '../views/sale/Logistics.vue'
import Promotion from '../views/sale/Promotion.vue'
import AuthList from '../views/authority/AuthList.vue'
import Role from '../views/authority/Role.vue'
import Member from '../views/authority/Member.vue'


Vue.use(VueRouter)

const routes = [{
  path: '/',
  name: 'layout',
  component: Layout,
  redirect: '/index/report',  // 默認跳轉首頁管理統計頁面
  children: [
    {
      name: 'reports',
      path: 'index/report',
      component: Reports
    },
    {
      name: 'brand',
      path: 'item/brand',
      component: Brand
    },
    {
      name: 'category',
      path: 'item/category',
      component: () => import('@/views/item/Category.vue')  // 懶加載模式
    },
    {
      name: 'goodsList',
      path: 'item/goodsList',
      component: GoodsList
    },
    {
      name: 'specification',
      path: 'item/specification',
      component: Specification
    },
    {
      name: 'statistics',
      path: 'user/statistics',
      component: Statistics
    },
    {
      name: 'userList',
      path: 'user/userList',
      component: UserList
    },
    {
      name: 'statistics1',
      path: 'sale/statistics',
      component: Statistics1
    },
    {
      name: 'order',
      path: 'sale/order',
      component: Order
    },
    {
      name: 'logistics',
      path: 'sale/logistics',
      component: Logistics
    },
    {
      name: 'promotion',
      path: 'sale/promotion',
      component: Promotion
    },
    {
      name: 'authList',
      path: 'authority/authList',
      component: AuthList
    },
    {
      name: 'role',
      path: 'authority/role',
      component: Role
    },
    {
      name: 'member',
      path: 'authority/member',
      component: Member
    },
    
  ]
}]

const router = new VueRouter({
  routes
})

export default router

• @ : 指src目錄

    main.js 相關源代碼@3.2.1.2：

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 路由組件導入
import vuetify from './plugins/vuetify'
// 導入樣式註冊器
import './register/assets'

//導入組件註冊器
import './register/component'

// 導入全局過濾器註冊器
import './register/filter'


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router, // 路由組件註冊
  vuetify,
  render: h => h(App)
}).$mount('#app')

3.2.3、vuetify導入和註冊

• 位置：@/plugins/vuetify.js
• 源代碼：

import Vue from 'vue'
import Vuetify from 'vuetify'
import config from '../config/config.js'

Vue.use(Vuetify)

const opts = {
  theme: config.theme, // 主題
  icons: { // 字體圖標
    iconfont: ['mdi']
  }
}

export default new Vuetify(opts)

2.3.4、axios配置

• 位置：@/plugins/http.js
• 源代碼：

// axios 模塊
import axios from 'axios'
import config from '../config/config.js'

// 創建實例，配置默認值

const http = axios.create()

// 配置基路徑
http.defaults.baseURL = config.api

export default http

3.2.5、導入樣式

• 位置：@/register/assets.js
• 源代碼：

// 導入字體圖標
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

// 導入vuetify樣式
import 'vuetify/dist/vuetify.min.css'
import '../assets/material.css'

// 導入element-ui樣式
import 'element-ui/lib/theme-chalk/index.css'

// 導入ivewer樣式
import "iview/dist/styles/iview.css"

3.2.6、導入自定義組件

• 位置：@/register/component.js
• 源代碼：

import Vue from 'vue'
import VueAxios from 'vue-axios'
import Http from '../plugins/http'
import CustomComponent from '../components/custom-component'
import config from '../config/config'

Vue.use(VueAxios, Http) // 對axios簡單封裝
Vue.use(CustomComponent) // 自定義組件註冊

Vue.prototype.$config = config // 掛載基礎配置

3.2.7、自定義組件介紹

• 目錄：@/component/
  • cascader: 級聯組件
    • Cascader.vue: 詳細見v-combobox組件文檔
  • form: 表單組件
    • Upload:上傳組件：詳細見添加-修改-刪除表單項文檔
  • message: 消息提示組件
    • index.js：詳細見添加-修改-刪除表單項文檔

3.2.8、導入自定義全局過濾器

• 位置：@/register/filter.js
• 源代碼:

import Vue from 'vue'
import Moment from 'moment'

// 定義全局過濾器：日期時間格式化過濾器
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return Moment(dataStr).format(pattern)
})

後記 ：本項目爲參考某馬視頻thinkphp5.1-樂優商城前後端項目開發，相關視頻及配套資料可自行度娘或者聯繫本人。上面爲自己編寫的開發文檔，持續更新。歡迎交流，本人QQ:806797785

• 前端項目源代碼地址：https://gitee.com/gaogzhen/vue-leyou
• 後端thinkphp源代碼地址:https://gitee.com/gaogzhen/leyou-backend-thinkphp