SSM 单体框架 - 前端开发：课程和广告模块

2020-10-09 11:25:33 浏览数 (1)

Vue.js

项目结构说明

使用脚手架快速构建 Vue 项目，项目结构如下

代码语言：javascript复制
|--- edu-boss 项目名称
    |--- node_modules 存放依赖包的目录
    |--- public 静态资源管理目录
    |--- src  组件源码目录 (写的代码)
        |--- assets 存放静态图片资源 (CSS 也可以放在这里)
        |--- components 存放基础组件,可复用
        |--- router 存放了项目路由文件
        |--- services 存放请求后台的 JS 文件,
        |--- store  保存组件之间的共享数据
        |--- utils  管理公用的 JS 文件
        |--- views  放置的为公共组件 (各个主要页面)
        |--- App.vue app.vue 可以当做是网站首页，是一个 vue 项目的主组件，页面入口文件
        |--- main.js 打包运行的入口文件，引入了 vue 模块和 app.vue 组件以及路由 route
     |--- babel.config.js babel 配置文件, 对源代码进行转码 (es6=>es5)
     |--- package.json 项目及工具的依赖配置文件
     |--- paxkage-lock.json 依赖配置文件
     |--- README.md 项目说明
     |--- vue.config.js 自定义配置文件
Views 目录说明

前端项目的页面部分：

代码语言：javascript复制
CourseManage: 课程管理
AdvertiseManage: 广告管理
PermissionManage: 权限管理
CommentManage: 公共
Users.vue: 用户管理
Login.vue: 登录
Vue 组件化开发

每一个 *.vue 文件都可以看做是一个组件

组件的组成部分

  • template: 组件的 HTML 部分
  • script: 组件的 JS 脚本 (使用 ES6 语法编写)
  • style: 组件的 CSS 样式
代码语言：javascript复制
<!--  1.template 代表 html 结构, template 中的内容必须有且只有一个根元素
      编写页面静态部分 就是 view 部分 -->
<template>
<div>
    测试页面...
</div>
</template>
<!-- 2.编写 vue.js 代码 -->
<script>
    // 可以导入其组件
    // import Header from '../components/header.vue' 

    // 默认写法, 输出该组件
    export default {
        // 组件名称，用于以后路由跳转
        name:"Home",
        // 当前组件中需要使用的数据
        data() {
            return {}
        },
        methods: {}
    }
</script>
<!-- 编写当前组件的样式代码 -->
<style scoped>
    /* 页面样式 加上 scoped 表示样式就只在当前组件有效 */
</style>

课程模块

课程数据展示
功能分析

Course.vue 组件，完成课程数据的展示和条件查询

使用 Element UI 表格进行数据展示：https://element.eleme.cn/#/zh-CN/component/table

JS 代码编写

定义数据部分

代码语言：javascript复制
// 数据部分
data() {
    // 查询条件
    const filter = {
        courseName: "",
        status: ""
    };
    return {
        filter,
        courses: [],
        loading: false
    };
},
// 钩子函数
created() {
    this.loadCourses();
},

根据接口文档，编写查询课程数据方法

代码语言：javascript复制
// 方法一: 加载课程数据
loadCourses() {
    this.loading = true;
    const data = {};
    // 查询条件
    if (this.filter.courseName) data.courseName = this.filter.courseName;
    if (this.filter.status) data.status = this.filter.status;
    console.log(data);
    // 发送请求
    return axios
        .post("/course/findCourseByCondition", data)
        .then(resp => {
        console.log(resp.data.content);
        this.courses = resp.data.content;
        this.loading = false;
    })
        .catch(error => {
        this.$message.error("数据获取失败! ! !");
    });
},

条件查询

代码语言：javascript复制
<el-button @click="handleFilter()">查询</el-button>
代码语言：javascript复制
// 条件查询
handleFilter() {
    this.loadCourses();
},
新建课程
功能分析

点击新建，由路由导航到 CourseItem.vue

代码语言：javascript复制
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建课程</el-button>
代码语言：javascript复制
// 新建课程 路由跳转
handleAdd() {
    this.$router.push({ name: "CourseItem", params: { courseId: "new" } });
},

router.js

代码语言：javascript复制
{
    path: "/courses/:courseId",
    name: "CourseItem",
    meta: { requireAuth: true, title: "课程详情" },
    component: () =>
        import(
            /* webpackChunkName: 'courses' */ 
            "../views/CourseManage/CourseItem.vue"
        )
},

