Microservice project: Shangrongbao (56) (core business process: investment list display (1))

Display investment records on the management side

1. Backend interface

1、Controller

Create 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

Interface: LendItemService

List<LendItem> selectByLendId(Long lendId);

Implementation: 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;
}

2. Front-end

1. Create 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. Page script

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. Page template

views/core/lend/detail.vue

Place investment records behind borrower information

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

Display investment records on the website

1. Backend interface

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);
}

2. Front-end

Page script

pages/lend/_id.vue

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

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

 

Share today 

Multithreading refers to the technology that enables concurrent execution of multiple threads from software or hardware. Computers with multi-threading capabilities have hardware support that allows them to execute more than one thread at the same time, thereby improving overall processing performance. Systems with this capability include symmetric multiprocessors 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 , multi-core processors, and chip-level multiprocessing or simultaneous multithreading processors. In a program https://baike.baidu.com/item/%E7%A8%8B%E5%BA%8F/71525?fromModule=lemma_inlink , these independently running program fragments are called " threads https://baike .baidu.com/item/%E7%BA%BF%E7%A8%8B/103101?fromModule=lemma_inlink ” (Thread), the concept of programming using it is called “multi-threading” [1]  .