第二阶段（day23）Vue增删改查2

已于 2022-09-09 09:21:59 修改
阅读量227 收藏
点赞数
分类专栏： 第二阶段 文章标签： vue.js 前端 elementui
于 2022-05-20 00:58:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine195/article/details/124875237
版权

2.用户模块

用户模块和菜单模块类似，这里讲不同的地方。

①.安装依赖

后端时间是毫秒计，前端想用其他的计，并按指定格式显示，需要安装moment.

先停止服务器运行，点击依赖，安装moment。

该工具之前在bootstrap官网也有出现。

代码很简单：

在代码里也只有这一行：

dateFormat(row, column) {
  var date = row[column.property];
  if (date === undefined) {
    return ''
  };
return moment(date).format("YYYY-MM-DD HH:mm:ss")
  }

调用当前行的date，格式化为年月日，时分秒。

使用前还是导入moment：

import moment from 'moment'

②.界面展示：

最上面多加了一个面包线。

第一个改变：列表数据的时间有一个格式化

第二个改变：是否可用加了一个逻辑判断。

第三个改变：新增和修改数据会做头像上传。会用到一个上传的组件

列表里显示数据还是用数据插头，table在头像的地方加了一个数据插头。

<el-table-column property="headImg" label="头像">
   <template slot-scope="scope">
      <img :src="scope.row.headImg" />
   </template>
</el-table-column>

添加时会加一个上传组件el-upload;

<el-form-item label="头像" prop="headImg">
    <el-upload class="avatar-uploader" 
        action=""
        :http-request="myupload"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        name="myfile">
    <img v-if="addform.headImg" :src="addform.headImg" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

上传组件时没有使用默认的action添请求地址，而是使用另一种方式：

在上传组件上自己绑定http-request，然后自己绑定一个上传函数。

看一下这个函数：

myupload(param) {
    let formData = new FormData();
    formData.append("myfile",param.file);
    this.$axios.post("upload",formData,{headers:{"Content-Type":"multipart/form-data"}})
    .then(resp=>{
        console.log(resp);
    this.addform.headImg = resp.data.imgsrc;
})
}

使用axios上传文件，有以下几点要求：

1.要自己建一个FormData，然后将文件对象放进去。

直接通过上传组件提供的内置参数就可以取到文件对象。

2.使用axios必须调post，参数直接发formData。发送图片，请求头必须有multipart/form-data，在axios里加请求头直接多加一个参数即可，用json形式配请求头。

.then是成功的回调，回调成功给addForm里的headImg赋值。

具体可看elementUI里的上传组件。

③.授权功能

在用户管理模块，可以管理每个用户都有哪些权限。

要知道每个用户都有哪些权限，就得把权限列表查出来。

点击授权按钮，会查当前用户在数据库里存的权限列表，之前查过一次，做的导航条，现在用树状图显示：

还是父子菜单，只是换一个方式展现。

并且用户有的权限的编号需要展示出来。

对于树形插件：

要展示的数据绑定好。

用户有的权限是选中的列表。

完整代码如下：

<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{}">管理中心</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <br />
​
        <el-form ref="queryForm" :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="用户id" prop="uid">
                <el-input v-model="queryForm.uid" placeholder="用户id"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="uname">
                <el-input v-model="queryForm.uname" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="myQuery">查询</el-button>
                <el-button @click="resetForm('queryForm')">重置</el-button>
                <el-button type="success" @click="openAddForm">新增</el-button>
                <el-button type="warning" :disabled="disBtn" @click="openEditForm">修改</el-button>
                <el-button type="danger" :disabled="disBtn" @click="openDelForm">删除</el-button>
                <el-button type="info" :disabled="disBtn" @click="openAuthForm">授权</el-button>
            </el-form-item>
        </el-form>
        <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleRowchange" style="width: 100%">
            <el-table-column property="uid" label="用户id" width="100">
            </el-table-column>
            <el-table-column property="userName" label="用户姓名" width="150">
            </el-table-column>
            <el-table-column property="isValid" label="是否可用" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.isValid == '1' ? 'primary' : 'danger'" disable-transitions>{{scope.row.isValid==1?'可用':'不可用'}}</el-tag>
                </template>
​
            </el-table-column>
            <el-table-column property="regTime" label="注册时间" :formatter="dateFormat" width="180">
            </el-table-column>
            <el-table-column property="loginTime" label="最后登录时间" :formatter="dateFormat" width="180">
            </el-table-column>
            <el-table-column property="createUname" label="创建人">
            </el-table-column>
            <el-table-column property="headImg" label="头像">
                <template slot-scope="scope">
                    <img :src="scope.row.headImg" />
                </template>
            </el-table-column>
            <el-table-column property="remark" label="备注">
            </el-table-column>
        </el-table>
