后台管理happymmail总结

1.项目准备

安装vue脚手架，创建项目
下载 axios，Element-ui组件，富文本编辑器以及Echarts
在入口文件main.js里面导入挂载需要的依赖
清除#app的默认样式
启动项目在路由里的index.js里面用redirect配置重定向到登录页面
使用element-ul组件实现页面基本布局

2.项目组成：

分为登陆页面、首页、商品管理、品类管理、订单管理、用户管理、数据统计等几个模块

3.接口

首先我们要在config里index.js文件中来配置公共接口，进而可以进行跨域访问数据
接着我们要在src下创建一个utils文件夹，在这个文件夹里建一个js文件，在里面进行axios的二次封装，配置完成之后进行导出
然后我们要在utils文件的同级创建一个文件夹，再建一个js文件，将utils导出的axios及进行引入，这个js文件里面放置所有的数据接口

4.登录

首先需要获取登录的接口，进行传参（用户名和密码），然后将后台返回token以及用户信息存到本地中
我们还要设置token过期时间，如果过期就需要重新登陆
还要在router.js里配置路由守卫，判断token是否存在，不存在的话就不能跳转到其他页面

5.商品管理

商品管理页有搜索功能，上下架，查看，编辑，添加商品以及分页

首先我们要引入商品管理的接口，进行数据请求，然后进行渲染，页面表格可以用element-ui中的表格进行实现

搜索

先请求搜索的接口数据
然后判断按什么类型(ID或名称)进行搜索，通过类型来筛选数据并渲染

上架下架

先获取商品状态数据接口
通过接口获取商品的状态、ID进而渲染页面
然后就可以通过三元表达式来将商品的状态改为在售或已下架以及切换状态
在切换状态完成时用element-ui中的轻提示来进行提示

商品查看

详情页有一级二级分类以及图片显示等功能
点击查看，用动态路由携带id进行跳转到详情页
在详情页，通过商品详情的接口进行获取数据，并通过参数渲染
这些数据都要用disabled属性进行禁用

一级二级分类实现：

首先通过map来遍历我们获取到数据的数组
判断数组中的name是否等于val值
如果相等，就从商品接口中获取相应id的数据
进行渲染

图片显示：

先引入详情接口，然后通过动态路由传过来的ID进行赋值
然后图片是由我们数组中的参数图片路径与图片地址进行拼接就实现了图片的显示

商品编辑

它跟商品详情差不多，只不过是可以编辑，还有一级二级分类、图片上传、富文本编辑器等功能
点击编辑，用动态路由携带id进行跳转到编辑页面
还是先通过商品列表的接口获取数据，并渲染渲染到页面上
分类是通过map来遍历我们获取到数据的数组，判断数组中的name是否等于val值，如果相等，就从商品接口中获取相应id的数据并进行渲染

上传图片

利用Element-ui的upload上传进行图片的上传
我们用action属性来选择上传的地址
用on-preview来上传图片时进行调用
用on-success文件上传时进行调用
然后图片是由我们数组中的参数，浏览器中的图片路径与图片地址进行拼接就实现了图片的显示
最后点击上传进行上传到页面上

富文本编辑器

首先我们要用npm install vue-quill-editor -S下载富文本编辑器插件
在main.js中引入需要的依赖
插入富文本标签，配置双向数据绑定以及内容改变时的配置
将改变是的内容赋值给定义的数组，进行渲染
点击提交时用Element-ui中的轻提示组件进行提示
提交成功时，用this.$router.push跳转到商品管理页面

添加商品

添加商品有基本数据渲染、一二级分类、上传文件以及富文本编辑器等功能
它与商品编辑一样，只不过我们要在上传文件时要规定文件的类型和大小

首先在点击添加商品按钮时，跳转到添加页面
然后引入商品管理的接口，然后获取数据并渲染
分类是通过map来遍历我们获取到数据的数组，判断数组中的name是否等于val值，如果相等，就从商品接口中获取相应id的数据并进行渲染

上传文件

利用Element-ui的upload上传进行文件的上传
我们用action属性来选择上传的地址
用on-preview来上传图片时进行调用
用on-success文件上传时进行调用
然后图片是由我们数组中的参数，浏览器中的图片路径与图片地址进行拼接就实现了图片的显示
用before-upload属性来限制图片类型以及大小，通过file来进行计算
接着就用if判断来进行判断类型，只能上传jpg和png格式，还要判断文件大小是否不能超过2m，进行返回
最后点击上传进行上传到页面上，并通过this.$router.push跳转到商品管理页面

6.品类管理

品类管理有渲染基本数据，比如品类、品类名称，还有修改名称，查看子品类，添加品类
渲染数据我们就需要先引入品类管理的接口，然后进行进行获取数据并进行渲染

