JeecgBoot实战—前端Ant-Design-Vue专题

已于 2022-02-21 20:33:39 修改
阅读量4.5k 收藏 23
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-02-21 08:00:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_Fly1/article/details/123023406
版权

这里写目录标题

时间组件

j-date基本使用

j-date是JeecgBoot基于a-date-picker封装的时间组件

在这里插入图片描述
在这里插入图片描述

局部使用组件

<template>
  <a-card :bordered="false">
    <j-date v-model="dateStr" placeholder="请选择"></j-date>
  </a-card>
</template>

<script>
<!--  局部组件引入JDate-->
  import JDate from '@/components/jeecg/JDate'
  export default {
    name: 'List',
    components:{
      JDate
    },
    data(){
      return{
        dateStr:null
      }
    }
  }
</script>

<style scoped>

</style>

全局使用j-date组件

j-date源码

<template>
  <a-date-picker
    dropdownClassName="j-date-picker"
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
    v-bind="$attrs"/>
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'JDate',
    props: {
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      dateFormat:{
        type: String,
        default: 'YYYY-MM-DD',
        required: false
      },
      //此属性可以被废弃了
      triggerChange:{
        type: Boolean,
        required: false,
        default: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      showTime:{
        type: Boolean,
        required: false,
        default: false
      },
      getCalendarContainer: {
        type: Function,
        default: (node) => node.parentNode
      }
    },
    data () {
      let dateStr = this.value;
      return {
        decorator:"",
        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
      }
    },
    watch: {
      value (val) {
        if(!val){
          this.momVal = null
        }else{
          this.momVal = moment(val,this.dateFormat)
        }
      }
    },
    methods: {
      moment,
      handleDateChange(mom,dateStr){
        this.$emit('change', dateStr);
        console.log(dateStr)
      }
    },
    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

在这里插入图片描述
开始使用组件

<template>
  <a-card :bordered="false">
    <j-date v-model="dateStr" placeholder="请选择"></j-date>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        dateStr:null
      }
    }
  }
</script>

<style scoped>

</style>

a-date-picker基本使用

官网介绍

Input

基本使用

官网介绍

<template>
  <a-card :bordered="false">
    <div>
      <a-input v-model="str" @change="showStr" allowClear placeholder="请输入"  />
      {{str}}
    </div>
    <div>
      <!--默认值-->
      <a-input  allowClear placeholder="请输入" :default-value="defaultStr" />
    </div>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        str:null,
        defaultStr:'123'
      }
    },
    methods:{
      showStr(e){
        console.log('改变的值')
        console.log(e.target.value)
        this.str = e.target.value
      }
    }
  }
</script>

<style scoped>

</style>

select

官网介绍

基本使用

