MMALL ADMIN总结

这个项目的的功能分为登录,首页基本数据渲染,用户页面数据渲染,订单管理,商品管理等功能。这个项目用到的技术栈有vue cli2项目，vue-router路由,elemen ui，axios,富文本编辑器等。
1.登录
首先实现页面基本布局,绑定双向绑定username和password;调用后台登录接口,判断返回数据的状态,成功则将用户信息保存到本地然后跳转到首页,并进行提示,不成功的话给与提示登录失败;

2.首页
使用element ui的布局容器实现首页的基本布局;左侧导航栏,顶部退出功能;路由懒加载,点击退出按钮删除本地存储的用户信息,跳转到登录页面;

3.分页
使用element ui的分页器单独封装一个组件,以供后续多个组件调用；

4.用户页面(功能:数据渲染,分页等)
使用element ui的表格来实现页面的布局,调用后端接口传递pageNum和pagesize等参数,拿到接口返回的数据渲染表格;引入并注册封装好的分页组件,传递页码,每页的数量,和数据总条数等数据;监听分页组件
传递过来的方法和参数,将对应的页码和每页条数进行赋值,在调用用户接口来实现分页。

5.订单管理(数据渲染,数据查询,分页,详情)
同样使用element ui的表格实现页面的布局,调用后端订单接口传递对应数据,拿到返回的数据进行赋值来实现表格的渲染,接着引入分页组件,传递参数,监听分页组件传递的方法和参数,将参数重新赋值,调用接口,实现
分页功能,查询功能,input输入框双向绑定数据,调用后端订单查询接口,传递input框的数据,拿到返回值渲染表格实现搜索功能; 进详情使用插槽telemplete结合scope使用,点击按钮触发事件携带参数scope；然后
log一个scope,scope数据里面有一个row,里面是表格理每一条的数据;然后拿到数据里面的订单号;通过动态路由传参,params传参在路由后面拼接参数进入到订单详情页面;在mounte里面获取到params的参数;
然后调用详情接口传递params获取的参数拿到返回的数据渲染页面;

6.商品管理
(1)商品管理(商品列表渲染,查询，上架下架,详情和修改还有添加商品)
商品列表渲染:同样使用element ui表格来美化页面,调用后台商品列表接口床pageNum和pagesize参数,获取到数据后渲染表格数据;
分页:使用之前封装好的分页组件,传递页码和每页条数和数据总条数,父组件监听分页组件传递的方法和数据,重新调用商品列表接口来实现分页;
上架下架:使用teleplmte标签结合slot-scope使用；当点击上下架按钮时触发一个方法传递scope参数,在scope参数里面拿到商品的id和状态,然后调用商品上下架接口,在将scope中拿到的数据的参数,在传递状态参数时
需要进行一下取反,调用成功返回数据重新渲染页面并进行提示
查询:下拉列表框,两个option值绑定不同的value值,下拉列表框绑定一个属性,当点击不同的值时进行判断,如果值是通过id查询则调用商品id查询接口传递输入框的值进行调用;拿到数据重新渲染页面,如果是商品名称查询
则调用商品查询名称接口传递输入框的值,返回数据,渲染页面
商品详情:使用插槽slot-scope当点击详情按钮时拿到scope参数从里面获取到商品的id参数,动态路由传参params在详情路由后面拼接id参数;在详情页面获取到params的id参数,接着调用商品详情接口传递id参数,拿到
数据,渲染页面
修改商品:使用插槽slot-scope当点击详情按钮时拿到scope参数从里面获取到商品的id参数,动态路由传参params在详情路由后面拼接id参数;在修改商品页面获取到params的id参数,接着调用商品详情接口传递id参数,拿到
数据,渲染页面,上传图片功能:element ui上传图片功能,:action绑定要传输图片的地址,然后有一个成功之后的钩子函数,从中获取到图片的url地址赋值给提交图片的参数,点击提交按钮,调用修改商品的接口传递修改后的数据，
查看返回的状态,并进行提示;
添加商品:点击添加商品按钮,跳转到添加商品页面,查看添加商品需要的参数,在页面中的input框中绑定这些参数,图片上传跟修改商品的一样;接着调用添加商品接口，传递参数,查看返回的状态,进行提示

(2)品类管理(品类列表渲染,修改品类,查看子品类,添加品类)
列表渲染:调用品类列表接口传递页码和每页条数,拿到数据,渲染表格;
修改品类:定义一个变量,在点击修改品类按钮的时候把定义好的变量赋值给一个prompt框,结合插槽slot-scope拿到scope中当前品类的id,调用修改品类名称按钮,传递品类id和变量;查看返回的状态,重新渲染页面进行提示
添加品类:点击添加品类按钮进入添加品类页面;在input框中双向绑定一个变量值;调用添加品类接口,传递变量,查看返回的状态,进行提示;

在项目中使用element ui的方法
1.全局引入
首先安装element ui 依赖;
cnpm i element-ui --save
在min.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
挂载
Vue.use(ElementUI);
2.按需引入
按需引入的话需要下载一个插件
cnpm i babel-plugin-component -D
然后修改.babelrc文件
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
在min.js中按需引入
Vue.use(Button)
Vue.use(Select)

MMALL ADMIN总结相关推荐

MMALL ADMIN 后台管理总结
后台管理项目前期准备 1,vue-cli2 项目框架 2,下载axios插件 cnpm install axios,安装Element.ui , vue-cli2中使用scss 注意版本 cnpm i ...
开发陪玩游戏源码的后台管理系统，登录的实现是第一步！
在开发陪玩游戏源码时,不仅需要开发Android端和iOS端,还需要开发服务端,也就是后台管理系统,由于后天管理系统掌控者用户端的陪玩游戏源码使用效果,所以非常重要,今天我们先来了解一下号后台管理系统 ...
mmall 项目实战（一）项目初始化
1.创建数据库及表数据脚本: /* Navicat Premium Data Transfer Source Server : 182.92.82.103 Source Server Type ...
Laravel Dcat Admin 安装
安装环境 PHP >= 7.1 Laravel 5.5.0 ~ 7.* Fileinfo PHP Extension 开始安装如果安装过程中出现 composer 下载过慢或安装失败的情况, ...
Django 上传图片和Admin站点5.2
上传图片当Django在处理文件上传的时候,文件数据被保存在request.FILES FILES中的每个键为<input type="file" name="& ...
ceph admin socket修改ceph配置文件
目前有两种动态修改的方式来让ceph中各个组件的配置生效,所以介绍如下两种方式方便我们进行功能或者代码的调试使用ceph daemon方式修改 ceph daemon osd.0 help用于osd ...
Django模板系统和admin模块
只需要记两种特殊符号:{{ }}和 {% %}变量相关的用 {{}}, 逻辑相关的用 {%%}. Filters 语法: {{ value|filter_name:参数 }}default{{ val ...
使用admin lte 碰到访问Google字体的问题
下载了admin lte 的模板,运行的时候,发现很慢,看了一下console,发现adminlte.css里有import google的字体文件,众所周知的原因,无法访问,所以网页很慢,没办法,只 ...
with admin option /with grant option
1. with admin option是用在系统权限上的,with grant option是用在对象权限上的. SQL> grant create synonym to scott with ...

MMALL ADMIN总结

MMALL ADMIN总结相关推荐

最新文章

热门文章