Vue單頁面開發執行個體之資料清單+分頁+時間篩選+類型選擇及背景實作

一、描述

頁面主要功能是：

通過清單展示使用者意見回報資訊，
通過類型查詢資料
通過時間篩選查詢資料
點選縮略圖展示大圖

二、Element--Ui元件的選用

el-table:資料展
el-select : 類型選擇
el-data-picker ：篩選時間日期
el-image:圖檔加載
el-dialog：檢視大圖展示元件

三、背景

架構：Spring Boot
日期轉換：org.springframework.core.convert.converter.Converter 接口實作
映射檔案：通過選擇判斷進行查詢
傳回結果：封裝傳回結果對象（包括資料實體及資料總數）

四、實作

1.前端主要代碼

//頁面
<template>
  <div class="opin" v-loading="loading">
    <el-container class="opin_header">
      <el-header style="margin-left: -20px;">
        <span >類型</span>
        <el-select v-model="currentAppName" placeholder="使用者App">
          <el-option
            v-for="item in options"
            :key="item.kid"
            :label="item.name"
            :value="item.name"
            @change="selectChanged">
          </el-option>
        </el-select>
        <span class="demonstration opin_header_timer">時間</span>
        <el-date-picker
          v-model="formatDate"
          type="daterange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="開始日期"
          end-placeholder="結束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button  class="opin_header_btn" type="primary" @click="handleQuery">查詢</el-button>
      </el-header>
      <el-main style="margin-left: -20px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%;margin-top:-20px;">
          <el-table-column
            prop="addtime"
            label="添加時間"
            align="center"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm"
            :formatter="dateFormat"
            width="160" >
          </el-table-column>
          <el-table-column
            prop="resource"
            align="center"
            label="回報來源"
            width="160">
          </el-table-column>
          <el-table-column
            prop="content"
            align="center"
            label="回報内容">
          </el-table-column>
          <el-table-column
            prop="email"
            align="center"
            label="郵件">
          </el-table-column>
          <el-table-column
            prop="tag"
            align="center"
            label="标簽">
          </el-table-column>
          <el-table-column
            prop="ftype"
            align="center"
            label="類型">
          </el-table-column>
          <el-table-column
            prop="fimageUrl"
            align="center"
            label="回報截圖">
            <template slot-scope="scope">
              <el-image :src="scope.row.fimageUrl" lazy style="width: 50px;height:50px;" @click="openImg(scope.row.fimageUrl)">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-pagination
          align="right"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          @current-change="current_change">
        </el-pagination>
      </el-footer>
    </el-container>
    <el-dialog :append-to-body="true" width="400" :visible.sync="imgVisible" class="img-dialog" @close="handleCancel" >
      <el-card :body-style="{ padding: '0px'}">
        <img :src="dialogImgUrl" width="100%" height="100%">
      </el-card>
    </el-dialog>
  </div>
</template>

mounted ()請求資料

