2.2

优化一将表格的状态列这里是是否显示列修改为开关同时在修改页新增可显示修改开关

2.6.2

之前的分类管理的前端部分基本上是手写的增删改查虽然部分是直接使用的elementUI提供的组件只是稍作修改但是还是需要自己去找对应的组件组件写数据域自己写方法自己绑定等其实要写的还是比较多的。

但其实仔细一想的话其实这些组件都差不多都是一些列表提供一些按钮一些文本框然后进行增删改查代码都差不多。

既然差不多没什么技术含量的东西只是比较繁琐。

那么应该就能自动生成的能给我们直接使用是的若依也提供了前端部分的逆向代码。

ps兄弟们真的要努力的学了这些基本的增删改查代码都不需要我们写了如果你还只会这些简单的会被淘汰的

二、前端部分

实现找到前端逆向生成的代码部分其实就是和main同级的里面放着在网页所选择的很多张表所对应的前端代码

2.1

这个没什么好说的在之前的创建分类管理的时候已经操作过一遍了只是部分属性修改一下就行了

其实还可以选择在数据库中创建之后可以使用数据库进行批量创建其实都差不多

2.2

看着好像挺好的基本上我们自己去写也就是写这些东西现在都帮我们已经写好了极大的提升了开发效率但是这一般来说不能这样就OK了还需要优化或者是需要根据一定的需求做调整。

修改状态列为开关修改页同理

像这种是否显示的这种或是其他字段使用01来表示状态的一般来说我们不希望直接这么突兀的直接显示主要是看着不美观最重要的是不好直接修改还需要到修改弹窗那里手动的输入0或者1进行修改这样不方便如果在这个列表中这一个属性使用开关进行替换的话就可以不打开修改弹窗也不需要手动的去输入状态值了而是直接点击一下就能直接的修改了很方面。

修改图片地址列为真实图片

这个直接放置图片地址的方式肯定不可取根本就不知道图片长什么样子我们只需要使用elementUI为我们提供的图片组件将其进行替换即可。

主要也就是这三部分在其他组件页面其实大致都是这些地方需要进行修改。

2.6

优化一将表格的状态列这里是是否显示列修改为开关同时在修改页新增可显示修改开关

其实很简单既然这里是要替换表格中的一列那么势必就得参考elementUI中的表格组件如何进行替换要有这种意识哪个组件上面进行修改就查看哪个组件的文档ps像是废话但很重要思路就是这样产生的。

找到这个自定义模板。

我们照葫芦画瓢直接复制这个template到我们自己的组件中去

在表格列处

这只是一个模板就和组件文件中三大件中的模板一样其实就是规定了组件写的位置具体还是要在里面写好组件例如现在需要放开关组件而之后的表格的logo地址的那一列则需要放图片组件。

现在的任务就是继续到官网里面去找修改状态开关组件

最重要的就是将决定开关是否开还是闭与数据域中的数据进行关联使用v-model指令进行动态的绑定

但是这里会发现一个问题就是无论我的数据库中值无论是0还是1也就是无论是

显示还是不显示开关都是闭合的状态那这是怎么回事呢其实要有这么一种意识那就是这个开关开与闭肯定是受到一个值也就是我这里绑定的form.showStatus对应数据库中对象的这一列值。

我们知道数据库中这一列值只会是0或者是1其实啊这个开关组件并不知道0代表关1代表开它默认自己是根据布尔值决定开还是关的false代表关true代表开默认是这样。

那肯定我们的数据库中一般不存布尔值是吧所以肯定也得换elementUI也知道肯定也会有这样的需求所以也就提供了相应的参数去自己指定开是什么值关又是什么值。

elememtUI官网已经说的很明白了

这里因为是需要动态和数据域中的属性进行绑定因此需要使用在参数前加上

冒号进行指定

最终的样子长这样ps这里已经是将每一步都讲得很细节了如果还不明白的话请私信我

不要忘记修改页面同样得记得加上。

都一样的东西只是绑定的值不一样

el-table-column

slot-scopescopeel-switchchangechangeStatus(scope.row)v-modelscope.row.showStatusactive-color#13ce66inactive-color#ff4949:active-value1:inactive-value0/el-switch/template/el-table-column

el-form-item

propshowStatusel-switchv-modelform.showStatusactive-color#13ce66inactive-color#ff4949:active-value1:inactive-value0/el-switch/el-form-item

到这里这项优化工作就已经完成了其实很简单就是在你想要更换的那一列加个模板然后放一个开关的组件只是需要注意修改开关的开关规则。

2.6.2

这里是我需要花大功夫讲的地方主要就是使用oss进行文件上传这里的前端部分的话主要就是懂得加上一个文件上传按钮然后这个按钮关联的许多参数得注意一下就行了。

这里采用的oss上传方式为携带好凭证然后文件直传到阿里云服务器的方式。

上传文件组件从哪里来

这个可以用谷粒商城中老师已经写好了的文件上传组件直接用就行了单文件的多文件的都有

单文件上传组件

