init tag page

backend/api/tag_list.py

@@ -3,6 +3,7 @@
 # api/tags
 from flask_restful import Resource, reqparse
 from flask import jsonify, make_response
+from models import Tags
 
 # class TagApi(Resource):
 #     def get(self):
@@ -40,4 +41,23 @@ def __init__(self):
 
 
     # def post(self):
-    #     return make_response(jsonify(self.response_obj_sample), 200)
+    #     return make_response(jsonify(self.response_obj_sample), 200)
+
+class AllTagsApi(Resource):
+    def __init__(self):
+        self.response_obj_sample = {
+            'tags': [
+
+            ]
+        }
+
+    def get(self):
+        # fetch all the tags from the database
+        tags = Tags.query.all()
+        for tag in tags:
+            self.response_obj_sample['tags'].append({
+                'tag_name':tag.tag_name,
+                'tag_description':tag.tag_description,
+            })
+
+        return make_response(jsonify(self.response_obj_sample), 200)

backend/api/tests.py

@@ -1,4 +1,5 @@
 from flask_restful import Resource
+from controller.tag_controller import generate_basic_tags
 
 class TestApi(Resource):
     """
@@ -7,4 +8,5 @@ class TestApi(Resource):
 
     """
     def get(self):
+        # generate_basic_tags()
         return {'message': 'Hello, World!'}

backend/app.py

@@ -8,6 +8,7 @@
 from utils import add_apis,add_blueprints
 from api import api_bp, api
 from flask_jwt_extended import JWTManager
+from controller.tag_controller import generate_basic_tags
 # //////////// create app //////////// #
 app = Flask(__name__)
 app.config.from_object(config)
@@ -22,3 +23,4 @@
 
 if __name__ == 'main':
     app.run(debug=True, port=8000)
+

backend/controller/tag_controller.py

@@ -0,0 +1,24 @@
+from models import Tags
+from extension import db
+
+def generate_basic_tags():
+
+
+    tag_dict = {
+        'Python': 'Python is a widely used high-level, general-purpose, interpreted, dynamic programming language.',
+        'Flask': 'Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries.',
+        'llvm': 'llvm is a compiler framework for c/c++ and other languages, it is used in programming language research and development, and it is also used in many open source projects, such as clang, gcc, and so on.',
+        'c++': 'c++ is a programming language which is widely used in system programming, and it is a superset of c. It is a general-purpose programming language, and it is a middle-level language, which is compiled by a compiler',
+        'java': 'java is a programming language which is widely used in web backend, and it is initaily in the style of c.It uses oop to develop software, and it is widely used in the development of android applications.',
+        'javascript': 'javascript is a programming language which is widely used in web frontend, and it is initaily in the style of c.It uses oop to develop software, and it is widely used in the development of android applications.',
+
+    }
+    # add the dict into db
+    for key, value in tag_dict.items():
+        tag = Tags(tag_name=key, tag_description=value)
+        db.session.add(tag)
+        db.session.commit()
+
+
+    return True
+

backend/controller/user_info_controller.py

@@ -1,4 +1,4 @@
-import imp
+
 
 from flask import jsonify
 from models import User

backend/migrations/versions/4b5314e82be5_.py → backend/migrations/versions/324a6969ab6b_.py

@@ -1,16 +1,16 @@
 """empty message
 
-Revision ID: 4b5314e82be5
+Revision ID: 324a6969ab6b
 Revises: 
-Create Date: 2022-12-11 21:37:42.681215
+Create Date: 2022-12-12 02:47:55.373630
 
 """
 from alembic import op
 import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
-revision = '4b5314e82be5'
+revision = '324a6969ab6b'
 down_revision = None
 branch_labels = None
 depends_on = None
