位置: IT常识 - 正文

电商后台管理系统简介

编辑:rootadmin
电商后台管理系统简介 项目介绍

推荐整理分享电商后台管理系统简介,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

黑马后台管理系统是一个电商后台管理系统的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能

开发技术

此项目开发我用到的技术有:vue2+node.js+webapck element axios router vuex

项目的开发流程:

项目选型

搭建登录注册页,权限管理,封装接口,vuex,路由配置,环境配置, 本地代理

主功能页面:按照各个页面业务需求进行开发

打包项目

代码整理,代码注释

分模块

这个项目大致分为了:登录,退出登录,用户管理,权限管理,商品管理,订单管理,数据统计7部分

登录模块

实现用户登录功能的逻辑是: ①在登录页面输入账号和密码进行登录,将数据发送给服务器 ②服务器返回登录的结果,登录成功则返回数据中带有token ③客户端得到token并进行保存,后续的请求都需要将此token发送给服务器,服务器会验证token以保证用户身份。

首先在点击登录时候进行登陆的的表单验证

然后在request.js中添加请求拦截和响应拦截。在请求拦截中,会给请求头添加token字段,还有loading动画的开启。在响应拦截中,可以做一些loading动画的关闭,还有可以根据后端返回的状态码,做一些检验token是否有效或者过期的操作。接着就是做一些axios进行的api接口的封装,这里我用到了async,await封装请求接口函数,这样可以将异步操作同步化操作,代码更加友好。

在封装里处理token过期清除本地存储返回登录页。

跳转成功了我又去配置了路由守卫,判断是不是有token,有没有权力让他去进入主页面

侧边栏的布局以及渲染 请求数据

在element-ui中也提供了相应的组件,在NavMenu导航菜单中可以找到相应的组件对应的区域

:router 开启路由模式,设置el-menu-item的index值 为路由标识

动态渲染:不同身份登录,权限控制

data中定义一个数组leftmenu来接收左侧菜单数据

 

退出模块

调用接口,删除本地中的token,并跳转到登录页

用户管理模块

添加编辑

展示:现有用户数量 GET

增加:用户名、密码、邮箱、手机,新增后重新加载页面 POST

删除:删除后重新加载页面 PUT

修改:DELETE 1.改基本信息:手机、邮箱 2.改角色:关系到权限

组件 面包屑、搜索框、表格、分页组件、switch状态转换

请求数据状态切换、分页、面包屑导航切换然后对添加和编辑的表单进行验证,然后为了优化项目

我把添加和编辑的封装到组件进行复用,使页面解构更清晰。

搜索功能的实现

将值利用绑定到queryInfo.query

分页!

@size-change: 监听pagesize改变的事件 @current-change: 监听页码值改变的事件 :current-page: 当前页 :page-sizes:一页的的信息条数 :page-size: 当前的页数 layout: 控制显示内容 :total:总共的信息条数

权限管理模块

角色列表

添加角色(简单提交)

编辑、删除(简单slot-scope传参、delete请求)

分配角色(tag)

权限展示(表格展开行)

角色列表页面一个重点就是利用了element ui中的 table表格插件的展开行

分配权限也是利用利用了element ui中的 tree树形控件来完成的