divel-uploadactionhttp://sq-bucket-02.oss-cn-hangzhou.aliyuncs.com:datadataObjlist-typepicture:multiplefalse

:show-file-listshowFileList:file-listfileList:before-uploadbeforeUpload:on-removehandleRemove:on-successhandleUploadSuccess:on-previewhandlePreviewel-button

sizesmall

classel-upload__tip只能上传jpg/png文件且不超过10MB/div/el-uploadel-dialog

width100%

this.value.substr(this.value.lastIndexOf(/)

1);}

{this.emitInput();},handlePreview(file)

{this.dialogVisible

response.data.policy;_self.dataObj.signature

response.data.signature;_self.dataObj.ossaccessKeyId

response.data.accessid;_self.dataObj.key

response.data.dir

/getUUID()_${filename};_self.dataObj.dir

response.data.dir;_self.dataObj.host

response.data.host;console.log(_self.dataObj,_self.dataObj);resolve(true)}).catch(err

{reject(false)})})},handleUploadSuccess(res,

file)

{console.log(上传成功...)this.showFileList

true;this.fileList.pop();this.fileList.push({name:

file.name,

this.dataObj.key.replace(${filename},file.name)

});this.emitInput(this.fileList[0].url);}}}

/script

templatedivel-uploadactionhttp://oss-cn-hangzhou.aliyuncs.com:datadataObjlist-typepicture-card:file-listfileList:before-uploadbeforeUpload:on-removehandleRemove:on-successhandleUploadSuccess:on-previewhandlePreview:limitmaxCount:on-exceedhandleExceedi

classel-icon-plus/i/el-uploadel-dialog

width100%

{value.push(fileList[i].url);}this.$emit(input,

fileList)

{this.emitInput(fileList);},handlePreview(file)

{this.dialogVisible

{console.log(这是什么${filename});_self.dataObj.policy

response.data.policy;_self.dataObj.signature

response.data.signature;_self.dataObj.ossaccessKeyId

response.data.accessid;_self.dataObj.key

response.data.dir

/getUUID()_${filename};_self.dataObj.dir

response.data.dir;_self.dataObj.host

response.data.host;resolve(true);}).catch(err

{console.log(出错了...,err)reject(false);});});},handleUploadSuccess(res,

file)

this.dataObj.key.replace(${filename},file.name)});this.emitInput(this.fileList);},handleExceed(files,

fileList)

还有最终服务器中文件存储时的文件名所包含的uuid的工具类来生成UUID的

export

xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g,