修改名称

修改名称的话我们需要用到弹出框进行提示，并携带我们需要修改的名称
进行if判断，如果这个名称与数据里面的名称不相同并且不为空的话，我们就将接收过来的id和名称赋值给数据中的参数，然后进行渲染
我们还要调用一下商品接口请求过来的数据，然后渲染到页面上
修改成功的话就用Element-ui中的轻提示来添加一个提示效果

查看子品类

在点击品类管理中的查看子品类时，用动态路由携带ID进行跳转到子品类中
然后在子品类中，我们通过商品管理的接口来通过携带过来的参数ID来进行赋值，并渲染相应id的子品类数据

添加品类

我们先引入添加评论的接口，将我们数据中的参数双向绑定到输入框中
点击提交按钮时将数据渲染到页面上
渲染成功时，就添加一个轻提示的效果并用this.$router.push跳转到一级品类页面

7.订单管理

订单页面有通过ID进行搜索、查看功能详情以及分页功能
先引入订单管理的接口，然后进行进行获取数据并进行渲染

搜索

我们先获取订单搜索的接口，然后将获取过来的数据给赋值给里面的参数ID这就实现了通过ID进行查询
然后再将input框进行清空清空

查看详情

点击查看的时候，需要用动态路由传递该数据的id进行跳转到详情页面
然后引入订单管理的接口将传递过来的ID赋值给接口的参数，进而渲染对应id的数据
这些数据都需要添加disabled属性进行禁用

8.用户管理

用户管理有数据渲染和分页的功能
需要先引入用户管理的接口，然后将接口中的值赋给我们定义的数组进行数据渲染ID、用户名、邮箱电话、注册时间
注册时间我们需要用到过滤器，返回我们当前的时间，然后通过逻辑或的方式进行渲染

9.分页功能

分页基本上是每个页面都要用到的一个功能，所以我们就可以将它放在一个单独的组件中，然后进行数组的传值
要先创建一个文件夹，然后在这个新的文件夹中创建一个组件

@size-change:监听pagesize改变的事件

@current-change:监听页码值改变的事件

:current-page:当前页

:page-size:当前的页数

layout:控制显示内容

:total：总共的信息条数

在这个组件中，通过this.$emit将这些自定义事件传到需要用到的组件中
并在需要用到的组件中引入这个组件
然后将传过来的事件在methods中进行赋值并获取数据，将我们获取到的页数、总条数、当前页再通过父传子的方式传递到分页的组件中就可以实现分页功能

后台管理happymmail总结相关推荐

php列表显示教程,Dedecms后台管理文档列表显示自定义字段方法教程
有客户提出要求,在DEDECMS后台管理文档列表中,需要在列表中显示自定义的字段内容,在默认状态下,这些字段是不会再列表中显示的,下面就是解决方法: 找到dede/content_list.php文件 ...
GitHub开源的10个超棒后台管理面板
目录 1.AdminLTE 2.vue-Element-Admin 3.tabler 4.Gentelella 5.ng2-admin 6.ant-design-pro 7.blur-admin 8. ...
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
Java项目:前台预定+后台管理酒店管理系统(java+SSM+jsp+mysql+maven)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能介绍: 前台用户端:用户注册登录,房间展示,房间分类,房间按价格区间查询,房间评论,房间预订等等后台管理端:用户信息查 ...
云答题微信小程序实现前端加后台管理
1.为什么要使用微信云开发微信云开发自己是不需要域名(备案的域名),服务器,搭建数据库等. 2.使用技术微信小程序+相关云接口 java (SpringBoot+Maven) 后台管理使用 VUE ...
美多商城后台管理之登录、浏览器的同源策略
登录后台管理中我们首先需要完成登录功能,我们可以通过改写美多表单登录来完成相应的功能. 在后台登录中,由于我们前端服务和后端服务的域名不一样,所以我们首先解决跨域问题. 登后的状态保持我们采用jwt ...
美多后台管理和项目环境搭建
美多后台管理 Django框架已经提供了一个Admin管理后台,但是Admin的本身的页面可修改的页面布局效果比较少,无法满足公司定制页面需求,这时候就需要独立开发一套后台管理系统,满足公司对后台数据 ...
整合公司3个网站后台管理子系统的经验总结 - 实现多系统的单点登录（ASP.NET + ASP）...
公司有3个网站的后台管理系统,其中2个是ASP编写的网站后台管理系统,1个是ASP.NET编写的网站后台管理系统,各自的用户权限管理,后台的风格都不一样,虽然用起来很好用,但是还是感觉有些凌乱一些,公 ...
用 Flask 来写个轻博客 (29) — 使用 Flask-Admin 实现后台管理 SQLAlchemy
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读 Flask-Admin BaseView 基础管理页面 Mo ...