路由的搭建 

先删除一些不需要的界面

然后发现跑不起来，我们需要去配置

 

 删减成这样，然后自己新建需要的路由组件

改成这样，这里要注意。我们是在layout这个大的组件下面的，meta 中的title就是我们侧边栏的标题，icon可以使用element-ui的也可以是svg 

然后效果就是这样

 这里有一个细节，那就是要改成app-main,这样就能空出点内容

品牌管理静态组件

组件 | Element

表格组件

data:表格组件将来需要展示的数据--数组类型

border:是给表格添加边框

column属性

label:显示标签

width:对应列的宽度

aligin:对齐方式

当前第几页，数据总条数，每一页战术条数，连续页码数

      @size-change="sizeChange"

      @current-change="currentChange"

      current-page:代表的是当前是第几页

      total:代表分页器一共需要展示数据条数

      page-size:代表的是每一页需要展示多少条数据

      page-sizes:代表可以设置每一页展示多少条数据

      layout：可以实现分页器布局

      pager-count:按钮的数量 如果是9 连续页码是7

品牌列表展示

有了静态页面，然后就去接口捞数据

Swagger UI

反正都是对外暴露，我们可以将四个模块统一起来，一起暴露。方便后期的使用

挂载到vue的原型上，这样你就可以在任一一个组件中去使用它

 组件实例的原型的原型指向的是Vue.prototype

任一组件可以使用APi相关的接口

 测试了一下，这里出现了很让人头疼的跨域问题

因为尚品汇后台管理项目接口地址有两个：登录时候用的是：http://39.98.123.211:8170/

商品接口信息用的是：http://39.98.123.211:8510/

可见前面是地址是一致的，但是端口号不一样。

这就会导致，登录进得去，但是获取数据的时候，没有办法取数据；或者登录不进，但是数据取得到。无论哪一种都不是我们想要的。

不使用这种自我拼接的方式

直接为空

手动添加

然后成功

 注意：elementui当中的table组件，展示的数据是以一列一列进行展示数据

  现在搞分页，因为我们现在展示是死数据 

 @size-change="sizeChange"

@current-change="currentChange"

我们需要这俩个数据

没有点击时，默认为1.如果传递了参数，就修改参数为传递的那个，然后发起请求

  @size-change只的是展示的条数 

添加品牌与修改品牌静态完成

组件 | Element

 这就是我们想要的效果

<el-dialog title="收货地址" :visible.sync="dialogFormVisible"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div>
</el-dialog>

 现在的效果是这样的，而我们应该修改为上传图片那种方式

应该是这样的 

<el-uploadclass="avatar-uploader"action="https://jsonplaceholder.typicode.com/posts/":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload><style>.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}
</style><script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}}
</script>

 完成

添加品牌完成

把表单信息传送到后台，后台插入到数据库中

先写接口

处理添加品牌

新增品牌：/admin/product/baseTrademark/save post 携带俩个参数：品牌名称，品牌logo

切记：对于新增的品牌，给服务器传递数据，不需要传递id。id是由服务器生成

修改品牌的

修改品牌

/admin/product/baseTrademark/update post 携带三个参数：id,品牌名称，品牌logo

切记：对于修改某一个品牌的操作，前端携带的参数需要带上id,你需要告诉服务器修改的是哪一个品牌

而这俩个接口类似，我们可以封装成一个

这里传的对象是有讲究的，要跟服务器一样。然后用v-model传过去

 这里要说到俩个事件

action：设置图片上传的路径

on-succes:图片上传成功执行一次

before-upload:图片上传之前，执行一次

 写添加事件

 添加成功，我这里有刚刚报了个错误，是接口弄反了。下面才是正确接口

修改品牌完成

原先我们写了一个回调，我们需要传入一个参数，因为我们需要知道修改的是哪一个品牌

row:当前用户选中这个品牌信息

 其实很简单，就是把值重新赋值

前三页没有权限修改  这里要用浅拷贝的方式，不要直接改表单存储的值。这里我们采用有关传入有id那么就是修改，否则就是添加 

品牌的表单验证（自定义校验规则）

组件 | Element

 

 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

rules:{// require:必须要校验字段（前面5角星有关） message提示信息 trigger:用户行为设置（事件的设置：blur change）tmName: [{ required: true, message: '请输入品牌名称', trigger: 'blur' },// 品牌长度为2-10{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' }],logoUrl: [{ required: true, message: '请选择品牌的图片' }],}}

 只有校验都成功后，才能点确定

 

  自定义表单验证 

删除品牌操作

点击删除按钮时，出现弹框

 

 this.$confirm(`你确定删除${row.tmName}?`,  '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {// this.$message({type: 'info',message: '已取消删除'});          });}

 我们需要考虑的一点，就是删除这个品牌信息需要，告诉服务器，也就是发起请求

/admin/product/baseTrademark/remove/{id}

 ​​​​​​​

 deleteTradMark(row){this.$confirm(`你确定删除${row.tmName}?`,  '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(async () => {// 向服务器发请求let result=await this.$Api.trademark.reqDeleteTradeMark(row.id);if(result.code==200){this.$message({type: 'success',message: '删除成功!'});this.getPageList(this.list.length>1?this.page:this.page-1);}}).catch(() => {// this.$message({type: 'info',message: '已取消删除'});          });}