修改昵称
This commit is contained in:
username
parent
952447ec70
commit
5415e64853
@ -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 }
|
||||
})
|
||||
}
|
||||
|
||||
10
src/api/personal.js
Normal file
10
src/api/personal.js
Normal file
@ -0,0 +1,10 @@
|
||||
import request from '../utils/request'
|
||||
|
||||
// 修改
|
||||
export function updateUse (data) {
|
||||
return request({
|
||||
url: '/updateUser',
|
||||
method: 'put',
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -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>
|
||||
@ -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: '您已退出',
|
||||
|
||||
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
@ -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 // 请求超时时间
|
||||
})
|
||||
|
||||
|
||||
@ -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"
|
||||
@ -132,9 +115,7 @@
|
||||
</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 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;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user