批量導入數據：
1.在webapp下的template文件下導入excel模板文件
1.前端：提供下載模板文件
<!DOCTYPE html>
<html>
<head>
<!-- 頁面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>傳智健康</title>
<meta name="description" content="傳智健康">
<meta name="keywords" content="傳智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入樣式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/orderset.css">
<!-- 引入組件庫 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>預約管理<small>預約設置</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>預約管理</el-breadcrumb-item>
<el-breadcrumb-item>預約設置</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="box ordersetting">
<el-card class="box-card">
<div class="boxMain">
<el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下載</el-button>
<el-upload action="/ordersetting/upload.do"
name="excelFile"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button type="primary">上傳文件</el-button>
</el-upload>
</div>
<div>
操作說明：請點擊"模板下載"按鈕獲取模板文件，在模板文件中錄入預約設置數據后點擊"上傳文件"按鈕上傳模板文件。
</div>
</el-card>
<div class="calendar">
<!-- 年份 月份 -->
<div class="month">
<div class="currentdate">
<span class="choose-year">{{ currentYear }}年</span>
<span class="choose-month">{{ currentMonth }}月</span>
</div>
<div class="choose">
<span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
<span @click="pickPre(currentYear,currentMonth)">?</span>
<span @click="pickNext(currentYear,currentMonth)">?</span>
</div>
<div class="clearfix"></div>
</div>
<!-- 星期 -->
<div class="caldate">
<ul class="weekdays">
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
<li>周日</li>
</ul>
<!-- 日期 -->
<ul class="days">
<!-- v-for循環 每一次循環用<li>標簽創建一天 -->
<li v-for="dayobject in days">
<template>
<!-- 非當前月份 -->
<div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
{{ dayobject.day.getDate() }}
</div>
<!-- 當前月 -->
<div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
<span class="datenumber">{{ dayobject.day.getDate()}}</span>
<template>
<template v-for="obj in leftobj">
<template v-if="obj.date == dayobject.day.getDate()">
<template v-if="obj.number > obj.reservations">
<div class="usual">
<p>可預約{{obj.number}}人</p>
<p>已預約{{obj.reservations}}人</p>
</div>
</template>
<template v-else>
<div class="fulled">
<p>可預約{{obj.number}}人</p>
<p>已預約{{obj.reservations}}人</p>
<p>已滿</p>
</div>
</template>
</template>
</template>
<button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)" class="orderbtn">設置</button>
</template>
</div>
</template>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 引入組件庫 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
today:new Date(),//當前日期
currentDay: 1,
currentMonth: 1,
LocalMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
leftobj: []//用於裝載頁面顯示的月份已經進行預約設置的數據
},
created: function () {//在vue初始化時調用
// 1：初始化當前時間對應的日期，在頁面上展示日歷
this.initData(null);
// 2：初始化當前月對應的預約設置的數據，把預約設置信息，顯示到頁面上，對模型leftobj賦值
this.createData();
},
methods: {
createData(){
// 傳遞當前月（date=2020-2），返回Map（json形式）
axios.get("/ordersetting/findOrderSettingMapByMonth.do?date="+this.currentYear+"-"+this.currentMonth).then(response=>{
// 返回Result(flag,message,data) data：Map(map結構的key：date、number、reservations）
if(response.data.flag){
this.leftobj = response.data.data; // 組織數據結構
this.$message({
type:"success",
message:response.data.message
})
}else{
this.$message({
type:"error",
message:response.data.message
})
}
}).catch((error)=>{
})
},
//預約設置
handleOrderSet(day){
},
//上傳之前進行文件格式校驗
beforeUpload(file){
const isXLS = file.type === 'application/vnd.ms-excel';
if(isXLS){
return true;
}
const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (isXLSX) {
return true;
}
this.$message.error('上傳文件只能是xls或者xlsx格式!');
return false;
},
//下載模板文件
downloadTemplate(){
window.location.href="../../template/ordersetting_template.xlsx";
},
//上傳成功提示(ElementUI)
handleSuccess(response, file) {
// 返回Result(flag,message,data)
if(response.flag){
this.$message({
message: response.message,
type: 'success'
});
}else{
this.$message.error(response.message);
}
// console.log(response, file, fileList);
},
//初始化當前頁要展示的日期
initData: function (cur) {
var date;
var index = 0; //控制顯示預定的天數
if (cur) {
date = new Date(cur);
} else {
var now = new Date();
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth()+1, 1));
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // //本月第一天是周幾（周日0 周六 6）
var today = new Date();
this.LocalMonth = today.getMonth() + 1;
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
this.days.length = 0;
// 今天是周日，放在第一行第7個位置，前面6個
//初始化本周
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
var dayobject = {};
dayobject.day = d;
var now = new Date();
if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
dayobject.index = index++;//從今天開始顯示供預定的數量
}
else if (index != 0 && index < 3)
dayobject.index = index++;//從今天開始3天內顯示供預定的數量
this.days.push(dayobject);//將日期放入data 中的days數組 供頁面渲染使用
}
//其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject = {};//dayobject {day:date,index:2}
dayobject.day = d;
var now = new Date();
if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
dayobject.index = index++;
}
else if (index != 0 && index < 3)
dayobject.index = index++;
this.days.push(dayobject);
}
/**this.leftobj = [
{ date: 1, number: 120, reservations: 1 },
{ date: 3, number: 120, reservations: 1 },
{ date: 4, number: 120, reservations: 120 },
{ date: 6, number: 120, reservations: 1 },
{ date: 8, number: 120, reservations: 1 }
];*/
},
//切換到當前月份
goCurrentMonth: function (year, month) {
var d = new Date();
// 初始化日歷
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
// 初始化當前月的預約設置信息
this.createData();
},
//向前一個月
pickPre: function (year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒數第二天
// setDate(dx) 參數dx為 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
// 初始化當前月的預約設置信息
this.createData();
},
//向后一個月
pickNext: function (year, month) {
var d = new Date(this.formatDate(year, month, 1));
d.setDate(35);////獲取指定天之后的日期
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
// 初始化當前月的預約設置信息
this.createData();
},
// 返回 類似 2016-01-02 格式的字符串
formatDate: function (year, month, day) {
var y = year;
var m = month;
if (m < 10) m = "0" + m;
var d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d
}
}
})
</script>
</html>
后端：實體類封裝模板文件對應的數據
1.模板對應的實體類：
package com.itheima.health.pojo;
import java.io.Serializable;
import java.util.Date;
/**
* 預約設置
*/
public class OrderSetting implements Serializable{
private Integer id ;
private Date orderDate;//預約設置日期
private int number;//可預約人數
private int reservations ;//已預約人數
public OrderSetting() {
}
public OrderSetting(Date orderDate, int number) {
this.orderDate = orderDate;
this.number = number;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public Date getOrderDate() {
return orderDate;
}
public void setOrderDate(Date orderDate) {
this.orderDate = orderDate;
}
public int getNumber() {
return number;
}
public void setNumber(int number) {
this.number = number;
}
public int getReservations() {
return reservations;
}
public void setReservations(int reservations) {
this.reservations = reservations;
}
}
2.Controller
package com.itheima.health.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.itheima.health.constant.MessageConstant;
import com.itheima.health.entity.Result;
import com.itheima.health.pojo.OrderSetting;
import com.itheima.health.service.OrderSettingService;
import com.itheima.health.utils.POIUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
/**
* @ClassName OrderSettingContoller
* @Description TODO
* @Author ly
* @Company 深圳黑馬程序員
* @Date 2020/2/13 16:04
* @Version V1.0
*/
@RestController
@RequestMapping(value = "/ordersetting")
public class OrderSettingContoller {
@Reference// 訂閱 dubbo注解
OrderSettingService orderSettingService;
// 批量導入預約設置（通過Excel完成）
@RequestMapping(value = "/upload")
public Result upload(MultipartFile excelFile){
try {
// 讀取Excel文件，並批量導入到數據庫
List<String[]> list = POIUtils.readExcel(excelFile);
// 將List<String[]>集合，轉換成List<OrderSetting>
if(list!=null && list.size()>0){
List<OrderSetting> orderSettingList = new ArrayList<>();
for (String[] strings : list) {
OrderSetting orderSetting = new OrderSetting(new Date(strings[0]),Integer.parseInt(strings[1]));
orderSettingList.add(orderSetting);
}
// 批量導入
orderSettingService.addList(orderSettingList);
}
return new Result(true, MessageConstant.IMPORT_ORDERSETTING_SUCCESS);
} catch (Exception e) {
e.printStackTrace();
return new Result(false, MessageConstant.IMPORT_ORDERSETTING_FAIL);
}
}
// 根據傳遞的年月（2020-2），獲取當前月對應的日期數據
@RequestMapping(value = "/findOrderSettingMapByMonth")
public Result findOrderSettingMapByMonth(String date){
try {
List<Map<String,Object>> list = orderSettingService.findOrderSettingMapByMonth(date);
return new Result(true, MessageConstant.GET_ORDERSETTING_SUCCESS,list);
} catch (Exception e) {
e.printStackTrace();
return new Result(false, MessageConstant.GET_ORDERSETTING_FAIL);
}
}
}
2.Service:
package com.itheima.health.service;
import com.itheima.health.pojo.OrderSetting;
import java.util.List;
import java.util.Map;
public interface OrderSettingService {
void addList(List<OrderSetting> orderSettingList);
List<Map<String,Object>> findOrderSettingMapByMonth(String date);
}
impl:
package com.itheima.health.service.impl;
import com.alibaba.dubbo.config.annotation.Service;
import com.itheima.health.dao.OrderSettingDao;
import com.itheima.health.pojo.OrderSetting;
import com.itheima.health.service.OrderSettingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @ClassName OrderSettingServiceImpl
* @Description TODO
* @Author ly
* @Company 深圳黑馬程序員
* @Date 2020/2/13 16:03
* @Version V1.0
*/
@Service // dubbo提供
@Transactional
public class OrderSettingServiceImpl implements OrderSettingService {
@Autowired
OrderSettingDao orderSettingDao;
@Override
public void addList(List<OrderSetting> orderSettingList) {
// 批量導入
if(orderSettingList!=null && orderSettingList.size()>0){
for (OrderSetting orderSetting : orderSettingList) {
// 判斷當前預約設置時間是否已經存在，如果已經存在，執行更新；如果不存在，再執行新增
// 1：使用預約設置時間，查詢預約設置，判斷是否存在
long count = orderSettingDao.findOrderSettingCountByOrderDate(orderSetting.getOrderDate());
// 2：如果已經存在，執行更新
if(count>0){
// 根據預約設置時間(orderDate字段)，更新最多預約人數(number)
orderSettingDao.updateNumberByOrderDate(orderSetting);
}
// 3：如果不存在，再執行新增
else{
// 保存預約設置表
orderSettingDao.add(orderSetting);
}
}
}
}
@Override
public List<Map<String,Object>> findOrderSettingMapByMonth(String date) {
// 根據當前年月，獲取日期（也可以完成）
// 開始時間
String beginDate = date+"-1";
// 結束時間
String endDate = date+"-31";
// 組織查詢條件
Map paramsMap = new HashMap();
paramsMap.put("beginDate",beginDate);
paramsMap.put("endDate",endDate);
// 使用查詢條件完成查詢
List<OrderSetting> list = orderSettingDao.findOrderSettingByMonthBetween(paramsMap);
// 組織需要返回的數據
List<Map<String,Object>> mapList = new ArrayList<>();
if(list!=null && list.size()>0){
for (OrderSetting orderSetting : list) {
Map<String,Object> map = new HashMap<>();
map.put("date",orderSetting.getOrderDate().getDate()); // 獲取當前日期（1-31）
map.put("number",orderSetting.getNumber());
map.put("reservations",orderSetting.getReservations());
mapList.add(map);
}
}
return mapList;
}
}
Dao:
package com.itheima.health.dao;
import com.itheima.health.pojo.OrderSetting;
import java.util.Date;
import java.util.List;
import java.util.Map;
public interface OrderSettingDao {
void add(OrderSetting orderSetting);
long findOrderSettingCountByOrderDate(Date orderDate);
void updateNumberByOrderDate(OrderSetting orderSetting);
List<OrderSetting> findOrderSettingByMonthBetween(Map paramsMap);
}
Dao.xml:
<?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.itheima.health.dao.OrderSettingDao">
<!--新增保存-->
<insert id="add" parameterType="ordersetting">
insert into t_ordersetting(orderDate,number,reservations) values (#{orderDate},#{number},#{reservations})
</insert>
<!--根據預約設置時間，查詢預約設置的數量-->
<select id="findOrderSettingCountByOrderDate" parameterType="date" resultType="long">
SELECT COUNT(*) FROM t_ordersetting WHERE orderDate = #{orderDate}
</select>
<!--根據預約設置時間，更新最多預約人數-->
<update id="updateNumberByOrderDate" parameterType="ordersetting">
update t_ordersetting set number = #{number} where orderDate = #{orderDate}
</update>
<!--根據當前年月，查詢當前年月對應的預約設置數據（范圍查詢）-->
<select id="findOrderSettingByMonthBetween" parameterType="map" resultType="ordersetting">
SELECT * FROM t_ordersetting WHERE orderDate BETWEEN #{beginDate} AND #{endDate}
</select>
</mapper>
層級結構數據模板：https://blog.csdn.net/zyq1084577627/article/details/78727623
