首先要說一下antdesign這個框架API和demo豐富，而且開發(fā)環(huán)境提供對應(yīng)的warning來糾正用戶的錯誤。是一個很好的組件庫。

關(guān)于表單驗證方面是依賴于 async-validator 庫。百度的san-xui組件庫的表單驗證也是依賴與async-validator。說明這個庫的實用性還是比較高，可以多了解一下。

首先按照antDesign官網(wǎng)Demo。我們可以copy一個Form表單的demo。 LoginForm是表單的組件，下面代碼，是React 高階組件(Hoc)。 用于使組件獲取 this.props.form

下面介紹一些常用的 this.props.form的方法。

const { form } = this.props

form.resetFields() 用于清空輸入空

form.validateFields 用于驗證

1.給輸入框添加 鍵名。rules 規(guī)定輸入規(guī)則。 validator可以自定義輸入標(biāo)準(zhǔn)

value 標(biāo)識輸入內(nèi)容

callback 回調(diào)函數(shù)，如果里面有字符串，代表錯誤提示。如果為空。代表輸入正確 成功返回。

補充知識：Ant Design Pro Vue使用心得

目錄結(jié)構(gòu)

├── public

│ └── logo.png # LOGO

| └── index.html # Vue 入口模板

├── src

│ ├── api # Api ajax 等

│ ├── assets # 本地靜態(tài)資源

│ ├── config # 項目基礎(chǔ)配置，包含路由，全局設(shè)置

│ ├── components # 業(yè)務(wù)通用組件

│ ├── core # 項目引導(dǎo), 全局配置初始化，依賴包引入等

│ ├── router # Vue-Router

│ ├── store # Vuex

│ ├── utils # 工具庫

│ ├── locales # 國際化資源

│ ├── views # 業(yè)務(wù)頁面入口和常用模板

│ ├── App.vue # Vue 模板入口

│ └── main.js # Vue 入口 JS

│ └── permission.js # 路由守衛(wèi)(路由權(quán)限控制)

├── tests # 測試工具

├── README.md

└── package.json

路由和菜單

基本結(jié)構(gòu)

路由和菜單是組織起一個應(yīng)用的關(guān)鍵骨架，pro 中的路由為了方便管理，使用了中心化的方式，在 router.config.js 統(tǒng)一配置和管理。

路由管理 通過約定的語法根據(jù)在router.config.js中配置路由。

菜單生成 根據(jù)路由配置來生成菜單。菜單項名稱，嵌套路徑與路由高度耦合。

面包屑 組件 PageHeader 中內(nèi)置的面包屑也可由腳手架提供的配置信息自動生成。

路由

目前腳手架中所有的路由都通過 router.config.js 來統(tǒng)一管理，在 vue-router 的配置中我們增加了一些參數(shù)，如 hideChildrenInMenu,meta.title,meta.icon,meta.permission，來輔助生成菜單。其中：

hideChildrenInMenu 用于隱藏不需要在菜單中展示的子路由。用法可以查看 分步表單 的配置。

hidden 可以在菜單中不展示這個路由，包括子路由。效果可以查看 other 下的路由配置。

meta.title 和 meta.icon分別代表生成菜單項的文本和圖標(biāo)。

meta.permission 用來配置這個路由的權(quán)限，如果配置了將會驗證當(dāng)前用戶的權(quán)限，并決定是否展示 *(默認(rèn)情況下)。

meta.hidden 可以強制子菜單不顯示在菜單上(和父級 hideChildrenInMenu 配合)

meta.hiddenHeaderContent 可以強制當(dāng)前頁面不顯示 PageHeader 組件中的頁面帶的 面包屑和頁面標(biāo)題欄

路由配置項

/**

* 路由配置說明：

* 建議：sider menu 請不要超過三級菜單，若超過三級菜單，則應(yīng)該設(shè)計為頂部主菜單 配合左側(cè)次級菜單

*

**/