​
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[3, 5, 10, 20]"
             :page-size="3" layout="total, sizes, prev, pager, next, jumper" :total="pageinfo.total">
            </el-pagination>
        </div>
​
        <el-dialog title="添加" :visible.sync="addFormVisable" width="40%">
            <el-form ref="addForm" :model="addform" label-width="80px" hide-required-asterisk>
                <el-form-item label="用户id" prop="uid">
                    <el-input v-model="addform.uid"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="addform.userName"></el-input>
                </el-form-item>
                <el-form-item label="是否可用" prop="isValid">
                    <el-select v-model="addform.isValid" placeholder="请选择">
                        <el-option label="可用" :value="1">
                        </el-option>
                        <el-option label="不可用" :value="2">
                        </el-option>
                    </el-select>
​
                </el-form-item>
                <el-form-item label="头像" prop="headImg">
                    <el-upload class="avatar-uploader" 
                    action=""
                    :http-request="myupload"
                    :show-file-list="false"
                     :before-upload="beforeAvatarUpload"
                     name="myfile">
                        <img v-if="addform.headImg" :src="addform.headImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
​
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="addform.remark" type="textarea"></el-input>
                </el-form-item>
​
                <el-form-item>
                    <el-button type="primary" @click="addFromSubmit">提交</el-button>
                    <el-button @click="resetForm('addForm')">重置</el-button>
​
                </el-form-item>
            </el-form>
        </el-dialog>
        
        <el-dialog title="修改" :visible.sync="editFormVisable" width="40%">
            <el-form ref="editForm" :model="editform" label-width="80px" hide-required-asterisk>
                <el-form-item label="用户id" prop="uid">
                    <el-input v-model="editform.uid"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="editform.userName"></el-input>
                </el-form-item>
                <el-form-item label="是否可用" prop="isValid">
                    <el-select v-model="editform.isValid" placeholder="请选择">
                        <el-option label="可用" :value="1">
                        </el-option>
                        <el-option label="不可用" :value="2">
                        </el-option>
                    </el-select>
        
                </el-form-item>
                <el-form-item label="头像" prop="headImg">
                    <el-upload class="avatar-uploader" 
                    action=""
                    :http-request="myupload2"
                    :show-file-list="false"
                     :before-upload="beforeAvatarUpload"
                     name="myfile">
                        <img v-if="editform.headImg" :src="editform.headImg" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
        
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="editform.remark" type="textarea"></el-input>
                </el-form-item>
        
                <el-form-item>
                    <el-button type="primary" @click="editFromSubmit">提交</el-button>
                    <el-button @click="resetForm('editForm')">重置</el-button>
        
                </el-form-item>
            </el-form>
        </el-dialog>
        
        <el-dialog title="授权" :visible.sync="authFormVisable" width="40%">
            <el-form ref="authForm" :model="authform" label-width="80px" hide-required-asterisk>
                <el-form-item label="用户id" prop="uid">
                    <el-input v-model="authform.uid" readonly></el-input>
                </el-form-item>
                <el-tree
                  :data="authdata"
                  show-checkbox
                  ref="authtree"
                  node-key="menuid"
                  default-expand-all
                  :default-checked-keys="currntAuth"
                  :props="defaultProps">
                </el-tree>
        
                <el-form-item>
                    <el-button type="primary" @click="authFromSubmit">提交</el-button>
                    <el-button @click="resetAuthTree">重置</el-button>
        
                </el-form-item>
            </el-form>
        </el-dialog>
​
    </div>
