后台管理项目前期准备

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'

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

2. 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}
   ]
   }