修改昵称

2024-06-16 17:45:01 +08:00 · 2024-06-16 17:45:01 +08:00 · 5415e64853
commit 5415e64853
parent 952447ec70
8 changed files with 283 additions and 123 deletions
--- 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 }
+  })
+}
--- a/src/api/personal.js
+++ 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
+  })
+}
--- 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: '您已退出',
--- 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
  }
 })
--- 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 // 请求超时时间
 })

--- 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="nickname">昵称：</label>
+                  <label for="username">昵称：</label>
                  <input
                    type="text"
-                  id="nickname"
-                  v-model="nickname"
-                  placeholder="请输入昵称"
+                    id="username"
+                    v-model="form.username"
+                    placeholder="请输入修改的昵称"
                  />
                </div>
-              <!-- 介绍 -->
                <div class="form-item">
                  <label for="intro">介绍：</label>
-                <input id="intro" v-model="intro" placeholder="请输入介绍" />
+                  <input id="intro" v-model="form.intro" placeholder="请输入介绍" />
                </div>
-              <!-- 性别 -->
                <div class="form-item">
                  <label>性别：</label>
-                <input type="radio" v-model="gender" value="male" />男
+                  <input type="radio" v-model="form.gender" value="male" />男
                  <input
                    type="radio"
-                  v-model="gender"
+                    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="birthday" />
+                  <input type="date" id="birthday" v-model="form.birthday" />
                </div>
-              <!-- 地区选择 -->
                <div class="form-item">
                  <label for="region">地区：</label>
-                <select id="region" v-model="region">
+                  <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="region" v-model="city" style="margin-left: 10px">
-                  <option value="city1">地区1</option>
-                  <option value="city2">地区2</option>
-                  <option value="city3">地区3</option>
+                  <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">
-                <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: '',
+      form: {
+        username: '',
        intro: '',
        gender: '',
        birthday: '',
        region: '',
-      city: '',
+        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;
--- 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) {
--- 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)
    }
  }
 }