{

redirect: noredirect, //重定向

name: 'router-name', //路由名稱

hidden: true, //可以在菜單中不展示這個路由，包括子路由。效果可以查看 other 下的路由配置。

meta: {

title: 'title', //菜單項名稱

icon: 'a-icon', //菜單項圖標(biāo)

keepAlive: true, //緩存頁面

permission：[string] //用來配置這個路由的權(quán)限，如果配置了將會驗證當(dāng)前用戶的權(quán)限，并決定是否展示 *(默認(rèn)情況下)

hiddenHeaderContent: true, //可以強制當(dāng)前頁面不顯示 PageHeader 組件中的頁面帶的 面包屑和頁面標(biāo)題欄

}

}

具體請參考 https://pro.loacg.com/docs/router-and-nav

菜單

菜單根據(jù) router.config.js 生成，具體邏輯在 src/store/modules/permission.js 中的 actions.GenerateRoutes 方法實現(xiàn)。

Ant Design Pro 的布局

在 Ant Design Pro 中，我們抽離了使用過程中的通用布局，都放在 /components/layouts 目錄中，分別為：

BasicLayout：基礎(chǔ)頁面布局，包含了頭部導(dǎo)航，側(cè)邊欄和通知欄：

UserLayout：抽離出用于登陸注冊頁面的通用布局

PageView：基礎(chǔ)布局，包含了面包屑，和中間內(nèi)容區(qū) (slot)

RouterView：空布局，專門為了二級菜單內(nèi)容區(qū)自定義

BlankLayout：空白的布局

定義全局樣式

/* 定義全局樣式 */

:global(.text) {

font-size: 16px;

}

/* 定義多個全局樣式 */

:global {

.footer {

color: #ccc;

}

.sider {

background: #ebebeb;

}

}

//覆蓋組件樣式

// 使用 css 時可以用 >>> 進(jìn)行樣式穿透

.test-wrapper >>> .ant-select {

font-size: 16px;

}

// 使用 scss, less 時，可以用 /deep/ 進(jìn)行樣式穿透

.test-wrapper /deep/ .ant-select {

font-size: 16px;

}

// less CSS modules 時亦可用 :global 進(jìn)行覆蓋

.test-wrapper {

:global {

.ant-select {

font-size: 16px;

}

}

}

與服務(wù)器交互

在 Ant Design Pro 中，一個完整的前端 UI 交互到服務(wù)端處理流程是這樣的：

UI 組件交互操作；

調(diào)用統(tǒng)一管理的 api service 請求函數(shù)；

使用封裝的 request.js 發(fā)送請求；

獲取服務(wù)端返回；

更新 data。

從上面的流程可以看出，為了方便管理維護，統(tǒng)一的請求處理都放在 @/src/api 文件夾中，并且一般按照 model 緯度進(jìn)行拆分文件，如：

api/

user.js

permission.js

goods.js

...

其中，@/src/utils/request.js 是基于 axios 的封裝，便于統(tǒng)一處理 POST，GET 等請求參數(shù)，請求頭，以及錯誤提示信息等。具體可以參看 request.js。 它封裝了全局 request 攔截器、response 攔截器、統(tǒng)一的錯誤處理、baseURL 設(shè)置等。

例如在 api 中的一個請求用戶信息的例子：

// api/user.js

import { axios } fromm '@/utils/request'

const api = {

info: '/user',

list: '/users'

}

// 根據(jù)用戶 id 獲取用戶信息

export function getUser (id) {

return axios({

url: `${api.user}/${id}`,

method: 'get'

})

}

// 增加用戶

export function addUser (parameter) {

return axios({

url: api.user,

method: 'post',

data: parameter

})

}

// 更新用戶 // or (id, parameter)

export function updateUser (parameter) {

return axios({

url: `${api.user}/${parameter.id}`, // or `${api.user}/${id}`

method: 'put',

data: parameter

})

}

// 刪除用戶

export function deleteUser (id) {

return axios({

url: `${api.user}/${id}`,

method: 'delete',

data: parameter

})

}

