李肖鹏修改前端

blog/font/blog/src/App.vue

@@ -6,14 +6,14 @@
   <div>
   <!-- 跳转路由 图片点击跳转到首页 -->
     <RouterLink to="/home">
-      <img src="./assets/img/index.png" alt="点击回到主页">
+      <img src="./assets/img/index.png" alt="back to home">
     </RouterLink>
   </div>
   
   <div>
     <!-- 跳转路由 跳转到登录 或者个人页面-->
     <RouterLink to="/personalSpace">
-      <img :src="imgUrl" alt="点击登录">
+      <img :src="imgUrl" alt="clike to login">
     </RouterLink>
   </div>
   
@@ -47,10 +47,10 @@
 
     loginRoute.value = {path: '/personalSpace'}
     imgUrl.value = Login
-    console.log('已经登录',imgUrl.value)
+    console.log('already login',imgUrl.value)
     }
     else{
-      console.log('未登录')
+      console.log('not login')
     }
   });
 </script>

blog/font/blog/src/components/login/PersonalSpace.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="user-profile">
-    <h2>个人空间</h2>
+    <h2>personalSpace</h2>
     <div class="profile-info">
       <img src="../../assets/img/11.jpg" alt="Avatar" class="avatar" />
       <p><strong>用户名:</strong> {{ loginStore.userInfo.username }}</p>
       
     </div>
-    <button @click="logout">登出</button>
-    <button @click="showEditDialog = true">修改信息</button>
+    <button @click="logout">exit</button>
+    <button @click="showEditDialog = true">modify information</button>
   </div>
 <!-- 文章展示区域 -->
   <div class="articles">
     <div class="articles-header">
-    <b class="articles-title">你的全部文章</b>
+    <b class="articles-title">all of your articles</b>
     以
     <select v-model="selectedOption" class="dropdown-select">
-      <option value="byLike">最受欢迎</option>
-      <option value="byData">发布日期</option>
+      <option value="byLike">heat</option>
+      <option value="byData">date</option>
     </select>
     排序
-    <button class="confirm-button" @click="">确认</button>
+    <button class="confirm-button" @click="">confirm</button>
     </div>
         <div class="article">
           <!-- 文章内容 -->
@@ -242,7 +242,7 @@ button:hover {
 .dropdown-select {
   margin-left: 10px;
   padding: 5px;
-  border: 1px solid #842525;
+  border: 1px solid #ccc8c8;
   border-radius: 4px;
 }
 </style>

blog/font/blog/src/components/utils/Article.vue

@@ -8,11 +8,11 @@
       </div>
       <div class="article-details">
         <div class="article-buttons" v-if="showButtons">
-          <button class="edit-button" @click.stop="handleEdit">修改</button>
-          <button class="delete-button" @click.stop="handleDelete">删除</button>
+          <button class="edit-button" @click.stop="handleEdit">alter</button>
+          <button class="delete-button" @click.stop="handleDelete">delete</button>
         </div>
-        <div class="article-likes">点赞数: {{ Likes }}</div>
-        <div class="article-published-date">发布时间: {{ updated_at }}</div>
+        <div class="article-likes">likes: {{ Likes }}</div>
+        <div class="article-published-date">time of release {{ updated_at }}</div>
       </div>
     </div>
   </div>
@@ -32,9 +32,9 @@ const props = defineProps(['post_id','user_id','username','title','updated_at','
 
 console.log("Likes:",props.Likes);
 function handleDelete() {
-  ElMessageBox.confirm('您确定要删除这篇文章吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+  ElMessageBox.confirm('sure?', '提示', {
+    confirmButtonText: 'yse',
+    cancelButtonText: 'no',
     type: 'warning'
   }).then(() => {
     // 用户点击确定
@@ -43,11 +43,11 @@ function handleDelete() {
         post_id: props.post_id, // 传递 post_id 参数
       }
     })
-    toast.success("删除成功");
+    toast.success("success");
     emit('destroy');
   }).catch(() => {
     // 用户点击取消
-   console.log('要删除的文章id是',props.post_id)
+   console.log('what’s the id？',props.post_id)
   });
 }
 