</template>
​
<script>
    /* {"pageinfo":{"page":1,"pagesize":3},"returnCode":10000,"returnData":[{"createUid":9,"createUname":"测试1","isValid":0,"loginTime":1469444784000,"passWord":"e10adc3949ba59abbe56e057f20f883e","regTime":1469173099000,"remark":"","uid":3,"userName":"wangshaocheng"}],"returnMsg":"操作成功"} 
    {"createUid":9,"createUname":"测试1","headImg":"logo/user1.png","isValid":0,"loginTime":1469444784000,"passWord":"e10adc3949ba59abbe56e057f20f883e","regTime":1469173099000,"remark":"","uid":3,"userName":"wangshaocheng"}   */
    import moment from 'moment'
    export default {
        data() {
            return {
                
                currntAuth:[],
                authform:{
                    uid:''
                },
                authdata: [],
                defaultProps: {
                  children: 'submenu',
                  label: 'menuname'
                },
                
                
                disBtn:true,
                imageUrl:'',
                addFormVisable: false,
                editFormVisable: false,
                authFormVisable:false,
                addform: {
                    headImg: '',
                    isValid: '',
                    remark: '',
                    uid: '',
                    userName: ''
                },
                editform: {
                    headImg: '',
                    isValid: '',
                    remark: '',
                    uid: '',
                    userName: ''
                },
                pageinfo: {
                    page: 1,
                    pagesize: 3,
                    total: 10
                },
                queryForm: {
                    uid: '',
                    uname: ''
                },
                tableData: [],
                currentRow: null
            }
        },
​
        methods: {
            authFromSubmit(){
                //获取menuid数组 转成字符串
                let menuid = this.$refs.authtree.getCheckedKeys().join(",");
                console.log(menuid);
                //拼接成键值对参数
                let param = "uid="+this.authform.uid+"&menuid="+menuid
                this.$axios.post("user/edituserauth",param)
                .then(resp=>{
                    console.log(resp);
                    this.$message.success(resp.data.returnMsg);
                    this.authFormVisable = false;
                    this.myQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            resetAuthTree(){
                this.$refs.authtree.setCheckedKeys(this.currntAuth);
            },
            //点击授权
            openAuthForm(){
                this.authFormVisable = true;
                if(this.currentRow){
                    this.authform = JSON.parse(JSON.stringify(this.currentRow));
                }
                this.$axios.post("user/getauth","uid="+this.currentRow.uid)
                .then(resp=>{
                    this.authdata = resp.data.returnData;
                    this.currntAuth = resp.data.extData.split(",");
                    //console.log(resp.data.extData.split(","));
                }).catch(err=>{
                    console.log(err);
                })
                
            },
            //点击删除
             openDelForm() {
                    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                      this.$axios.post("user/deluser","uid="+this.currentRow.uid)
                      .then(resp=>{
                        console.log(resp);
                        this.$message.success(resp.data.returnMsg);
                        this.myQuery();
                      }).catch(err=>{
                        console.log(err);
                      })
                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });          
                    });
                  },
            //点击提交修改
            openEditForm(){
                this.editFormVisable = true;
                if(this.currentRow){
                    this.editform = JSON.parse(JSON.stringify(this.currentRow));
                }
                
            },
            //提交修改保存
            editFromSubmit(){
                console.log(this.editform)
                this.$axios.post("user/edituser",this.$qs.stringify(this.editform))
                .then(resp=>{
                    console.log(resp);
                    this.$message.success(resp.data.returnMsg);
                    this.editFormVisable = false;
                    this.myQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            
            //点击新增
            openAddForm(){
                this.addFormVisable = true;
                this.$nextTick(function(){
                    this.resetForm('addForm');
                })
            },
            //提交新增
            addFromSubmit(){
                console.log(this.addform)
                this.$axios.post("user/adduser",this.$qs.stringify(this.addform))
                .then(resp=>{
                    console.log(resp);
                    this.$message.success(resp.data.returnMsg);
                    this.addFormVisable = false;
                    this.myQuery();
                }).catch(err=>{
                    console.log(err);
                })
            },
            //变更当前行
            handleRowchange(val) {
                this.currentRow = val;
                this.disBtn = false;
                console.log(this.currentRow);
            },
            dateFormat(row, column) {
                var date = row[column.property];
                if (date === undefined) {
                    return ''
                };
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
            },
            myQuery() {
                this.$axios.get("user/query?" + this.$qs.stringify(this.queryForm) + "&" + this.$qs.stringify(this.pageinfo))
                    .then(resp => {
                        console.log(resp.data);
                        this.tableData = resp.data.returnData;
                        this.pageinfo = resp.data.pageinfo;
                    }).catch(function(err) {
                        console.log(err)
                    })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageinfo.page = 1;
                this.pageinfo.pagesize = val;
                this.myQuery();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageinfo.page = val;
                this.myQuery();
            },
            //上传成功
            myupload(param) {
                let formData = new FormData();
                formData.append("myfile",param.file);
                this.$axios.post("upload",formData,{headers:{"Content-Type":"multipart/form-data"}})
                .then(resp=>{
                    console.log(resp);
                    this.addform.headImg = resp.data.imgsrc;
                })
            },
            myupload2(param) {
                let formData = new FormData();
                formData.append("myfile",param.file);
                this.$axios.post("upload",formData,{headers:{"Content-Type":"multipart/form-data"}})
                .then(resp=>{
                    console.log(resp);
                    this.editform.headImg = resp.data.imgsrc;
                })
            },
            //上传限制
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
​
                if (!isJPG&&!isPNG) {
                    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG||isPNG) && isLt2M;
            }
        },
        mounted() {
            this.myQuery();
        },
        watch:{
            tableData:function(){
                console.log("数据刷新了");
                this.$nextTick(function(){
                    this.disBtn=true;
                })
                
            }
        }
    }
</script>
​
<style>
    img {
        width: 50px;
        height: 50px;
    }
​
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
​
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
​
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
​
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
​

sunshine195
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「VUE架构」VUE2.0增删改查的实现
AIGC大前端小王子
01-11 5317
本文主要介绍VUE2.0的一些基本常识应用。 1.vue的外部链接调用 通过外部调用是最简洁的，可以下载在本地，然后引用。 script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js">script>//目前没有最稳定的外链，所以此链接相对稳定 2.vue代码不起作用 新手经常会遗忘在VUE响应区间设置最外层div设置id=...
Vue2 实现商品的增删改查
m0_64191440的博客
10-13 1086
【代码】Vue2.JS 实现商品的增删改查。
vue2项目中表格的增删查改
qq_40992225的博客
08-28 1603
可以使用width属性来定义列宽。
vue2基础增删改查
MDCG99的博客
04-02 280
【代码】Vue增删改查。
vue2+element实现表格增删改查
suchen1997的博客
11-08 3416
vue2+element 实现表格简单的增删改查
vue增删改查的简单操作
08-29
Vue 增删改查的简单操作 Vue 是一个流行的前端框架，提供了很多强大的功能来帮助开发者快速构建应用程序。在这个资源中，我们将详细介绍 Vue 增删改查的简单操作，包括展示数据、增加和删除功能、修改功能等。 一...
vue实现表格数据的增删改查
08-30
Vue 实现表格数据的增删改查 Vue 实现表格数据的增删改查是指在 Vue 项目中实现对表格数据的增删改查操作，包括展示数据、增加数据、删除数据和修改数据四个功能。本文将详细介绍 Vue 实现表格数据的增删改查，主要...
vue文件源代码增删改查
07-27
在这个"vue文件源代码增删改查"的主题中，我们将深入探讨如何在Vue.js项目中实现CRUD（创建、读取、更新和删除）操作，结合SpringBoot后端服务和数据库交互。 首先，让我们从Vue.js的角度出发。在Vue应用中，CRUD...
Vs Code Vue实现增删改查
01-07
本教程将重点讲解如何使用Visual Studio Code（简称Vs Code）这个强大的代码编辑器来实现Vue项目中的增删改查功能。首先，我们来看看Vue的基本概念。 Vue.js是尤雨溪开发的一个渐进式JavaScript框架，它具有轻量级...
后台管理-增删改查-vue2-ele
weixin_58431406的博客
06-02 943
新增和修改用同一个组件去写 点击新增或者修改的时候的会出现弹框，新增打开的时候弹窗里是没有内容的，所以要给他清空，⽽且新增⾥⾯的确定，也要调⽤后台，把新增的数据当成参数传给后台
vue表格增删改查
03-04
该文件主要以vue.js为主的表格渲染，数据交互。充分的表现了表格的增删改查功能，以及vue中input的使用，date日期的选择。
对vue + elementUI的表格常规增删改查优化封装
03-29
对vue + elementUI的表格常规增删改查优化封装
zCrud组件(vue2封装增删查改到一个组件)
weixin_42424283的博客
03-14 805
vue使用elementUI框架封装新增、查询、编辑、删除、批量删除、分页等功能与一体的组件，并支持自定义组件；
Vue实现列表的增删改查
weixin_45389051的博客
03-06 2672
一.html <div id="app"> <from> <label>id: <input type="text" v-model="id"> </label> <label>name: <input type="text" v-m...
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
amoureux555的博客
08-26 970
设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
vue2.0+axios+elementUI实现增删改查
weixin_34378767的博客
07-31 4510
最近尝试使用vue+element实现增删改查功能，在实现的过程中遇到了蛮多问题，现在总结如下：首先安装相关的插件1、根据vue官网推荐，使用axios进行前后台交互，安装axiosnpm install axios -S2、安装elementUI，官网npm i element-ui -S3、安装 loader 模块npm instal...
Vue+ElementUI实现增删改查（代码）
WebView
11-08 3714
Vue+ElementUI实现增删改查 效果演示地址 3.代码 页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpk...
用vue实现增删改查
m0_64344470的博客
05-08 2921
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
ssm vue增删改查
最新发布
10-14
SSM Vue 增删改查（CRUD）是指使用 SSM（Spring+SpringMVC+MyBatis）作为后端技术框架，使用 Vue.js 作为前端框架实现数据的增加、删除、修改和查询。 首先，我们需要在后端使用 Spring 框架来处理前端请求。通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值