CourseItem 组件使用 Element UI 中的表单来提交课程数据：https://element.eleme.cn/#/zh-CN/component/form

JS 代码编写
代码语言：javascript复制
<el-button type="primary" @click="handleSave">保存</el-button>
代码语言：javascript复制
// 保存课程信息
handleSave() {
    this.$refs.form.validate(valid => {
        if (!valid) return false;
        axios
            .post("/course/saveOrUpdateCourse", this.course)
            .then(res => {
            this.$router.back();
        })
            .catch(error => {
            this.$message.error("保存课程信息失败! ! !");
        });
    });
},
课程图片上传
功能分析

在 SSM 前端项目中，图片上传功能使用的是公共的通用组件 UploadImage.vue

在 CourseItem.vue 引入了该组件

代码语言：javascript复制
import UploadImage from "@/components/UploadImage.vue";
代码语言：javascript复制
<!-- 使用图片上传组件,完成图片上传 -->
<el-form-item label="课程封面" prop="courseImgUrl">
  <upload-image
    :content="course.courseImgUrl && [course.courseImgUrl]"
    :get-urls="getCourseImgUrl"
    uploadUrl="/course/courseUpload"
    ref="courseCoverRef"
    max="10M"
    tipInfo="建议尺寸：230*300px，JPG、PNG格式，图片小于10M"
  ></upload-image>
</el-form-item>
案例演示

创建一个 Vue 项目来演示图片上传组件的使用方式

导入 Vue 基础项目

在 components 目录下创建一个 UploadImage.vue 组件

查看 Element UI 文档，复制代码到 UploadImage.vue：https://element.eleme.cn/#/zh-CN/component/upload

代码语言：javascript复制
<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
</style>

配置路由

代码语言：javascript复制
// 布局路由
{
    path: "/index",
    name: "index",
    component: Index,
    // 添加子路由，使用 children 属性来表示子路由
    children: [
        // 图片上传子路由
        {
            path: "/upload",
            name: "upload",
            component: UploadImage,
        },
    ],
},

在 Index.vue 导航菜单位置添加一个图片上传选项

代码语言：javascript复制
<el-menu-item-group>
    <!-- 修改 index 的路由地址 -->
    <el-menu-item index="/upload">
        <i class="el-icon-menu"></i>图片上传
    </el-menu-item>
</el-menu-item-group>

访问页面进行测试

属性说明
  • action 必选参数，上传的地址 string
  • multiple 是否支持多选文件 boolean
  • limit 最大允许上传个数 number
  • before-upload上传文件之前的钩子，参数为上传的文件 function(file)
  • on-success 文件上传成功时的钩子 function(response, file, fileList)
  • on-remove 文件列表移除文件时的钩子 function(file, fileList)
  • on-exceed 文件超出个数限制时的钩子 function(files, fileList)
  • file-list 上传的文件列表 array
组件的引入

将一个组件引入另一个组件

创建一个 TestUplopad.vue 组件

代码语言：javascript复制
<template>
  <div>
    <!-- 使用组件,注意使用短横线连接 -->
    <upload-image></upload-image>
  </div>
</template>
<script>
// 1.导入组件
import UploadImage from "@/components/UploadImage";
export default {
  // 2.注册组件
  components: {
    UploadImage
  }
};
</script>
<style scoped>
</style>
组件的传参

UploadImage.vue

代码语言：javascript复制
/*
    组件传参
      uploadUrl: 图片上传路径,
      getUrl: 函数
*/
props: ["uploadUrl", "getUrl"],

data() {
    return {
        uploadAction: this.uploadUrl
    };
},

// 上传成功后的回调函数
uploadSuccess(res, file) {
    this.getUrl(file);
}
代码语言：javascript复制
<el-upload
      :action="uploadAction"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="uploadSuccess"
    >

TestUpload.vue

代码语言：javascript复制
<template>
  <div>
    <!-- 使用组件,注意使用短横线连接 ,向父组件传递了两个参数
        uploadUrl: 图片上传地址
        :get-url:传递了一个函数
    -->
    <upload-image 
    uploadUrl="https://jsonplaceholder.typicode.com/posts/" 
    :get-url="show">
    </upload-image>
  </div>