<template>
  <a-card :bordered="false">
    <a-select default-value="lucy" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="disabled" disabled>
        Disabled
      </a-select-option>
      <a-select-option value="Yiminghe">
        yiminghe
      </a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
      }
    },
    methods:{
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

测试结果
在这里插入图片描述
在这里插入图片描述
选择了yiminghe
在这里插入图片描述

v-for遍历创建a-select

<template>
  <a-card :bordered="false">
    <a-select  style="width: 120px" @change="handleChange" allowClear >
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[]
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

v-model

<template>
  <a-card :bordered="false">
    <a-select  style="width: 120px" @change="handleChange" allowClear v-model="selectVal" >
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
    我是被选中的value:{{selectVal}}
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        selectVal:null,
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述

disabled

<template>
  <a-card :bordered="false">
    <!--disabled:禁止下拉选进行选择，:disabled="true|false"动态绑定，控制是否禁用-->
    <a-select  style="width: 120px" @change="handleChange" allowClear v-model="selectVal" disabled>
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
    我是被选中的value:{{selectVal}}
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        selectVal:null,
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

测试结果
在这里插入图片描述

defaultValue和change

<template>
  <a-card :bordered="false">
    <!--@change事件-->
    <a-select  style="width: 120px" @change="handleChange" allowClear  :defaultValue="defaultValue">
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        defaultValue:'Jack'
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

测试
在这里插入图片描述

mode=“multiple”

下拉选支持多选
官网介绍

<template>
  <a-card :bordered="false">
    <!--@change事件-->
    <a-select  style="width: 120px" @change="handleChange" allowClear mode="multiple" v-model="str">
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        str:''
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>
<style scoped>
</style>

测试
在这里插入图片描述

Upload 上传

官网介绍
change事件，文件上传中、完成、失败都会调用

table表格

table表格

表格分页参数

表格分页参数

<template>
  <a-card :bordered="false">
    <!--:scroll:宽度和高度超过x,y的长度，表格进行滚动-->
    <a-table border ref="testTable" rowKey="id" :columns="columns" :data-source="dataSource" :pagination="page"
             size="middle" :scroll="{ x: 1500, y: 300 }">
      <template slot="avatarslot" slot-scope="text, record, index">
        <div class="anty-img-wrap">
          <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
        </div>
      </template>
    </a-table>
  </a-card>
</template>

<script>
  import { getUserList,getFileAccessHttpUrl } from '@/api/manage'
  import { filterObj } from '@/utils/util'

  export default {
    name: 'List',
    data() {
      return {
        dataSource:[],//表格数据
        /* 排序参数 */
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        description: '这是测试表格',
        queryParam: {},//查询参数
        page: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50'],//每页分页参数选项
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },//表格分页
        columns: [// 自定义列
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            fixed:'left',// 固定列
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '用户账号',
            align: 'center',
            dataIndex: 'username',
            width: 120,
            sorter: true
          },

          {
            title: '头像',
            align: 'center',
            width: 120,
            dataIndex: 'avatar',
            scopedSlots: { customRender: 'avatarslot' }
          },

          {
            title: '性别',
            align: 'center',
            width: 80,
            dataIndex: 'sex_dictText',// sex_dictText字典表中的code
            sorter: true
          },
          {
            title: '生日',
            align: 'center',
            width: 100,
            dataIndex: 'birthday'
          },
          {
            title: '手机号码',
            align: 'center',
            width: 100,
            dataIndex: 'phone'
          },
          {
            title: '部门',
            align: 'center',
            width: 180,
            dataIndex: 'orgCodeTxt'
          },
          {
            title: '负责部门',
            align: 'center',
            width: 180,
            dataIndex: 'departIds_dictText'
          },
          {
            title: '状态',
            align: 'center',
            width: 80,
            dataIndex: 'status_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 170
          }

        ]
      }
    },
    mounted() {
      this.loadData(1)
    },
    methods: {
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      getQueryField() {
        var str = 'id,'
        this.columns.forEach(function(value) {
          str += ',' + value.dataIndex
        })
        return str
      },
      //获取查询参数
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.current = this.page.current
        param.pageSize = this.page.pageSize
        return filterObj(param)
      },
      //加载表格数据
      loadData(arg) {
        if (arg == 1) {
          this.page.current = 1
        }
        let parmas = this.getQueryParams()//查询参数
        getUserList(parmas).then((res) => {
          console.log('返回参数')
          console.log(res)
          if (res.status==200) {
            const {result}=res
            this.dataSource = result.data
            this.page.total = result.totalCount
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>

页面样式
在这里插入图片描述

Modal

Modal官网介绍

  1. width-宽度
  2. visible-对话框是否可见
  3. confirmLoading-确定按钮 loading
  4. okButtonProps:ok 按钮props
  5. 事件cancel/ok
  6. wrapClassName-对话框外层容器的类名
  7. cancelText-取消按钮文字

Form表单

官网介绍

  • labelCol WrapperCol栅格布局
  • this.$form.createForm(this,options)（form对象的创建）
  • this.form.resetFields()重置表单的值
  • loadsh.pick
    loadsh.pick官网介绍
    简单使用
// 复制对象属性从this.model中，复制username，password等属性的值
let fieldValue=pick(this.model,'username','password')
  • this.form.setFieldsValue(filedsVa)设置表单的属性值
    注意特殊的情况，如checkbox,多选下拉框，a-date-picker,Switch等等
  • this.form.validateFields((err,values)={})表单校验

集成echarts

jeecg前端图表使用的是Viser-vue

jeecg前端集成echarts步骤

  1. 安装依赖npm install echarts -S
  2. 在main.js中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts=echarts
  1. 编写代码，在mounted函数中调用echart的实例
<template>
  <a-card :bordered="false">
    <div id="myChart" :style="{width:'600px',height:'300px'}"></div>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {}
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: { text: 'xxx商品销量统计' },
          tooltip: {},
          xAxis: {
            data: ['水果', '酸奶']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [105, 50]
          }]
        })
      }
    }
  }
</script>

<style scoped>

</style>

数据字典组件

DictSelectTag基本使用(自定义组件)

<!-- 从字典表获取数据,dictCode格式说明: 字典code-->
<j-dict-select-tag v-model="queryParam.sex" placeholder="请输入用户性别" dictCode="sex"/>

table列用数据字典转换显示数据

