jeecgboot前端开发_JeecgBoot 前端开发随笔
Jeecg-Boot 技术文档 v2.0: https://www.bookstack.cn/read/jeecg-boot-2.0/custom-component.md(一些现成的组件很实用,常见的用法里面都有详细介绍)
【修改页面的一些默认文字,logo等】
1.loading文字(正在加载 Jeecg-Boot 快速开发平台,请耐心等待)
位置:public-index.html
另外,服务器地址也是在改页面上配置的:window._CONFIG['domianURL'] = '你的服务器地址'。
2.浏览器标题(菜单名称 + Jeecg-Boot 企业级快速开发平台)
位置:src-components-layouts-TabLayout.vue
methods下的changeTitle方法内的projectTitle,可以将其赋值为你需要的内容。
3.面包屑默认禁止关闭的首页导航菜单
位置:src-components-layouts-TabLayout.vue
如果你的项目登录后的首页没有在其默认的dashboard-analysis文件上修改,那么面包屑上一直会有这个页面的菜单导航项,需要改成你项目的首页组件。只需要修改methods下的addIndexToFirst方法,将其改为你的首页组件。还有默认的 const indexKey = '/dashboard/analysis'也相应改成你的首页组件路由名称。
4.侧边栏菜单上方的logo
位置:src-components-tools-Logo.vue
修改两个img标签的src。
logo右侧的文字:
props-title-default值
5.侧边栏菜单展开关闭icon右侧的文字
位置:src-components-page-GlobalHeader.vue
修改两span标签的内容。
6.头部导航栏右侧的模块
位置:src-components-tools-UserMenu.vue
那些欢迎、登出等都在这个文件里修改。
7.底部备案信息
位置:src\components\page\GlobalFooter.vue
8.登录界面
位置:src-components-layouts-UserLayout.vue
利用在线开发生成的前端页面里的相关默认方法
使用生成的前端页面时,页面上的获取列表、新增、编辑、删除都是现成的。页面上调用的一些例如add、edit、handleOk等方法,具体的实现代码在src\mixins\JEditableTableMixin.js这个文件中。
简单的表单界面可以直接生成代码,新增、编辑、删除等都是现成的,拷到项目中即可使用。但如果你的项目接口需要添加传输的字段,就有些麻烦了,因为你加了新的字段后会有一连串的警告出现。如果你的接口新增的这个字段是通过query获取的,那么你可以简单的直接在Modal组件中的对应的Ulr后面直接添加这个字段。对于编辑中需要添加到body中获取的,下面“奇怪报错”中也有涉及这个问题的解决方案。
【特殊取值等】
获取form中的某个字段值
this.form.getFieldsValue().fieldName
设置form的某个字段
this.form.setFieldsValue({fieldName: fieldValue})
单独触发主表验证
validateFormAndTables(this.form)
一次性触发主表子表所有的验证
this.getAllTable().then(tables => {
/** 一次性验证主表和所有的次表 */
return validateFormAndTables(this.form, tables)
}).then(allValues => {
let formData = this.classifyIntoFormData(allValues)
// 发起请求
return this.requestAddOrEdit(formData)
}).catch(e => {
if (e.error === VALIDATE_NO_PASSED) {
// 如果有未通过表单验证的子表,就自动跳转到它所在的tab
this.activeKey = e.index == null ? this.activeKey : (e.index + 1).toString()
} else {
console.error(e)
}
})
【遇到的奇怪报错】
1.custom validator check failed for prop "pagination"
列表获取list接口默认返回的字段被修改,让写后台的小伙伴检查一下。
2.You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to register it before render。
属于使用Form组件setFieldsValue方法的警告,是因为传入了form默认的字段外的其它字段,多传了就会报错。当时开发时遇到这个问题也是网上查了些办法,资料不多,好多办法试了也没效果,一开始找到两种,后来经过一段时间发现了最简单的办法三:
解决办法一:
在componentDidMount钩子里对form进行setFieldsValue操作。
componentDidMount() {
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model,'新字段', ...默认字段)) // 注意:这边如果添加了页面上没有用于显示的字段,控制台就会出现警告
})
}
解决办法二:
在template中form组件里加入你需要的新的字段,然后需要隐藏的话可以对其设置v-show为false(注意不能设置v-for为false)。
若新加的字段随着输入变化的,可以在页面的model上进行修改,默认的新增修改提交的数据都是这个model。
解决办法三:整理formData时添加(最好的办法)
步骤1.classifyIntoFormData方法中添加新的字段
classifyIntoFormData(allValues) {
let main = Object.assign(this.model, allValues.formValue)
return {
...main,
projectId : this.newPro, // 新字段
}
}
步骤2.handleOk方法中添加新的字段
......
let formData = Object.assign(this.model, values)
formData.projectId = this.curProjectId()
3.[antdv: DatePicker] `value` provides invalidate moment time. If you want to set empty value, use `null` instead
Ant 的日期组件的value需要为moment类型,因此在接口获取值之后需要进行类型转化,moment(this.dataValue, 'YYYY-MM-DD'),如果是编辑的modal,那么可以在nextTick中通过setFieldsValue来重置。
【功能】
编辑完关闭当前页签
1.src/components/layouts/TabLayout.vue
methods:{
closeTab(key){
this.remove(key)
}
}
TabLayout.vue
TabLayout.vue
2.src/components/layouts/RouteView.vue
export default {
props:{
closeTab:{
type:Function,
default:null
}
},
...
methods:{
closeRouteViewTab(key){
if(this.closeTab){
this.closeTab(key)
}
}
}
}
RouteView.vue
3.在当前页面调用方法关闭该页
this.$parent.closeRouteViewTab(this.$route.path)
【一些注意点】
日期类型
moment转换成字符串:moment(this.fdate).format('YYYY-MM-DD')
ant时间控件值需要为moment类型:moment(this.date, 'YYYY-MM-DD')
关于table的一些配置
1.需要横向滚动
:scroll="{ x: true/或者是数值 }",最好还是算好总长度不然有时候没有效果,表格的每一项也设置width,这样表格不会显得挤。
2.列表上的日期截取
customRender:function (text) {
return !text?"":(text.length>10?text.substr(0,10):text)
}
jeecgboot前端开发_JeecgBoot 前端开发随笔相关推荐
- 14个适合后台管理系统快速开发的前端框架
1.D2admin 开源地址:https://github.com/d2-projects/d2-admin 文档地址:https://d2.pub/zh/doc/d2-admin/ 效果预览:htt ...
- 前端分离的前端开发工具_使我成为前端开发人员工作的工具和资源
前端分离的前端开发工具 Learning front-end development can be a bit overwhelming at times. There are so many res ...
- 最新EOS合约教程,从系统到环境,从创建到部署,从前端到后台,Dapp开发
最新EOS合约教程,从系统到环境,从创建到部署,从前端到后台,Dapp开发 前言 环境 重点声明: 1,安装虚拟机也好, 双系统也好, 把Linux装了 2, 安装EOSIO开发环境, 使用js4eo ...
- uni-app开发所有前端应用的框架
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. DClo ...
- 有了 serverless,前端也可以快速开发一个 Puppeteer 网页截图服务
更多云原生技术资讯可关注阿里巴巴云原生技术圈. Puppeteer 是什么? puppeteer 官网的介绍如下: Puppeteer is a Node library which provides ...
- 钉钉微应用的开发——主前端
经济基础决定上层建筑. 开发环境 Chrome Latest Version iOS钉钉最新版.Android钉钉开发最新版 其实我一直想实现电脑Chrome可以调试手机内部APP,苦于尝试多次没有成 ...
- 好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
- web前端技术分享:前端开发与后端开发的区别是什么?
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
- 开发web前端_移动前端开发和web前端开发的区别?
如果说非要有区别的话应该就是开发的软件和方式不同,因为他们本来就不属于一端的东西,具体来看看下面: web前端开发 用最简单粗暴的方式来讲,就是用html + css + javascript来构建一 ...
最新文章
- 番茄花园 Ghost XP SP3 金秋国庆版 2013.AA0
- LaTex 使用特殊章节符号 (§)
- 【django】创建模型类
- dbda.class.php 下载,DBDA
- 回溯法模板(矩阵中操作)
- CentOS中配置VNC Server
- TP框架对数据库的基本操作
- jQuery如何选择表格每行中的第三列?
- 高频Linux命令小结(新手向)
- 嵌入式linux的驱动程序
- From Apprentice To Artisan 翻译 08
- 算法(一):二分查找
- [计算机网络][内容梳理]四、网络层
- android高通camera驱动调试,高通Camera模块驱动指南资料
- php opendir 不能用,PHP opendir() 函数
- Photoshop CS2 视频教程-PS自定义形状工具(转)
- [Android]SIM字段EF_SUME(6F54) 可用作STK app name
- 2007年北京房价必然回落
- 计算机组成原理题库(唐朔飞)
- python识别手写文字_Python3实现简单可学习的手写体识别(实例讲解)
热门文章
- MIPS 、DMIPS、MFLOPS
- 计算机用户无法加载配置文件,用户登陆系统时提示无法加载用户配置文件
- 斯特林公式 ——Stirling公式(取N阶乘近似值)(转)
- i3能装Linux虚拟机,centos7 下安装i3wm
- Calendar计算两个时间之间相差几个月
- 凸优化问题定义及其凸函数、凸集、仿射函数相关概念和定义
- Vue3项目移动端适配方案
- TextView渲染机制与优化(StaticLayout),TextView上的文字分散对齐,TextView用处
- 304,301,302状态码的分析
- js中(双感叹号)符号的用法解读