【无标题】

HAPPY MMALL项目总结

跨域：可以在config文件下的index.js进行配置 target：基础地址 转发目标路径 changeOrigin:允许转发 pathRewrite：重写路径

Axios封装：引入axios  创建实例 请求拦截 响应拦截  

封装成一个公共的函数 公布出来 函数返回一个promise对象 // params  是形参对象 接收的是实参-对象 最后抛出

• 登录页面

页面布局：利用element-ui布局里的表单把用户名和密码构建出来，再用el-button按钮写登录按钮。

功能：input框里v-model绑定的可以在data里定义，这样就得到了用户名和密码;登录按钮给一个点击事件，点击登录就会登录成功；引入登录接口，写在方法里，判断状态成功时则弹出登陆成功信息，可以设置登陆过期，创建一个对象，然后把对象存到本地存储里，登陆成功 跳转首页，反之不能成功跳转。

• 首页

侧边栏利用element-ui组件进行封装，首页引入接口并且获取数据然后渲染数据即可，点击板块跳转到所对应的页面。

• 商品管理

功能有 数据渲染 搜索 分页 上下架 查看 编辑 添加

数据渲染：引入接口并进行传参拿到数据进行赋值 进行渲染

搜索：给搜索点击事件 选入是否按id或者按名称进行查询 如果是ID则判断输入的值是否与ID相等 相等的话类型就是ID 否则就是名称 这个时候拿到搜索接口并进行传参拿到数据 赋值 渲染 进行完后则执行未搜索前的数据渲染 这个时候就可以调用上面那个数据渲染的接口。

分页：定义总条数total 每页几条pageSize 当前页currentPage  利用商品管理产品接口传参去拿到当前页码改变的页码数和切换每页多少条的数据

上下架：根据状态值进行改变 拿到产品上下架的接口传参 状态可以用三元表达式来写 拿到数据 然后在运用list接口 改变成功可以有个成功提示信息

查看：给个点击事件利用params传参把id传过去到详情页  在详情页拿到详情接口数据进行渲染

编辑：给个点击事件利用query传参 把商品的id传过去 在详情页用this.$route.query来进行接受 可以放在一个对象里  现在拿到详情数据 属性名就是参数名 属性值就是传过来的id 进行获取数据渲染数据即可

图片上传：使用element-ui的el-upload插件进行上传

Action参数是必选参数 是我们上传的地址  on-perview式点击列表中以上传的文件的钩子 我们可以拿到相对地址  on-remove是文件移除的钩子 on-success是文件上传成功的钩子 我们可以拿到三个参数 log file可以拿到上传图片的地址就可以赋值给详情数据的图片

富文本编辑器：下载quill-editor插件就可以进行使用 先下载再注册随后封装 通过change属性在内容发生变化时去改变 将输入的值赋值给html属性 并把标签解析掉

添加：和编辑逻辑大致相同 点击提交将定义的form对象的数据作为添加接口参数实现提交

• 品类管理

拿到品类数据进行数据渲染  修改名称可以判断输入的这个名称等于原先数据名称的话并且这个名称不为空的话 接调用修改的接口进行id name的传参 拿到数据 接着调用一下品类数据 最后可以有弹出框显示成功 添加也是调用接口 传参数 后端返回 添加成功

订单管理与用户列表同上。