完成前台的列表展示

2022-05-11 11:22:11 +08:00 · 2022-05-11 11:22:11 +08:00 · 36adfd4dc4
commit 36adfd4dc4
parent 95415eedb2
6 changed files with 16027 additions and 4 deletions
--- a/db.sql
+++ b/db.sql
@ -35,6 +35,9 @@ INSERT INTO article(title,publish_time,description,content,category) VALUES('测
 INSERT INTO article(title,publish_time,description,content,category) VALUES('测试5','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
 INSERT INTO article(title,publish_time,description,content,category) VALUES('测试6','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
 INSERT INTO article(title,publish_time,description,content,category) VALUES('测试7','2022-05-10 16:52:09','测试测试','测试测试测试测试','默认');
+
+
+update article  set cover = 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
 -- 评论表: 评论ID、文章ID、评论内容、发布时间、评论者IP
 create table comment
 (
--- a/public/index.html
+++ b/public/index.html
@ -7,26 +7,136 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        .show-flex {
+
+            display: flex;
+        }
+
+        header {
+            background-color: black;
+            color: #fff;
+            padding: 10px;
+        }
+
+        .site-nav {
+            flex: 1;
+            text-align: right;
+        }
+
+        .site-nav a {
+            color: #fff;
+            text-decoration: none;
+        }
+
+        .container {
+            width: 900px;
+            margin: auto;
+        }
+
+        .main {
+            margin: 30px auto;
+        }
+
+        .article-item {
+            margin-bottom: 30px;
+            border-bottom: dashed 1px #ccc;
+            padding-bottom: 30px;
+        }
+
+        .article-item .image img {
+            width: 100px;
+            height: 100px;
+            display: block;
+            border-radius: 5px;
+        }
+
+        .article-item .info {
+            flex: 1;
+            margin-left: 10px;
+        }
+
+        .info .title {
+            height: 30px;
+        }
+
+        .info .desc {
+            color: #666;
+            font-size: 14px;
+            height: 40px;
+            line-height: 20px;
+        }
+
+        .info .ext {
+            height: 30px;
+            line-height: 30px;
+            text-align: right;
+            color: #666;
+            font-size: 12px;
+        }
+    </style>
 </head>

 <body>
    <div id="home">
-        <h1>{{title}}</h1>
-        <div>
-            <el-button>xxxx</el-button>
+        <header>
+            <div class="container show-flex">
+                <div class="logo">我的博客</div>
+                <nav class="site-nav">
+                    <a href="./">首页</a>
+                    <a href="./login.html">登录</a>
+                </nav>
+            </div>
+        </header>
+        <div class="main container">
+            <div class="show-flex article-item" v-for="(a,index) in articleArray" :key="index">
+                <div class="image">
+                    <img :src="a.cover">
+                </div>
+                <div class="info">
+                    <h3 class="title">{{a.title}}</h3>
+                    <p class="desc">{{a.description}}</p>
+                    <div class="ext">
+                        <span>发布于:2022-5-11</span>
+                        <span>阅读(20)</span>
+                        <span>评论(10)</span>
+                    </div>
+                </div>
+            </div>
+            <div class="page" style="text-align: center;">
+                <el-pagination layout="prev, pager, next" :page-size="size" :total="total">
+                </el-pagination>
+            </div>
        </div>
    </div>
+    <!-- 引入vue和elementd的库 -->
    <script src="./vue/dist/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script type="module">
        // import Vue from './vue/dist/vue.esm-browser.js'
        // import ElementUI from './element-ui/lib/index.js'
+        // vue 通过 Vue.createApp(选项)创建vue实例
+        import request from './modules/request.js'
        const HomeApp = new Vue({
            el: '#home',
            data() {
                return {
-                    title: 'test vue'
+                    articleArray:[],
+                    total:0,
+                    size:5
                }
+            },
+            mounted(){
+                request('/api/article/web/list?size=2').then(data=>{
+                    this.articleArray = data.list
+                    this.total = data.total;
+                    this.size = data.size;
+                })
            }
        })
    </script>
--- a/public/index_v3.html
+++ b/public/index_v3.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="home">
+        <h1>{{title}}</h1>
+        <div>
+            <button>xxxx</button>
+        </div>
+    </div>
+    <!-- 引入vue和elementd的库 -->
+    <script src="./vue/dist/vue_3.js"></script>
+    <script type="module">
+        // import Vue from './vue/dist/vue.esm-browser.js'
+        // import ElementUI from './element-ui/lib/index.js'
+        // vue 通过 Vue.createApp(选项)创建vue实例
+        const HomeApp = Vue.createApp({
+            data() {
+                return {
+                    title: 'test vue'
+                }
+            }
+        })
+        HomeApp.mount('#home');
+    </script>
+</body>
+
+</html>
--- a/public/login.html
+++ b/public/login.html
--- a/public/modules/request.js
+++ b/public/modules/request.js
@ -0,0 +1,36 @@
+/**
+ * example: <br>
+ *  <p>request('http://localhost:3000/aricle/detail?id=1').then()... </p>
+ *  request('http://localhost:3000/aricle/detail',{id:1}).then()... <br>
+ *  request('http://localhost:3000/aricle/detail',{id:1},'POST').then()... <br>
+ * @param {string} url 
+ * @param {*} params 
+ * @param {'GET'|'POST'} method 
+ * @returns 
+ */
+const request = (url, params = {}, method = 'GET') => {
+    return new Promise((resovle, reject) => {
+        const options = {
+            method: method
+        }
+        if (method.toUpperCase() == 'GET') {
+            const query = [];
+            for (let key in params) {
+
+                query.push(`${key}=` + params[key]);
+            }
+            url = url + (url.includes('?') ? "&" : "?") + query.join('&')
+        } else {
+            options.headers = {
+                'Content-Type': 'application/json'
+            }
+            options.body = JSON.stringify(params) // 对象转json
+        }
+        fetch(url, options)
+            .then(res => res.json())
+            .then(resovle)
+            .catch(e => reject(e))
+    });
+}
+//
+export default request
--- a/public/vue/dist/vue_3.js
+++ b/public/vue/dist/vue_3.js