后端表格
使用bean字典的作为后端表格的数据源
注意点:直接将外层的JSONObject对象 data 作为new Pager()的参数,不需要去新建一个result的JSONObject对象,注意是否有分页需求
1234567891011121314151617181920212223242526272829303132//重写bean字典的dictQuery方法 @Override public Pager dictQuery(Map<String, Object> params) { log.info("测试后端表格"); //创建列的JSONArray JSONArray columns = new JSONArray(); //包含表头和数据索引 columns.add(createColumn("title","姓名","dataIndex", "grid_name") ...
Axios
AxiosAxios是一个基于Promise的HTTP库,可以用在浏览器和node.js中
安装方法1yarn add axios
GET方法1234axios .get(URL) .then(response => (this.info = response)) .catch(err => console.log(err))
GET方法传递参数的格式:
123456789101112131415161718192021// 直接在 URL 上添加参数 ID=12345axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });// 也可以通过 params 设置参数:axios.get('/user', { params: { ...
列表渲染
v-for命令
其中item代表items中的元素,index是元素的索引
12345<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>
可以使用v-for遍历对象
123456789101112<p>使用v-for遍历object对象</p> <ul> <li v-for="value in object" :key="value"> {{ value }} </li> </ul& ...
ant design
使用vue-cli创建ant-design项目
查看vue-cli版本,使用vue -V
创建新项目vue create ant-demo,并进行自定义配置
引入ant-design,使用yarn add ant-design-vue,如果使用vue2,则需要安装ant-design的1版本,使用如下命令yarn add ant-design-vue@1.7.8
全局引入样式
1234567891011121314151617import Vue from "vue";import App from "./App.vue";import router from "./router";import store from "./store";// 新增代码:引入全部组件及样式import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'// 新增代码:注册全部组件Vue.use(Antd) ...
Object.assign方法
Object.assign方法1var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
Object.assign 方法接收一个目标对象(第一个参数)和一个或多个源对象,然后将源对象的属性复制到目标对象中。在这里,sqp 是目标对象,而 this.queryParam、this.isorter、this.filters 是源对象。
属性合并:param 变量最终保存了所有源对象的属性合并到 sqp 中的结果。如果有相同属性名的情况,后面的源对象的属性将覆盖前面的。
例如,如果 this.queryParam 有属性 { key1: 'value1' },而 sqp 也有属性 { key1: 'originalValue' },那么最终的 param 中 key1 的值将是 'value1'。
返回值:Object.assign 方法的返回值是目标对象,也就是 sqp,并且 param 也引用了这 ...
form
@submit.native.prevent是 Vue 中的事件修饰符的使用语法。这特定的修饰符结合了两个部分:@submit 和 .native.prevent。
.native是一个特殊修饰符,用于在父组件上监听子组件触发的原生事件
.prevent是阻止事件的默认行为的修饰符,即event.preventDefault()
@submit.native.prevent作用:在表单提交事件上阻止默认行为,即防止表单提交刷新页面。对于在Vue中处理表单提交而不刷新整个页面有用。
父子组件传参
子组件的引入
新建Helloworld.vue页面,在export default中加入props,用于接收从父组件中传过来的message数据
123456props:{ message:{ type: Object, required: true } },
父组件App.vue使用import HelloWorld from "@/components/HelloWorld";引入子组件,并且在export default中增加`
12345678910export default { data() { return { string: "ssss", } }, components: { HelloWorld }}
使用子组件
1234567<template> <div> <HelloWorl ...
新平台练习
练习一:设计一个流程 包含全节点类型(固定、动态、候选组、会签,抄送)节点,并能正常启动走完整个流程练习二:配置一个工作流权限控制如何配置,(在flowable.zip视频资料中有) 工作流练习1:cxl测试工作流 工作流练习2:cxl工作流权限发起
练习:设计一个仪表板,包含两个以上的数据图表,一个时间组件;修改图表主题色;仪表板发布到菜单 BI名称:cxl测试BI
1.使用自定义报表创建sys_user的报表1,具体自定义参数自定–>将报表发布到报表管理菜单树下2.使用sys_user新建报表2,在报表2中实现点击用户名,跳转到报表1中,并将该条数据的id传递到报表1中,实现报表1的刷新展示,并展示回退按钮,可以退回报表2中 报表名称:cxl练习报表2、cxl练习报表1
1、使用动态表格行编辑和弹窗的方式实现用户数据的增删改查 2、使用excel数据导入功能导入仓库信息,以及仓库中的商品信息 仓库表单:cxl仓库信息
角色权限
菜单树添加对应的按钮权限,vue或低代码页面中的v-action
功能授权网络授予相应的按钮权限
新项目搭建
创建新平台项目流程
使用模块的模块管理创建项目,安装全部模块并下载
解压后,使用idea打开项目,更改JDK以及Maven配置
修改application-dev.properties中的数据库等配置
此时,应该可以正常启动项目
业务模块配置
最外层pom增加mybatis依赖
12345678910 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.6</version></dependency><dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.7</version>< ...