JDictSelectUtil.js 列表字典函数用法

  • 第一步: 引入依赖方法
       import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
  • 第二步: 在created()初始化方法执行字典配置方法
      //初始化字典配置
      this.initDictConfig();
  • 第三步: 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法)
      initDictConfig() {
        //初始化字典 - 性别
        initDictOptions('sex').then((res) => {
          if (res.success) {
            this.sexDictOptions = res.result;
          }
        });
      },
  • 第四步：实现字段的customRender方法
customRender: (text, record, index) => {
      //字典值替换通用方法
      return filterDictText(this.sexDictOptions, text);
      }

columns: [
          /*{
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },*/
          {
            title: '用户账号',
            align: "center",
            dataIndex: 'username',
            width: 120,
            sorter: true
          },
          {
            title: '用户姓名',
            align: "center",
            width: 100,
            dataIndex: 'realname',
          },
          {
            title: '头像',
            align: "center",
            width: 120,
            dataIndex: 'avatar',
            scopedSlots: {customRender: "avatarslot"}
          },

          {
            title: '性别',
            align: "center",
            width: 80,
            dataIndex: 'sex',
            sorter: true,
            customRender: (text, record, index) => {
      //字典值替换通用方法
      return filterDictText(this.sexDictOptions, text);
      }
          },
          {
            title: '生日',
            align: "center",
            width: 100,
            dataIndex: 'birthday'
          },
          {
            title: '手机号码',
            align: "center",
            width: 100,
            dataIndex: 'phone'
          },
          {
            title: '部门',
            align: "center",
            width: 180,
            dataIndex: 'orgCodeTxt'
          },
          {
            title: '负责部门',
            align: "center",
            width: 180,
            dataIndex: 'departIds_dictText'
          },
          {
            title: '状态',
            align: "center",
            width: 80,
            dataIndex: 'status_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 170
          }

        ],
