In order to better manage personal data, a dedicated interface is required to display and edit personal data. This article will introduce how to write a profile management interface using Vue.js and Element UI.
Interface Prototyping Ideas
Here are a few things to consider when designing your profile management interface:
1. Interface layout: A clear layout is required to display the user's profile and other relevant information.
2. Functional modules: Different functional modules need to be separated so that users can easily find the functions they need.
3. User Experience: You need to ensure that users can use the interface easily and find the information they need quickly.
Coding ideas
Before writing code, Vue.js and Element UI need to be installed.
First you need to create a Vue instance and add Element UI to it. Then start writing HTML and CSS code to create the interface.
In HTML code, we need to use Element UI components to create different functional modules. For example, you can use the el-card component to create a profile card, use the el-tabs component to create different tabs, use the el-form component to create an edit profile form, etc.
In the CSS code, we need to use the style of Element UI to beautify our interface. For example, we can use the style of the el-button component to beautify our button, use the style of the el-input component to beautify our input box, etc.
Specific interface code design
```html
<template>
<div class="profile">
<el-card class="profile-card">
<div slot="header" class="profile-header">
<el-avatar :src="avatar" size="large"></el-avatar>
<div class="profile-name">{
{ name }}</div>
</div>
<div class="profile-body">
<el-tabs v-model="activeTab">
<el-tab-pane label="个人资料">
<el-form :model="formData" :rules="rules" ref="form" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="formData.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">保存</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="视频云盘">
<el-table :data="videoList" style="width: 100%">
<el-table-column prop="name" label="视频名称"></el-table-column>
<el-table-column prop="size" label="视频大小"></el-table-column>
<el-table-column prop="date" label="上传日期"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="更改密码">
<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input type="password" v-model="passwordForm.oldPassword"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input type="password" v-model="passwordForm.newPassword"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('passwordForm')">保存</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<script>
export default { data() { return { activeTab: '1', formData: { username: 'admin', email: '[email protected]', phone: '1234567890' }, rules: { email: [ { required: true, message: 'Please enter your email address', trigger: 'blur' }, { type: 'email', message: 'Please enter a correct email address', trigger: ['blur', 'change'] } ], phone: [ { required: true, message: 'Please enter the phone number', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: 'Please enter the correct phone number', trigger:['blur', 'change'] } ] },
passwordForm: { oldPassword: '', newPassword: '', confirmPassword: '' }, passwordRules: { oldPassword: [ { required: true, message: 'Please enter the old password', trigger: 'blur' } ], newPassword: [ { required: true, message: 'Please enter a new password', trigger: 'blur' }, { min: 6, max: 20, message: 'The password length is between 6 and 20 characters', trigger: 'blur' } ], confirmPassword: [ { required: true, message: 'Please confirm your password', trigger: 'blur' }, { validator: this.validateConfirmPassword, trigger:'blur' } ] }, videoList: [
{ name: '视频1', size: '100MB', date: '2021-10-01' },
{ name: '视频2', size: '200MB', date: '2021-10-02' },
{ name: '视频3', size: '300MB', date: '2021-10-03' }
],
avatar: 'https://avatars.githubusercontent.com/u/125264?s=200&v=4',
name: 'admin'
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$message.success('保存成功')
}
})
},
validateConfirmPassword(rule, value, callback) {
if (value !== this.passwordForm.newPassword) {
callback(new Error('The passwords entered twice are inconsistent'))
} else { callback() } } } } </script>
<style scoped>
.profile {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.profile-card {
width: 800px;
}
.profile-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.profile-name {
font-size: 24px;
margin-left: 20px;
}
.profile-body {
padding: 20px;
}
</style>
```
experience
I learned a lot about Vue.js and Element UI by writing a profile admin interface. I found that using Vue.js and Element UI makes it easy to create beautiful interfaces and implement various functions quickly. Additionally, I learned how to use Vue.js components and directives to handle user input and validate form data. This knowledge will be very useful for my future development work.