{const

其实简单来说就是在真正的文件上传之前有一个前序方法这个方法的目的就是向后端发送请求获得直传的凭证只有获得了这个凭证才可以进行直传至于到底如何获取的那是后端的事情了。

然后获取到这个凭证之后就会携带这个凭证并带上文件直接向阿里云服务器发请求直接保存到了阿里云服务器。

上面其实还是修改组件下面是真正的将组件用到我们的项目中去还是那几步

引组件

展示出来了也就代表这项工作成功的完成了。

其实也很简单就是在我们的前端项目中直接引入好老师直接提供好的前端文件上传所需的一些文件然后改一下桶路径然后在项目中引入直接使用即可。

2.6.3

这里有着之前改成开关的例子之后就变得很简单了也是一样的既然是在表格中要修改表格列就只需要在那一列使用template然后在里面放上图片组件即可。

el-table-column

slot-scopescopeel-imagestylewidth:

50px;

50px:srcscope.row.logofitcontain/el-image/template/el-table-column

三、后端部分

总的来说后端这里很单纯总是哈哈哈当然只是需要业务简单反正写到目前为止前端都相较于后端反而要繁琐一点。

文件上传我们其实比较熟悉了就是上传到服务器嘛这里使用的是oss文件上传技术oss文件上传常用的有两种上传方式

第一种很简洁明了的方式直接将文件发送到我们项目的后端服务器上面然后后后端服务器再调用oss的api实现文件的上传也就是说这里其实文件是直接到了我们的后端服务器上面去的给我们的后端服务器一定的压力。

第二种携带凭证的方式直接将文件上传到阿里云服务器这种方式就是先携带文件的一些信息比如说文件名bucket名bucket域名等信息发送到我们的后端服务器然后后端服务器调用oss的api获得凭证然后发给前端然后前端再携带上这个凭证以及文件然后直接发到oss服务器。

也就是说这种方式其实是并没有将文件直接上传到我们自己的服务器上面去的减轻了我们自己的服务器的压力。

好现在oss的上传方式大致理解了我们现在采用第二种方式进行上传。

既然知道了方案实施起来难不难呢其实不难其实这里后端的工作就是获取凭证这里的凭证获取归根结底其实并不是我们直接获取的还是调用oss的api进行获取的那这个api到底是什么呢这里就需要访问阿里云的官网到官网中oss对象存储的文档那里去查看了这里我就不查看了其实不重要我这里直接贴代码能用就行了。

对了这里的话因为是oss文件上传其实不是业务模块了这里是第三方服务了因此我新建一个第三方服务以后的所有的第三方服务全放到这里比如说还有短信服务金融服务物流服务等。

这并非业务服务因此并不需要像业务服务那样需要依赖那么多的依赖只需要简单的几个依赖就行了像这也是一个服务以后使用网关路由到这里因此得注册到nacos注册中心去因此那cos注册中心的依赖少不了还有现在是需要oss服务因此oss服务依赖少不了这里我并不是直接导入原生的oss依赖了而是导入对应的starter这样就是将方法更加封装起来了可以拿来直接使用一些参数只需要到配置文件中配好就行了

这里这个第三方服务的pom服务我直接给出这里我也还是直接引入的comment模块其实也可以直接引入的但是我这种方式还得注意排除掉一些依赖比如说MP和security的依赖这是不需要的

?xml

xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0

http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdcom.sq/groupIdartifactIdgulimall/artifactIdversion1.0-SNAPSHOT/version/parentartifactIdthirdparty/artifactIdpropertiesmaven.compiler.source8/maven.compiler.sourcemaven.compiler.target8/maven.compiler.targetproject.build.sourceEncodingUTF-8/project.build.sourceEncoding/propertiesdependenciesdependencygroupIdcom.sq/groupIdartifactIdgulimall-common/artifactIdversion1.0-SNAPSHOT/versionexclusionsexclusiongroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactId/exclusionexclusiongroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-security/artifactId/exclusion/exclusions/dependencydependencygroupIdorg.springframework.cloud/groupIdartifactIdspring-cloud-starter-alicloud-oss/artifactIdversion0.9.0.RELEASE/version/dependency/dependencies/project

配置文件

falsenacos:discovery:server-addr:

localhost:8848

thirdpartyautoconfigure:exclude:

org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration这里由于使用了nacos配置中心bootstrap.properties引导文件也是少不了的里面主要写好文件的位置文件的namespece命名空间分组等信息这里的话使用的是项目中的常用用法就是配置中心中配的方式是采用配置分离的方式也就是将原本在Java程序配置文件中的application.yml文件进行拆解拆解成多个文件比如说数据源可以拆开一个文件注册中心又是一个文件其他配置又是一个文件等等拆解成若干个文件这样更加方便管理。

话不多说这里直接给上bootstrap.properties里面的内容其实就只需要注意一下这种多文件怎么配置就行了

spring.cloud.nacos.config.server-addrlocalhost:8848

spring.application.namethirdpartyspring.cloud.nacos.config.namespace30366fc8-9ac7-44ef-846d-3ec8009fce8b

spring.cloud.nacos.config.ext-config[0].data-idoss.yaml

spring.cloud.nacos.config.ext-config[0].groupDEFAULT_GROUP

spring.cloud.nacos.config.ext-config[0].refreshtrue

主要在这里bucke和dir需要自己配一下其他AK和endpoint从nacos配置中心中读取

public

SimpleDateFormat(yyyy/MM/dd).format(new

Date());//

Date(expireEndTime);PolicyConditions

policyConds

PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,

1048576000);policyConds.addConditionItem(MatchMode.StartWith,

dir);String

ossClient.generatePostPolicy(expiration,

policyConds);byte[]

postPolicy.getBytes(utf-8);String

encodedPolicy

BinaryUtil.toBase64String(binaryData);String

postSignature

ossClient.calculatePostSignature(postPolicy);respMap

new

encodedPolicy);respMap.put(signature,

postSignature);respMap.put(dir,

1000));}

{System.out.println(e.getMessage());}return

接口完整代码

RequestMapping(/thirdparty/oss)

public

${spring.cloud.alicloud.oss.endpoint})private

String

${spring.cloud.alicloud.access-key})private

String

accessKey;RequestMapping(/policy)public

AjaxResult

SimpleDateFormat(yyyy/MM/dd).format(new

Date());//

Date(expireEndTime);PolicyConditions

policyConds

PolicyConditions();policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE,

1048576000);policyConds.addConditionItem(MatchMode.StartWith,

dir);String

ossClient.generatePostPolicy(expiration,

policyConds);byte[]

postPolicy.getBytes(utf-8);String

encodedPolicy

BinaryUtil.toBase64String(binaryData);String

postSignature

ossClient.calculatePostSignature(postPolicy);respMap

new

encodedPolicy);respMap.put(signature,

postSignature);respMap.put(dir,

1000));}

{System.out.println(e.getMessage());}return

AjaxResult.success(respMap);}}4.

在网关中进行注册配置

最后一步很重要这里又新增了一个服务在前端都只会像网关发请求至于需要网关发到我们的服务中去就需要到网关中配置好这个第三方服务的“关键信息”是thirdparty因此在网关中配置上即可。

id:

注意这里之前前端那里需要请求这个接口在那个前端api文件中的请求路径得与后端路径保持一致

四、总结

这次其实任务量还挺大的但是仔细一想其实还是简单的使用逆向生成的前端代码已经帮我们省去了百分之80的内容。

将状态列改成开关