迷失的小鹿
关注
  • 1
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
推荐开源项目：Ant Design Vue Jeecg - 高效能企业级开发框架
gitblog_00044的博客
03-29 521
推荐开源项目：Ant Design Vue Jeecg - 高效能企业级开发框架 项目地址:https://gitcode.com/jeecgboot/ant-design-vue-jeecg Ant Design Vue Jeecg 是一个基于 Ant Design Vue 和 Vue.js 的企业级前端开发框架，它集成了代码生成器、前后端分离模板和丰富的组件库，旨在提升开发效率，减少重复工作，...
jdate时间插件
12-28
这是一个js时间插件,界面美观，有良好的使用体验。。。
推荐开源项目：JDatePicker - Java Swing的高级日期选择器
最新发布
gitblog_00082的博客
06-14 476
推荐开源项目：JDatePicker - Java Swing的高级日期选择器 项目地址:https://gitcode.com/JDatePicker/JDatePicker 1、项目介绍 JDatePicker 是一个为Java Swing应用程序设计的先进日期选择组件。它采用MVC（模型-视图-控制器）设计模式，提供了可弹出的日期选择组件和可调整大小的日期面板。JDatePicker与流行的...
jeecg 的JCodeEditor代码编辑器组件使用
reg183的专栏
11-09 620
【代码】jeecg 的JCodeEditor组件使用。
Vue 使用＜j-date＞ 限制 只能选择当天和之后的时间
weixin_44934104的博客
06-29 2211
一个小功能，对Vue实在不熟悉，不想下次再用还得去查，就记录一下。结果展示： 1、需要使用moment 2、使用 j-date日期组件 官网路径：j-date日期组件 3、使用同样的方式，举一反三就可以设置只能选择当天之前的日期，获取某范围内的时间。...
vue+Ant ＜j-date＞组件自定义时间格式
Canon80的博客
05-11 379
这里我们看到data里使用了format(‘YYYYMMDDHHmmss’)，虽然页面时间格式为YYYY-MM-DD HH:mm:ss，但这时请求出去的时间格式就是YYYYMMDDHHmmss字符串。
Ant Design Vue 日期组件的时间限制
m0_58293192的博客
11-10 4785
我介绍的日期组件是封装成单独的一个日期组件 是由用下面这个日期组件拼接组成. 而不是一个完整的开始时间和结束时间组件 以下: 开始时间不能选择当天日期; 结束时间不能小于开始时间; 上代码: disabled-date是禁用属性 j-date就是封装的日期子组件 : 父组件: ​ <a-form-model-item label="活动开始时间"> <j-date ...
ant-design-vue-jeecg.rar
11-16
"ant-design-vue-jeecg.rar" 是一个与前端开发相关的压缩包，它涉及到的技术栈主要是 Vue.js 和 Ant Design Vue。Vue.js 是一个流行的、轻量级的前端JavaScript框架，用于构建用户界面，而Ant Design Vue是阿里巴巴...
word源码java-ant-design-vue-jeecg:jeecgboot-前端
06-05
Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发! JeecgBoot 引领新的低代码开发模式(OnlineCoding-> 代码生成器-> 手工MERGE)， 帮助解决Java项目70%的...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
jeecgboot集成jeecg-boot-activiti1
08-03
6. **前端集成**：前端集成主要涉及将`activiti`目录拷贝到Jeecg Boot的前端视图目录下，并在`main.js`中引入必要的代码，以使Activiti界面能在前端展示。 7. **后端集成**： - **复制目录文件**：将`jeecg-boot-...
JeecgBoot(ant-design-vue)实现筛选框：支持下拉搜索+下拉多选+表字典(支持条件查询)功能
07-30
JeecgBoot(ant-design-vue)实现筛选框：支持下拉搜索+下拉多选+表字典(支持条件查询)功能 JSearchMultiSelectTag.vue文件
J-Date 日期格式
橙_的博客
03-05 4274
转换为指定格式 Date date = new SimpleDateFormat(&quot;yyyy-MM-dd&quot;).parse(&quot;2005-06-09&quot;); String now = new SimpleDateFormat(&quot;yyyy年MM月dd日&quot;).format(date); System.out.println(now); 输出结果：2005年06月09日 . 摘自:https://zhi..
jeecg vue2下 j-date标签 日期时间组件 设置默认值
九天的博客
08-27 848
j-date标签，v-mode绑定queryParam.recordtime_begin，效果：进入与刷新页面时，组件显示默认值；请求时会带上时间参数。data 中定义出上面v-model绑定得属性。你只有一个参数就写一个标签绑一个属性就行。方法返回你要得默认值，我这里是返回当天。
ant-design-vue UI组件使用讲解
06-10
通过jeecg-boot项目实战，详细介绍 ant-design-vue UI组件使用，细致的讲解每个组件的用法，教你学会如何看ant-design-vue的官方文档。对于初学入门者来讲，非常实用。
jeDate日期控件的验证
祈澈菇凉
03-31 597
前面用到了jeDate日期控件的使用，https://www.jianshu.com/p/393d9e992144，在这个控件的基础上，做出一些完善：关于jeDate日期控件的验证的问题： 一般会有三种情况： 1：对开始时间的验证，开始时间不能超过当前日期： 2：对结束时间的验证，结束时间不能超过当前日期： 3：开始时间和结...
ant-design-vue-jeecg关于首页加载过慢的优化小结
热门推荐
就是不掉头发
12-15 24万+
网站首页登陆的时候，等待较长，用户反馈体验较差，我们可以从以下几个思路优化处理以下。 1.为什么等待较长？ 很明显，有个文件加载过慢了。chunk-vendors是什么文件呢？第三方模块文件，就是node_models里面的文件，ant-design-vue-jeecg把vue主配置文件（main.js）里依赖加载需要的文件全部打包到了这个文件里，文件过大，就会加载会过慢。 2.解决问题的第一步。 去掉不必要的依赖加载。 Jeecg官网说明了加载所需要的必要文件，个人建议除建议外，其余进行相应移除和懒加
《JeecgBoot系列》Ant-Design-Vue开发配置记录
https://blog.datasource.space
07-30 2820
在使用JeectBoot(ant-design-vue)设计表单时，需要实现下拉搜索+下拉多选+表字典(支持条件查询)。但是系统目前有两个组件分别是和。经测试发现：1.支持下拉多选+支持表字典(不支持条件查询)。2.支持下拉搜索+表字典(支持条件查询)。所以两者都不能满足。因为在需求中主要以下拉搜索和表字典(支持条件查询为主)，所以选择在的基础上进行调整，从而实现需求内容。
日期时间选择器-jeDate日期控件
怎奈你何的博客
11-19 498
官方文档地址：http://www.jemui.com/uidoc/jedate.html 控件展示如图 各种各样的时间控件都有。 我用在后台的是年月日时分秒的那个，如下图 引入的文件下载地址： html如下： <div class="jeitem"> <label class="jelabel">年月日时分秒选择</label> <div class="jeinpbox"&.
ant-design-vue-jeecg
03-16
ant-design-vue-jeecg是一款基于Ant Design Vue和JEECG快速开发平台的前端UI框架。它提供了丰富的UI组件和模板，可以帮助开发者快速构建高质量的Web应用程序。同时，它还提供了一些常用的业务组件和功能，如表格、表单、图表、权限管理等，可以大大提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值