欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue单页面开发实例之数据列表+分页+时间筛选+类型选择及后台实现

程序员文章站 2022-07-05 21:54:44
...

一、描述

  页面主要功能是：

  •   通过列表展示用户意见反馈信息，
  •   通过类型查询数据
  •   通过时间筛选查询数据
  •   点击缩略图展示大图

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

 

相关标签： SpringBoot 使用实例

上一篇： Redis集群搭建与简单使用

下一篇： 日志库 EasyLogging++的快速上手

推荐阅读