ElementUI之CUD+表单验证

一.CUD

什么是cud

编写代码

二.表单验证

 测试结果

---

一.CUD

什么是cud

CUD 是指增加(Create)、更新(Update)和删除(Delete)操作，是对于数据的基本操作。CUD 是一种常见的数据库操作术语，在许多应用和系统中都会涉及到。

1. Create（增加）: Create 操作用于向数据库中添加新的数据记录。根据数据模型的定义，创建新的数据记录可以添加到数据库的表中，以便后续的数据操作和查询。

2. Update（更新）: Update 操作用于修改数据库中已有的数据记录。可以通过指定某个准确的标识符（如主键）来定位并更新特定的数据记录。通过 Update 操作，可以修改数据记录中的一个或多个字段的值，从而实现数据的更新。

3. Delete（删除）: Delete 操作用于从数据库中删除指定的数据记录。根据指定的标识符（如主键），可以删除特定的数据记录。通过 Delete 操作，可以从数据库中永久地移除不再需要的数据。

CUD 是基本的数据操作，也是实现数据的增删改功能的核心。这些操作在数据库系统中非常重要，并且被广泛应用于各种应用程序和系统中，包括网站、移动应用程序、企业软件等。通过使用 CUD，可以有效地管理和维护数据库中的数据。

编写代码

配置数据访问的地址

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/ssm/', //服务器
	'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆
	'SYSTEM_USER_DOREG': 'userAction.action', //注册
	'SYSTEM_MENUS': '/module/queryRootNode', //左侧菜单树
	'SYSTEM_BookList': '/book/queryBookPager', //书籍的后端数据请求
	'SYSTEM_BookADD': '/book/addBook', //书籍增加的数据请求
    'SYSTEM_BookUPD': '/book/editBook', //书籍修改的数据请求
    'SYSTEM_BookDEL': '/book/delBook', //书籍删除的数据请求
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

编写BookList

编写Login

编写main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 
import Vue from 'vue'
//开发坏境才会引入mockjs
// process.env.MOCK && require('@/mock')
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
 
Vue.use(ElementUI)
Vue.config.productionTip = false
 
import axios from '@/api/http'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios,axios)
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
 data(){
   return{
     Bus:new Vue()
   }
 },
  components: { App },
  template: ''
})

测试结果

二.表单验证

在表单中增加rules，book两个属性

代码如下：

 测试结果