微服务项目：尚融宝（50）（核心业务流程：标的管理（2））

2022-09-24 188

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

MSE Nacos/ZooKeeper 企业版试用，1600元额度，限量50份

服务治理 MSE Sentinel/OpenSergo，Agent数量不受限

任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格

简介： 微服务项目：尚融宝（50）（核心业务流程：标的管理（2））

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

标的列表

一、后端实现

1、扩展实体对象

在Lend类中扩展以下字段

@ApiModelProperty(value = "其他参数")
@TableField(exist = false)
private Map<String,Object> param = new HashMap<>();

2、Controller

添加 AdminLendController

@Api(tags = "标的管理")
@RestController
@RequestMapping("/admin/core/lend")
@Slf4j
public class AdminLendController {
    @Resource
    private LendService lendService;
    @ApiOperation("标的列表")
    @GetMapping("/list")
    public R list() {
        List<Lend> lendList = lendService.selectList();
        return R.ok().data("list", lendList);
    }
}

3、Service

接口：LendService

List<Lend> selectList();

实现：LendServiceImpl

@Resource
private DictService dictService;
@Override
public List<Lend> selectList() {
    List<Lend> lendList = baseMapper.selectList(null);
    lendList.forEach(lend -> {
        String returnMethod = dictService.getNameByParentDictCodeAndValue("returnMethod", lend.getReturnMethod());
        String status = LendStatusEnum.getMsgByStatus(lend.getStatus());
        lend.getParam().put("returnMethod", returnMethod);
        lend.getParam().put("status", status);
    });
    return lendList;
}

二、前端

1、创建页面组件

创建 src/views/core/lend/list.vue

<template>
  <div class="app-container">
    标的列表
  </div>
</template>
<script>
export default {
}
</script>

创建 src/views/core/lend/detail.vue

<template>
  <div class="app-container">
    标的详情
  </div>
</template>
<script>
export default {
}
</script>

2、配置路由

src/router/index.js

{
    path: '/core/lend',
    component: Layout,
    name: 'coreLend',
    meta: { title: '标的管理', icon: 'el-icon-s-flag' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreLendList',
        component: () => import('@/views/core/lend/list'),
        meta: { title: '标的列表' }
      },
      {
        path: 'detail/:id',
        name: 'coreLendDetail',
        component: () => import('@/views/core/lend/detail'),
        meta: { title: '标的详情' },
        hidden: true
      }
    ]
  },

3、定义api

创建 src/api/core/lend.js

import request from '@/utils/request'
export default {
  getList() {
    return request({
      url: `/admin/core/lend/list`,
      method: 'get'
    })
  }
}

4、页面脚本

src/views/core/lend/list.vue

<script>
import lendApi from '@/api/core/lend'
export default {
  data() {
    return {
      list: null // 列表
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 加载列表数据
    fetchData() {
      lendApi.getList().then(response => {
        this.list = response.data.list
      })
    }
  }
}
</script>

5、页面模板