后台管理项目前期准备

1，vue-cli2 项目框架

2，下载axios插件 cnpm install axios，安装Element.ui ，

vue-cli2中使用scss 注意版本

cnpm install sass-loader@7.1.0 --save-dev （8.0.0） vue-cli2 报错
cnpm install node-sass@4.13.1 --save-dev

项目组成：分为登陆页面、首页用户、商品管理、品类管理、订单管理、用户列表、百度地图，Apache ECharts

登录页面通过用户名输入框，密码输入框，进行正则校验，输入错误给予提示点击登录按钮进行

接口数据判断，成功则登录

首页通过Element.ui 实现简单的响应式布局首页内容通过接口获取，进行渲染

商品管理页面：主要功能点，商品查询，商品添加，上架，查看，编辑，分页

实现方式：通过商品名称或id查询对应的数据然后渲染，

添加：添加页的内容进行存储，点击提交按钮进行发送存储的数据，

，上架：通过修改状态实现上架下架，

查看：通过id，把对应的数据渲染出来，无法修改，

编辑：通过id ，拿到数据后可编辑，修改完成后查询提交修改后的数据

品类管理

主要功能点：添加品类修改名称查看子品类

添加品类：把需要添加的品类id 品类名称保存，发送

修改名称：获取对应id数据，进行修改后保存，重新上传数据进行渲染

查看子品类：通过品类ID 获取对应的子数据，进行渲染

订单管理

主要功能：按订单号查询，查看订单数据

按订单号查询：通过订单号，获取数据，进行渲染

查看订单数据：通过订单号，获取数据，渲染查看

用户管理

主要功能：数据渲染

获取接口数据，进行页面渲染

其它功能点总结

1，配置服务器跨域

找到项目中的config.js 在index.js中配置跨域

const path = require('path')module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {"/login":{target:"http://adminv2.happymmall.com/manage",changeOrigin:true,  //允许转发pathRewrite: { //重写'^/login': ''}}},

2，axios 二次封装配置请求拦截和响应拦截

import axios from "axios";const service = axios.create({// baseURL:"http://adminv2.happymmall.com/manage"
})//请求拦截器
service.interceptors.request.use((config) => {return config
})//响应拦截器
service.interceptors.response.use((config) => {return config
})export default service

图片上传功能

通过element-ui组件

<template><div><el-uploadclass="upload-demo"name="upload_file"action="/login/product/upload.do":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove":on-success="onsuccess"><img :src="imgUrl == '' ? url : imgUrl" alt="" /><el-button size="small" type="primary">点击上传</el-button></el-upload></div>
</template>
<script>
export default {props: ["url"],name: "Day5MallImg",data() {return {imgUrl: "",};},mounted() {},methods: {onsuccess(response) {console.log(response);this.imgUrl = response.data.url;this.$emit("img", response.data.uri);},handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);},},
};
</script><style lang="scss" scoped>
img {width: 70px;height: 70px;
}
</style>

3，富文本编辑器

1，下载富文本 npm i vue-quill-editor

2，在man.js中全局引入

import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)//在需要使用富文本的地方放置代码
<quill-editor v-model="list.detail" @change="editChange($event)"></quill-editor>
使用 v-model 进行数据双向绑定  使用@change事件handleChange(value) {console.log(value);},

4，webpack打包

安装cnpm cnpm npm install -g cnpm
安装脚手架 cnpm install -g vue-cli
安装webpack-simple模板并创建一个demo01的文件夹vue init webapck-simple demo01
进入demo01文件cd demo01
下载webpack-simple的依赖 cnpm init
开启虚拟服务器 npm run dev
下载路由 cnpm install vue-router -S
在main.js引入

import routerConfig from './router.config.js'

src里写一个 router.config.js 配置路由：

import Mains from "./components/Mains.vue"
import Detail from "./components/Detail.vue"
//import 引入 自定名字 路径是‘href’
export default{// 暴露文件//出口文件routes:[{path:'/mains',component:Mains},{path:'/detail/:xiabiao',component:Detail},{path:'/',component:Mains}
]
}

MMALL ADMIN 后台管理总结相关推荐

python的django后台管理_python测试开发django-17.admin后台管理
前言通常一个网站开发,需要有个后台管理功能,比如用后台管理发布文章,添加用户之类的操作.django的admin后台管理主要可以实现以下功能基于admin模块,可以实现类似数据库客户端的功能,对数 ...
django21：admin后台管理\media配置\图片防盗链\暴露后端资源\路由分发\时间分类
admin后台管理创建超级用户 createsuperuser 1.到应用下的admin.py注册模型表 from django.contrib import admin from blog imp ...
Django admin后台管理页面的常用设置
Django admin后台管理页面的常用设置选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...
第二十课 Django Admin后台管理
第二十课 Admin后台管理 1. admin创建用户创建管理员账号: python manage.py createsuperuser# 按提示输入用户名.邮箱.密码 2. 注册模型如果只是在a ...
admin后台管理及数据库表管理
admin 后台数据库管理 django 提供了比较完善的后台管理数据库的接口,可供开发过程中调用和测试使用 django 会搜集所有已注册的模型类,为这些模型类提拱数据管理界面,供开发者使用使用步 ...
【Admin后台管理】Geodjango后台显示地图并加载空间字段
原文作者:我辈李想版权声明:文章原创,转载时请务必加上原文超链接.作者信息和本声明. 文章目录前言一.django+admin 二.geodjango+admin 三.报错处理前言在前面的博 ...
IIS或Apache部署Django项目时，Admin后台管理CSS样式丢失？
运行环境: Windows 10 专业版 64位 Python27 Django1.11 Mysql5.7 IIS 10 或 Apache24 丢失CSS样式后的界面: 正确加载CSS样式的界面: 通 ...
django admin后台管理插件django-suit入门
前言用过django的同学大概都知道,admin后台那个丑到爆的界面: 虽然程序猿不太那么讲究审美,但是这么吃藕的一个界面,反正搁我我是忍不了.不过呢,还好django扩展能力还是挺强的,有牛人开发 ...
Django Admin后台管理功能使用
前言用过Django框架的童鞋肯定都知道,在创建完Django项目后,每个app下,都会有一个urls.py文件,里边会有如下几行: 1 2 3 4 5 from django.contrib im ...

MMALL ADMIN 后台管理总结

vue-cli2中使用scss 注意版本

项目组成：分为登陆页面、首页用户、商品管理、品类管理、订单管理、用户列表、百度地图，Apache ECharts

首页通过Element.ui 实现简单的响应式布局首页内容通过接口获取，进行渲染

品类管理

订单管理

用户管理

其它功能点总结

1，配置服务器跨域

2，axios 二次封装配置请求拦截和响应拦截

图片上传功能

3，富文本编辑器

4，webpack打包

MMALL ADMIN 后台管理总结相关推荐

最新文章

热门文章

MMALL ADMIN 后台管理总结

vue-cli2中使用scss 注意版本

项目组成：分为登陆页面、首页用户、商品管理、品类管理、订单管理、用户列表、百度地图，Apache ECharts

首页通过Element.ui 实现简单的响应式布局首页内容通过接口获取，进行渲染

品类管理

订单管理

用户管理

其它功能点总结

1，配置服务器跨域

2，axios 二次封装 配置请求拦截和响应拦截

图片上传功能

3，富文本编辑器

4，webpack打包

MMALL ADMIN 后台管理总结相关推荐

最新文章

热门文章

2，axios 二次封装配置请求拦截和响应拦截