SPA项目开发之CRUD与表单验证

最新推荐文章于 2023-02-13 21:03:57 发布

程序猿

最新推荐文章于 2023-02-13 21:03:57 发布

阅读量169

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/weixin_45092850/article/details/99610494

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

SPA项目开发之CRUD与表单验证

SPA项目开发之CRUD与表单验证

在上几篇的博客已经把动态树，数据表格，分页实现了，就来完成CRUD了

下面我就对文章的增改查删

增加

首先定义HTML代码

<el-button size="small" type="primary" icon="el-icon-plus" @click="add">添加</el-button>

接着写编辑窗口，也就是添加信息的窗口

<!-- 编辑界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="文章标题" prop="title">
					<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
				</el-form-item>
				<el-form-item label="文章内容" prop="body">
					<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeDialog">取消</el-button>
				<el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm">保存</el-button>
			</div>
		</el-dialog>

然后就是定义所写的所有变量和那个窗体的事件
此表单验证同样适用于修改

export default {
		data() {
			return {
				listData: [],
				pageBean: {
					total: 0
				},
				formInline: {
					title: '',
					page: 1,
					rows: 10

				},
				editFormVisible: false, //窗体是默认关闭的状态
				title: '',
				editForm: {
					body: '',
					title: '',
					id: 0
				}
				
			};
		},

接下来就增加的方法，与提交表单的方法，与修改使用同一个方法，在里面就做一个判断就好了

	add() {
				this.title='新增文章';
				this.editFormVisible = true
			},
	submitForm() {
				// 用来提交新增，修改表单数据的，提交之前需要通过Vue实例红定义的表单填写规则
				this.$refs['editFrom'].validate((valid) => {
					if (valid) {
						let url ;
						if(this.editForm.id==0){
							url=this.axios.urls.SYSTEM_ARTICLE_ADD;
						}else{
							url=this.axios.urls.SYSTEM_ARTICLE_EDIT;
						}
						this.axios.post(url, this.editForm).then((response) => {
							console.log(response);
							this.clearForm();
							this.doSearch(this.formInline);
						}).catch((response) => {
							console.log(response);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
 				});
			},

修改

	<el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>

修改方法
提交方法与增加通用

edit(index, row) {
				// index代表的是操作的数据在当前界面的行号
				// row代表操作的当前数据，那就意味着可以从row中所有数据列段名
				this.title='编辑文章';
				this.editForm.id = row.id;
				this.editForm.title = row.title;
				this.editForm.body = row.body;
				this.editFormVisible = true;

			},

查询

html代码

<!-- 搜索筛选 -->
		<el-form :inline="true" :model="formInline" class="user-search">
			<el-form-item label="搜索：">
				<el-input size="small" v-model="formInline.key" placeholder="输入文章标题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
			</el-form-item>
		</el-form>
<!--数据表格-->
<el-table size="small" :data="listData" border element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" width="60">
			</el-table-column>
			<el-table-column sortable prop="id" label="ID" width="300">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" width="300">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" width="300">
			</el-table-column>

		</el-table>
<!-- 分页 -->
      <el-pagination style="margin: 15px;" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryParams.page" :page-sizes="[5, 10, 15, 20]" :page-size="queryParams.rows" layout="total, sizes, prev, pager, next, jumper"
                     :total="queryParams.total">
      </el-pagination>

定义参数

		//表格数据对象，
        listData :null,
		//这是查询参数
        formInline: {
          key:null,
          // 分页
          page: 1,
          rows: 10,
          total: 0,
        },

查询方法

search() {
				this.doSearch(this.formInline);
			},
			doSearch(paeams) {
				let url = this.axios.urls.SYSTEM_ARTICLE_LIST;
				this.axios.post(url, paeams).then((response) => {
					console.log(response);
					this.listData = response.data.result;
					this.total = response.data.pageBean.total;
				}).catch((response) => {
					console.log(response);
				});
			},
 
 //如果进行了分页，下面方法就是将后面的数据展示出来
 //一页的数量发送变化的时候调用此方法
      handleSizeChange: function(rwos) {
        this.queryParams.page = 1;
        this.queryParams.rows = rwos;
        this.query();
      },
      //当前页面发送变化的时候调用
      handleCurrentChange: function(page) {
        this.queryParams.page = page;
        this.query();
      },

在页面初始化数据的时候，就使用钩子函数去执行它即可

created() {
			this.doSearch({});
		}

在这里插入图片描述

删除

编写html代码

<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>

删除方法

	del(index, row) {
		let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
		this.axios.post(url, {id:row.id}).then((response) => {
			console.log(response);
			this.clearForm();
			this.doSearch({});
		}).catch((response) => {
			console.log(response);
		});
	}

表单验证

在表单中添加:rules="rules"即可：

<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">

表单验证
				rules: {
					title: [{
						required: true,
						message: '请输入文章标题',
						trigger: 'blur'
					}],
					body: [{
							required: true,
							message: '请输入文章内容',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					]
				}

在这里插入图片描述

关闭窗口事件

窗口关闭时通过editFormVisible = true/false控制的，
就是在上面定义:visible.sync="editFormVisible"来绑定它的

当点击编辑按钮，数据回显到了窗口文本框中，增加就不需要回显，如需要清空填写的数据的话，并不会改变数据库，因为没有请求后台，所以也就不会影响数据

关闭窗口
closeDialog() {
				this.editFormVisible = false;
				this.clearForm;
			},

clearForm() {
				this.editForm.title = "";
				this.editForm.body = "";
				this.formInline.page=1;
				this.formInline.rows=10;
				this.editFormVisible=false;
			},