finished part of the api debug

backend/api/article_lists.py

@@ -1,16 +1,53 @@
-# includes the all api for articles and 
-# the forms shoulb be like 
+# includes the all api for articles and
+# the forms shoulb be like
 # 1. /api/articleslist
 # 2. /api/articleslist?tag=tagname
 # 3. /api/articleslist?user=username
 
+from cgi import print_form
+import re
 from flask_restful import Resource, reqparse
-from flask import request,make_response
+from flask import request, make_response
 from flask import jsonify
 from importlib_metadata import pass_none
 from models import User
 
 
 class ArticlesListApi(Resource):
+    def __init__(self):
+        # the return sample should be a list of articles, and for each article
+        # each article have the 1. id 2. title 3. author 4. tags 5. date 6. number of comments
+        # 7. number of likes
+        self.response_obj_sample = {
+            'message': "successfully get the articles list",
+            'code': 0,
+            'data': 
+            {
+                'articles':
+                [
+                    {
+                        'id': 1,
+                        'title': 'how to learn sklearn',
+                        'author': 'author',
+                        'tags': ['machine learning', 'python', 'data science'],
+                        'date':'2022-11-11',
+                        'comments':5,
+                        'likes':10
+                    },
+                    {
+                        'id': 2,
+                        'title': 'how to resolve the problem of overfitting',
+                        'author': 'author',
+                        'tags': ['machine learning', 'python', 'deep learning'],
+                        'date':'2022-12-9',
+                        'comments':5,
+                        'likes':11
+                    },
+                ]
+            }
+
+        }
+
     def get(self):
-        pass
+
+        return make_response(jsonify(self.response_obj_sample), 200)

frontend/src/App.vue

@@ -1,5 +1,7 @@
 <template>
+
     <router-view></router-view>
+
 </template>
 
 <script setup>

frontend/src/components/IndexBlock.vue

@@ -0,0 +1,94 @@
+<template >
+    <!-- v for in article list -->
+    <div v-for=" i in articlesList.articles">
+        <div class="article-block black-border mg-b8 mg-t4">
+            <div class="text-area">
+                <p>
+
+                </p>
+            </div>
+        </div>
+    </div>
+
+</template>
+<script setup>
+import { computed, ref, onMounted,reactive } from 'vue'
+import { RouterLink, RouterView } from 'vue-router'
+import { getArticlesList } from '../http/api';
+/////////////////////////////////////////////////
+const articlesList = reactive({
+    articles: []
+})
+/////////////////////////////////////////////////
+getArticlesList().then(res => {
+    // console.log(res.data.data.articles)
+    // console.log(res.data.data.articles[0].author)
+    articlesList.articles = res.data.data.articles
+    console.log(articlesList.articles)
+    console.log(articlesList.articles[0].title)
+})
+
+
+
+/////////////////////////////////////////////////
+
+</script>
+<style scoped>
+.flex {
+    display: flex;
+}
+
+.mg-t4 {
+    margin-top: 4px;
+}
+.mg-b8 {
+    margin-bottom: 8px;
+}
+
+.text-area{
+    width: 80%;
+    background-color: aqua;
+    height: 50%;
+    /* 只显示一排文字 */
+    overflow: hidden;
+    /* 文字超出部分用省略号代替 */
+    text-overflow: ellipsis;
+    /* 文字超出部分用省略号代替 */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.black-border {
+    /* border: 1px solid black; */
+    /* shadow */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
+}
+.article-block {
+    /* height: 90px; */
+    height: 90px;
+    word-wrap: break-word;
+    max-width: 55vw;
+
+}
+
+@media screen and (max-width: 1200px) {
+    .article-block {
+    /* height: 90px; */
+    height: 90px;
+    word-wrap: break-word;
+    max-width: 90vw;
+
+}
+
+}
+
+@media screen and (max-width: 600px){
+    .article-block {
+    /* height: 90px; */
+    height: 90px;
+    word-wrap: break-word;
+    max-width: 100vw;
+
+}
+}
+</style>

frontend/src/http/api.js

@@ -7,6 +7,7 @@ export const  helloWorld = $http.get('api/test')
 export const login = (data) => $http.post('/api/signin', data)
 export const register = (data) => $http.post('/api/register', data)
 // Apis for articleslist
+// here the data should contain the limit, which is initally hardcoded to 15
 export const getArticlesList = (data) => $http.get('/api/articleslist', data)
 // /api/articleslist?tag=tagname
 export const getArticlesListByTag = (data) => $http.get('/api/articleslist', data)

frontend/src/views/HomePageView.vue

@@ -3,52 +3,7 @@
     <div>
         <div class="main-area flex">
             <div class="content-area flex3 mg-r8">
-                <div class="article-block black-border mg-b8 mg-t4">
-                    <div class="text-area">
-                        <p>
-
-                        </p>
-                    </div>
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 mg-t4">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
-                <div class="article-block black-border mg-b8 ">
-                </div>
+                <IndexBlockVue></IndexBlockVue>
             </div>
             <div class="recommend-area flex1 black-border flex column mg-r8">
                 <div class="tag-area black-border mg-b8" style="height:150px"></div>
@@ -60,9 +15,12 @@
 </template>
 <script setup>
 import NavBar from '../components/NavBar.vue'
+import IndexBlockVue from '../components/IndexBlock.vue';
 import useStore from '../stores/store.js'
 const store = useStore()
 
+
+
 </script>
 <style scoped>
 .mg-b8 {