后台管理系统
关注
分享
扫一扫
文章平均质量分 67
Revin050
这个作者很懒，什么都没留下…
展开
-
后台管理系统17（完结）
文章目录权限管理模块静态页面以及展示数据收集数据菜单&按钮权限菜单权限按钮权限权限管理模块静态页面以及展示数据收集数据首先书写静态页面。接下来配置路由配置完成后书写接口请求数据在index中导入然后动态渲染页面，此时页面效果如下所示菜单&按钮权限菜单权限首先如何实现不同的用户所能操作|查看菜单不一样的？解决方案如下起始不同的用户（角色），登录的时候会向服务器发请求，服务器会把用户相应的菜单的权限的信息，返回给我们我们可以根据服务器返回的数据（信息），可原创 2022-04-08 19:45:36 · 1053 阅读 · 0 评论 -
后台管理系统16
文章目录sale模块sale静态组件sale动态展示observe组件observe静态组件动态展示mock数据sale模块sale静态组件首先搭建出框架。<template> <el-card class="box-card" style="margin: 10px 0px"> <div slot="header" class="clearfix"> <!-- 头部左侧内容 --> <el-tabs clas原创 2022-04-07 21:10:27 · 355 阅读 · 0 评论 -
后台管理系统15
文章目录Home首页（一）card静态组件组件结构小图表静态组件折线图的书写柱状图的书写进度条的书写Home首页（一）接下来对首页进行书写card静态组件组件结构首先观察完成的项目，发现首页基本由三部分组成，将首页拆分为三个组件，最上面有四个小图表，图表之间留有缝隙以及阴影效果，四个小图表基本类似，因此拆分组件card来布局。简单修改一下此时页面效果如下小图表静态组件接下来对小图表进行静态布局。布局如下所示<template> <div> &原创 2022-04-07 16:51:14 · 1268 阅读 · 1 评论 -
后台管理系统14
文章目录e-charts基本使用echarts展示多个图表多个容器展示多个图表一个容器展示多个图表数据集dataset使用echarts内置组件的使用echarts坐标体系一个坐标体系多个坐标体系e-charts基本使用使用的时候先引入e-charts依赖包然后给e-charts准备一个容器，这个容器就是显示图表的区域。接下来利用echarts.init创建e-charts实例。最后指定图表的配置项与数据。接下来绘制一个柱形图，具体代码如下所示<!DOCTYPE html><原创 2022-04-07 14:56:19 · 1026 阅读 · 0 评论 -
后台管理系统13
文章目录深度选择器数据可视化canvas绘制线段canvas绘制矩形canvas绘制圆形canvas画布清除与绘制文字canvas绘制柱状图svg的基本使用深度选择器深度选择器数据可视化canvas绘制线段首先介绍以下canvascanvas是HTML5新增的特性，是一个双闭合标签canvas标签默认的宽高为300px*150px浏览器认为canvas画布是一个图片给canvas画布添加文本没有效果，没有意义给canvas标签添加子节点同样没效果，没意义如果想操作canvas：绘制图原创 2022-04-06 16:06:36 · 621 阅读 · 0 评论 -
后台管理项目12
文章目录完善SkuForm添加sku保存与取消的操作保存的操作取消的操作sku列表的展示sku模块的展示静态页面展示数据上架与下架操作SKU详情查看完善SkuForm添加sku保存与取消的操作保存的操作当用户点击保存的时候，应该将之前收集的数据进行整理，把spuInfo的信息整理好，然后书写接口，将整理好的数据发送给服务器进行存储。首先先书写存储的接口。接下来给保存按钮绑定点击事件，当用户点击的时候，将数据整理到spuInfo中，并且发请求。发完请求存储完成之后，需要将页面跳转到第一页。因此需原创 2022-04-06 14:06:22 · 628 阅读 · 0 评论 -
后台管理系统11
文章目录SkuForm的操作SkuForm静态组件获取SkuForm数据展示SKU与收集SKU数据图片的展示与收集SkuForm的操作SkuForm静态组件首先书写一下SkuForm的静态组件，当用户在SPU模块中点击添加Sku的时候，页面应该跳转到SkuForm页面。首先给这个绿色按钮绑定一个点击事件，当点击时，进行跳转，接下来书写页面。静态布局代码如下所示，其中有个新的知识点el-table-column type="selection"这个type会变成勾选框，之前通常用的是Index原创 2022-04-05 21:25:57 · 659 阅读 · 0 评论 -
后台管理系统10
文章目录SPU模块（四）SpuForm组件保存的操作添加SPU的操作数据回显问题删除SPU的操作SPU模块（四）SpuForm组件保存的操作首先书写修改或者添加SPU的接口接下来给保存按钮绑定点击事件，当点击保存按钮时，应发送请求添加或者修改SPU并且页面跳转为初始页面。添加SPU的操作当用户选择添加SPU的时候，需要发起两次请求，一次请求品牌数据，一次请求全部的销售属性。所以需要完善添加SPU按钮的回调函数。由于保存之前写好了，此时添加的内容书写完成后，即可直接保存。数据回原创 2022-04-04 21:28:29 · 343 阅读 · 0 评论 -
后台管理系统9
文章目录SPU模块（三）SpuForm销售属性的数据展示SpuForm照片墙图片的收集销售属性添加的操作销售属性值展示与收集删除销售属性与属性值操作SPU模块（三）SpuForm销售属性的数据展示当发送Spu请求数据的时候，会请求到自身所含的销售属性。如下所示将这些数据渲染到el-table中，首先设置data与属性名的展示。接下来展示属性值名称列表，在这里用到elementui的Tag标签的动态编辑标签。将组件复制到项目中，并进行修改，先整理好静态组件，关于动态事件随后添加。接下来处原创 2022-04-04 17:37:31 · 1758 阅读 · 0 评论 -
后台管理系统8
文章目录SPU模块（二）获取SpuForm数据SpuForm组件数据展示与收集数据SPU模块（二）获取SpuForm数据完成上一步的工作后，接下来该书写接口。接口如下所示接口书写完成后，当父组件点击修改SPU的时候，子组件请求数据并且存储数据。SpuForm组件数据展示与收集数据在上一步已经对请求到的数据进行存储，接下来将存储的数据渲染到页面上。将界面中SPU名称与品牌的tmid以及SPU描述进行收集，同时将SPU名称与品牌的tmid以及SPU描述，以及SPU图片进行动态展示。原创 2022-04-03 23:17:50 · 341 阅读 · 0 评论 -
后台管理系统7
文章目录SPU模块静态页面SPU列表展示SPU管理内容切换SpuForm静态界面SpuForm请求业务SPU模块静态页面首先将spu模块分为两部分，利用两个el-card进行分割接下来在第一个el-card中添加之前声明的全局组件三级联动组件。由于在Spu中也会利用到三级联动组件收集categoryid的功能以及可操作性的变化，因此顺便把三级联动组件收集数据的逻辑以及可操作性的变化也写好。接下来搭建第二个el-card首先在最上面添加一个el-button随后展示el-table，在表格原创 2022-04-03 21:20:05 · 1708 阅读 · 0 评论 -
后台管理系统6
文章目录平台属性界面（三）查看模式与修改模式切换查看模式与修改模式注意事项修改属性的查看与编辑模式切换表单元素自动聚焦删除属性值的操作保存操作三级联动可操作性平台属性界面（三）查看模式与修改模式切换接下来设置当用户进入修改时，当用户点击属性值名称时，该单元格变为input框，而移开焦点时，变为span展示数据。具体效果如下所示首先，当用户点击添加添加属性值的时候，为每一个属性值列表的内容添加一个flag标记，用来区分展示的模块是input还是span接下来通过flag展示不同元素，并根据点原创 2022-04-02 21:32:10 · 1021 阅读 · 0 评论 -
后台管理系统5
文章目录平台属性界面（二）添加属性与修改属性静态页面收集属性名与属性值解决返回按钮数据回显问题修改属性平台属性界面（二）添加属性与修改属性静态页面静态页面的书写如下所示，主要功能为点击添加属性或者修改按钮时，弹出另一个页面，针对这个可以利用v-show解决。具体代码如下所示收集属性名与属性值首先书写添加属性与属性值的接口接口需要携带数据，回到attr组件，在data中设定收集的数据利用双向绑定收集属性名收集属性值 ，此时修改一个小地方，就是当写好属性名的时候，添加属性值按钮才可以被原创 2022-04-02 15:56:32 · 556 阅读 · 0 评论 -
后台管理系统4
文章目录三级联动组件注册全局组件静态页面数据动态展示平台属性界面（一）静态页面动态展示属性三级联动组件注册全局组件三级联动组件并不是只在一个地方出现，因此，把三级联动组件设置为全局组件更方便，首先在components文件夹下新建CategorySelect文件夹，然后新建index.vue。接下来在main.js中注册全局组件。静态页面找到elementUI的Form表单的行内表单，进行修改，具体修改如下所示。数据动态展示接下来将死数据换为真实数据，首先书写接口。接下来在三级联动原创 2022-04-01 18:02:41 · 730 阅读 · 1 评论 -
后台管理系统3
文章目录品牌的表单验证删除品牌操作品牌的表单验证首先找到elementUI的Form表单的表单验证.Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。首先给el-form添加rules属性（必须有model属性）接下来添加规则接下来设置prop属性接下来设置当验证全部通过，才能进行接下来的操作首先给form打上ref接下来书写逻辑删除品牌操作首先书写接口接下来找到删除原创 2022-03-31 20:50:02 · 401 阅读 · 0 评论 -
后台管理系统2
文章目录路由搭建品牌管理静态组件列表展示添加品牌与修改品牌静态页面添加品牌动态路由搭建首先把多余的路由组件删除接下来修改router文件夹中的路由配置。删除多余的路由配置，添加新的路由配置，如下所示。品牌管理静态组件页面布局利用elementUI进行布局具体代码如下所示布局结果如下列表展示首先给四个组件新建四个接口文件，如下所示接下来书写获取数据的接口为了更好的调用接口，将四个模块的接口进行暴露此时在任何组件都可以调用接口接口书写完成后，开始发送请求。并渲原创 2022-03-31 20:04:06 · 2587 阅读 · 1 评论 -
后台管理系统1
文章目录下载模板登录业务下载模板首先下载一个模板，在模板的基础上完成后续操作。下载地址为https://github.com/PanJiaChen/vue-admin-template下载完成后，进行解压，之后在文件夹中打开命令行输入npm install 此时文件夹会出现node_modules这个文件夹。接下来可以打开项目看一下，在文件夹中打开命令行，输入npm run dev，此时项目效果如下所示登录业务由于模板中使用的都是mock数据，为了完善登录业务，需要将数据都转换成真实数原创 2022-03-30 18:28:52 · 495 阅读 · 0 评论