路由的搭建

先删除一些不需要的界面

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

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

改成这样，这里要注意。我们是在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-upload
  class="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: '已取消删除'
          });          
        });
    }

后台管理系统:项目路由搭建与品牌管理

路由的搭建

品牌管理静态组件

品牌列表展示

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

添加品牌完成

修改品牌完成

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

删除品牌操作

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

猜你喜欢