微服务项目：尚融宝（56）（核心业务流程：投资列表展示（1））

管理端显示投资记录

一、后端接口

1、Controller

创建 AdminLendItemController

@Api(tags = "标的的投资")
@RestController
@RequestMapping("/admin/core/lendItem")
@Slf4j
public class AdminLendItemController {

    @Resource
    private LendItemService lendItemService;

    @ApiOperation("获取列表")
    @GetMapping("/list/{lendId}")
    public R list(
            @ApiParam(value = "标的id", required = true)
            @PathVariable Long lendId) {
        List<LendItem> list = lendItemService.selectByLendId(lendId);
        return R.ok().data("list", list);
    }
}

2、Service

接口：LendItemService

List<LendItem> selectByLendId(Long lendId);

实现：LendItemServiceImpl 

@Override
public List<LendItem> selectByLendId(Long lendId) {
    QueryWrapper<LendItem> queryWrapper = new QueryWrapper();
    queryWrapper.eq("lend_id", lendId);
    List<LendItem> lendItemList = baseMapper.selectList(queryWrapper);
    return lendItemList;
}

二、前端

1、创建api

api/core/lend-item.js

import request from '@/utils/request'

export default {
  getList(lendId) {
    return request({
      url: `/admin/core/lendItem/list/` + lendId,
      method: 'get'
    })
  }
}

2、页面脚本

views/core/lend/detail.vue

import lendItemApi from '@/api/core/lend-item'

data() {
  return {
    ......,

    lendItemList: [] //投资列表
  }
},

created() {
  if (this.$route.params.id) {
    ......

    // 投资记录
    this.fetchLendItemList()
  }
},

methods 

fetchLendItemList() {
  lendItemApi.getList(this.$route.params.id).then(response => {
    this.lendItemList = response.data.list
  })
}

3、页面模板

views/core/lend/detail.vue

将投资记录放在借款人信息后面

<h4>投资记录</h4>
<el-table :data="lendItemList" stripe style="width: 100%" border>
    <el-table-column type="index" label="序号" width="70" align="center" />
    <el-table-column prop="lendItemNo" label="投资编号" />
    <el-table-column prop="investName" label="投资用户" />
    <el-table-column prop="investAmount" label="投资金额" />
    <el-table-column label="年化利率">
        <template slot-scope="scope">
            {{ scope.row.lendYearRate * 100 }}%
        </template>
    </el-table-column>
    <el-table-column prop="investTime" label="投资时间" />
    <el-table-column prop="lendStartDate" label="开始日期" />
    <el-table-column prop="lendEndDate" label="结束日期" />
    <el-table-column prop="expectAmount" label="预期收益" />
    <el-table-column prop="investTime" label="投资时间" />
</el-table>

网站端显示投资记录

一、后端接口

Controller

LendItemController

@ApiOperation("获取列表")
@GetMapping("/list/{lendId}")
public R list(
    @ApiParam(value = "标的id", required = true)
    @PathVariable Long lendId) {
    List<LendItem> list = lendItemService.selectByLendId(lendId);
    return R.ok().data("list", list);
}

二、前端

页面脚本

pages/lend/_id.vue

async asyncData({ $axios, params }) {
    ......
    
    //投资记录
    let responseLendItemList = await $axios.$get(
      '/api/core/lendItem/list/' + lendId
    )

    return {
      ......,
      lendItemList: responseLendItemList.data.list, //投资记录
    }
},

 

今日分享 

多线程（multithreading），是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线程，进而提升整体处理性能。具有这种能力的系统包括对称多处理机https://baike.baidu.com/item/%E5%AF%B9%E7%A7%B0%E5%A4%9A%E5%A4%84%E7%90%86%E6%9C%BA/10375153?fromModule=lemma_inlink、多核心处理器以及芯片级多处理或同时多线程处理器。在一个程序https://baike.baidu.com/item/%E7%A8%8B%E5%BA%8F/71525?fromModule=lemma_inlink中，这些独立运行的程序片段叫作“线程https://baike.baidu.com/item/%E7%BA%BF%E7%A8%8B/103101?fromModule=lemma_inlink”（Thread），利用它编程的概念就叫作“多线程处理” [1]  。