微服务项目：尚融宝（15）（前端平台：完善积分等级模块）

"操作" width="200" align="center">
    <template slot-scope="scope">
        <el-button
                   type="danger"
                   size="mini"
                   icon="el-icon-delete"
                   @click="removeById(scope.row.id)"
                   >
            删除
        el-button>
    template>

// 根据id删除数据
removeById(id) {
  this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      integralGradeApi.removeById(id).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    })
    .catch(error => {
      this.$message.info('取消删除')
    })
}

 src/api/core/integral-grade.js

save(integralGrade) {
    return request({
        url: '/admin/core/integralGrade/save',
        method: 'post',
        data: integralGrade
    })
}

2、定义页面data

src/views/core/integral-grade/form.vue，完善data定义

3、页面组件模板

src/views/core/integral-grade/form.vue，完善template

4、新增数据脚本

src/views/core/integral-grade/form.vue，引入api

import integralGradeApi from '@/api/core/integral-grade'

定义保存方法

三、回显数据

1、列表页编辑按钮

src/views/core/integral-grade/list.vue，表格“操作”列中增加“修改”按钮

"'/core/integral-grade/edit/' + scope.row.id" style="margin-right:5px;" >
	<el-button type="primary" size="mini" icon="el-icon-edit">
		修改
	el-button>

2、定义api

src/api/core/integral-grade.js

getById(id) {
    return request({
        url: `/admin/core/integralGrade/get/${id}`,
        method: 'get'
    })
}

3、获取数据脚本

src/views/core/integral-grade/form.vue，methods中定义回显方法

// 根据id查询记录
fetchDataById(id) {
    integralGradeApi.getById(id).then(response => {
        this.integralGrade = response.data.record
    })
}

页面渲染成功后获取数据

因为已在路由中定义如下内容：path: 'edit/:id'，因此可以使用 this.$route.params.id 获取路由中的id

//页面渲染成功
created() {
    if (this.$route.params.id) {
        this.fetchDataById(this.$route.params.id)
    }
},

四、更新数据

1、定义api

src/api/core/integral-grade.js

updateById(integralGrade) {
    return request({
      url: '/admin/core/integralGrade/update',
      method: 'put',
      data: integralGrade
    })
}

2、更新数据脚本

src/views/core/integral-grade/form.vue，methods中定义updateData

// 根据id更新记录
updateData() {
    // 数据的获取
    integralGradeApi.updateById(this.integralGrade).then(response => {
        this.$message({
            type: 'success',
            message: response.message
        })
        this.$router.push('/core/integral-grade/list')
    })
}

完善saveOrUpdate方法

saveOrUpdate() {
    // 禁用保存按钮
    this.saveBtnDisabled = true
    if (!this.integralGrade.id) {
        this.saveData()
    } else {
        this.updateData()
    }
},

关于Vue组件（了解）

一、什么是组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树：

二、项目组件分析

1、程序入口

• 入口html：public/index.html
• 入口js脚本：src/main.js
• 顶层组件：src/App.vue
• 路由：src/router/index.js

main.js 中引入了App.vue和 router/index.js，根据路由配置，App.vue中的路由出口会显示相应的页面组件的内容

入口脚本

引入顶层组件模块和路由模块

顶层组件

路由出口的位置

路由配置

路由出口的位置显示的页面组件

2、登录页组件关系 

三、Layout

1、路由

2、布局

src/layout/index.vue：侧边栏、导航栏、主内容区

3、主内容区

src/layout/components/AppMain.vue：Layout的路由出口（主内容区）

4、积分区间列表页面组件