6-5 SSM项目前端开发

任务三 SSM项目前端开发

1.部分Vue

1.1广告位分页展示

• 分页部分template

• <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page="page"
          :page-sizes="[5,10, 20]"
          :page-size="size"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  

• js

  data() {
   
    return {
   
      typeMap: {
   }, //保存广告位对象信息
      total: 0, //总条数
      size: 5, //每页显示条数
      page: 1, //当前页
      list: [], //广告数据
      listLoading: false
    };
  },

• //方法1; 获取广告列表数据
      loadPromotionAd() {
       
        this.listLoading = true;
  
        return axios
          .get("/PromotionAd/findAllPromotionAd", {
       
            params: {
       
              currentPage: this.page, //当前页
              pageSize: this.size //每页条数
            }
          })
          .then(res => {
       
            this.list = res.data.content.list; //总集合
            this.total = res.data.content.total; //总条数
            this.listLoading = false; //取消加载
          })
          .catch(err => {
       });
      },
  

• 页面数据变化：

      //页码变化触发的函数
      handleCurrentPageChange(page) {
       
        this.page = page;
        this.loadPromotionAd();
      },
  
      //每页显示条数变化触发的函数
      handlePageSizeChange(size) {
       
        this.size = size;
        this.loadPromotionAd();
      }
  

1.2 广告状态修改

• el-switch 组件：

• active-value: switch:打开时的值

• inactive-value : switch 关闭时的值

• html代码：

  <!-- 上线与下线 -->
          <el-table-column label="上线/下线" width="120" align="center">
            <template slot-scope="scope">
              <el-switch
                @change="handleUpdateStatus(scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.status"
              ></el-switch>
            </template>
          </el-table-column>
  

• js

      //方法4: 修改状态
      handleUpdateStatus(row) {
       
        this.$confirm("是否要修改上线/下线状态?", "提示", {
       
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
       
          axios
            .get("/PromotionAd/updatePromotionAdStatus", {
       
              params: {
       
                id: row.id,
                status: row.status
              }
            })
            .then(res => {
       
              this.loadPromotionAd();
            })
            .catch(err => {
       
              this.$message("修改状态失败! ! !");
            });
        });
  

1.3 分配菜单

• 

  1. 获取到所有的菜单数据,在树形控件中进行展示
  2. 将当前角色拥有的菜单权限,勾选上。

• 分配菜单按钮,点击传递当前行数据