</template>
代码语言：javascript复制
methods: {
    show(file) {
        console.log(file.name);
    }
}
课程模块图片上传

CourseItem.vue

引入图片上传组件并使用

代码语言：javascript复制
<el-form-item label="课程封面" prop="courseImgUrl">
  <!-- 使用图片上传组件，完成图片上传 -->
  <upload-image
    :content="course.courseImgUrl && [course.courseImgUrl]"
    :get-urls="getCourseImgUrl"
    uploadUrl="/course/courseUpload"
    ref="courseCoverRef"
    max="10M"
    tipInfo="建议尺寸：230*300px，JPG、PNG格式，图片小于10M"
  ></upload-image>
</el-form-item>
代码语言：javascript复制
import UploadImage from "@/components/UploadImage.vue";
export default {
  name: "CourseItem",
  title: "营销信息",
  components: { Editor, UploadImage },
}
修改课程

点击编辑携带当前数据的 id，导航到 CourseItem.vue

代码语言：javascript复制
<el-button size="mini" @click="handleNavigate('CourseItem', scope.row.id)">编辑</el-button>
代码语言：javascript复制
// 课程编辑 & 内容管理路由
handleNavigate(name, id) {
    this.$router.push({ name, params: { courseId: id } });
},

在 CourseItem 组件的钩子函数中会进行判断，如果是修改会先获取对应课程数据进行回显

代码语言：javascript复制
// 钩子函数
created() {
    // 获取课程 id
    const id = this.$route.params.courseId;
    if (!id) return this.redirectToError();
    // 判断是新建还是修改
    if (id === "new") {
        this.pathTitle = "新增课程";
        this.$breadcrumbs = [
            { name: "Courses", text: "课程管理" },
            { text: "新增课程" }
        ];
    } else {
        this.$breadcrumbs = [
            { name: "Courses", text: "课程管理" },
            { text: "营销信息" }
        ];
        this.loadCourse(id);
    }
},
代码语言：javascript复制
// 回显课程信息
loadCourse(id) {
    this.loading = true;
    return axios
        .get("/course/findCourseById?id="   id)
        .then(resp => {
        console.log(resp);
        this.pathTitle = resp.data.content.courseName;
        this.course = Object.assign(this.course, resp.data.content);
        this.course.id = id;
        this.loading = false;
    })
        .catch(error => {
        this.$message.error("回显数据失败! !");
    });
},

修改课程与添加课程走的都是同一个后台接口，区别是修改操作必须要携带 ID

课程状态管理

点击上架或者下架完成课程状态的切换

代码语言：javascript复制
<el-button size="mini" type="danger" v-if="scope.row.status === 1"
            @click="handleToggleStatus(scope.row)">下架</el-button>
<el-button size="mini" type="success" v-else-if="scope.row.status === 0"
            @click="handleToggleStatus(scope.row)">上架</el-button>
代码语言：javascript复制
// 切换课程状态
handleToggleStatus(item) {
    // 设置最新状态
    const toggledStatus = 1 - item.status;
    // 请求后台接口
    axios
        .get("/course/updateCourseStatus", {
        params: {
            status: toggledStatus,
            id: item.id
        }
    })
    .then(res => {
        debugger;
        // 设置最新的值
        item.status = toggledStatus;
        console.log(item);
        // 重新加载页面
        window.location.reload;
    })
    .catch(error => {
        this.$message.error("状态修改失败! ! !");
    });
},
课程内容管理
获取课程内容数据

课程内容数据包括章节与课时信息，根据课程 ID 查询课程包含的章节与课时信息

代码语言：javascript复制
<el-button size="mini" @click="handleNavigate('CourseSections', scope.row.id)">
    内容管理
</el-button>
代码语言：javascript复制
created() {
    // 1.显示当前页面在网站中的位置
    this.$breadcrumbs = [
      { name: "Courses", text: "课程管理" },
      { text: "课程结构" }
    ];
    // 2.从路由中获取传递的参数 课程 id
    const id = this.$route.params.courseId;
    if (!id) return this.redirectToError();
    this.loading = true;
    // 3.加载课程信息
    this.loadCourse(id);
    // 4.加载课程内容
    this.loadSections(id);
  },