blog/font/blog/src/components/utils/Paper.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="paper-container">
     <h1>{{ paper.title }}</h1>
-    <p><strong>作者:</strong> {{ paper.writer }}</p>
-    <p><strong>发布时间:</strong> {{ paper.updated_at }}</p>
+    <p><strong>author:</strong> {{ paper.writer }}</p>
+    <p><strong>date-time</strong> {{ paper.updated_at }}</p>
     <div class="interaction-buttons">
       <button @click="toggleLike" :class="{ active: isLiked }">
         <img :src="likeIconSrc" alt="Like" class="icon">
-        点赞数{{ paper.Likes }}
+        Likes{{ paper.Likes }}
       </button>
       <button @click="toggleDislike" :class="{ active: isDisliked }">
         <img :src="dislikeIconSrc" alt="Dislike" class="icon">
@@ -64,8 +64,8 @@ function getpaper(){
   
   axios.get('http://127.0.0.1:8080/post/essay',{ params: {post_id:post_id}})
     .then(res => {
-      console.log("获取文章详情数据成功", res.data.data);
-      console.log("传入对象");
+      console.log("success", res.data.data);
+      console.log("object");
       paper.id = res.data.data.post_id
       paper.title = res.data.data.title
       paper.content = res.data.data.content
@@ -113,6 +113,7 @@ onMounted(() => {
   background-color: #fff;
   border: 1px solid #ccc;
   border-radius: 5px;
+  height: 900px; /* 设置固定高度 */
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 

blog/font/blog/src/components/utils/StartWriting.vue

@@ -33,11 +33,11 @@
     right: 30px;
     padding: 12px 22px;
     background-color: #ffffff;
-    color: white;
+    color: rgb(12, 1, 1);
     border: none;
-    border-radius: 5px;
+    border-radius: 10px;
     cursor: pointer;
-    box-shadow: 0 2px 5px rgba(44, 0, 0, 0.3);
+    box-shadow: 0 4px 10px rgba(44, 0, 0, 0.3);
     z-index: 1000; /* 确保按钮在最上层 */
   }
   

blog/font/blog/src/components/writeBlog/Writing.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="writing-container">
     <!-- 标题输入框 -->
-    <input v-model="title" class="title-input" placeholder="请输入文章标题" />
+    <input v-model="title" class="title-input" placeholder="please enter title" />
     <!-- 编辑器与预览容器 -->
     <div class="content-container">
       <div class="editor-container">
@@ -95,7 +95,7 @@ const scrollToTop = () => {
   .then(response => {
     // 处理成功响应
     console.log(response.data);
-    toast.success("发布成功");
+    toast.success("success");
     // 跳转回主页
 
   })
@@ -107,7 +107,7 @@ const scrollToTop = () => {
   }
   else{
     //保存修改按钮按下后的逻辑
-    console.log("正在修改中",post_id)
+    console.log("modifying",post_id)
     //
     console.log(title.value,'id',post_id)
     axios.post('http://localhost:8080/post/update', {

blog/font/blog/src/page/Announcement.vue

@@ -29,10 +29,10 @@ function getAll() {
     axios.get('http://127.0.0.1:8080/announcements')
         .then(res => {
             // 使用扩展运算符来保持响应性
-            console.log("开始存放",res.data)
+            console.log("Start storage",res.data)
             announcements.splice(0, announcements.length)
             announcements.push(...res.data.data)
-            console.log("获取公告数据成功", res.data.data);
+            console.log("acquire success", res.data.data);
         })
         .catch(error => console.error('There was an error fetching the data!', error))
 }
@@ -69,7 +69,7 @@ function getAll() {
   }
   
   .announcement-time {
-    color: #ac2626;
+    color: #bbb5b5;
     font-size: 0.9em;
     margin-bottom: 10px;
   }

blog/font/blog/src/page/Home.vue

@@ -19,11 +19,11 @@
           <b class="articles-title"></b>
           按照
           <select v-model="selectedOption" class="dropdown-select">
-            <option value="byLike">最受欢迎</option>
-            <option value="byData">发布日期</option>
+            <option value="byLike">popularity</option>
+            <option value="byData">date</option>
           </select>
           排序
-          <button class="confirm-button" @click="handleConfirm">确认</button>
+          <button class="confirm-button" @click="handleConfirm">verify</button>
         </div>
 
         <div class="article">
@@ -36,9 +36,9 @@
       </div>
     </div>
     <!-- 开始写作按钮 -->
-    <StartWriting buttonText="开始写作" />
+    <StartWriting buttonText="start writing" />
     <!-- 回到顶部按钮 -->
-    <button class="scroll-to-top" @click="scrollToTop">回到顶部</button>
+    <button class="scroll-to-top" @click="scrollToTop">back top</button>
   </div>
 </template>
 
@@ -75,7 +75,7 @@ function getAll(by: string) {
     // 使用扩展运算符来保持响应性
     postOverviewList.splice(0, postOverviewList.length)
     postOverviewList.push(...res.data.data)
-    console.log("获取文章概览数据成功", res.data.data);
+    console.log("success", res.data.data);
   })
   .catch(error => console.error('There was an error fetchingthe data!', error))
 }
@@ -89,7 +89,7 @@ const scrollToTop = () => {
 };
 // 处理选择确认按钮点击事件的方法
 const handleConfirm = () => {
-  console.log('选择的选项是:', selectedOption.value);
+  console.log('选择的是:', selectedOption.value);
   getAll(selectedOption.value)
   // 在这里可以添加更多的逻辑来处理选择确认的操作
 };
@@ -161,7 +161,7 @@ onMounted(()=>{
   right: 20px;
   padding: 10px 20px;
   background-color: #1468c3;
-  color: rgb(132, 30, 30);
+  color: rgb(142, 120, 120);
   border: none;
   border-radius: 5px;
   cursor: pointer;
@@ -186,7 +186,7 @@ onMounted(()=>{
 .dropdown-select {
   margin-left: 10px;
   padding: 5px;
-  border: 1px solid #c20505;
+  border: 1px solid #8a7979;
   border-radius: 4px;
   background-color: rgb(0, 123, 255);
 }

blog/font/blog/src/page/Login.vue

@@ -3,17 +3,17 @@
     <h2>登录</h2>
     <form @submit.prevent="handleLogin">
       <div class="form-group">
-        <label for="username">用户名</label>
+        <label for="username">username</label>
         <input type="text" id="username" v-model="username" required />
       </div>
       <div class="form-group">
-        <label for="password">密码</label>
+        <label for="password">secret code</label>
         <input type="password" id="password" v-model="password" required />
       </div>
-      <button type="submit">登录</button>
+      <button type="submit">login</button>
       <div class="action-buttons">
-        <button type="button" @click="handleForgotPassword">找回密码</button>
-        <button type="button" @click="handleRegister">注册</button>
+        <button type="button" @click="handleForgotPassword">get the code back</button>
+        <button type="button" @click="handleRegister">register</button>
       </div>
     </form>
   </div>
@@ -31,8 +31,8 @@ const password = ref('');
 const store = useLoginStore();
 const handleLogin = async () => {
   // 这里可以添加登录逻辑，例如调用 API 进行验证
-  console.log('用户名:', username.value);
-  console.log('密码:', password.value);
+  console.log('username:', username.value);
+  console.log('secret passward:', password.value);
   
   try {
     // 后端检查账号密码是否正确
@@ -49,7 +49,7 @@ const handleLogin = async () => {
     console.log(response.data.code);
     if (response.data.code === 1) {
       // 登录成功
-      console.log('登录成功');
+      console.log('Success');
       store.userInfo.token = response.data.data;
       store.userInfo.username = username.value;
       router.push('/home');
@@ -57,10 +57,10 @@ const handleLogin = async () => {
       return;
     } else {
       // 登录失败
-      alert('用户名或密码错误');
+      alert('error');
     }
   } catch (error) {
-    console.error('登录请求失败:', error);
+    console.error('defected:', error);
     // 处理登录失败的逻辑
   }
 
@@ -71,7 +71,7 @@ const handleLogin = async () => {
 
 const handleForgotPassword = () => {
   // 处理找回密码逻辑
-  console.log('找回密码');
+  console.log('get the code back');
   // 例如重定向到找回密码页面
   router.push('/retrievePassword');
 };