listloading

https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> controller: @RestController @RequestMapping("/yfjs") @CrossOrigin public class YFJSController { @Autowired private YFJSService yfjsService; @Autowired private FJSCService fjscService; private String url; @RequestMapping(value="/file",produces=

在前面随笔介绍了ABP+Vue前后端的整合处理，包括介绍了ABP的后端设计，以及前端对ABP接口API的ES6的封装，通过JS的继承类处理，极大减少了重复臃肿的代码，可以简化对后端API接口的封装，而且前端使用Element组件，很好展示API获得的数据，通过在界面中展示树状列表，以及表格列表数据，可以构建一个很好的列表展示界面，而常规的界面，通过也包括了新增、编辑、查看等展示场景，一般我们通过对话框的方式进行展示处理。本篇随笔以权限管理模块中的用户管理为媒介，进行相关功能的介绍和界面设计的处理。 1、权限管理模块的设计 我们知道，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。 权限模块里面包含的一些主对象表和中间表，中间表主要用来存储两个对象之间的多对多关系，如角色包含多个用户，用户属于多个机构，机构包含多个角色等等。 结合ABP后端提供的接口，Vue前端我们要实现基础的用户、组织机构、角色、功能权限等内容的管理，以及维护它们之间的关系。Vue前端对于权限管理模块的菜单列表如下所示。 上图权限管理模块中，包括用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等内容模块的管理。 其中用户管理模块，主要用来展示用户信息列表

在前面随笔介绍了ABP+Vue前后端的整合处理，包括介绍了ABP的后端设计，以及前端对ABP接口API的ES6的封装，通过JS的继承类处理，极大减少了重复臃肿的代码，可以简化对后端API接口的封装，而且前端使用Element组件，很好展示API获得的数据，通过在界面中展示树状列表，以及表格列表数据，可以构建一个很好的列表展示界面，而常规的界面，通过也包括了新增、编辑、查看等展示场景，一般我们通过对话框的方式进行展示处理。本篇随笔以权限管理模块中的用户管理为媒介，进行相关功能的介绍和界面设计的处理。 1、权限管理模块的设计 我们知道，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。 权限模块里面包含的一些主对象表和中间表，中间表主要用来存储两个对象之间的多对多关系，如角色包含多个用户，用户属于多个机构，机构包含多个角色等等。 结合ABP后端提供的接口，Vue前端我们要实现基础的用户、组织机构、角色、功能权限等内容的管理，以及维护它们之间的关系。Vue前端对于权限管理模块的菜单列表如下所示。 上图权限管理模块中，包括用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等内容模块的管理。 其中用户管理模块，主要用来展示用户信息列表

　　　　 让这两个select相互绑定，让roleOptions选取值后，worklist弹出得是roleOptions值 <el-select v-model="postForm.projectName" placeholder="请选择" @change="getList(postForm)"> <el-option v-for="item in roleOptions" :key="item.key" :label="item.label" :value="item.key"> </el-option> <el-select v-model="postForm" placeholder="请选择" value-key="id" @change="getList2(postForm)"> <el-option v-for="item in worklist" :label="item.productName" :value="item"> </el-option> 首先在created里面获取值，设res为null，传入getlist中； async created() { this.lastWorklist = await api_price_list({},this.queryParam); let res = null; this.getList(res) },

在前面随笔《 循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理 》简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP后端接口信息，实现对前端界面的开发工作。 ABP（ ASP.NET Boilerplate ）框架主要是基于.net core 进行的后端Web API的开发，结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息，这样前端技术人员可以很容易整合前端的API应用。Vue + Element的前端应用，是目前较为流行的前端技术整合，Vue提供了前端框架很好的支持，Element提供了非常不错的界面组件封装和处理，通过ABP后端API接口和前端Vue+Element的整合，可以很好实现前后端的分离处理，同时又极大提高各自开发过程，并利用最新、应用广泛的技术来实现最好的技术应用。 1、ABP接口和前端对接处理 ABP框架主要还是基于领域驱动的理念来构建整个架构的，其中领域驱动包含的概念有 域对象Entities、仓储对象Repositories、域服务接口层Domain Services、域事件Domain Events、应用服务接口Application Services、数据传输对象DTOs等。 ABP官方网站：http://www

1.组件，BaseTable 下有两个文件，index.vue ,extend.js index.vue代码 <template> <div class="crud"> <!--crud头部，包含列表标题和可操作按钮--> <el-row class="crud-header"> <!--<el-col :span="8">{{formTitle}}列表</el-col>--> <el-col :span="24"> <el-button type="success" size="mini" v- if ="gridBtnConfig.create" @click="createOrUpdate(null)"> <i class="el-icon-plus"></i> 新增 </el-button> <!-- 标记为single的按钮不需要禁用，不依赖选择数据--> <el-button :disabled="!item.single && multipleSelection.length === 0" size="mini" @click ="handleEmit(item.emitName,'outer')" v - for ="(item,index) in outerButton" :key="index" :type="item.type?item.type:

【今日推荐】：为什么一到面试就懵逼！>>> 就是如何将外键的东东，显示在网页上。 我是如下实现的，作个记录： 一，先在gin里弄好外键及api，此处不表。 二，vue前端显示时，先通过api，将两个数据都下载下来。 getList() { this .listLoading = true fetchProjectList( this .listProjectQuery).then(response => { this .listProject = response.data.list this .listLoading = false }).then(() => { fetchList( this .listQuery).then(response => { this .list = response.data.list this .total = response.data.total this .listLoading = false }) }) }, 三，在需要显示外键时，使用函数来实现。 echoName(id) { for ( var value of this .listProject) { if (value.ID == id) { return value.name } } }, echoCnName(id) { for ( var value of this