路由的搭建
先删除一些不需要的界面
然后发现跑不起来,我们需要去配置
删减成这样,然后自己新建需要的路由组件
改成这样,这里要注意。我们是在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: '已取消删除'}); });}