文章目录
- 前言
- 个人空间
- 信息修改
-
- 基本信息实现
- 信息修改实现
- 头像修改实现
- 账号管理实现
- 文章列表实现
- 收藏实现
-
- 问答收藏
- 文章收藏
- 总结
前言 最近想要换个脑子玩玩，写个页面玩玩~
先看看效果：
文章图片
文章图片
文章图片
后面加个路由超链接，嘿嘿~
个人空间 我们先来聊聊主要的这个玩意，也就是咱们的入口。
文章图片
对应的路由是：
这里面的组件可不少，里面还有很多分组件，没写，有空我就写写。
{
path: '/myspace',
name: 'myspace',
component: myspace,
children:[
{
path: 'showinfo',
name: 'showinfo',
component: showinfo
},
{
path: 'infoeditor',
name: 'infoeditor',
component: infoeditor,
},
{
path: 'countcontrol',
name: 'countcontrol',
component: countcontrol,
},
{
path: 'imageUp',
name: 'imageUp',
component: imageUp
},
{
path: 'privateAarticle',
name: 'privateAarticle',
component: privateAarticle,
},
{
path: 'publicArticle',
name: 'publicArticle',
component: publicArticle,
},
{
path: '',
name: 'allArticle',
component: allArticle,
},
{
path: 'columnArticle',
name: 'columnArticle',
component: columnArticle
},
{
path: 'statusArticle',
name: 'statusArticle',
component: statusArticle
},
{
path: 'mycolums',
name: 'mycolums',
component: mycolums
},
{
path: 'myjoincolums',
name: myjoincolums,
component: myjoincolums
},
{
path: 'collectionAns',
name: collectionAns,
component: collectionAns
},
{
path: 'collectionArticle',
name: collectionArticle,
component: collectionArticle
},
{
path: 'collectionColums',
name: collectionColums,
component: collectionColums
}
]
},个人空间导航代码如下：
信息修改
基本信息
信息修改
头像修改
账号管理
文章管理
私密文章
PUBLIC
全部文章
我的专栏
审核状态
文章书写
文章书写
社区
我的社区
我创建的社区
收藏
问答收藏
文章收藏
社区收藏
>
export default {
name: "myspace",
data() {return {}
},
}
>
.el-header {
background-color: #e5efe2;
color: #333;
line-height: 60px;
}.el-aside {
color: #333;
}
.router-link-active {
text-decoration: none;
}.alink{text-decoration: none;
}信息修改 由于每一个的组件都有一个分类，每一个分类的实现都是类似的，所以我们挑三个说说就行了，文章书写是一个超链接，会通向这儿，这个先去说过，我就不重复了。
文章图片
基本信息实现 这个是展示，没什么copy组件的事儿
文章图片
{{username}}
{{email}}
{{level}}
{{motto}}
{{city}}
信息修改实现 这个也没啥就是这个
文章图片
提交修改
>
export default {
name: "infoeditor",
data() {
return {
ruleForm: {
name: '',
sex: '男',
email: '',
city: '',
motto: '',},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},}}
scoped>头像修改实现 然后是我的祖传代码，不过这次优化了一下
![突发奇想|Vue + Element做个个人中心玩玩~]()
文章图片
图片选择
>
export default {
name: "imageUp",
data(){
return {
filename: null,
f64: null,
loadImage: ""
}
},
methods: {changepic() {
document.getElementById('file').onchange = function () {
var imgFile = this.files[0];
var fr = new FileReader();
fr.onload = function () {
let showing = document.getElementById('showimg')
let img = fr.result;
this.f64 = img;
this.filename = imgFile.name
showing.src = https://www.it610.com/article/img;
showing.style.height ="220px";
showing.style.width = "220px";
showing.style.borderRadius = "200px"
};
fr.readAsDataURL(imgFile);
}
},
}
}
scoped>.upload{
margin-left: 20%;
width: 12%;
text-align: center;
color: white;
height: 32px;
border-radius: 3px;
background: #1E90FF;
cursor: pointer;
outline: none;
border-width: 0px;
font-size: 17px;
display:inline-block;
padding: 4px 10px;
line-height:30px;
position: relative;
text-decoration: none;
}button {
margin-left: 70%;
width: 15%;
height: 35px;
border-width: 0px;
border-radius: 3px;
background: #1E90FF;
cursor: pointer;
outline: none;
color: white;
font-size: 17px;
}
.show{
margin: 100px auto;
width: 80%;
height: 450px;
border: 5px solid #18a0ec;
transition: all 0.9s;
border-radius: 10px;
}
.show1{
margin: 50px auto;
width: 222px;
height: 226px;
border: 5px solid #18a0ec;
transition: all 0.9s;
border-radius: 150px;
}.show1:hover{
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
margin-top: 45px;
}.show:hover{
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
margin-top: 45px;
}.texti{
border: 1px solid #ccc;
padding: 13px 14px;
width: 30%;
font-size: 14px;
font-weight: 300;
border-radius: 5px;
/* 边框半径 */
background: white;
/* 背景颜色 */
cursor: pointer;
/* 鼠标移入按钮范围时出现手势 */
outline: none;
/* 不显示轮廓线 */}
.texti:focus{
border-color: #1e88e1;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
textarea {
resize: none;
}
账号管理实现 这个其实就是修改账号，后面我想单独做大一点，所以要单独分开，例如信息验证，学历验证，专家验证啥的。
文章图片
提交
重置
>
export default {
name: "countcontrol",
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('校验码不能为空'));
}
setTimeout(() => {
if ((value)!=="216sadasdsad21352asdas55d5465sad@#sa2d6sa5") {
callback(new Error('校验码错误'));
} else {callback();
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value =https://www.it610.com/article/=='') {
callback(new Error('请输入密码'));
} else {
if(value.length<=6){
callback(new Error("密码长度不能低于6"))
}
if (this.ruleForm.checkPass !== '' ) {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value =https://www.it610.com/article/=='') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
verify: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
verify: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
scoped>文章列表实现 这个部分是这样的
文章图片
由于都是类似的，所以我直接把那个全部文章的代码拿出来
文章图片
{{message.name}}
{{message.info}}
阅读：
{{message.number}}
收藏：
{{message.favorite}}
权限：
{{message.level}}
fork:{{message.fork}}
{{message.data}}