// 獲取用戶列表 parameter: { pageSize: 10, pageNo: 1 }

export function getUsers (parameter) {

return axios({

url: api.list,

method: 'get',

params: parameter

})

}

import { getUser, getUsers } from '@/api/user'

export default {

data () {

return {

id: 0,

queryParam: {

pageSize: 10,

pageNo: 1,

username: ''

},

info: {},

list: []

}

},

methods: {

queryUser () {

const { $message } = this

getUser(this.id).then(res => {

this.info = res.data

}).catch(err => {

$message.error(`load user err: ${err.message}`)

})

},

queryUsers () {

getUsers(this.queryParam).then(res => {

this.list = res

})

}

}

}

**

* 獲取裁剪后的圖片

*/

cropImage () {

this.form.cropimg = this.$refs.cropper.getCroppedCanvas().toDataURL();

},

/**

* 確認(rèn)裁剪

*/

sureCrop () {

this.dialogVisible = false

},

/**

* 上傳裁剪后的圖片到服務(wù)器

*/

upCropImg () {

//判斷是否是新增還是編輯

if (this.$route.query.id && this.$route.query.id != '') {

//如果是編輯的就直接提交

this.onSubmit()

} else {

//否則先上傳裁剪圖片，將64位圖片轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)流

var formdata1 = new FormData();// 創(chuàng)建form對象

formdata1.append('file', convertBase64UrlToBlob(this.form.cropimg), 'aaa.png');//

this.$ajax

.post(this.$api + "/upload/singleUploadImg", formdata1, { headers: { 'Content-Type': 'multipart/form-data' } })

.then(response => {

if (response.data.msg == "success" && response.data.code == 1) {

this.form.imgUrl = response.data.data.imgUrl

this.onSubmit()

} else {

console.log(response)

this.$message.error(response.data.msg);

}

})

.catch(function (error) {

console.log(error);

});

}

},

引入外部模塊

$ npm install '組件名字' --save

使用

//全局引入

import Vue from 'vue'

import VueQuillEditor from 'vue-quill-editor'

// require styles

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)

v-model="content"

:config="editorOption"

@blur="onEditorBlur($event)"

@focus="onEditorFocus($event)"

@ready="onEditorReady($event)">

//按需加載

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {

components: {

quillEditor

},

data () {

return {

content: '

I am Example

',

editorOption: {

// something config

}

}

},

// 如果需要手動控制數(shù)據(jù)同步，父組件需要顯式地處理changed事件

methods: {

onEditorBlur(editor) {

console.log('editor blur!', editor)

},

onEditorFocus(editor) {

console.log('editor focus!', editor)

},

onEditorReady(editor) {

console.log('editor ready!', editor)

},

onEditorChange({ editor, html, text }) {

// console.log('editor change!', editor, html, text)

this.content = html

}

},

// 如果你需要得到當(dāng)前的editor對象來做一些事情，你可以像下面這樣定義一個方法屬性來獲取當(dāng)前的editor對象，實際上這里的$refs對應(yīng)的是當(dāng)前組件內(nèi)所有關(guān)聯(lián)了ref屬性的組件元素對象

computed: {

editor() {

return this.$refs.myTextEditor.quillEditor

}

},

mounted() {

// you can use current editor object to do something(editor methods)

console.log('this is my editor', this.editor)

// this.editor to do something...

}

}

引入業(yè)務(wù)圖標(biāo)

參考：https://pro.loacg.com/docs/biz-icon、

國際化

參考：https://pro.loacg.com/docs/i18n

權(quán)限管理

參考：https://pro.loacg.com/docs/authority-management

自定義使用規(guī)則

修改網(wǎng)站icon的文件地址在 public文件夾中把logo.png換成自定義的，也可在public/index.html自定義

共享云店

We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.

-更換logo在src\components\tools\Logo.vue中更換

//這是logo

{{ title }}

//這是網(wǎng)站標(biāo)題

