finished userpage

backend/api/user_info.py

@@ -119,7 +119,31 @@ def post(self):
             self.response_obj['success'] = "false"
             self.response_obj['message'] = "User not found."
             return make_response(jsonify(self.response_obj), 404)
-
+
+delete_user_parser = reqparse.RequestParser()
+delete_user_parser.add_argument('username', type=str, required=True, help='username is required')
+
+class DeleteAccountApi(Resource):
+    def __init__(self):
+        self.response_obj = {
+            'success': "true",
+            'message': "",
+            'code': 0,
+            }
+    def post(self):
+        data = delete_user_parser.parse_args()
+        if(User.find_by_username(data['username'])):
+            # return the user info
+            user = User.query.filter_by(user_name=data['username']).first()
+            # delete the user
+            user.delete(user.user_name)
+            self.response_obj['message'] = "User deleted."
+            return make_response(jsonify(self.response_obj), 200)
+        else:
+            self.response_obj['success'] = "false"
+            self.response_obj['message'] = "User not found."
+            return make_response(jsonify(self.response_obj), 404)
+
 
 
 

backend/models.py

@@ -38,6 +38,11 @@ def save(self):
         db.session.add(self)
         db.session.commit()
     @classmethod
+    def delete(cls, user_name):
+        user = cls.query.filter_by(user_name=user_name).first()
+        db.session.delete(user)
+        db.session.commit()
+    @classmethod
     def find_by_username(cls, username):
         return cls.query.filter_by(user_name = username).first()
 

backend/utils/__init__.py

@@ -8,7 +8,7 @@
 from api.tag_list import  TagUserApi
 from api.search import SearchApi
 from api.user_info import UserInfoApi
-from api.user_info import ChangePasswordAPi
+from api.user_info import ChangePasswordAPi,DeleteAccountApi
 
 from api.posts import PostApi, PostCommentApi
 from api.upload import UploadAvatarApi, FindAvatarApi
@@ -33,6 +33,7 @@ def add_apis():
     api.add_resource(FindAvatarApi, '/api/find/avatar')
     api.add_resource(ChangeUserInfoAPi, '/api/user/change')
     api.add_resource(ChangePasswordAPi, '/api/user/change/password')
+    api.add_resource(DeleteAccountApi, '/api/user/delete')
 # //////////////////////// api ////////////////////////
 
 # //////////////////////// blueprints ////////////////////////

frontend/src/components/SingleTag.vue

@@ -6,13 +6,11 @@
           <el-button class="button" text>Operation button</el-button>
         </div>
       </template>
-      <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
+
     </el-card>
   </template>
 
   <script setup>
-  import useStore from '../stores/store.js'
-  const store = useStore()
   // set box-card style
   
 

frontend/src/http/api.js

@@ -13,6 +13,8 @@ export const getArticlesList = (data) => $http.get('/api/articleslist', data)
 // /api/user?user=username 
 export const getUserInfo = (data) => $http.get('/api/user', data)
 
+export const deleteAccount = (data) => $http.post('/api/user/delete', data)
+
 export const changeUserInfo = (data) => $http.post('/api/user/change', data)
 
 // /api/tags?user=username

frontend/src/views/UserPage.vue

@@ -40,7 +40,7 @@
                                 Once you delete your account, it is irreverseable.<b>Please be careful.</b>
                             </p>
 
-                            <el-button type="danger" class="delete-button">Delete your account</el-button>
+                            <el-button type="danger" class="delete-button" @click="dialogDeleteVisible=true">Delete your account</el-button>
                         </div>
                         <hr>
 
@@ -57,7 +57,20 @@
         </div>
 
 
+        <el-dialog v-model="dialogDeleteVisible" title="change your password" width="30%">
+            <div style="display: flex;flex-direction: column;">
+                <h6>Once you delete your account, it is irreverseable.<b>Please be careful.</b></h6>
 
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogDeleteVisible = false">Cancel</el-button>
+                    <el-button type="danger" @click="deleteAccountSub">
+                        Confirm Delete
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
 
 
         <el-dialog v-model="dialogPasswordVisible" title="change your password" width="30%">
@@ -93,13 +106,14 @@ import UserCard from '../components/UserCard.vue'
 import RecentBlock from '../components/RecentBlock.vue'
 import PasswordPic from '../components/icons/PasswordPic.vue'
 import useStore from '../stores/store.js'
-import { getUserInfo, changePassword } from '../http/api'
+import { getUserInfo, changePassword,deleteAccount } from '../http/api'
 import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 
 // ////////////////////////////////////////////////////////////
 
 let dialogPasswordVisible = ref(false)
+let dialogDeleteVisible = ref(false)
 
 const passwordGroup = reactive({
     username:'',
@@ -140,9 +154,17 @@ getUserInfo(data).then((res) => {
     console.log(err)
 })
 
-// const deleteAccount = () => {
-//     console.log('delete')
-// }
+const deleteAccountSub = () => {
+    deleteAccount(userIndex).then((res) => {
+        console.log(res)
+        dialogDeleteVisible.value = false
+        window.location.href = '/login'
+        ElMessage.success('Delete your account successfully')
+    }).catch((err) => {
+        console.log(err.response.data.message)
+        ElMessage.error(err.response.data.message)
+    })
+}
 
 const changePassWordSub = () => {
     dialogPasswordVisible.value = false