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

SpringBoot与Vue构建个人博客

最新推荐文章于 2024-08-31 08:00:00 发布

原创最新推荐文章于 2024-08-31 08:00:00 发布 · 643 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

Vue 专栏收录该内容

2 篇文章

订阅专栏

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

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

代码

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>