From 5415e64853159e1cbd5f4fb9f19b7da8244cb287 Mon Sep 17 00:00:00 2001
From: username <2971861643@qq.com>
Date: Sun, 16 Jun 2024 17:45:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=98=B5=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.js                      |  20 +++
 src/api/personal.js                   |  10 ++
 src/components/navigationBar.vue      |  69 ++++++--
 src/store/index.js                    |  23 ++-
 src/utils/request.js                  |   2 +-
 src/views/AboutUs.vue                 | 219 +++++++++++++++-----------
 src/views/login.vue                   |   7 +-
 src/views/particulars/paiListPage.vue |  56 +++++--
 8 files changed, 283 insertions(+), 123 deletions(-)
 create mode 100644 src/api/personal.js

diff --git a/src/api/login.js b/src/api/login.js
index 9491871..8c5186e 100644
--- a/src/api/login.js
+++ b/src/api/login.js
@@ -1,5 +1,6 @@
 import request from '../utils/request'
 
+// 登录接口
 export function login (data) {
   return request({
     url: '/login',
@@ -8,6 +9,7 @@ export function login (data) {
   })
 }
 
+// 自动登录接口
 export function autoLogin (token) {
   return request({
     url: '/auto-login',
@@ -15,3 +17,21 @@ export function autoLogin (token) {
     data: { token }
   })
 }
+
+// 修改用户信息
+export function updateUserInfo (data) {
+  return request({
+    url: '/update-user-info',
+    method: 'put',
+    data
+  })
+}
+
+// 获取用户信息接口
+export function getUserInfo (username) {
+  return request({
+    url: '/user-info',
+    method: 'get',
+    params: { username }
+  })
+}
diff --git a/src/api/personal.js b/src/api/personal.js
new file mode 100644
index 0000000..bfdf9c0
--- /dev/null
+++ b/src/api/personal.js
@@ -0,0 +1,10 @@
+import request from '../utils/request'
+
+// 修改
+export function updateUse (data) {
+  return request({
+    url: '/updateUser',
+    method: 'put',
+    data
+  })
+}
diff --git a/src/components/navigationBar.vue b/src/components/navigationBar.vue
index ebefede..c989c54 100644
--- a/src/components/navigationBar.vue
+++ b/src/components/navigationBar.vue
@@ -9,22 +9,34 @@
           <router-link to="/" exact-active-class="active">首页</router-link>
         </li>
         <li>
-          <router-link to="/labelpage" exact-active-class="active">标签</router-link>
+          <router-link to="/labelpage" exact-active-class="active"
+            >标签</router-link
+          >
         </li>
         <li>
-          <router-link to="/listPage" exact-active-class="active">专题</router-link>
+          <router-link to="/listPage" exact-active-class="active"
+            >专题</router-link
+          >
         </li>
         <li>
-          <router-link to="/messageboard" exact-active-class="active">留言板</router-link>
+          <router-link to="/messageboard" exact-active-class="active"
+            >留言板</router-link
+          >
         </li>
         <li>
-          <router-link to="/photoGallery" exact-active-class="active">照片集</router-link>
+          <router-link to="/photoGallery" exact-active-class="active"
+            >照片集</router-link
+          >
         </li>
         <li>
-          <router-link to="/interlinkage" exact-active-class="active">友情链接</router-link>
+          <router-link to="/interlinkage" exact-active-class="active"
+            >友情链接</router-link
+          >
         </li>
         <li>
-          <router-link to="/about" exact-active-class="active">个人中心</router-link>
+          <router-link to="/about" exact-active-class="active"
+            >个人中心</router-link
+          >
         </li>
       </ul>
       <div class="search" @click.stop>
@@ -35,9 +47,13 @@
           style="width: 230px; margin-right: 10px"
           @keyup.enter="performSearch"
         ></el-input>
-        <el-button icon="el-icon-search" circle @click="performSearch"></el-button>
+        <el-button
+          icon="el-icon-search"
+          circle
+          @click="performSearch"
+        ></el-button>
         <el-avatar style="margin-left: 10px; position: absolute; top: 10px">
-          <router-link to="/about">user</router-link>
+          <router-link to="/about"> {{ lastCharacterOfUsername }}</router-link>
         </el-avatar>
         <div class="out" @click="handleOut">退出</div>
         <div v-if="resultsVisible" class="search-results" @click.stop>
@@ -46,7 +62,7 @@
               <router-link :to="result.link">{{ result.title }}</router-link>
             </li>
           </ul>
-          <p v-else >暂无内容</p>
+          <p v-else>暂无内容</p>
         </div>
       </div>
     </div>
@@ -54,18 +70,31 @@
 </template>
 
 <script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+
 export default {
   data () {
     return {
-      input: '',
-      searchResults: [],
       isFixed: false, // 导航栏是否固定的数据属性
+      input: '', // 搜索框输入值
+      searchResults: [], // 搜索结果
       resultsVisible: false // 控制搜索结果显示/隐藏的属性
     }
   },
+  computed: {
+    ...mapState(['username']),
+    ...mapGetters(['getUsername']),
+    lastCharacterOfUsername () {
+      if (this.username) {
+        return this.username.slice(-1) // 提取用户名的最后一个字符
+      }
+      return '' // 处理用户名不可用的情况
+    }
+  },
   mounted () {
     window.addEventListener('scroll', this.handleScroll)
     document.addEventListener('click', this.hideResults)
+    this.loadUsername() // 在页面加载时尝试加载用户名
   },
   beforeDestroy () {
     window.removeEventListener('scroll', this.handleScroll)
@@ -76,6 +105,15 @@ export default {
       const scrollTop = window.scrollY || document.documentElement.scrollTop
       this.isFixed = scrollTop > 60
     },
+    loadUsername () {
+      const username = localStorage.getItem('username')
+      if (username) {
+      // 如果 localStorage 中有用户名，则将其设置到 Vuex store 中
+        this.$store.commit('setUsername', username)
+        console.log('从 localStorage 中加载用户名：', username)
+      }
+    },
+    ...mapActions(['updateUsername']),
     // 执行搜索
     performSearch () {
       if (!this.input.trim()) {
@@ -100,9 +138,18 @@ export default {
       )
       this.resultsVisible = true
     },
+    // 登录成功后设置用户名
+    loginSuccess (username) {
+    // 将用户名存储在 Vuex store 中
+      this.updateUsername(username) // 调用 Vuex action 更新用户名
+      console.log('登录成功，用户名已设置为：', username)
+    },
     // 退出
     handleOut () {
       localStorage.removeItem('token')
+      // 清除 Vuex store 中的用户名
+      this.$store.commit('setUsername', '')
+      localStorage.removeItem('username') // 从 localStorage 中删除用户名
       this.$router.push('/login')
       this.$message({
         message: '您已退出',
diff --git a/src/store/index.js b/src/store/index.js
index 5edfc47..80310be 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,4 +1,3 @@
-// src/store/index.js
 import Vue from 'vue'
 import Vuex from 'vuex'
 
@@ -6,11 +5,15 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-    isAuthenticated: false
+    isAuthenticated: false,
+    username: ''
   },
   mutations: {
     setAuthenticated (state, status) {
       state.isAuthenticated = status
+    },
+    setUsername (state, username) {
+      state.username = username
     }
   },
   actions: {
@@ -19,9 +22,23 @@ export default new Vuex.Store({
     },
     logout ({ commit }) {
       commit('setAuthenticated', false)
+    },
+    updateUsername ({ commit }, username) {
+      // 更新 Vuex 中的用户名
+      commit('setUsername', username)
+      // 更新 localStorage 中的用户名
+      localStorage.setItem('username', username)
+    },
+    loadUsernameFromLocalStorage ({ commit }) {
+      // 从 localStorage 加载用户名
+      const savedUsername = localStorage.getItem('username')
+      if (savedUsername) {
+        commit('setUsername', savedUsername)
+      }
     }
   },
   getters: {
-    isAuthenticated: state => state.isAuthenticated
+    isAuthenticated: state => state.isAuthenticated,
+    username: state => state.username
   }
 })
diff --git a/src/utils/request.js b/src/utils/request.js
index ee0678c..b2254b2 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -4,7 +4,7 @@ import router from '../router'
 
 // 创建一个 axios 实例
 const service = axios.create({
-  baseURL: 'http://localhost:5000/', // API 基础 URL
+  baseURL: 'http://localhost:5000', // API 基础 URL
   timeout: 5000 // 请求超时时间
 })
 
diff --git a/src/views/AboutUs.vue b/src/views/AboutUs.vue
index 5d7d18c..fc661cb 100644
--- a/src/views/AboutUs.vue
+++ b/src/views/AboutUs.vue
@@ -6,16 +6,11 @@
         <el-tab-pane label="个人信息">
           <div class="AboutUs-left">
             <div class="AboutUs-img">
-              <img src="../assets/images/sub.jpg" alt="用户头像" />
+              <img :src="avatar" alt="用户头像" />
             </div>
             <div class="user-info">
-              <div
-                v-for="(item, index) in users"
-                :key="index"
-                class="user-item"
-              >
-                <p class="user-name">{{ item.name }}</p>
-                <p class="user-date">{{ item.date }}</p>
+              <div class="user-item">
+                <p class="user-name">{{ username }}</p>
               </div>
             </div>
           </div>
@@ -50,75 +45,63 @@
 
         <el-tab-pane label="基本设置">
           <div class="basic-settings">
-            <!-- 左边内容 -->
             <div class="left-section">
-              <!-- 昵称 -->
+              <form :model="form">
+                <div class="form-item">
+                  <label for="username">昵称：</label>
+                  <input
+                    type="text"
+                    id="username"
+                    v-model="form.username"
+                    placeholder="请输入修改的昵称"
+                  />
+                </div>
+                <div class="form-item">
+                  <label for="intro">介绍：</label>
+                  <input id="intro" v-model="form.intro" placeholder="请输入介绍" />
+                </div>
+                <div class="form-item">
+                  <label>性别：</label>
+                  <input type="radio" v-model="form.gender" value="male" />男
+                  <input
+                    type="radio"
+                    v-model="form.gender"
+                    value="female"
+                    style="margin-left: 10px"
+                  />女
+                </div>
+                <div class="form-item">
+                  <label for="birthday">生日：</label>
+                  <input type="date" id="birthday" v-model="form.birthday" />
+                </div>
+                <div class="form-item">
+                  <label for="region">地区：</label>
+                  <select id="region" v-model="form.region">
+                    <option value="region1">地区1</option>
+                    <option value="region2">地区2</option>
+                    <option value="region3">地区3</option>
+                  </select>
+                  <select id="city" v-model="form.city" style="margin-left: 10px">
+                    <option value="city1">城市1</option>
+                    <option value="city2">城市2</option>
+                    <option value="city3">城市3</option>
+                  </select>
+                </div>
+              </form>
               <div class="form-item">
-                <label for="nickname">昵称：</label>
-                <input
-                  type="text"
-                  id="nickname"
-                  v-model="nickname"
-                  placeholder="请输入昵称"
-                />
-              </div>
-              <!-- 介绍 -->
-              <div class="form-item">
-                <label for="intro">介绍：</label>
-                <input id="intro" v-model="intro" placeholder="请输入介绍" />
-              </div>
-              <!-- 性别 -->
-              <div class="form-item">
-                <label>性别：</label>
-                <input type="radio" v-model="gender" value="male" />男
-                <input
-                  type="radio"
-                  v-model="gender"
-                  value="female"
-                  style="margin-left: 10px"
-                />女
-              </div>
-              <!-- 生日 -->
-              <div class="form-item">
-                <label for="birthday">生日：</label>
-                <input type="date" id="birthday" v-model="birthday" />
-              </div>
-              <!-- 地区选择 -->
-              <div class="form-item">
-                <label for="region">地区：</label>
-                <select id="region" v-model="region">
-                  <option value="region1">地区1</option>
-                  <option value="region2">地区2</option>
-                  <option value="region3">地区3</option>
-                </select>
-
-                <select id="region" v-model="city" style="margin-left: 10px">
-                  <option value="city1">地区1</option>
-                  <option value="city2">地区2</option>
-                  <option value="city3">地区3</option>
-                </select>
-              </div>
-              <!-- 保存按钮 -->
-              <div class="form-item">
-                <button class="save-btn" @click="saveUserInfo">保存</button>
+                <button class="save-btn" @click="saveUserInfo">修改</button>
               </div>
             </div>
-            <!-- 右边内容 -->
             <div class="right-section">
               <div class="avatar-section">
-                <!-- 头像显示 -->
                 <img :src="avatar" alt="用户头像" class="avatar" />
-                <!-- 更换头像按钮 -->
-                <span class="change-avatar-btn" @click="changeAvatar"
-                  >更换头像</span
-                >
+                <span class="change-avatar-btn" @click="changeAvatar">更换头像</span>
               </div>
             </div>
           </div>
         </el-tab-pane>
       </el-tabs>
 
-      <!-- 头像上传 -->
       <el-dialog title="更换头像" :visible.sync="dialogVisible" width="30%">
         <el-upload
           class="avatar-uploader"
@@ -131,10 +114,8 @@
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="handleAddAvatar"
-            >确 定</el-button
-          >
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleAddAvatar">确定</el-button>
         </span>
       </el-dialog>
     </div>
@@ -146,44 +127,105 @@
 <script>
 import navigationBar from '@/components/navigationBar.vue'
 import trigger from '@/components/trigger.vue'
+import { getUserInfo, updateUserInfo } from '@/api/login'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   data () {
     return {
       isShow: false,
-      nickname: '',
-      intro: '',
-      gender: '',
-      birthday: '',
-      region: '',
-      city: '',
+      form: {
+        username: '',
+        intro: '',
+        gender: '',
+        birthday: '',
+        region: '',
+        city: ''
+      },
       dialogVisible: false,
       imageUrl: '',
-      avatar: require('@/assets/images/789.jpg'), // 默认头像地址
-      users: [
-        {
-          name: '当前用户名',
-          date: '2024-01-01'
-        }
-      ],
+      name: '',
+      avatar: require('@/assets/images/sub.jpg'), // Define the avatar property
       newTodo: '',
-      todos: [], // 待办事项列表
-      selectedTodoIndex: null // 选中的待办事项索引
+      todos: [],
+      selectedTodoIndex: null
     }
   },
   components: {
     navigationBar,
     trigger
   },
+  computed: {
+    ...mapState({
+      username: state => state.username
+    })
+  },
+  created () {
+    this.$store.dispatch('loadUsernameFromLocalStorage')
+    const savedUsername = localStorage.getItem('name')
+    if (savedUsername) {
+      this.fetchUserInfo(savedUsername)
+    }
+  },
   methods: {
+    fetchUserInfo (username) {
+      getUserInfo(username)
+        .then((res) => {
+          if (res && res.data) {
+            const userInfo = res.data
+            this.form.username = userInfo.username
+            this.form.intro = userInfo.intro
+            this.form.gender = userInfo.gender
+            this.form.birthday = userInfo.birthday
+            this.form.region = userInfo.region
+            this.form.city = userInfo.city
+            this.avatar = userInfo.avatar || this.avatar
+
+            localStorage.setItem('userInfo', JSON.stringify(userInfo))
+          }
+        })
+        .catch((error) => {
+          console.error('获取用户信息失败：', error)
+        })
+    },
     toggleBackground () {
       this.isShow = true
     },
+    ...mapActions(['updateUsername']),
     saveUserInfo () {
-      // 保存用户信息的逻辑
-      this.$message.success('保存成功')
+      const currentUsername = localStorage.getItem('username') // 获取当前用户名
+
+      const updatedUserInfo = {
+        currentUsername,
+        username: this.form.username, // 新用户名
+        intro: this.form.intro,
+        gender: this.form.gender,
+        birthday: this.form.birthday,
+        region: this.form.region,
+        city: this.form.city,
+        avatar: this.form.avatar
+      }
+
+      this.$store.dispatch('updateUsername', this.form.username) // 使用正确的操作名
+
+      updateUserInfo(updatedUserInfo)
+        .then((res) => {
+          if (res && res.status === 200) {
+            this.$message.success('用户信息更新成功')
+
+            // 重新获取用户信息并更新界面
+            this.fetchUserInfo(this.form.username)
+          } else {
+            this.$message.error('用户信息更新失败')
+          }
+        })
+        .catch((error) => {
+          console.error('用户信息更新失败：', error)
+          this.$message.error('用户信息更新失败')
+        })
+
+      console.log(updatedUserInfo)
     },
-    // 添加按钮
     handleAdd () {
       if (this.newTodo.trim() !== '') {
         this.todos.push(this.newTodo.trim())
@@ -193,11 +235,9 @@ export default {
         this.$message.error('请输入待办事项')
       }
     },
-    // 选择待办事项
     selectTodo (index) {
       this.selectedTodoIndex = index
     },
-    // 删除按钮
     handleDelete () {
       if (this.selectedTodoIndex !== null) {
         this.todos.splice(this.selectedTodoIndex, 1)
@@ -208,7 +248,6 @@ export default {
       }
     },
     changeAvatar () {
-      // 更换头像的逻辑
       this.dialogVisible = true
     },
     handleAvatarSuccess (res, file) {
@@ -402,7 +441,7 @@ hr {
 .form-item {
   margin-bottom: 20px;
 
-  #nickname {
+  #username {
     width: 250px;
     padding: 5px;
     outline: none;
diff --git a/src/views/login.vue b/src/views/login.vue
index fe911d3..2d0de5c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -57,6 +57,7 @@
 
 <script>
 import { login, autoLogin } from '@/api/login'
+import store from '@/store'
 import dayjs from 'dayjs'
 
 export default {
@@ -114,7 +115,6 @@ export default {
     },
     autoLogin (token) {
       autoLogin(token).then(response => {
-        console.log(response)
         if (this.$route.path !== '/') {
           this.$router.push('/')
         }
@@ -142,7 +142,6 @@ export default {
       // 登录验证
       if (!this.create) {
         login({ ...this.form }).then(response => {
-          console.log(response)
           localStorage.setItem('token', response.data.token)
           if (this.checked) {
             localStorage.setItem('rememberedUsername', this.form.username)
@@ -160,6 +159,10 @@ export default {
             message: '登陆成功',
             type: 'success'
           })
+          // 保存用户名到 Vuex store
+          store.commit('setUsername', response.data.username)
+          // 保存用户名到 LocalStorage
+          localStorage.setItem('username', response.data.username)
         }).catch(error => {
           console.error('登录失败:', error)
           if (error.response && error.response.status === 401) {
diff --git a/src/views/particulars/paiListPage.vue b/src/views/particulars/paiListPage.vue
index 84d6117..d53ef22 100644
--- a/src/views/particulars/paiListPage.vue
+++ b/src/views/particulars/paiListPage.vue
@@ -3,15 +3,24 @@
     <main class="main-content">
       <div class="kecheng">
         <div class="empty" v-if="!detailContent.length">暂无内容</div>
-        <div class="con" v-for="(item, index) in detailContent" :key="index">
-          <div class="title" @click="pushDetailPage">{{ item.title }}</div>
+        <div class="con" v-for="(item, index) in paginatedContent" :key="index">
+          <div class="title" @click="pushDetailPage(item)">
+            {{ item.title }}
+          </div>
           <div class="content" v-html="item.content"></div>
         </div>
       </div>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="total"
+        :hide-on-single-page="conceal"
+        @current-change="handlePageChange"
+        style="margin: 20px 0 20px 500px;"
+      >
+      </el-pagination>
     </main>
-    <div class="fortter">
-
-    </div>
+    <div class="fortter"></div>
   </div>
 </template>
 
@@ -22,35 +31,50 @@ export default {
   name: 'liSt',
   data () {
     return {
-      detailContent: '' // 存储详情内容
+      detailContent: [], // 初始化为数组
+      conceal: true, // 是否隐藏分页
+      currentPage: 1, // 当前页码
+      pageSize: 10, // 每页显示的条目数
+      total: 0 // 总条目数
     }
   },
   created () {
-    this.fetchContent() // 获取内容
+    this.fetchContent() // 获取初始内容
   },
   methods: {
     fetchContent () {
-      const id = this.$route.params.id // 获取路由参数中的表序号
-      // 根据序号获取对应表的内容
-      getlist(id)
+      const id = this.$route.params.id // 获取路由参数
+      // 根据分页获取内容
+      getlist(id, (this.currentPage - 1) * this.pageSize, this.pageSize)
         .then((response) => {
-          // 处理返回的内容
           this.detailContent = response.data
           this.total = response.data.length
-          // console.log(response)
         })
         .catch((error) => {
-          console.error('Error fetching content:', error)
+          console.error('获取内容时出错：', error)
         })
     },
-    pushDetailPage () {
-      // 跳转到详情页面
+    pushDetailPage (item) {
+      // 带着条目 id 跳转到详情页
       this.$router.push({
         name: 'detailPage',
         params: {
-          id: this.$route.params.id
+          id: item.id // 假设条目有一个 id 属性
         }
       })
+    },
+    handlePageChange (newPage) {
+      // 处理页面变化
+      this.currentPage = newPage
+      this.fetchContent() // 获取新页面的内容
+    }
+  },
+  computed: {
+    paginatedContent () {
+      // 根据 currentPage 和 pageSize 计算分页内容
+      const startIndex = (this.currentPage - 1) * this.pageSize
+      const endIndex = startIndex + this.pageSize
+      return this.detailContent.slice(startIndex, endIndex)
     }
   }
 }