Springboot + Vue 个人博客 前端交互样例
对于前端的布局 不会详细去展开 毕竟本人前端功底并不是特别扎实 但使用ElementUi也基本上可以加快开发不少了 在这篇文章中 简单过一下Vue Element的基础点 主要是讲解axios和后端的交换样例
目录
Springboot + Vue 个人博客 主目录
Springboot + Vue 个人博客 前端配置
Springboot + Vue 个人博客 后端配置
Springboot + Vue 个人博客 前端交换样例
Springboot + Vue 个人博客 后端交换样例
代码
1. 基础
1.1 Vue组件的结构 (xxx.vue)
<template>
<div>
//your content
</div>
</template>
<script>
export default {
name:"xxx"; //使该组件以'xxx'方式访问
data() {
return {
//your data
};
},
methods: {
//your method
}
}
</script>
<style scope>
//css 用于定义组件的布局
</style>
1.2 Vue生命周期
explain:
详情查询Vue官网 其中mounted方法最为重要
1.2 ElementUI 头部导航栏菜单路径跳转
explain:
在el-menu中 添加router 和vue-router绑定 el-menu-item index 绑定 path; 实现点击el-menu-item就跳转刷新主界面 而MyMain.vue添加my-menu + router-view是为了实现 顶部导航栏不变 点击导航栏的其中一个标签 其他内容能对应改变的效果
//MyMenu.vue
<template>
<div>
<el-menu router :default-active="this.$route.path" >
<el-menu-item index="/index">首页</el-menu-item>
<el-menu-item index="/article">文章</el-menu-item>
<el-menu-item index="/info">个人中心</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
name:"MyMenu";
data() {
return {
};
},
methods: {
}
}
</script>
//MyMain.vue
<template>
<div>
<my-menu><my-menu>
<router-view><router-view>
</div>
</template>
<script>
import MyMenu from "xxxxxxx";
export default {
name:"MyMain";
}
</script>
2. axios get post示例
explain:
这是我ArticleDetails.vue的JS关键代码 每次界面完成渲染的时候后调用mounted 而mounted会调用 loadArticle异步获取后端的数据 并将值转换为data()中的articleData
提交评论 使用post 在url后的 {} 使用键值对的方法填写数据就可以了
<script>
export default {
name: 'ArticleDetails',
data() {
return {
articleData: {},//文章数据
commentList:[],//评论列表
replyData:{},//单个评论的所有回复
pageNum:1,//当前页面
pageSize:2,//页面信息总数
//提交评论数据
commentForm:{
userId:'',
time:'',
content:'',
},
}
},
mounted: function () {
this.loadArticle();
},
methods: {
/*获取后端相应文章*/
loadArticle: function(){
var _this=this;
_this.$axios.get("http://localhost:8080/article/details/"+_this.$route.params.id)
.then(function (data) {
console.log(data.data);
_this.articleData=data.data.data;
})
},
/*获取相应评论*/
loadComment:function(){
var _this=this;
_this.$axios.get("http://localhost:8080/comment/"+_this.$route.params.id+"/"+_this.pageNum+"/"+_this.pageSize)
.then(function (data) {
_this.commentList=data.data.data;
})
},
/*获取一个评论的所有回复信息*/
loadReply:function(id){
var _this=this;
_this.$axios.get("http://localhost:8080/comment/find/"+id)
.then(function (data) {
_this.replyData=data.data.data;
})
},
/*提交评论*/
submit: function () {
var _this=this;
_this.$axios.post("http://localhost:8080/comment/add",{
articleId:12,
userId:1,
content:_this.commentForm.content,
time:_this.commentForm.time,
}).then(function (data) {
console.log(data.data.message);
});
},
/*qs 提交评论*/
submit2: function () {
var _this=this;
_this.$axios.post("http://localhost:8080/comment/add2",this.$qs.stringify({
articleId:12,
userId:_this.commentForm.userId,
content:_this.commentForm.content,
time:_this.commentForm.time,
})).then(function (data) {
console.log(data.data.message);
});
},
},
}
</script>