Springboot1.5.1和Vue2.0的交互

@Springboot1.5.1和Vue2.0的交互

#VUE

<!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.goodAllocationName" placeholder="输入货位名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="formInline.goodAllocationTrue" placeholder="输入货位"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
     <!--列表-->
    <el-table v-fit-columns size="small" :data="listData" highlight-current-row v-loading="loading" border
      element-loading-text="拼命加载中" style="width: 100%;">
      <!-- <el-table-column align="center" type="selection" width="60">
      </el-table-column> -->
      <el-table-column sortable prop="goodAllocationId" label="货位序号" width="100">
      </el-table-column>
      <el-table-column sortable prop="goodAllocationName" label="货位名称" width="200">
      </el-table-column>
      
      <el-table-column sortable prop="zu" label="组" width="150">
        <!-- <template slot-scope="scope">
          <div>{{scope.row.editTime|timestampToTime}}</div>
        </template> -->
      </el-table-column>
      <el-table-column sortable prop="pai" label="排" width="150">
      </el-table-column>


      <el-table-column align="center" label="操作" min-width="100" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      search() {
        this.getdata(this.formInline)
      },
      methods: {
      // 获取公司列表
      getdata(parameter) {
        this.loading = true
        goodAllocationList(parameter)
          .then(res => {
            this.loading = false
            if (res.success == false) {
              this.$message({
                type: 'info',
                message: res.msg
              })
            } else {
              this.listData = res.data
              // 分页赋值
              this.pageparm.currentPage = res.page
              this.pageparm.pageSize = res.limit
              this.pageparm.total = res.total
            }
          })
          .catch(err => {
            this.loading = false
            this.$message.error('菜单加载失败，请稍后再试！')
          })
      },
*****
}

// 搜索事件

后台java

@RequestMapping("/getGoodAllocation")
	public Map<String, Object> getGoodAllocation(GoodAllocationSearch GoodAllocationSearch) {
		Map<String, Object> map = new HashMap<String, Object>();
		System.out.println("search==>" + GoodAllocationSearch.toString());
		Page<GoodAllocation> pagelist = goodAllocationServiceImpl.queryGoodAllocations(GoodAllocationSearch);
		Long total = pagelist.getTotalElements();// 获取total
		List<GoodAllocation> list = pagelist.getContent();// 获取rows
		map.put("code", 1);
		map.put("msg", "搜索结果成功");
		map.put("success", true);
		map.put("limit", GoodAllocationSearch.getLimit());
		map.put("page", GoodAllocationSearch.getPage());
		map.put("total", total);
		map.put("data", list);``
		return map;
	}

##上传excel,前台vue

`<el-dialog :title="上传excel" :visible.sync="uploadDialog" width="33%" @click="closeUpload">
      <el-upload
              ref="upload"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :action="upload.url"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="true"
              :data="{updateSupport:upload.updateSupport,lxyf:upload.lxyf}"
              drag>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                <el-checkbox v-model="upload.updateSupport" />覆盖       
              </div>
         </el-upload>
    </el-dialog>`
    
    // 导入参数
              upload: {
                // 是否显示
                open: false,
                // 弹出层标题
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的数据
                updateSupport: 0,
                lxyf:"我是上传文件需要携带的参数案例",
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url:importData,
              },
              // 导入参数
              upload: {
                // 是否显示
                open: false,
                // 弹出层标题
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的数据
                updateSupport: 0,
                lxyf:"我是上传文件需要携带的参数案例",
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url:importData,
              },

export const importData = baseIp+"/good/importData";

导入,java后台

@RequestMapping("/importData")
	@ResponseBody
	public Object importData(@RequestParam MultipartFile file, @RequestParam boolean updateSupport,
							 @RequestParam String lxyf) throws Exception {
		Map<String, Object> result = new HashMap<String, Object>();

		String originalFilename = file.getOriginalFilename();// 得到上传文件的名称
		System.out.println("批量导入excel方法执行!!!文件名.==>" + originalFilename + "+contentType:"+file.getContentType());
		System.out.println("传进来的其他参数updateSupport:==>" + updateSupport+"--------------lxyf:"+lxyf);
		// 拿到文件解析出来的实体类集合
		@SuppressWarnings("unchecked")
		List<Good> goods = (List<Good>) poiUtils.parseExcel(Good.class, file.getInputStream(), originalFilename);
		// 数据库里已经存在的id集合
		List<Integer> goodIds = GoodServiceImpl.getAllGoodId();
		for (Good good : goods) {
			// 获取到每一条数据
			System.out.println("解析出来的"+good);
			// id不会重复的,所以用id进行评判,对已有的进行覆盖,没有的进行添加
			Integer goodId = good.getGoodId();
			if (goodId != null && !goodId.equals("")) {
				Good hadGood = GoodServiceImpl.getGood(good.getGoodId());
				//更新,如果有对应的id,那么就更新
				if (hadGood != null && !hadGood.equals("")) {
					Timestamp createTime = good.getCreateTime();
					String goodNum = good.getGoodNum();
					String goodName = good.getGoodName();
					Integer enabled = 1;
					// if(!good.getEnabled().equals("null")) enabled=good.getEnabled();
					Integer isDel = good.getIsDel();
					Timestamp updateTime = good.getUpdateTime();
					String upGoodName = good.getUpGoodName();
					hadGood.setCreateTime(createTime);
					hadGood.setGoodNum(goodNum);
					hadGood.setGoodName(goodName);

					hadGood.setEnabled(enabled);
					hadGood.setIsDel(0);
					hadGood.setUpdateTime(updateTime);
					hadGood.setUpGoodName(upGoodName);
					System.out.println("要导入的good=>" + hadGood.toString());
					Object obj = this.updateGood(hadGood);
				}else {
					//这是新加
					// 如果没有这些商品id,那么就认为他是要添加的,给他设置为null
					Boolean results = goodIds.contains(good.getGoodId());
					if (!results) {
						good.setGoodId(null);
						System.out.println("识别到有需要添加的新明细");
					}
					System.out.println("导入excel触发的新增商品信息");
					Object obj = this.updateGood(good);
				}
			}
		}
		result.put("success", true);
		result.put("msg", "上传成功");
		result.put("msg", "导入了" + goods.size() + "条");
		return result;

	}

主要是@RequestParam MultipartFile file,接受来自前台的文件上传