微服务项目:尚融宝(15)(前端平台:完善积分等级模块)

本文涉及的产品
注册配置 MSE Nacos/ZooKeeper,118元/月
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
云原生网关 MSE Higress,422元/月
简介: 微服务项目:尚融宝(15)(前端平台:完善积分等级模块)

放弃幻想,认清现实,准备斗争


一、删除数据



1、定义api


src/api/core/integral-grade.js


removeById(id) {
    return request({
        url: `/admin/core/integralGrade/remove/${id}`,
        method: 'delete'
    })
}


2、页面组件模板


src/views/core/integral-grade/list.vue,在table组件中添加删除列


<el-table-column label="操作" 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>
</el-table-column>


3、删除数据脚本


// 根据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('取消删除')
    })
}



二、新增数据



1、定义api


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定义


<script>
export default {
  data() {
    return {
      integralGrade: {}, // 初始化数据
      saveBtnDisabled: false // 保存按钮是否禁用,防止表单重复提交
    }
  }
}
</script>



3、页面组件模板


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


<template>
  <div class="app-container">
    <!-- 输入表单 -->
    <el-form label-width="120px">
      <el-form-item label="借款额度">
        <el-input-number v-model="integralGrade.borrowAmount" :min="0" />
      </el-form-item>
      <el-form-item label="积分区间开始">
        <el-input-number v-model="integralGrade.integralStart" :min="0" />
      </el-form-item>
      <el-form-item label="积分区间结束">
        <el-input-number v-model="integralGrade.integralEnd" :min="0" />
      </el-form-item>
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate()"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</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,表格“操作”列中增加“修改”按钮


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



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 元素,封装可重用的代码。


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


d660e6171cae4265a759c8f2216faa94.png


二、项目组件分析



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中的路由出口会显示相应的页面组件的内容


入口脚本


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


e720332755ed4aa39dd8836fda82d4a5.png


顶层组件


路由出口的位置


bb5c2cb283ec4bd49d876c3327f362e3.png


路由配置


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


3d19e511a6234a339723c8ceb1b28326.png


2、登录页组件关系


52f5328bf2dc41419b195fdc91f9037b.png


三、Layout



1、路由


861e3e1b35a846ac912cfa6268518325.png



2、布局


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


104db973e4e043fd9307e3e172986185.png


3、主内容区


src/layout/components/AppMain.vue:Layout的路由出口(主内容区)



cecafedba7db4283a267f92b88182917.png


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


19185c73e9614b37bac84f3668fb118e.png


相关文章
|
29天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
105 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
151 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
28 1
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
41 2
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
44 0
|
2月前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
59 0
|
1月前
|
设计模式 Java API
微服务架构演变与架构设计深度解析
【11月更文挑战第14天】在当今的IT行业中,微服务架构已经成为构建大型、复杂系统的重要范式。本文将从微服务架构的背景、业务场景、功能点、底层原理、实战、设计模式等多个方面进行深度解析,并结合京东电商的案例,探讨微服务架构在实际应用中的实施与效果。
128 6
|
1月前
|
设计模式 Java API
微服务架构演变与架构设计深度解析
【11月更文挑战第14天】在当今的IT行业中,微服务架构已经成为构建大型、复杂系统的重要范式。本文将从微服务架构的背景、业务场景、功能点、底层原理、实战、设计模式等多个方面进行深度解析,并结合京东电商的案例,探讨微服务架构在实际应用中的实施与效果。
49 1
|
18天前
|
Java 开发者 微服务
从单体到微服务:如何借助 Spring Cloud 实现架构转型
**Spring Cloud** 是一套基于 Spring 框架的**微服务架构解决方案**,它提供了一系列的工具和组件,帮助开发者快速构建分布式系统,尤其是微服务架构。
135 68
从单体到微服务:如何借助 Spring Cloud 实现架构转型