[开发工具]显示学员发布问题界面

1. HomeController中写入指向文件

    @GetMapping("/question/create")
    public ModelAndView create(){
        return new ModelAndView("question/create.html");
    }

运行后访问路径即可进入提问界面。

2. 显示标签
   页面显示后标签未替换。我们可以将主页标签替换到提问页面，Thymeleaf提供了组件替换功能。
   再index.html模板中引入Thymeleaf命名空间，这个时可选操作，有了这个命名空间，IDEA就可以自动提示相关属性，为了更好支持Thymeleaf可以再idea中引入Thymeleaf插件。
   
   index文件右键
   

index.html首页中加入标签,th:fragment=“tags_nav”

<!--引入标签的导航栏-->
<div class="container-fluid" th:fragment="tags_nav">
    <div class="nav font-weight-light" id="tagsApp">
            <a href="tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
            <a href="tag/tag_question.html" class="nav-item nav-link text-info" v-for="tag in tags"><small v-text="tag.name">Java基础</small></a>
    </div>
</div>

create.html提问界面中加入替换标签

<!--引入标签的导航栏-->
<div class="container-fluid" th:replace="index::tags_nav">
    <div class="nav font-weight-light">
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>全部</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Java基础</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Java OOP</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Java SE</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>WebServer</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>二进制</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Web</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>MySQL</small></a>
        <a href="../tag/tag_question.html" class="nav-item nav-link text-info"><small>Servlet</small></a>
    </div>
</div>

会发现已经替换，但不是动态替换。首先提取获取标签方法到tags_nav.js方法

let tagsApp = new Vue({
    el: '#tagsApp',
    data:{
        tags:[]
    },
    methods:{
        loadTags:function () {
            console.log('执行了loadTags');
            $.ajax({
                url:'/v1/tags',
                method:'GET',
                success:function (r) {
                    // console.log(r);
                    if (r.code === OK){
                        console.log('成功返回tags');
                        tagsApp.tags = r.data;
                    }
                }
            });
        }
    },
    created:function () {
        this.loadTags();
    }
});

更改引入

<script src="js/util.js"></script>
<script src="js/index.js"></script>
<script src="js/tags_nav.js"></script>

create.html

<script src="../js/util.js"> </script>
<script src="../js/tags_nav.js"></script>