export default {
  name: 'OpinManager',
  mounted () {
    this.initOptions()
    this.initAllFeeds()
  },
  methods: {
    openImg (url) {
      if (url) {
        this.imgVisible = true
        this.dialogImgUrl = url
      }
    },
    handleCancel () {
      this.imgVisible = false
    },
    initOptions () {
      getRequest('/apps/appnames').then(resp => {
        if (resp) {
          this.options = resp.data
        }
      })
    },
    initAllFeeds () {
      let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize
      this.getFeeds(url)
    },
    getFeeds (url) {
      this.loading = true
      getRequest(url).then(resp => {
        if (resp) {
          this.tableData = resp.data
          this.total = resp.total
        }
        this.loading = false
      })
    },
    dateFormat (row, column, cellValue, index) {
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    current_change: function (currentPage) {
      this.currentPage = currentPage
      if (this.optRecord.name != null && this.optRecord.date == null) {
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize + '&name=' + this.optRecord.name
        this.getFeeds(url)
      } else if (this.optRecord.name == null && this.optRecord.date != null) {
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize + '&beginDateScope=' + this.optRecord.date
        this.getFeeds(url)
      } else if (this.optRecord.name != null && this.optRecord.date != null) {
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize + '&name=' + this.optRecord.name + '&beginDateScope=' + this.optRecord.date
        this.getFeeds(url)
      } else {
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize
        this.getFeeds(url)
      }
    },
    selectChanged () {
      console.log(this.currentAppName)
    },
    handleQuery () {
      if (this.currentAppName == null && this.formatDate == null) {
        return
      }
      if (this.currentAppName != null && this.formatDate != null) {
        if (this.currentAppName === this.optRecord.name && this.formatDate === this.optRecord.date) {
          return
        }
        this.optRecord.name = this.currentAppName
        this.optRecord.date = this.formatDate
        this.currentPage = 1
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize + '&name=' + this.currentAppName + '&beginDateScope=' + this.formatDate
        this.getFeeds(url)
      } else if (this.currentAppName != null) {
        this.optRecord.name = this.currentAppName
        this.currentPage = 1
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize + '&name=' + this.currentAppName
        this.getFeeds(url)
      } else if (this.formatDate != null && this.formatDate !== this.optRecord.date) {
        this.optRecord.date = this.formatDate
        this.currentPage = 1
        let url = '/feedback/?page=' + this.currentPage + '&size=' + this.pagesize + '&beginDateScope=' + this.formatDate
        this.getFeeds(url)
      }
    }
  },
  watch: {
    formatDate (val) {
      if (val == null) {
        this.optRecord.date = null
      }
    }
  },
  data () {
    return {
      imgVisible: false,
      dialogImgUrl: null,
      total: 0,
      pagesize: 10,
      currentPage: 1,
      currentAppName: null,
      formatDate: null,
      loading: false,
      options: [],
      optRecord: {
        name: null,
        date: null
      },
      feedbasks: Array,
    }
  }
}
</script>

2.背景實作

Controller

@RestController
@RequestMapping("/feedback")
public class FeedController {
    @Resource
    FeedBackService feedBackService;
    @GetMapping("/all")
    public List<FeedBack> getAll()
    {
        return feedBackService.getAllFeedBack();
    }

    @GetMapping("/")
    public RespPageBean getFeedsByPage(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size, String name, Date[] beginDateScope)
    {
        return feedBackService.getEmployeeByPage(page,size,name,beginDateScope);
    }

}

Service

@Service
public class FeedBackService {
    @Resource
    FeedBackMapper feedBackMapper;
    public List<FeedBack> getAllFeedBack()
    {
        return feedBackMapper.getAllFeedBack();
    }

    public RespPageBean getEmployeeByPage(Integer page, Integer size,String name, Date[] beginDateScope) {
        if (page != null && size != null) {
            page = (page - 1) * size;
        }
        List<FeedBack> data = feedBackMapper.getFeedsByPage(page,size,name,beginDateScope);
        Long total = feedBackMapper.getTotal(name,beginDateScope);
        RespPageBean bean = new RespPageBean();
        bean.setData(data);
        bean.setTotal(total);
        return  bean;
    }

    public FeedBack  getAllFeedBackById(Integer id)
    {
        return feedBackMapper.getAllFeedBackById(id);
    }
}

mapper

import org.apache.ibatis.annotations.Param;
import org.springframework.web.bind.annotation.RequestParam;
public interface FeedBackMapper {
    public List<FeedBack> getAllFeedBack();
    public FeedBack  getAllFeedBackById(Integer id);
    public List<FeedBack> getFeedsByPage(@Param("page") Integer page,@Param("size") Integer size,@Param("name") String name,@Param("beginDateScope")
            Date[] beginDateScope);
    Long   getTotal(@Param("name") String name,@Param("beginDateScope") Date[] beginDateScope);
}

映射檔案

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.kxg.zhz.mapper.FeedBackMapper" >
    <select id="getAllFeedBack"  resultType="com.kxg.zhz.model.FeedBack">
        select * from feedback
    </select>

    <select id="getFeedsByPage"  resultType="com.kxg.zhz.model.FeedBack">
        select * from feedback f
        <where>
           <if test="name !=null">
               and f.resource = #{name}
           </if>
            <if test="beginDateScope !=null">
                and f.addtime between #{beginDateScope[0]} and #{beginDateScope[1]}
            </if>
        </where>
        <if test="page !=null and size!=null">
            limit #{page},#{size}
        </if>
    </select>

    <select id="getTotal" resultType="java.lang.Long">
        select count(*) from feedback f
        <where>
            <if test="name !=null">
               and f.resource = #{name}
            </if>
            <if test="beginDateScope !=null">
                and f.addtime between #{beginDateScope[0]} and #{beginDateScope[1]}
            </if>
        </where>
    </select>
</mapper>

日期轉換

import org.springframework.core.convert.converter.Converter;
import org.springframework.stereotype.Component;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
@Component
public class DateConverter implements Converter<String, Date> {
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    @Override
    public Date convert(String source) {
        try {
            return sdf.parse(source);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        return null;
    }
}

資料封裝類

import java.util.List;

public class RespPageBean {
    private Long total;
    private List<?> data;

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }

    public List<?> getData() {
        return data;
    }

    public void setData(List<?> data) {
        this.data = data;
    }
}

Vue單頁面開發執行個體之資料清單+分頁+時間篩選+類型選擇及背景實作

繼續閱讀

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

vue搭建過程及出現問題

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method