<!-- 表格 -->     <el-table :data="list" border style="width: 100%">       <el-table-column type="expand">         <template v-slot="scope">           <!-- 当前角色权限渲染 -->           <el-row             v-for="(item, i1) in scope.row.children"             :key="item.id"             :class="[i1 === 0 ? '' : 'bdtop', 'vcenter']"           >             <el-col :span="6">               <!-- 一级 -->               <el-tag closable>{{ item.authName }}</el-tag>             </el-col>             <el-col :span="18">               <!-- 二级 -->               <el-row                 v-for="(it, i2) in item.children"                 :key="it.id"                 :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']"               >                 <el-col>                   <el-tag                     type="success"                     closable                     @close="delRight(scope.row, it.id)"                     >{{ it.authName }}</el-tag                   >                 </el-col>                 <!-- 三级 -->                 <el-col :span="18">                   <el-tag                     type="warning"                     closable                     v-for="i in it.children"                     :key="i.id"                     @close="delRight(scope.row, i.id)"                     >{{ i.authName }}</el-tag                   >                 </el-col>               </el-row>             </el-col>           </el-row>         </template>       </el-table-column>       <el-table-column type="index" label="#"></el-table-column>       <el-table-column prop="roleName" label="角色名称" align="center">       </el-table-column>       <el-table-column prop="roleDesc" label="角色描述" align="center">       </el-table-column>       <el-table-column label="操作" align="center" width="300px">         <template slot-scope="scope">           <el-button             type="primary"             size="mini"             @click="handleEdit(scope.$index, scope.row)"             >编辑</el-button           >           <el-button             type="success"             size="mini"             @click="handleDelete(scope.row)"             >删除</el-button           >           <el-button type="warning" size="mini" @click="showfen(scope.row)"             >分配权限</el-button           >         </template>

展开所有的权限(树形结构自带的属性:default-expand-all) 显示:先勾选上拥有的三级权限(三层forEach,获得所有三级权限的集合,赋值给checklistArr) :default-checked-keys="checklistArr"

ref 绑定后方便使用他的事件

this.$refs.tree.getCheckedKeys() 返回目前被选中的节点的 key 所组成的数组 this.$refs.tree.getHalfCheckedKeys() 返回目前半选中的节点的 key 所组成的数组 data 是绑定的数据 []

show-checkbox 显示复选框

node-key 节点的key

default-expand-all 是否默认展开所有节点

default-checked-keys 默认勾选的节点的 key 的数组

props 配置选项

权限列表

重点在于权限等级可以利用插槽和v-if v-else-if来判断权限的等级

商品管理

在商品管理页面又被分为了:商品分类 分类参数 商品列表三个页面

商品列表

添加编辑

分页、面包屑导航切换然后对添加和编辑的表单进行验证,然后为了优化项目

我把添加和编辑的封装到组件进行复用,使页面更清晰。

搜索功能的实现

电商后台管理系统简介

将值利用绑定到queryInfo.query

分页 @size-change: 监听pagesize改变的事件 @current-change: 监听页码值改变的事件 :current-page: 当前页 :page-sizes:一页的的信息条数 :page-size: 当前的页数 layout: 控制显示内容 :total:总共的信息条数

上传图片 (Upload组件、百度Web Uploader)

请求上传接口,需要设置token(这里不是发axios请求)

:on-remove 文件列表移除文件时的钩子

on-success 文件上传成功时的钩子

headers 设置上传的请求头部

action 上传地址

on-preview 点击文件列表中已上传的文件时的钩子

list-type 文件列表的类型

分类参数

这一模块数据 分为了 动态参数和静态属性 所以分别发送不同的请求,获得数据保存在本地,再利用tabs组件进行渲染即可,添加,修改,删除功能

级联选择器 type=3 展示出三级分类

动态(涉及列表展开)、静态参数

查询名称、价格、重量、参数管理

添加商品详细描述(名称、价格、重点、数量、分类、参数、属性、图片)

步骤条组件+纵向tabs组件(需要包裹在el-form里)(并列关系)

上传图片

商品分类

在这个页面我们用了一个新的组件tree-table 树形表格 首先我们要下载表格vue-table-with-tree-grid插件,全局引入

show-index                   //序号​•       align="center"               //表格文字是否剧中​•       width="220px"​•       index-text="#"               // 设置序号的label属性​•       :data="list"                     //表格所有数据​•       :columns="columns"       //设置属性

我认为添加分类是整个项目的及大难点之一,是一个三级联动的

options:数据源​   props:     //靶子对象​   value:     //选中的属性​•   label: //显示的名称​•   children: //嵌套的结构​•     v-model: //选中数组​•     @changed: //选择项发生变化时候 触发的函数

 