import LogoSvg from '@/assets/logo.svg?inline';

export default {

name: 'Logo',

components: {

LogoSvg

},

props: {

title: {

type: String,

default: 'Admin For Ok', //網(wǎng)站默認(rèn)標(biāo)題

required: false

},

showTitle: { //是否顯示網(wǎng)站標(biāo)題，默認(rèn)不顯示

type: Boolean,

default: true,

required: false

}

}

}

pro權(quán)限管理和路由控制思路分析(粗略分析)

主要是通過三個文件實現(xiàn),src\mock\services\user.js文件通過登陸的角色獲取對應(yīng)的鑒權(quán)規(guī)則，具體可查看該文件下的源碼

src\config\router.config.js文件為路由配置文件，可增加路由取消路由等，變量asyncRouterMap為主要路由數(shù)組集合，可配置鑒權(quán)權(quán)限，變量constantRouterMap為基礎(chǔ)路由，不參與鑒權(quán)

src\permission.js文件為動態(tài)配置路由的主要邏輯，代碼如下

import Vue from 'vue'

import router from './router'

import store from './store'

import NProgress from 'nprogress' // progress bar

import 'nprogress/nprogress.css' // progress bar style

import notification from 'ant-design-vue/es/notification'

import { setDocumentTitle, domTitle } from '@/utils/domUtil'

import { ACCESS_TOKEN } from '@/store/mutation-types'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['login', 'register', 'registerResult'] // no redirect whitelist配置白名單

router.beforeEach((to, from, next) => {

NProgress.start() // start progress bar

//生成動態(tài)網(wǎng)站標(biāo)題

to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))

if (Vue.ls.get(ACCESS_TOKEN)) {

/* has token 如果有token并且是從登錄頁來的就直接跳到工作空間*/

if (to.path === '/user/login') {

next({ path: '/dashboard/workplace' })

NProgress.done()

} else {

//否則檢測是不是沒有檢測到規(guī)則，請求獲取用戶信息，獲取用戶權(quán)限

if (store.getters.roles.length === 0) {

//請求mock模擬數(shù)據(jù)獲取用戶權(quán)限

store

.dispatch('GetInfo')

.then(res => {

const roles = res.result && res.result.role

//調(diào)用src\store\modules\permission.js里面的GenerateRoutes方法，處理數(shù)據(jù)

store.dispatch('GenerateRoutes', { roles }).then(() => {

// 根據(jù)roles權(quán)限生成可訪問的路由表

// 動態(tài)添加可訪問路由表

router.addRoutes(store.getters.addRouters)

const redirect = decodeURIComponent(from.query.redirect || to.path)

if (to.path === redirect) {

// hack方法 確保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record

next({ ...to, replace: true })

} else {

// 跳轉(zhuǎn)到目的路由

next({ path: redirect })

}

})

})

.catch(() => {

notification.error({

message: '錯誤',

description: '請求用戶信息失敗，請重試'

})

store.dispatch('Logout').then(() => {

next({ path: '/user/login', query: { redirect: to.fullPath } })

})

})

} else {

next()

}

}

} else {

if (whiteList.includes(to.name)) {

// 在免登錄白名單，直接進(jìn)入

next()

} else {

next({ path: '/user/login', query: { redirect: to.fullPath } })

NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it

}

}

})

router.afterEach(() => {

NProgress.done() // finish progress bar

})

src\store\modules\permission.js文件為路由數(shù)據(jù)的詳細(xì)處理邏輯，配合src\permission.js文件使用，代碼如下： import { asyncRouterMap, constantRouterMap } from '@/config/router.config'

/**

* 過濾賬戶是否擁有某一個權(quán)限，并將菜單從加載列表移除

*

* @param permission

* @param route

* @returns {boolean}

*/

function hasPermission (permission, route) {

if (route.meta && route.meta.permission) {

let flag = false

for (let i = 0, len = permission.length; i < len; i++) {

flag = route.meta.permission.includes(permission[i])

if (flag) {

return true

}

}

return false

}

return true

}