@@ -68,6 +68,7 @@ def upgrade():
     op.create_table('Tags',
     sa.Column('tag_id', sa.Integer(), nullable=False),
     sa.Column('tag_name', sa.String(length=20), nullable=False),
+    sa.Column('tag_description', sa.String(length=100), nullable=True),
     sa.Column('tag_corr_article', sa.Integer(), nullable=True),
     sa.ForeignKeyConstraint(['tag_corr_article'], ['Article.article_id'], ),
     sa.PrimaryKeyConstraint('tag_id')

backend/models.py

@@ -105,6 +105,8 @@ class Tags(db.Model):
     tag_id = db.Column(db.Integer, primary_key=True)
     # tag name
     tag_name = db.Column(db.String(20),nullable=False)
+    # tag description
+    tag_description = db.Column(db.String(100),nullable=True)
     # tag article, which is a foreign key, link to article table article_id
     tag_corr_article = db.Column(db.Integer, db.ForeignKey('Article.article_id'))
     # the article can be ref by tag.article

backend/utils/__init__.py

@@ -5,7 +5,7 @@
 
 from api.article_content import ArticleContentApi
 from api.article_lists import ArticlesListApi
-from api.tag_list import  TagUserApi
+from api.tag_list import  TagUserApi,AllTagsApi
 from api.search import SearchApi
 from api.user_info import UserInfoApi
 from api.user_info import ChangePasswordAPi,DeleteAccountApi
@@ -28,6 +28,7 @@ def add_apis():
     api.add_resource(PostCommentApi, '/api/comment')
     api.add_resource(SearchApi, '/api/search')
     api.add_resource(TagUserApi, '/api/tags')
+    api.add_resource(AllTagsApi, '/api/alltags')
     api.add_resource(UserInfoApi, '/api/user')
     api.add_resource(UploadAvatarApi, '/api/upload/avatar')
     api.add_resource(FindAvatarApi, '/api/find/avatar')

frontend/src/components/TagsArea.vue

@@ -0,0 +1,76 @@
+<template>
+<div v-for="(item, index) in allTags" :key="index">
+  <el-card class="box-card">
+      <template #header>
+          <span><el-tag size="large" class="font-setter-big"  effect="light" >{{ item.tag_name }}</el-tag></span>
+      </template>
+      <div>
+        <p class="card-body">
+          {{ item.tag_description }}
+        </p>
+      </div>
+
+
+  </el-card>
+</div>
+  </template>
+
+  <script setup>
+  // set box-card style
+  import {ref,reactive} from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { getTags } from '../http/api';
+  import { all } from 'axios';
+
+  const allTags = ref([])
+
+  const data = reactive({
+    params: {
+      username: sessionStorage.getItem('user_name')
+    }
+  })
+
+  getTags().then((res) => {
+    allTags.value = res.data.tags
+    console.log(allTags.value)
+  }).catch((err) => {
+    console.log(err)
+  })
+
+  </script>
+
+<style scoped>
+.card-body{
+  /* 最多显示四排字 */
+  min-height: 102px;
+  padding: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  
+}
+.font-setter-big{
+  font-size: 17px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+.box-card {
+  width: 250px;
+}
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .text {
+    font-size: 14px;
+  }
+  
+  .item {
+    margin-bottom: 18px;
+  }
+  
+
+  
+  </style>

frontend/src/http/api.js

@@ -29,7 +29,7 @@ export const getArticlesListByUser = (data) => $http.get('/api/articleslist', da
 // /api/article?article_id=article_id
 export const getArticle = (data) => $http.get('/api/article', data)
 // api/tags
-export const getTags = (data) => $http.get('/api/tags', data)
+export const getTags = (data) => $http.get('/api/alltags', data)
 
 // /api/post
 export const postArticle = (data) => $http.post('/api/post', data)

frontend/src/views/Tags.vue

@@ -23,24 +23,17 @@
         <div class="main-area flex column">
 
             <div class="tag-grid grid ">
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
-                <SingleTag></SingleTag>
+                <TagsArea></TagsArea>
             </div>
         </div>
     </div>
 </template>
 <script setup>
 /////////////////////////////////////////////////
-import SingleTag from '../components/SingleTag.vue'
+import TagsArea from '../components/TagsArea.vue'
 import NavBar from '../components/NavBar.vue'
 import TagdecVue from '../components/icons/Tagdec.vue'
+import {ref} from 'vue'
 /////////////////////////////////////////////////
 
 </script>