订单列表

添加编辑

展示:现有用户数量 GET

增加:用户地址、手机,新增后重新加载页面 POST

删除:删除后重新加载页面 PUT

修改:DELETE 1.改基本信息:手机号,用户地址 2.改角色:关系到权限

组件 面包屑、搜索框、表格、分页组件、switch状态转换

请求数据状态切换、分页、面包屑导航切换然后对添加和编辑的表单进行验证,然后为了优化项目

我把添加和编辑的封装到组件进行复用,使页面解构更清晰。

搜索功能的实现

将值利用绑定到queryInfo.query

分页@size-change: 监听pagesize改变的事件@current-change: 监听页码值改变的事件:current-page: 当前页:page-sizes:一页的的信息条数:page-size: 当前的页数layout: 控制显示内容:total:总共的信息条数数据统计

// 安装echarts库 npm install echarts -S

// 导入echarts接口 import echarts from ‘echarts’

 

项目难点

【难点1】权限管理

1.创建vue实例的时候讲vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限

的公共页面.

2.当用户登录后,获取用户的role,讲role和路由表每个页面的需要的权限作比较,生成最终用户,

可访问的路由表.

3.调用router.addRoutes添加用户可访问的路由.

4.使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件。

【难点2】三级权限展示,树形结构,row、col的结构

请求角色列表的产物,因此数据包含在getRoleList的返回值里。 理解el-row和el-col的关系,两者包含成为一维。

<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row>​​​{   "data": [       {           "id": 30,           "roleName": "主管",           "roleDesc": "技术负责人",           "children": [               {                   "id": 101,                   "authName": "商品管理",                   "path": null,                   "children": [                       {                           "id": 104,                           "authName": "商品列表",                           "path": null,                           "children": [                               {                                   "id": 105,                                   "authName": "添加商品",                                   "path": null                               }                           ]                       }                   ]               }           ]       }   ],}​​​<el-row v-for="(item1,i) in scope.row.children" :key="i" class="expand">   <!-- 第一列中放一级标签 -->   <el-col :span="4">       <!-- 可移除标签,这里展示一级标签,绑定取消权限方法 -->       <el-tag class="expand" closable @close="delRight(item1.id,scope.row)">{{item1.authName}}</el-tag>   </el-col>   <el-col :span="20">       <!-- 第二列也是一行两列 -->       <el-row v-for="(item2,index) in item1.children" :key="index">           <!-- 第二行第一列中放二级标签 -->           <el-col :span="4">               <el-tag class="expand" type="success" closable @close="delRight(item2.id,scope.row)">{{item2.authName}}               </el-tag>           </el-col>           <el-col :span="20">               <el-tag class="expand" @close="delRight(item3.id,scope.row)" closable type="warning"                   v-for="(item3,indexInner) in item2.children" :key="indexInner">{{item3.authName}}</el-tag>           </el-col>       </el-row>   </el-col></el-row>

【难点3】分配权限,树形结构el-tree 全选、半选(如何展示)

展开所有的权限(树形结构自带的属性:default-expand-all) 显示:先勾选上拥有的三级权限(三层forEach,获得所有三级权限的集合,赋值给checklistArr) :default-checked-keys="checklistArr" 提交:需要获取所有的一、二、三级权限的集合(全选+半选),传参修改

//显示​editRight(role) {   // checklist权限的集合,是个树形结构   this.checklist = role.children   this.currentRoleId = role.id   var tmpArr = []   this.checklist.forEach(item1 => {       var item2 = item1.children       item2.forEach(item2 => {           var item3 = item2.children           item3.forEach(item3 => {               tmpArr.push(item3.id)           })       })   })   this.checklistArr = tmpArr}​//提交​async confirmRole() {   let arr1 = this.$refs.mytree.getCheckedKeys()   let arr2 = this.$refs.mytree.getHalfCheckedKeys()   let arr = [...arr1, ...arr2]   const res = await this.$http.post(`roles/${this.currentRoleId}/rights`, { rids: arr.join(',') })}

