diff --git a/public/detail.html b/public/detail.html
index 785b3b6..0f205c8 100644
--- a/public/detail.html
+++ b/public/detail.html
@@ -22,16 +22,25 @@
             </div>
         </header>
         <div class="main container">
-            <h1 id="article-title">{{a.title}}</h1>
-            <div id="artilce-info" class="show-flex">
-                <div class="category">分类:{{a.category}}</div>
-                <div class="time">发布于:{{a.publish_time}}</div>
-                <div class="count">
-                    阅读数({{a.view_count}})
-                    评论数({{a.comment_count}})
+            <div v-if="isError == false" style="display:none" :style="{display:a.id > 0 ?'block':'none'}">
+                <h1 id="article-title">{{a.title}}</h1>
+                <div id="artilce-info" class="show-flex">
+                    <div class="category">分类:{{a.category}}</div>
+                    <div class="time">发布于:{{a.publish_time}}</div>
+                    <div class="count">
+                        阅读数({{a.view_count}})
+                        评论数({{a.comment_count}})
+                    </div>
                 </div>
+                <div id="article-content" v-html="a.content"></div>
+            </div>
+            <div v-else class="error-notice">
+                <el-result icon="info" title="提示" sub-title="加载文章数据异常">
+                    <template slot="extra">
+                        <el-button type="primary" round size="medium">返回</el-button>
+                    </template>
+                </el-result>
             </div>
-            <div id="article-content" v-html="a.content"></div>
         </div>
     </div>
     <!-- 引入vue库 -->
@@ -48,8 +57,9 @@
             el: '#detail', // 设置挂载对象
             data() {
                 return {
+                    isError:false,
                     a: {
-                        "id": 1,
+                        "id": 0,
                         "title": "",
                         "cover": "",
                         "publish_time": "",
@@ -65,14 +75,14 @@
             async created() {
                 const params = qs.parse(location.search);
                 if (!params.id) {
-                    alert("文章的编号不正确")
+                    this.isError = true;
                     return;
                 }
                 const id = params.id;
                 await request('./api/article/web/update', { id })
                 const articleList = await request('./api/article/web/detail', { id });
                 if (articleList.length != 1) {
-                    alert('文章数据有问题');
+                    this.isError = true;
                     return;
                 }
                 this.a = articleList[0];