html简单网页案例_html网页设计模板下载_免费搭建个人网站_网站的优化与推广分析

1.批量导入Excel数据

1.实现模板下载

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

 downloadTemplate(){window.location.href="../../template/ordersetting_template.xlsx";}

../为退回上级目录，找到excel在服务器的位置即可下载

2.文件上传

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

拥有:on-success="handleSuccess" 和:before-upload="beforeUpload"为成功上传和上传前的方法

  handleSuccess(response, file) {if(response.flag){this.$message({message: response.message,type: 'success'});}else{this.$message.error(response.message);}console.log(response, file, fileList);},

//上传之前进行文件格式校验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;},

 @PostMapping("/upload")public Result upload(MultipartFile excelFile){List<OrderSetting> orderSettingList=new ArrayList<>();System.out.println(excelFile);try {/*** 后端使用 List<String []>来接受，* list集合接受多对键值对，每个键值对都是excel中的一行* String【】中有两个数据，一个为orderDate预约时间，* 一个是number可预约数* 使用双层for循环取出*3.  List<String[]> 转成JavaBean对象 OrderSetting*4. 调业务层传递JavaBean对象，写入MySQL*/List<String []> stringList= POIUtils.readExcel(excelFile);for (int i = 0; i < stringList.size(); i++) {String[] strings= stringList.get(i);for (int j = 0; j < strings.length; j++) {System.out.println(strings[j]);orderSettingList.add(new OrderSetting(new Date(strings[0]),Integer.parseInt(strings[1])));}}orderSettingServices.addOrderSetting(orderSettingList);} catch (IOException e) {throw new RuntimeException(e);}return new Result(true, MessageConstant.ORDERSETTING_SUCCESS);}

后端使用什么类型的集合或数组接收，全看前端传过来的数据，或者数据库语句决定

查询数据，防止用户多次提交，多次提交更新，第一次提交插入

 @Overridepublic void addOrderSetting(List<OrderSetting> orderSettingList) {for (OrderSetting orderSetting:orderSettingList){int count=orderSettingMapper.queryOrderSettingByOrderDate(orderSetting);if (count!=0){orderSettingMapper.updateOrderSetting(orderSetting);}else {orderSettingMapper.addOrderSetting(orderSetting);}}

 <select id="queryOrderSettingByOrderDate" parameterType="OrderSetting" resultType="int">select count(0) from t_ordersetting where orderDate = #{orderDate}</select><update id="updateOrderSetting" parameterType="OrderSetting">update t_ordersetting set number = #{number} where  orderDate = #{orderDate}</update><insert id="addOrderSetting" parameterType="OrderSetting">insert into t_ordersetting values(#{id},#{orderDate},#{number},#{reservations})</insert>

2.日历展示预约设置信息

1.前端信息决定传参数据容器

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

可以发现leftobj中的对象obj包含date，number，reservations用来显示数据

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

决定了后端传输参数使用

List<Map<String,Integer>>

传输数据，或者使用List<对象>也可以

2.后端发送数据

因为预约只能是从现在起当月当年，所以，后端需要查询数据库中年月符合的数据，所以需要的数据时当前年份和月份

axios.get("/ordersetting/findMonthOrderSetting.do?month="+this.currentMonth+"&year="+this.currentYear).then(response=>{if (response.data.flag){//响应回来的data数组，赋值到this.leftobj = response.data.data;}else {this.$message.error(response.data.message);}})

3.后端处理

/*** 查找当年当月的数据* @param month* @param year* @return*/@GetMapping("/findMonthOrderSetting")public Result findMonthOrderSetting(Integer month,Integer year){List<Map<String,Integer>> mapList= orderSettingServices.findMonthOrderSetting(month,year);return new Result(true,MessageConstant.QUERY_ORDER_SUCCESS,mapList);}

 @Overridepublic List<Map<String, Integer>> findMonthOrderSetting(Integer month, Integer year) {//查找出的数据封装成实体类列表List<OrderSetting> orderSettingList= orderSettingMapper.findMonthOrderSetting(month,year);//设置返回用的装满集合的列表List<Map<String ,Integer>> mapList=new ArrayList<>();for (OrderSetting orderSetting:orderSettingList){//新建Map对象Map<String,Integer> map = new HashMap<>();//取出orderSetting对象中的数据，存储Map集合中/*** number:总可预约数* reservations:已预约数* date:日期*/map.put("number",orderSetting.getNumber());map.put("reservations",orderSetting.getReservations());map.put("date",orderSetting.getOrderDate().getDate());mapList.add(map);}return mapList;}

 @Select("select id,orderDate,number,reservations from" +" t_ordersetting where year(orderDate)=#{year} and month(orderDate)=#{month}")List<OrderSetting> findMonthOrderSetting(@Param("month") Integer month, @Param("year") Integer year);

where year(orderDate)=#{year} and month(orderDate)=#{month}

year(orderDate)=#{year}将orderDate中的年份提取，month同理