代码语言：javascript复制
// 加载课程信息
loadCourse(id) {
    axios
        .get("/courseContent/findCourseByCourseId?courseId="   id)
        .then(res => {
        const course = res.data.content;
        // 将数据保存到章节表单对象中
        this.addSectionForm.courseId = course.id;
        this.addSectionForm.courseName = course.courseName;
        // 将数据保存到课时表单对象中
        this.addLessonForm.courseId = course.id;
        this.addLessonForm.courseName = course.courseName;
    })
        .catch(error => {
        this.$message.error("数据获取失败! ! !");
    });
},
// 加载课程内容(树形结构)
loadSections(courseId) {
    this.loading = true;
    axios
        .get("/courseContent/findSectionAndLesson?courseId="   courseId)
        .then(res => {
        this.sections = res.data.content;
        console.log(res.data.content);
        this.loading = false;
    })
    .catch(error => {
        this.$message.error("数据获取失败! ! !");
    });
},
章节管理

新建章节

代码语言：javascript复制
<el-button type="primary" icon="el-icon-plus" @click="handleShowAddSection">添加章节</el-button>

新增章节需要回显章节对应的课程名称

代码语言：javascript复制
// 显示新增章节表单
handleShowAddSection() {
    this.addSectionForm = {
        courseId: this.addSectionForm.courseId,
        courseName: this.addSectionForm.courseName
    };
    this.showAddSection = true;
},

修改章节

代码语言：javascript复制
<el-button size="small" @click.stop="handleEditSection(data)">编辑</el-button>
代码语言：javascript复制
// 编辑章节(回显)
handleEditSection(section) {
    this.addSectionForm = Object.assign(this.addSectionForm, section);
    this.showAddSection = true;
},

添加与修改章节访问的都是同一个接口

代码语言：javascript复制
// 添加 & 修改章节
handleAddSection() {
axios
  .post("/courseContent/saveOrUpdateSection", this.addSectionForm)
  .then(res => {
    this.showAddSection = false;
    // 重新加载列表
    return this.loadSections(this.addSectionForm.courseId);
  })
  .then(() => {
    // 重置表单内容
    this.addSectionForm.sectionName = "";
    this.addSectionForm.description = "";
    this.addSectionForm.orderNum = 0;
    this.reload();
  })
  .catch(error => {
    this.showAddSection = false;
    this.$message.error("操作执行失败! ! !");
  });
},

章节状态有 3 种

代码语言：javascript复制
// 状态信息
const statusMapping = {
    0: "已隐藏",
    1: "待更新",
    2: "已更新"
};

选择状态点击确定修改状态

代码语言：javascript复制
<el-button type="primary" @click="handleToggleStatus">确 定</el-button>
代码语言：javascript复制
// 修改章节状态
handleToggleStatus() {
  // 判断要修改的状态
  if (this.toggleStatusForm.data.sectionName) {
    // 修改章节状态
    axios
      .get("/courseContent/updateSectionStatus", {
        params: {
          id: this.toggleStatusForm.id,
          status: this.toggleStatusForm.status
        }
      })
      .then(resp => {
        this.toggleStatusForm.data.status = this.toggleStatusForm.status;
        this.toggleStatusForm = {};
        this.showStatusForm = false;
        this.reload();
      })
      .catch(error => {
        this.showStatusForm = false;
        this.$message.error("修改状态失败! ! !");
      });
  } else {
    // 修改课时状态
  }
},
课时管理

课时管理包括课时新增、课时修改、课时状态管理，与章节管理基本相同

广告模块

广告位管理
广告位展示

AdvertiseSpaces.vue 组件为广告位页面

JS 部分

代码语言：javascript复制
data() {
    return {
      list: null,
      listLoading: false
    };
  },
created() {
    // 加载广告位数据
    this.loadPromotionSpace();
},
代码语言：javascript复制
// 方法 1: 加载广告位信息
loadPromotionSpace() {
    this.listLoading = true;
    axios
        .get("/PromotionSpace/findAllPromotionSpace")
        .then(res => {
        this.list = res.data.content;
        this.listLoading = false;
    })
        .catch(err => {
        this.$message("加载数据失败! ! !");
    });
},
添加广告位

点击按钮，通过路由导航到指定组件

代码语言：javascript复制
<el-button size="mini" class="btn-add" @click="handleAdd()">添加广告位</el-button>
代码语言：javascript复制
// 添加广告位跳转
handleAdd() {
    this.$router.push({ path: "/addAdvertiseSpace" });
},

