Happymmail项目总结

项目的主体架构及运行环境：

node版本16.13.1，全局安装vue脚手架：npm install -g @vue/cli，版本5.0.1，本项目使用cli2框架项目，需安装npm install -g @vue/cli-init桥接工具。运行”vue webpack 项目名称“ 命令下载项目。

登录页面，项目首页。首页包括：左侧菜单导航，左侧菜单导航包括：商品管理，品类管理，订单管理，用户列表

开启跨域：

Config文件中ProxyTable开启跨域，服务器生成cookie码进行用户登录验证获取数据，target:统一接口路径前缀，命名为login

 

Axios二次封装：

下载axios：npm I axios -S ,新建request文件夹并在其中新建request.js文件。在request.js中通过import 引入axios，使用axios.create方法并赋值于service空变量，在方法中新建请求拦截器和相应拦截器，然后将service通过export default 抛出。

新建utils文件夹并在其中新建http.js文件，并引入request.js中的serveice方法。然后创建相应的方法，在方法中需reture  service方法以对象的方式将请求所需url地址，以及methods(定义请求方法)和传参形式(params,data)，在所需使用此方法的组件中 import { （定义的方法） }  from “文件路径”引入并使用。

element ui按需引入：

在src文件目录中新建element文件，在新建index.js文件引入关于element配置。

最后在 main.js中引入此文件

 

重点功能实现：

登录功能：调用登录接口，通过跨域，服务器生成cookie返回浏览器端，登录成功跳转到首页

商品管理：编辑功能，图片上传：正确填写文档要求的name名称与服务器请求地址，on-success上传成功方法中获取返回的图片url地址并保存。

 

 

富文本编辑器：npm install quill@1.3.6

命令行下载插件，将官网中的内容复制过来，然后在所使用的页面通过import引入并注册，通过@change内容改变事件所返回的参数text中通过获取编辑器内容。

 

分类修改：首先通过获取当前商品详情数据中的一级二级分类的id调用接口筛选出对应的分类进行数据回填。记录选中的一级分类，通过一级分类id调用分类接口获取二级分类并记录