【难点4】树形组件element-tree-grid在表格中的运用(组件选择、配置)

表格样式:树形结构 +【是否有效】【级别】【操作】字段; 组件选择:由于第一列的el-table-column要展示为树形结构,因此使用组件element-tree-grid,all props of el-table-column are supported; 在获取到三级商品分类后,element-tree-grid只需要绑定好对应的属性,即可显示。

<el-table :data="list" border style="width: 100%">     <el-table-column type="index" label="#" align="center"></el-table-column>     <el-table-column prop="authName" label="权限名称" align="center">     </el-table-column>     <el-table-column prop="path" label="路径" align="center">     </el-table-column>     <el-table-column label="权限等级" align="center">       <template v-slot="scope">         <el-tag v-if="scope.row.level == 0">一级</el-tag>         <el-tag type="success" v-else-if="scope.row.level == 1">二级</el-tag>         <el-tag type="warning" v-else>三级</el-tag>       </template>     </el-table-column>   </el-table>

【难点5】级联选择器-添加分类(理解接口type参数)

由于最细添加的是三级分类(或者添加一级、二级分类),因此级联选择器只用展示一、二级的父类,请求分类接口,type=2 value / v-model: 选中项绑定值,是一个数组 级联选择器的handleChange方法,能获取到最接近一层的父类参数分类id,配置级别和分类名称,组成一个obj作为参数发POST请求

<el-dialog     @close="clearDefault"     title="分配权限"     :visible.sync="dialogVisible"     width="30%"     :before-close="handleClose"   >     <el-tree       show-checkbox       default-expand-all       :default-checked-keys="defaultKeys"       node-key="id"       :data="rightstree"       :props="Propslist"         ref="treeData"     ></el-tree>

【难点6】分类参数 – 只允许为三级分类设置参数

级联选择器 type=3 展示出三级分类

动态(涉及列表展开)、静态参数

如何限定只让第三级被选中:

handleChange () { if (this.selectedOptions.length !== 3) {   this.$message.warning('商品只能添加到三级分类')   this.selectedOptions.length = 0 }}

【难点7】什么时候渲染出参数,tabs标签页改造

在el-tab-pane里含了el-table–绑定dynamicAttrs el-button 在点击了级联选择器器之后,渲染出动、静态参数