查看路由 router.js，跳转到的是 AddAdvertiseSpace.vue

代码语言：javascript复制
{
    path: "addAdvertiseSpace",
    name: "AddAdvertiseSpace",
    component: () => import("../views/AdvertiseManage/AddAdvertiseSpace"),
    meta: { requireAuth: true, title: "添加广告位" }
},

查看 AddAdvertiseSpace.vue

代码语言：javascript复制
<template>
  <!-- 显示组件，并传递了参数 isEdit="false" ，表示是新增操作 -->
  <home-advertise-detail :isEdit="false"></home-advertise-detail>
</template>
<script>
    // 引入了 AdvertiseSpaceDetail 组件
    import HomeAdvertiseDetail from "./AdvertiseSpaceDetail";
    export default {
      name: "addHomeAdvertise",
      title: "添加广告位",
      components: { HomeAdvertiseDetail }
    };
</script>

真正显示的组件是 AdvertiseSpaceDetail.vue

首先判断要进行新增还是修改操作，根据 isEdit，true 为修改，false 为新增

代码语言：javascript复制
// 钩子函数
created() {
    // 判断是添加还是修改操作
    if (this.isEdit) {
        // 修改
        const id = this.$route.query.id;
        this.loadPromotionSpace(id);
    } else {
        // 新增
        this.homeAdvertise = {};
    }
},

新增

代码语言：javascript复制
// 方法 1: 保存广告位信息
handleSave() {
    this.$refs.form.validate(valid => {
        if (!valid) return false;
        // 请求后台
        axios
            .post(
            "/PromotionSpace/saveOrUpdatePromotionSpace",
            this.homeAdvertise
        )
            .then(res => {
            // 返回上个页面
            this.$router.back();
        })
            .catch(err => {
            this.$message("数据处理失败! !");
        });
    });
},
修改广告位

需要请求后台接口进行广告位信息回显

代码语言：javascript复制
// 方法 2: 回显广告位信息
loadPromotionSpace(id) {
    return axios
        .get("/PromotionSpace/findPromotionSpaceById?id="   id)
        .then(res => {
        Object.assign(this.homeAdvertise, res.data.content);
        this.homeAdvertise.id = id;
    })
    .catch(err => {
        this.$message("数据处理失败! !");
    });
}
广告管理
Element UI 分页组件

Advertises.vue 组件为广告列表页面

广告列表的展示，使用到了分页组件

分页插件：https://element.eleme.cn/#/zh-CN/component/pagination

快速使用

在测试项目中创建一个 PageList.vue，复制代码如下：

代码语言：javascript复制
<template>
  <div>
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  data() {
    return {
      currentPage4: 4
    };
  }
};
</script>
属性介绍
  • page-size 每页显示条数 int
  • current-page 当前页 int
  • total 总条数 int
  • page-sizes 每页显示个数选项设置 [10, 20, 30]
  • layout 组件布局

分析

page-size 与 current-page 是需要前端传给后端的数据

total 和列表数据是需要后端返回给前端的

事件介绍

size-change 每页显示条数 - 改变时会触发 - 每页条数

current-change 当前页 - 改变时会触发 - 当前页

案例演示

复制下面代码到 PageList

代码语言：javascript复制
<template>
  <div class="app-container">
    <div class="table-container">
      <el-table ref="homeAdvertiseTable" :data="list" style="width: 100%;" 
border>
        <el-table-column label="id" width="220" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="广告名称" align="center" width="320">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="广告图片" width="420" align="center">
          <template slot-scope="scope">
            <img style="height: 80px" :src="scope.row.img" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <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>
</template>

编写 JS 部分代码

代码语言：javascript复制
export default {
  data() {
    return {
        // 总条数
        total: 0,
        // 每页显示条数
        size: 5,
        // 当前页
        page: 1,
        // 广告数据
        list: []
    };
  },
  created() {
    this.loadList();
  },
  methods: {
    // 加载广告数据
    loadList() {
      return this.axios
        .get("http://localhost:8080/ssm_web/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(error => {
          this.$message.error("数据获取失败! ! !");
        });
    },
    // 每页显示条数发生变化
    handlePageSizeChange(size) {
      this.size = size;
      this.loadList();
    },
    // 当前页发生变化
    handleCurrentPageChange(page) {
      this.page = page;
      this.loadList();
    }
  }
};
广告列表展示
需求分析

