仿乐优商城后台管理-前端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