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)

}