广告列表的展示数据来源于两张表：

  • promotion_ad 广告表
  • promotion_space 广告位表
功能实现

数据部分

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

钩子函数

代码语言：javascript复制
created() {
    // 获取广告列表数据
    this.loadPromotionAd();
    // 获取广告位置数据
    this.loadPromotionSpace();
},

函数部分

代码语言：javascript复制
// 方法 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 => {});
},
// 方法 2: 获取广告位置数据
loadPromotionSpace() {
    this.listLoading = true;
    return axios.get("/PromotionSpace/findAllPromotionSpace").then(res => {
        // 使用 map 进行遍历
        res.data.content.map(item => {
            // 将数据保存到 typeMap，key 就是 id，value 就是广告位对象
            this.typeMap[item.id] = item;
        });
        this.listLoading = false;
    });
},
// 方法 3: 获取广告位置名称
getSpaceName(spaceId) {
    if (!spaceId) {
        return "";
    }
    return this.typeMap[spaceId] && this.typeMap[spaceId].name;
},
广告状态修改

需求分析：点击按钮实现状态修改，0 下线，1 上线

功能实现：

页面部分使用的是 el-switch 组件

active-value：switch 打开时的值

inactive-value：switch 关闭时的值

代码语言：javascript复制
<!-- 上线与下线 -->
<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 部分

代码语言：javascript复制
// 方法 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("修改状态失败! ! !");
        });
    });
},
广告新增 & 修改
需求分析

点击添加广告触发事件

代码语言：javascript复制
<el-button size="mini" class="btn-add" @click="handleAdd()">添加广告</el-button>

路由导航到指定组件

代码语言：javascript复制
// 跳转到新增
handleAdd() {
    this.$router.push({ path: "/addAdvertise" });
},

查看路由信息跳转到的是 AddAdvertise.vue 组件

代码语言：javascript复制
{
    path: "addAdvertise",
    name: "AddAdvertise",
    component: () => import("../views/AdvertiseManage/AddAdvertise"),
    meta: { requireAuth: true, title: "添加广告" }
},

AddAdvertise.vue 组件

在 AddAdvertise 组件中，引入了 AdvertiseDetail 组件，真正的操作是在这个组件中完成的

:isEdit="false"：false 表示是新增操作

代码语言：javascript复制
<template>
  <home-advertise-detail :isEdit="false"></home-advertise-detail>
</template>
<script>
    import HomeAdvertiseDetail from './AdvertiseDetail'
    export default {
      name: 'addHomeAdvertise',
      title: '添加广告',
      components: { HomeAdvertiseDetail }
    }
</script>

AdvertiseDetail.vue 组件

该组件是进行新增和修改广告的页面

功能实现

数据部分

代码语言：javascript复制
data() {
    return {
        // 广告表单对象
        homeAdvertise,
        // 广告位下拉列表
        typeOptions: []
    };
},

钩子函数

代码语言：javascript复制
created() {
    // 判断是新增还是修改
    if (this.isEdit) {
        // 修改
        const id = this.$route.query.id;
        this.loadPromotion(id);
    } else {
        // 新增
        this.homeAdvertise = {};
    }
    this.loadPromotionSpace();
},

方法

代码语言：javascript复制
// 方法 1: 获取广告位置数据
loadPromotionSpace() {
    return axios.get("/PromotionSpace/findAllPromotionSpace").then(res => {
        // 使用 map 函数进行遍历，获取广告位 id 与 name，保存到 typeOptions
        this.typeOptions = res.data.content.map(item => {
            return { label: item.name, value: item.id };
        });
    });
},
// 方法 2: 保存广告信息
handleSave() {
    this.$refs.form.validate(valid => {
        if (!valid) return false;
        axios
            .post("/PromotionAd/saveOrUpdatePromotionAd", this.homeAdvertise)
            .then(res => {
            // 返回上个页面并刷新
            this.$router.back();
        }).catch(err => {});
    });
},
// 方法 3: 修改回显广告信息
loadPromotion(id) {
    return axios
        .get("/PromotionAd/findPromotionAdById?id="   id)
        .then(res => {
        Object.assign(this.homeAdvertise, res.data.content);
        this.homeAdvertise.id = id;
    }).catch(err => {});
},
javascript elementui https vue.js 网络安全

0 人点赞