Springboot + Vue 个人博客 前端交互样例

Springboot + Vue 个人博客 前端交互样例

对于前端的布局 不会详细去展开 毕竟本人前端功底并不是特别扎实 但使用ElementUi也基本上可以加快开发不少了 在这篇文章中 简单过一下Vue Element的基础点 主要是讲解axios和后端的交换样例

目录

Springboot + Vue 个人博客 主目录
Springboot + Vue 个人博客 前端配置
Springboot + Vue 个人博客 后端配置
Springboot + Vue 个人博客 前端交换样例
Springboot + Vue 个人博客 后端交换样例

代码

Github 后端代码
Github 前端代码

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>