DataView代码分析总结_data-view

数据展示

前端数据

结果图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mFgefJy-1679203426393)(C:\Users\刘雨龙\Desktop\Ctrl+Win+S\屏幕截图 2023-03-19 110444.png)]

下拉框

<el-form-item label="油田">
          <el-select v-model="state.params.ytdm" placeholder="请选择">
            <el-option v-for="item in state.ytList" :key="item" :value="item.ytdm" :label="item.ytmc"></el-option>
          </el-select>
        </el-form-item>
1
2
3
4
5

名称+搜索框（链接数据库）+绑定值

选择 <el-option 单独更改下拉列表的样式

列表

  <!--   列表   -->
      <el-card shadow="never">
        <!--   标题   -->
        <el-table :data="wellInfoList" border>
            <el-table-column label="序号" type="index" width="60" fixed></el-table-column>
            </el-table>
             </el-card>
1
2
3
4
5
6
7

JS

<script setup>
<script setup>
import {onMounted, ref, reactive, watch} from "vue"
import axios from "../../assets/core/axios";
import allApi from "../../assets/allApi";

const wellInfoList = ref([])

onMounted(() => {
  getYtList();
  getBlockList();
  getWellInfoList();
})

const getYtList = () => {
  axios.get(allApi.oilField.getOilFieldList).then(res => {
    state.ytList = res.data.data;
  })
}
watch(() => state.params.ytdm, () => {
  getBlockList();
})
const getBlockList = () => {
  const params = {ytdm: state.params.ytdm}
  axios.get(allApi.block.getBlockList, {params: params}).then(res => {
    state.blockList = res.data.data;
  })
}

const getWellInfoList = () => {
  state.params.rows = pageSize.value;
  state.params.page = currentPage.value;
  axios.get(allApi.well.getWellList, {params: state.params}).then(res => {
    wellInfoList.value = res.data.data.rows;
    total.value = res.data.data.total;
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import JS中调用其他IS文件 导入外部的变量和函数

onMounted 通过跟后端交互获取一些数据，发提一些数据请求。

接受路由传递的参数，数据初始化

const 将变量声明成一个常量，es6中优先使用const,修改某个标识符值时用let

后端数据

entity-----mapper

 @JsonFormat(pattern = "yyyy-MM-dd")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date hsrq;//火烧日期
1
2
3

1. private Date hsrq;//火烧日期

2. 时间日期 表盘 Date

3. 数字 123 Long

4. 字符串 ABC String

5. 表头别忘记@Data

@Data
public class Well implements Serializable {
1
2

Service

@Service
public class WellService {
    @Resource
    private MybatisRepository mybatisRepository;
    private static final String NAMESPACE = "wellMapper.";
1
2
3
4
5

表头的开始，别忘记@Service

public DataPaging<steamInjectionDailyData> getSteamInjectionDailyDataList(String ytdm, String dydm, String jh, String page, String rows) {
        Map params = new HashMap();
        params.put("ytdm", ytdm);
        params.put("dydm", dydm);
        params.put("jh", jh);
        int _page = 1;
        int _row = Integer.MAX_VALUE;
        if (!StringUtils.isEmpty(page)) {
            _page = Integer.parseInt(page);
        }

        if (!StringUtils.isEmpty(rows)) {
            _row = Integer.parseInt(rows);
        }
        PageRequest pageRequest = new PageRequest(_page, _row, params);
        return mybatisRepository.selectPaging(NAMESPACE + "selectPagingSteamInjectionDailyDataList", pageRequest);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

一个模块下对应四个页面应该写四份

Controller

@RestController
@RequestMapping("/well")
public class WellController {
    @Resource
    private WellService wellService;
1
2
3
4
5

标头的开始，亦不要忘记@Controller

@GetMapping("/getSteamInjectionDailyDataList")
public JsonMessage getSteamInjectionDailyDataList(String ytdm, String dydm, String jh, String page, String rows) {
    try {
        DataPaging<steamInjectionDailyData> dataPaging = wellService.getSteamInjectionDailyDataList(ytdm, dydm, jh, page, rows);
        return new JsonMessage().success(dataPaging);
    } catch (Exception e) {
        return new JsonMessage().failure();
    }

}
1
2
3
4
5
6
7
8
9
10

dm, jh, page, rows);
return new JsonMessage().success(dataPaging);
} catch (Exception e) {
return new JsonMessage().failure();
}

}

一个模块下对应四个页面应该写四份
1
2