前后端分离学习笔记 ---[表单的增删改操作；以及为管理员上传头像]
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前后端分离学习笔记 ---[表单的增删改操作；以及为管理员上传头像]相关的知识，希望对你有一定的参考价值。
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) —[路由嵌套, 查询表单显示]
文章目录
1.前端组件页面
添加管理员操作
要达到点击新增按钮弹出对话框的效果
(1)打开对话框时,会去查询角色信息表,生成角色复选框;
(2)提交表单时,有简单的表单盐验证;
注意最后保存数据时,分两步;首先把管理员信息存入管理员表;这时会得到添加的管理员Id;
然后根据Id和填写的角色ID;将管理员与角色的关联关系存入到管理角色关联表
添加管理员时的表单验证效果
首先新建Add.vue作为添加管理员的组件页面
Add.vue组件代码;其实就是对话框中嵌套了表单
<template>
<!-- 在此组件中 制作一个对话框 -->
<el-dialog title="新增管理员" :visible.sync="dialogVisible" width="50%">
<!-- 添加管理员的表单信息-->
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号" prop="account">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio v-model="form.sex" label="男">男</el-radio>
<el-radio v-model="form.sex" label="女">女</el-radio>
</el-form-item>
<!-- <el-form-item label="时间">
<el-date-picker type="date" v-model="form.birthday" placeholder="选择日期"> </el-date-picker>
</el-form-item> -->
<el-form-item label="角色" prop="roleId">
<el-checkbox-group v-model="form.roleId">
<!--复选框存入不同的角色 -->
<el-checkbox v-for="role in roles" :label="role.id" :key="role.id">role.name</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save('form')">保存</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</span>
</el-dialog>
</template>
<script>
export default
//当前组件名称;
name: "AddDialog",
data()
return
//默认对话组件是不显示的;
dialogVisible: false,
//表单绑定的数据;
form:
account: "",
sex: "男",
phone: "",
//birthday:"",
roleId: []
,
//角色复选框的信息;从后端加载数据
roles: [],
//表单数据的校验规则;
rules:
account: [
required: true,
message: '请输入账户名',
trigger: 'blur'
,
min: 3,
max: 5,
message: '长度在 3 到 5 个字符',
trigger: 'blur'
],
phone: [
required: true,
message: '请输入手机号',
trigger: 'blur'
,
min: 11,
max:11,
message: '手机号限制11位',
trigger: 'blur'
],
roleId: [
type: 'array',
required: true,
message: '请至少选择一个角色',
trigger: 'change'
]
,
;
,
methods:
//保存管理员信息;
save(form)
var _this = this;
//先进行表单验证;
this.$refs[form].validate((valid) =>
if (valid)
//保存信息;
this.$http.post("admin/addAdmin", this.form).then(function(resp)
if (resp.data.code === 200)
_this.$message(
message: resp.data.msg,
type: 'success'
);
//关闭对话框;
window.location.reload();
);
else
console.log('error submit!!');
return false;
);
,
//重置表单;
resetForm(formName)
this.$refs[formName].resetFields();
,
created()
var _this = this;
//加载页面时就把角色的列表查询过来,存入到复选框中;
this.$http.get("admin/roles").then(function(resp)
_this.roles = resp.data.data;
)
;
</script>
<style>
</style>
注意这个组件要给个命名;
然后,需要在管理员列表组件AdminList.vue组件中打开这个对话框;那么
AdminList.vue组件 就是个父级组件;而新增管理员的Add.vue组件就是子级组件;
注意;点击新增按钮时,调用子级组件Add.vue中的属性;让对话框显示出现
AdminList.vue组件代码
<template>
<el-card class="box-card" style="background-color: #E9EEF3;">
<div slot="header" class="clearfix">
<span>管理员列表</span>
<el-button style="float: right; padding: 10px 10px" type="success" @click="openAddAdmin()">新增</el-button>
</div>
<div class="text">
<!-- 查询条件框-->
<div class="clearfix" style="padding-bottom: 10px;">
<!-- 查询条件-->
<el-row :gutter="20">
<el-col :span="6">
<el-input placeholder="账号" v-model="query.account"></el-input>
</el-col>
<el-col :span="6">
<el-input placeholder="性别" v-model="query.sex"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
</el-col>
</el-row>
</div>
<!-- 数据表格位置-->
<el-table
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData" style="width: 100%" border max-height="450">
<el-table-column fixed type="index" label="编号" width="60">
</el-table-column>
<el-table-column prop="account" label="账号" width="100"></el-table-column>
<el-table-column prop="newFileName" label="头像" width="60">
<template slot-scope="scope">
<!-- 若没有头像,则显示默认头像 -->
<img v-bind:src="http+'default/admin.png'" width="30" height="30"
v-if="scope.row.newFileName === null " />
<!-- 否则显示管理员的头像 -->
<img v-bind:src="http+scope.row.account+'/'+scope.row.newFileName" width="30" height="30"
v-else />
</template>
</el-table-column>
<el-table-column prop="sex" label="性别" width="50"></el-table-column>
<el-table-column prop="phone" label="手机" width="120"></el-table-column>
<el-table-column prop="type" label="类型" width="120" :formatter="formatType"></el-table-column>
<el-table-column prop="roleList" label="角色" width="250" align="center">
<template slot-scope="scope">
<span v-for="(role,index) in scope.row.roleList" :key="index">role.name-</span>
</template>
</el-table-column>
<!-- 时间加上排序 -->
<el-table-column prop="operTime" label="时间" width="200" :formatter="formatTime" sortable>
</el-table-column>
<el-table-column fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button size="mini" @click="toUpdate(scope.row.id)">编辑</el-button>
<el-button size="mini" type="danger" @click="toDelAdmin(scope.row.id,scope.row.account)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件-->
<!--
current-page="1" 默认是第一页
page-sizes="[2, 4, 6, 8]" 生成下拉框
page-size="2" 默认的每页大小
layout="total, sizes, prev, pager, next, jumper" 布局
total="400" 总条数
@size-change="handleSizeChange" 当下拉框改变页数大小时触发
@current-change="handleCurrentChange" 当改变页码时触发
-->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:page-sizes="[2, 4, 6, 8,10,15]" :page-size="8" layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
<!-- 添加管理员的组件显示视图位置 默认是隐藏的 -->
<AddDialog ref="AddDialog"></AddDialog>
<!-- 修改管理员的1组件显示位置;默认隐藏 -->
<UpdateDialog ref="UpdateDialog"></UpdateDialog>
</el-card>
</template>
<script>
//导入管理员添加的组件;
import AddDialog from './Add.vue';
//导入管理员更新的组件;
import UpdateDialog from './Update.vue';
export default
//添加管理员的对话框组件;
components:
AddDialog,
UpdateDialog
,
data: function()
return
tableData: [],
//定义的图片服务器位置;
http: "http://127.0.0.1:5927/studyspringbootvue/",
//根据条件搜索时的绑定参数;
query:
account: '',
sex: '',
//当前页码；
pageNum: 1,
//当前页面数据量；
pageSize: 8
,
//数据总条数；
total: 0,
loading:true
,
methods:
//管理员类型的自定义绑定事件;
//row表示此行数据 row.列名 得到当前列的数据
formatType(row, column)
return (row.type == 1 ? "普通管理员" : "超管"); //最终表格中以返回的数据为准进行显示
,
//时间的格式化;
formatTime(row, column)
var date = new Date(row.operTime);
return date.toLocaleString();
,
//公用的搜索管理员列表方法;
getAdminList()
//向后端发送管理员的数据；
var _this = this;
this.$http.post("admin/getAllAdmin", this.query).then(function(resp)
//console.log(resp);
_this.tableData = resp.data.data;
//总数据量;
_this.total = resp.data.total;
//console.log(resp.data.total)
_this.loading = false;
);
,
//根据条件搜索管理员;
search()
this.query.pageNum = 1;
this.getAdminList();
,
//修改当前页面的显示数据量;
handleSizeChange(val)
console.log(`每页 $val 条`);
this.query.pageSize = val;
this.getAdminList();
,
//修改当前页面的显示页码;
handleCurrentChange(val)
console.log(`当前页: $val`);
this.query.pageNum = val;
this.getAdminList();
,
//跳转到新增管理员窗口；
openAddAdmin()
//让新增对话框组件显示出来, 在父组件中调用子组件的数据;
this.$refs.AddDialog.dialogVisible = true;
,
//修改管理员信息;
toUpdate(id)
//打开修改当前管理员的对话框组件;
this.$refs.UpdateDialog.dialogVisible = true;
//调用子组件的方法;将Id传递进去;
this.$refs.UpdateDialog.findA以上是关于前后端分离学习笔记 ---[表单的增删改操作；以及为管理员上传头像]的主要内容，如果未能解决你的问题，请参考以下文章
Python全栈100天学习笔记Day48 前后端分离开发入门
RuoYi 若依后台管理系统-学习笔记-前后端分离项目中下拉框验证失效
RuoYi 若依后台管理系统-学习笔记-前后端分离项目中下拉框验证失效
前后端分离学习笔记 ---[跨域问题,JWT,路由守卫,Axios设置请求拦截和响应拦截]