/**

* 單賬戶多角色時，使用該方法可過濾角色不存在的菜單

*

* @param roles

* @param route

* @returns {*}

*/

// eslint-disable-next-line

function hasRole(roles, route) {

if (route.meta && route.meta.roles) {

return route.meta.roles.includes(roles.id)

} else {

return true

}

}

function filterAsyncRouter (routerMap, roles) {

const accessedRouters = routerMap.filter(route => {

if (hasPermission(roles.permissionList, route)) {

if (route.children && route.children.length) {

route.children = filterAsyncRouter(route.children, roles)

}

return true

}

return false

})

return accessedRouters

}

const permission = {

state: {

routers: constantRouterMap,

addRouters: []

},

mutations: {

SET_ROUTERS: (state, routers) => {

state.addRouters = routers

state.routers = constantRouterMap.concat(routers)

}

},

actions: {

GenerateRoutes ({ commit }, data) {

return new Promise(resolve => {

const { roles } = data

const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)

commit('SET_ROUTERS', accessedRouters)

resolve()

})

}

}

}

export default permission

跨域請求設(shè)置

在vue.config.js文件中修改

// 配置跨域

devServer: {

// development server port 8000

// port: 8000,

proxy: {

'/apis': {

// target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',

target: 'http://192.168.1.73:8092/okcloud/',

// target: 'http://39.107.78.120:8083/okcloud/',

ws: false,

changeOrigin: true, //是否允許跨域

pathRewrite: {

'^/apis': ''

}

}

}

axios攔截器

在文件src\utils\request.js中設(shè)置

// request interceptor

service.interceptors.request.use(config => {

const token = Vue.ls.get(ACCESS_TOKEN)

if (token) {

config.headers['okcloud_token'] = token // 讓每個請求攜帶自定義 token 請根據(jù)實際情況自行修改

}

return config

}, err)

// response interceptor

service.interceptors.response.use((response) => {

if (response.data.code === 10000) {

notification.warning({

message: '提示',

description: response.data.message

})

} else {

return response.data

}

}, err)

自定義角色的菜單權(quán)限

在src\main.js文件中注釋掉"// import ‘./permission' // permission control 權(quán)限控制"

自定義路由權(quán)限文件src\routeGuard.js，代碼如下

import Vue from 'vue'

import router from './router'

// import store from './store'

import NProgress from 'nprogress' // progress bar

import 'nprogress/nprogress.css' // progress bar style

import { setDocumentTitle, domTitle } from '@/utils/domUtil'

import { ACCESS_TOKEN } from '@/store/mutation-types'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

router.beforeEach((to, from, next) => {

NProgress.start() // start progress bar

to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))

if (to.path === '/user/login' && Vue.ls.get(ACCESS_TOKEN)) {

next({ path: '/dashboard/workplace' })

NProgress.done()

} else if (to.path !== '/user/login' && !Vue.ls.get(ACCESS_TOKEN)) {

next({ path: '/user/login' })

NProgress.done()

} else {

next()

NProgress.done()

}

})

router.afterEach(() => {

NProgress.done() // finish progress bar

})

在main.js中引入import ‘./routeGuard'

對src\components\Menu\menu.js文件進(jìn)行自定義菜單改造

在src\store\modules\app.js文件中store加入menu,在actions中進(jìn)行獲取菜單的異步操作，獲取菜單信息，然后進(jìn)行全局變量動態(tài)獲取

在src\layouts\BasicLayout.vue中進(jìn)行全局變量的引用

...mapState({

// 動態(tài)主路由

menus: state => state.app.menu

}),

動態(tài)方法的引用

...mapActions(['setSidebar', 'setMenu']),

調(diào)用獲取動態(tài)方法

this.setMenu()

以上這篇ant-design表單處理和常用方法及自定義驗證操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的ant4 多个form 验证_ant-design表单处理和常用方法及自定义验证操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。