DataView代码分析总结

数据展示

前端数据

结果图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>

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

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

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

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

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

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

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

后端数据

entity-----mapper

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

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

2. 时间日期 表盘 Date

3. 数字 123 Long

4. 字符串 ABC String

5. 表头别忘记@Data

@Data
public class Well implements Serializable {

Service

@Service
public class WellService {
    @Resource
    private MybatisRepository mybatisRepository;
    private static final String NAMESPACE = "wellMapper.";

表头的开始，别忘记@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);
    }

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

Controller

@RestController
@RequestMapping("/well")
public class WellController {
    @Resource
    private WellService wellService;

标头的开始，亦不要忘记@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();
    }

}

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

}

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