【IMWeb训练营团队作业】

团队作业小组讨论后打算仿一个今日头条的小项目，我负责的部分是详情页部分，功能包括根据url传递的id获取对应的文章，在底部添加评论的功能，做的比较简单，页面样式方面没有进行细致的调整。

数据

由于时间比较紧没有做后端部分，直接从cnode社区提供的api获取一些数据。

用到的接口：

• https://cnodejs.org/api/v1/topics，获取文章列表
• https://cnodejs.org/api/v1/topic/id ，根据id获取文章相关内容。
  数据获取使用的是axios

页面

主要是两个页面，一个是文章列表页，点击标题将携带文章id跳转到文章详情页。

代码

文章列表页

<div id="app">
        <ul class="content-list">
            <li v-for="item in dataList">
                <h4><a class="item-title" :href="'/detail.html?itemId='+item.id">{{item.title}}</a></h4>

                <p class="create-info">
                    <span class="time">{{item.create_at}}</span>
                    <a :href="'/user?username=' +　item.author.loginname"><img class="avatar" :src="item.author.avatar_url"></a>
                </p>

            </li>
        </ul>
    </div>
    <script>
        var BASE_URL = 'https://cnodejs.org/api/v1'
        var vm = new Vue({
            el:'#app',
            created(){
                var _this = this;
                axios.get(BASE_URL + '/topics',{
                    params:{
                        page:1,
                        tab:'all',
                        limit:10
                    }
                }).then(function(res){
                    _this.dataList = res.data.data;
                }).then(function(err){
                    console.log(err)
                })
            },
            data:{
                dataList:[]
            }
        })
    </script>

文章详情页

<div class="back">
        <a href="javascript:history.go(-1)">返回</a>
    </div>
    <div id="app">
        <div class="detail">
            <div class="title"><h4>{{detail.title}}</h4></div>
            <div class="detail-content" v-html="detail.content"></div>
        </div>
        <div class="discuss">
            <button class="write-discuss" @click="openModal">发表评论</button>
            <h5>评论列表</h5>
            <ul class="discuss-list" v-if="discuss.length">
                <li class="discuss-item" v-for="item in discuss">
                    <div class="userinfo">
                        <span class="user-info">{{item.name}}</span>
                        <p><img class="avatar" src="avatar.png"></p>
                    </div>
                    <p class="discuss-content">{{item.content}}</p>
                </li>
            </ul>
        </div>
        <!-- 自定义评论弹出框 -->
        <div class="discuss-modal" v-if="modalFalg">
            <div class="modal-title"><h4>发表评论</h4></div>
            <div class="model-content">
                <div class="form-group">
                    <label>用户名：</label>
                    <input type="text" name="userinfo" v-model="userinfo">
                </div>  
                <div class="form-group">
                    <label>评论内容：</label>
                    <textarea v-model="content"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" @click="publicDiscuss" value="发布">
                <button @click="closeModal">关闭</button>
            </div>
        </div>
        <div class="mask" v-show="modalFalg"></div>
    </div>
    <script>
        var BASE_URL = 'https://cnodejs.org/api/v1/topic/'
        var vm = new Vue({
            el:'#app',
            created(){
                var id = getArticleId();
                var _this = this;
                axios.get(BASE_URL + id).then(function(res){
                    if(res.status === 200){
                        _this.detail = res.data.data;
                    }
                }).then(function(err){
                    console.log(err);
                })
            },
            data:{
                detail:{},
                discuss:[
                    {userinfo:'lzy',content:'这是一条简单的评论'}
                ],
                userinfo:'',
                content:'',
                modalFalg:false
            },
            methods:{
                publicDiscuss(){
                    var obj = {
                        userinfo:this.userinfo,
                        content:this.content
                    }
                    this.discuss.unshift(obj)
                    this.modalFalg = false
                },
                openModal(){
                    this.modalFalg = true
                },
                closeModal(){

                    this.modalFalg = false
                    console.log(this.modalFalg);
                }
            }
        })
        function getArticleId(){
            return window.location.search.split('=')[1];
        }

效果图

文章列表页

文章详情页

填写评论功能

总结

整体来说做的比较简单，对vue也有了进一步的了解。