项目实战--文件上传与解析

项目实战:(以展示招聘岗位为例)

1.前后端分离

2.前端:vue+js

3.后端:golang+gin

功能分析:

前端部分:

1.设计前端界面,以卡片形式展示各个岗位的信息(包含:岗位名称;岗位奖金;岗位地点;岗位描述;岗位要求);

2.点击对应的职位时,可以展示职位的详细信息;

3.可以上传文件,该文件包含所有的职位信息,传给后端进行处理;

后端部分:

1.采用post方法,对前端传来的文件进行处理,上传至服务器的特定路径;

2.在对文件处理时,需要对文件做一些限制:  

1).限定上传文件的大小 < 100m

2).限定上传文件的内容为 xlsx

3).限定上传xlsx表格只具有5列（岗位名称;岗位奖金;岗位地点;岗位描述;岗位要求）

3.采用get方法,给前端以json格式返回数据,供前端展示

实现思路:

由于自己对go不熟悉,在写的时候,采用渐进式开发

1.前端自测,页面展示没有问题;

2.前端写post方法,get方法,调用后端接口(此时不传数据),主要是将前后端打通;

3.后端写post和get方法,与前端进行联调,确保前后端打通;

4.在前端post和get方法中,新增传递参数,确保后端可以准确接受参数,并且可以将指定数据返回给前端;

5.前端上传文件,在后端接收文件;

6.对后端接收文件,进行文件处理,存储到指定位置;

7.将存储文件的内容,传给前端,进行展示;

8.在后端对接收文件的类型以及大小做限制;

9.为了可以快速定位到问题,新增日志插件zap;

问题&&难点

问题1:跨域问题

前后端分离,在测试环境经常遇见的问题,本次实战中采用proxy进行解决,在webpack中配置proxy

proxy配置

如上进行配置,此时,我还遇见了另外一个坑,在axiso请求时,对应的url应为"/data"而不是完整路径,不然还是会报错,如下所示

axios请求

问题2:前端传值与后端接收值不一致问题

在这里,主要是弄混了JSON格式,以及form格式,因此在报错后,单看前端写的也没有问题,单看后端写的额叶没有问题,当时花费挺多时间解决这个问题的.

json格式:

json格式

form格式:这种格式都会有一个new FormData

form格式

在前端区分好不同的传参格式后,在后端需要进行处理,为了代码的兼容性,后端采用动态支持.也就是说两种都支持

后端处理如下:

首先定义一个结构体

接着进行数据绑定,此时前端传来的数据就绑定给dt了

后端绑定数据

问题3:get方法传参

在解决了post方法后,用get方法进行传参,采用json格式,仍然会报错,检查发现是因为get的参数需要用{}包裹起来,此外还需要注意的是,有一个默认的params属性,只需要给该属性赋值即可进行传参,如下:

get请求,参数正确写法

开始时,参数外面没有写{},如下会报错:

get请求,参数错误写法

问题4:后端日志

因为第一次接触go相关的东西,只是为了了解日志打印,此处采用了最基本的用法:

打印日志

问题5:后端返回数据大小写问题

以一个json进行返回数据,在后端中定义了一个结构体,在结构体中的字段用小写字母开头,在返回数据时会报错,如下

结构体

在返回数据中,有用到这个结构体,因此会报错,解决办法有两种,直接把首字母改成大写,或者兼容大小写,如下

问题6:处理文件数据,返回给前端

获取指定位置的文件,得到文件的内容,最后以json格式返回,需要注意的excel表格的特定,一个表中,可以有sheet1,sheet2...如何进行处理获取对应表下的数据,一开始直接使用的表内部名字是"sheet1",但是此方法存在问题,如果将表进行重命名,那么会得到错误的结果,因此整个流程如下:

获取表格数据

在得到每一列数据后,对数据进行处理,如下:

处理获取的数据

有疑问加站长微信联系（非本文作者）