async handleChange() { if (this.value.length === 3) { if (this.active === '1') { // 动态参数 const res = await this.$http.get(`categories/${this.value[2]}/attributes?sel=many`) this.dynamicAttrs = res.data.data this.dynamicAttrs.forEach((item) => { // 把attr_vals转为数组类型 item.attr_vals = item.attr_vals.split(',') }) } else if (this.active === '2') { const res1 = await this.$http.get(`categories/${this.value[2]}/attributes?sel=only`) this.staticAttrs = res1.data.data } }}项目收获

1.从头下手,到做一遍后,后面的几个模块比较相似,自己进行了实现

2.最大收获就是从拿到一个项目开始,梳理它的功能模块,然后各个模块再细分为单个功能例如添加,删除,修改等,然后逐个功能进行实现

3.在实现各个功能的时候,从老师那里学到了很多逻辑,包括思考问题的方式,比如这个项目,各个功能要做的大同小异,无非是拿到数据,进行处理,然后渲染,监听用户操作,修改数据,提交请求

4.还有就是之前没有怎么用过的 作用域插槽,层级选择器,树状结构,出现在项目中,

5.然后就是对于 axios拦截器的使用,比如登录时用到的request,在发起请求时为请求添加token,存储token,还有另一个 response,在获得数据时,添加loading效果;

6.然后就是帮助自己 复习了Vue-router,更加熟悉了路由的操作;

7.对Element-ui的使用更加熟练

8.还学会了封装全局的按钮鉴权,封装添加修改的的表单元素

本文链接地址:https://www.jiuchutong.com/zhishi/300659.html 转载请保留说明!

上一篇:HTML 事件参考手册

下一篇:【深度学习】AI一键换天

  • 荣耀magic4支持无线充电吗(荣耀magic4支持无线)

    荣耀magic4支持无线充电吗(荣耀magic4支持无线)

  • iqooz5有nfc和红外吗(iqoo5支持红外遥控吗)

    iqooz5有nfc和红外吗(iqoo5支持红外遥控吗)

  • 微信语音通话铃声怎么设置(微信语音通话铃声在哪里设置)

    微信语音通话铃声怎么设置(微信语音通话铃声在哪里设置)

  • realmex50pro是什么指纹解锁呢(realmex50pro是什么手机)

    realmex50pro是什么指纹解锁呢(realmex50pro是什么手机)

  • 微信怎么单向删除好友(微信如何单项删除好友)

    微信怎么单向删除好友(微信如何单项删除好友)

  • 华为旗下的手机品牌(华为旗下的手机哪哪款手机好)

    华为旗下的手机品牌(华为旗下的手机哪哪款手机好)

  • 表格乘号怎么打(怎么输入乘号x)

    表格乘号怎么打(怎么输入乘号x)

  • 阿里巴巴集团小二会旺旺联系卖家吗(阿里巴巴集团小二发消息过来)

    阿里巴巴集团小二会旺旺联系卖家吗(阿里巴巴集团小二发消息过来)

  • 如何查通话记录详单(移动手机如何查通话记录)

    如何查通话记录详单(移动手机如何查通话记录)

  • 华为畅玩9a什么时候上市的(华为畅玩9a什么处理器)

    华为畅玩9a什么时候上市的(华为畅玩9a什么处理器)

  • 闲鱼发布违规信息如果不申诉会有影响吗(在闲鱼发布违规信息严重违规会影响淘宝店铺吗)

    闲鱼发布违规信息如果不申诉会有影响吗(在闲鱼发布违规信息严重违规会影响淘宝店铺吗)

  • 抖音关注置顶怎么弄(抖音关注置顶怎么取消掉)

    抖音关注置顶怎么弄(抖音关注置顶怎么取消掉)

  • a12相当于骁龙多少(a12相当于骁龙多少和865)

    a12相当于骁龙多少(a12相当于骁龙多少和865)

  • 钉钉下载到手机的文件在哪里(钉钉下载到手机的文件为什么格式不对)

    钉钉下载到手机的文件在哪里(钉钉下载到手机的文件为什么格式不对)

  • 快手的亲密值是怎么升的(快手的亲密值是怎么算的)

    快手的亲密值是怎么升的(快手的亲密值是怎么算的)

  • 苹果图片放大镜怎么弄(苹果图片放大镜在哪里)

    苹果图片放大镜怎么弄(苹果图片放大镜在哪里)

  • kindle一般能用多少年(kindle能用几年)

    kindle一般能用多少年(kindle能用几年)

  • 怎么知道对方有没有把你电话拉黑(怎么知道对方有没有艾滋病)

    怎么知道对方有没有把你电话拉黑(怎么知道对方有没有艾滋病)

  • 系统处于免提通话状态怎么解决(系统处于免提状态怎么解决)

    系统处于免提通话状态怎么解决(系统处于免提状态怎么解决)

  • 华为nnbs可以卸载么(nebofor华为卸掉了怎么装)

    华为nnbs可以卸载么(nebofor华为卸掉了怎么装)

  • 抖音怎么搜id抖音怎么找人(抖音如何搜索id号)

    抖音怎么搜id抖音怎么找人(抖音如何搜索id号)

  • qcyt1和t1s区别(qcy t1和t1c的区别)

    qcyt1和t1s区别(qcy t1和t1c的区别)

  • vivoy93返回键在哪里(vivoy93怎么设置返回键)

    vivoy93返回键在哪里(vivoy93怎么设置返回键)

  • 手机腾讯新闻视频如何下载(手机腾讯新闻视频怎么下载)

    手机腾讯新闻视频如何下载(手机腾讯新闻视频怎么下载)

  • oppor15到底防不防水(oppo r15防不防水)

    oppor15到底防不防水(oppo r15防不防水)

  • 如何保护excel表格中的内容不被修改(如何保护excel表格不被打开)

    如何保护excel表格中的内容不被修改(如何保护excel表格不被打开)

  • 苹果电脑字体文件夹位置(苹果电脑字体文件怎么拖出来)

    苹果电脑字体文件夹位置(苹果电脑字体文件怎么拖出来)

  • 小规模计提税金及附加会计分录怎么写
  • 所得税汇算清缴调整项目
  • 设备出租的账务处理
  • 进项抵扣联丢了怎么办
  • 信息技术服务费入什么科目
  • 其他综合收益影响所有者权益吗
  • 账务处理和税前扣除如何处理
  • 未实现融资收益纳税调整
  • 应付职工薪酬的一级科目
  • 人力资源外包公司排名
  • 股东转账实收资本怎么填
  • 经营性固定资产计入什么科目
  • 固定资产之前没提折旧,数额交大
  • 商品税目编码表查询
  • 劳务派遣专用发票超过9万怎么办理
  • 会计累计折旧属于什么科目
  • 2018年高新技术企业所得税
  • 教育附加费和地方教育附加费的计算
  • 小规模开专票不超过45万要交税吗
  • 国税2017年16号文
  • 简易计税视同销售如何处理?
  • 企业进行破产清算时,适用于账面价值与实际价值
  • 端午节给员工发福利说什么
  • 企业土地未全部使用如何缴纳房产税?
  • 当月费用下月付款
  • gh树形数据是什么意思
  • 发票产生的材料是什么
  • 小规模纳税人减征额怎么计算
  • 计提本月应付的租金
  • 冲减预交的增值税税率
  • 材料暂估的会计分录怎么做
  • macbook不用键盘膜会进灰吗
  • php能开发微信小程序吗
  • dgservice.exe是什么文件
  • win11测试版后续怎么变正式版
  • 税法的构成要素中,()是税法最基本的要素
  • php做网页
  • 出现又离开
  • 吃辣第二天长痘痘
  • 损益类科目借贷方向是什么
  • 数据 挖掘
  • 已抵扣认证的发票开红字发票需要将原票退回吗
  • 前端面试经常被问的问题
  • es6新增了什么
  • 不同情况不同处理的句子
  • 发票查询密码区空白怎么回事
  • 停车费报销怎么说委婉
  • phpcms怎么修改模板风格
  • 季度利息收入分录
  • 折扣折让的会计分录
  • 公允价值变动损益在利润表哪里
  • 什么情况下适用简易程序
  • 年度财务报告和年度报告
  • 营业执照已办理,公司章程在哪里找
  • 残保金的税收优惠政策
  • 诉讼财产保全保函
  • 安保公司差额征税开具发票
  • 公司运营成本如何计算
  • 什么是委托加工原材料
  • 行政单位年终奖的相关发放规定
  • 不动产进项税额转出
  • 收到投资款如何做税务登记
  • 一年以内到期的长期借款属于
  • 如何调整以前年度错账
  • 资产负债率怎么调整到50%以下
  • 三种实现方法实现的特点
  • 在windows上装ubuntu
  • win8破解密码开机密码
  • windows全局搜索快捷键
  • win8.1介绍
  • win10 edge浏览器崩溃
  • windows向microsoft报告
  • win8.1system磁盘占用率高
  • opengl sharder
  • cocos2d开发的知名游戏
  • unity3d cant add script
  • ug输入代码
  • node.js express中app.param的用法详解
  • 地税局热线电话是多少
  • 运城取暖费网上怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设