HTML如何用element-ui快速做出个人信息界面

如何快速用element-ui做一个用户中心

如图所示

当点击编辑以后如下图所示

一.引入

首先要引入vue.je和element

复制代码
<script type="text/javascript" src="js/vue-2.5.16.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script>

vue.js我在本地就有了,所以直接用路径引入了

二.html部分

复制代码
 <div>
        <el-form label-width="80px" size="small">
            <el-form-item label="邮箱">
                <el-input v-model="email" :disabled="!editMode" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="phone" :disabled="!editMode" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="简介">
    <el-input type="textarea" v-model="bio" :disabled="!editMode" style="width: 300px; height: 100px;"></el-input>
</el-form-item>
            <el-form-item label="头像">
                <el-image :src="profile" style="width: 100px; height: 100px;"></el-image>
                <el-button type="text" icon="el-icon-picture" @click="uploadAvatar" v-if="editMode">修改头像</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-left: 25px;">
            <el-button type="primary" @click="editMode = true" v-if="!editMode">编辑</el-button>
            <el-button type="success" @click="saveUserInfo" v-if="editMode">保存</el-button>
            <el-button type="danger" @click="cancelEdit" v-if="editMode">取消</el-button>
        </div>
    </div>

使用了<el-form>来构筑表单

在非编辑模式,即!editMode时不可选中

当点击编辑以后,@click="editMode = true,令editMode变为True,也就是变成可编辑模式

在可编辑模式时,编辑按钮会隐藏,而保存和取消按钮会显示。修改头像按钮也是同理。

三.Js部分

取消按钮

复制代码
cancelEdit() {
    // 用户点击取消按钮,退出编辑模式,不保存修改的信息
    this.editMode = false;
    this.getUserInfo();
},

保存按钮

复制代码
saveUserInfo() {

    axios.post('http://127.0.0.1:8000/user/get_userinfo/', {
        email: this.email,
        mobile: this.phone,
        bio:this.bio,
    }, {
        withCredentials: true,
    })
    .then(response => {
        console.log("用户信息保存成功");
        this.editMode = false; // 保存成功后退出编辑模式
    })
    .catch(error => {
        console.error('There was an error!', error);
    });
},

修改头像

复制代码
        uploadAvatar() {
    const inputElement = document.createElement('input');
    inputElement.type = 'file';
    inputElement.accept = 'image/*';
    inputElement.onchange = (event) => {
        const file = event.target.files[0];
        const formData = new FormData();
        formData.append('avatar', file);
        axios.post('http://127.0.0.1:8000/user/upload_avatar/', formData, {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
            withCredentials: true,
        })
        .then(response => {
            console.log("头像上传成功");
Vue.set(this, 'profile', response.data.profile_url);
window.location.reload();
        })
        .catch(error => {
            console.error('There was an error!', error);
        });
    };
    inputElement.click();
},
相关推荐
IT_陈寒16 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用18 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥34 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端