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

原文链接：https://blog.csdn.net/kangguang/article/details/105002813

你可能也喜欢