基于微信小程序开发的宠物领养平台——代码解读
项目前端
一、项目的技术架构概况
一句话概括:该项目是基于微信小程序开发的宠物领养平台,采用原生小程序框架进行用户界面的构建,使用 wx.request
进行 API 请求,并通过 getApp()
和本地存储来管理全局状态和用户信息。
一)技术栈主要包括
- 微信小程序框架:项目的核心框架,用于构建用户界面和实现交互逻辑。
- JavaScript:主要编程语言,项目中的所有逻辑均使用 JavaScript 实现。
- JSON:用于配置页面和组件的元信息,如页面路径、组件属性等。
- WXML:类似 HTML 的模板语言,用于定义页面结构。
- WXSS:类似 CSS 的样式表语言,用于定义页面和组件的样式。
- 本地存储:通过
wx.setStorageSync
和wx.getStorageSync
管理用户信息和 Token。 - 网络请求:使用
wx.request
进行 API 请求,与后端进行数据交互。
二)开发环境要求
- 微信开发者工具:用于开发和调试微信小程序。
- IDE:推荐使用 IDEA 或 VS Code,配合微信开发者工具进行开发。
- 依赖管理:通过微信开发者工具自带的依赖管理功能安装和管理项目依赖。
- 浏览器:Edge 或 Chrome,主要用于调试和查看控制台输出。
三)项目结构分析
└── pet_adoption├── backend│ ├── src│ │ └── main│ │ ├── java│ │ ├── resources│ │ └── webapp│ ├── adopt.sql│ └── pom.xml└── mp-weixin├── components│ └── comment├── pages│ ├── adopt│ ├── blog│ ├── comment│ ├── index│ ├── message│ ├── pet│ └── user├── static│ └── images├── subpackages│ ├── comment│ └── guide├── utils│ └── imagePathUtils.js├── app.js├── app.json├── config.js├── project.config.json└── project.private.config.json
关键目录说明
- mp-weixin/:微信小程序的主要目录,包含所有前端代码。
- components/:存放可复用的组件,如评论组件。
- pages/:存放各个页面的代码,每个页面有对应的
.js
、.json
、.wxml
和.wxss
文件。 - static/:存放静态资源,如图片。
- subpackages/:存放子包,用于分包加载优化性能。
- utils/:存放工具函数,如图片路径处理工具。
- app.js:应用的入口文件,包含全局状态管理和生命周期方法。
- app.json:应用的全局配置文件,定义了页面路径和窗口表现。
- config.js:配置文件,定义了不同环境下的 API 地址。
四)UI组件设计
1. 布局组件
- TabBar:项目中使用了 TabBar 进行页面导航,定义在
app.json
中,包含首页、宠物列表和个人中心三个主要页面。 - Swiper:用于实现轮播图组件,如首页的轮播图展示。
- Navigator:用于页面之间的跳转,常见于各个页面的跳转按钮。
2. 业务组件
- Form 组件:如
adopt/apply.js
中的领养申请表单,实现了表单验证和数据提交功能。 - List 组件:如
adopt/list.js
中的领养申请列表,支持分页加载、筛选和刷新功能。 - Modal 组件:用于显示确认对话框,如领养申请的审核通过和拒绝操作。
- Image 组件:处理图片路径和预览功能,如
blog/publish.js
中的图片上传和预览。
3. 数据流转
- Props 和 Events:小程序中通过
data
属性传递数据,通过bind
方法绑定事件,实现父子组件之间的通信。 - 全局状态管理:通过
getApp()
获取全局应用实例,使用globalData
管理全局状态,如用户信息、Token 和未读消息数。 - 本地存储:使用
wx.setStorageSync
和wx.getStorageSync
存储和读取用户信息和 Token,确保用户登录状态的持久化。 - API 请求:通过
wx.request
发起网络请求,与后端进行数据交互,请求结果通过Promise
进行处理,确保异步操作的可控性。
五)交互实现
1. 登录与鉴权
- 登录页面 (
user/login.js
):提供了微信登录和账号密码登录两种方式,登录成功后保存用户信息和 Token 到本地存储和全局状态中。 - 鉴权拦截:多个页面在
onLoad
或onShow
生命周期方法中检查用户是否已登录,若未登录则提示用户登录。
2. 数据加载与刷新
- 下拉刷新:多个页面实现了下拉刷新功能,如
adopt/list.js
和user/favorite.js
,通过onPullDownRefresh
方法触发数据重新加载。 - 上拉加载更多:如
adopt/list.js
和user/favorite.js
中的onReachBottom
方法,用于分页加载更多数据。 - 轮询机制:如
message/chat.js
中的startPolling
方法,通过定时器定期检查新消息。
3. 图片处理
- 图片上传:如
blog/publish.js
和blog/edit.js
中的uploadImages
方法,实现了图片的上传和路径处理。 - 图片预览:多个页面实现了图片预览功能,如
blog/publish.js
中的previewImage
方法。
4. 表单验证
- 表单验证:如
adopt/apply.js
中的validateForm
方法,对表单数据进行验证,确保提交数据的有效性。
5. 路由管理
- 页面跳转:使用
wx.navigateTo
和wx.switchTab
实现页面间的跳转,如index/index.js
中的navigateToPetDetail
和navigateToBlogs
方法。
以上是对项目前端部分的详细分析,涵盖了技术架构、组件设计和交互逻辑等方面的内容。该项目采用了原生微信小程序框架,结合了多种交互方式和状态管理手段,确保了良好的用户体验和高效的开发流程。
二、主要业务功能在代码中的具体实现 & 调用过程
有以下核心业务功能:
- 用户认证与权限管理 - 处理用户登录、权限验证和身份管理。
- 宠物领养管理 - 包括领养申请、申请详情、申请管理等。
- 宠物信息管理 - 允许用户查看、发布、编辑和删除宠物信息。
- 故事管理 - 包括发布故事、编辑故事等。
- 消息管理 - 用户之间的消息交互。
- 收藏管理 - 用户可以收藏宠物和博客。
- 用户信息管理 - 用户可以查看和编辑个人信息。
1. 用户认证与权限管理
设计思路:
- 用户通过登录页面提交认证信息。
- 系统后端验证用户信息,并根据用户角色(普通用户、管理员)提供相应权限。
- 用户可以通过微信登录或账号密码登录。
代码实现逻辑:
- 用户填写用户名和密码,选择用户类型后提交表单。
- 后端接收请求,校验用户名和密码的正确性。
- 登录成功后,将用户信息和token存储到本地,并更新全局数据。
- 微信登录通过获取code,发送到后端验证,登录成功后同样存储用户信息和token。
调用过程:
- 用户填写登录信息 -> 提交表单 -> 调用后端登录接口 -> 验证用户信息 -> 返回登录结果 -> 存储用户信息和token -> 更新全局数据。
代码片段 (user/login.js
中的登录部分):
async onLogin() {if (this.data.loading) return;if (!this.data.isAgree) {this.setData({ errorMsg: '请先同意用户协议和隐私政策' });return;}if (!this.data.username || !this.data.password) {this.setData({ errorMsg: '请输入用户名和密码' });return;}this.setData({ loading: true, errorMsg: '' });try {const res = await wx.request({url: `${app.globalData.baseUrl}/user/login`,method: 'POST',data: { userName: this.data.username, password: this.data.password }});if (res.statusCode === 200 && res.data.code === 200) {const userData = res.data.data;wx.setStorageSync('userInfo', userData.user);wx.setStorageSync('token', userData.token);wx.setStorageSync('isLogin', true);wx.setStorageSync('userId', userData.user.id);app.globalData.userInfo = userData.user;app.globalData.token = userData.token;app.globalData.userId = userData.user.id;wx.showToast({ title: '登录成功', icon: 'success' });setTimeout(() => {const pages = getCurrentPages();if (pages.length > 1) {wx.navigateBack();} else {wx.switchTab({ url: '/pages/index/index' });}}, 1500);} else {this.setData({ errorMsg: res.data.message || '登录失败' });}} catch (error) {this.setData({ errorMsg: error.errMsg || '登录失败,请重试' });} finally {this.setData({ loading: false });}
}
2. 宠物领养管理
设计思路:
- 用户可以申请领养宠物,填写相关信息。
- 管理员或宠物发布者可以审核领养申请。
- 用户可以查看领养申请的详细信息。
代码实现逻辑:
- 用户填写领养申请表单,提交后发送至后端。
- 后端验证表单信息,并存储申请记录。
- 管理员或宠物发布者可以在列表中查看申请,进行审核操作。
- 审核通过或拒绝后,更新申请状态,并通知相关用户。
调用过程:
- 用户填写领养申请表单 -> 提交表单 -> 调用后端接口 -> 存储申请记录 -> 管理员或宠物发布者查看申请 -> 审核通过或拒绝 -> 更新申请状态。
代码片段 (adopt/apply.js
中的表单提交部分):
submitForm(e) {const formData = e.detail.value;if (!this.validateForm(formData)) return;this.setData({ submitting: true });const requestData = {petId: this.data.petId,remark: JSON.stringify({name: formData.name,phone: formData.phone,wechat: formData.wechat,address: formData.address,houseType: this.data.houseTypes[formData.houseTypeIndex],isRent: formData.isRent,landlordAgree: formData.landlordAgree,familyMembers: formData.familyMembers,familyAgree: formData.familyAgree,hasPetExperience: formData.hasPetExperience,description: formData.description})};wx.request({url: `${app.globalData.baseUrl}/adopt/apply`,method: 'POST',header: {'Content-Type': 'application/json','Authorization': `Bearer ${wx.getStorageSync('token')}`},data: requestData,success: (res) => {if (res.data.code === 200) {wx.showToast({ title: '申请提交成功', icon: 'success' });setTimeout(() => {const pages = getCurrentPages();const prevPage = pages[pages.length - 2];if (prevPage && prevPage.loadPetDetail) {prevPage.loadPetDetail(prevPage.data.pet.id);}wx.navigateBack();}, 2000);} else {wx.showToast({ title: res.data.message || '提交失败,请重试', icon: 'error' });}},complete: () => {this.setData({ submitting: false });}});
}
3. 宠物信息管理
设计思路:
- 用户可以查看宠物列表、发布新宠物、编辑已有的宠物信息。
- 宠物信息包括图片、描述等。
代码实现逻辑:
- 前端展示宠物列表,用户可以选择查看、发布或编辑宠物。
- 发布和编辑宠物时,用户可以上传图片并填写相关信息。
- 提交后,后端验证并存储宠物信息。
调用过程:
- 用户查看宠物列表 -> 点击发布或编辑 -> 填写宠物信息 -> 提交表单 -> 调用后端接口 -> 存储宠物信息。
代码片段 (pet/publish.js
中的宠物发布部分):
async submitForm(e) {try {const { title, content } = this.data.formData;if (!title.trim()) {wx.showToast({ title: '请输入故事标题', icon: 'none' });return;}if (!content.trim()) {wx.showToast({ title: '请输入故事内容', icon: 'none' });return;}wx.showLoading({ title: '保存中...', mask: true });const images = await this.uploadImages();const coverImage = images.join(',');const petData = {title: title.trim(),content: content.trim(),coverImage,tags: this.data.selectedTags.join(',')};const res = await wx.request({url: `${app.globalData.baseUrl}/pets`,method: 'POST',data: petData,header: {'Authorization': wx.getStorageSync('token'),'Content-Type': 'application/json'}});if (res.statusCode === 200 && res.data.code === 200) {wx.hideLoading();wx.showToast({ title: '保存成功', icon: 'success' });setTimeout(() => {const pages = getCurrentPages();const detailPage = pages[pages.length - 2];if (detailPage && detailPage.loadPetDetail) {detailPage.loadPetDetail();}wx.navigateBack();}, 1500);} else {throw new Error(res.data.message || '保存失败');}} catch (error) {wx.hideLoading();wx.showToast({ title: error.message || '保存失败', icon: 'none' });}
}
4. 故事管理
设计思路:
- 用户可以发布新的故事,编辑已有的故事。
- 故事包括标题、内容、封面图片和标签。
代码实现逻辑:
- 用户填写故事标题、内容、选择封面图片和标签。
- 提交后,后端验证并存储故事信息。
调用过程:
- 用户填写故事信息 -> 提交表单 -> 调用后端接口 -> 存储故事信息。
代码片段 (blog/publish.js
中的故事发布部分):
submitForm(e) {try {const { title, content } = this.data.formData;if (!title.trim()) {wx.showToast({ title: '请输入故事标题', icon: 'none' });return;}if (!content.trim()) {wx.showToast({ title: '请输入故事内容', icon: 'none' });return;}if (this.data.tempImages.length === 0) {wx.showToast({ title: '请至少上传一张图片', icon: 'none' });return;}wx.showLoading({ title: '正在发布...', mask: true });this.uploadImages().then(uploadedImages => {const submitData = {title: title.trim(),content: content.trim(),coverImage: uploadedImages.join(','),tags: this.data.selectedTags.join(','),status: 1};return wx.request({url: `${app.globalData.baseUrl}/blogs`,method: 'POST',data: submitData,header: {'Authorization': `Bearer ${wx.getStorageSync('token').replace('Bearer ', '')}`,'Content-Type': 'application/json'}});}).then(res => {if (res.statusCode === 200 && res.data.code === 200) {wx.hideLoading();wx.showToast({ title: '发布成功', icon: 'success', duration: 2000 });setTimeout(() => {wx.navigateBack();}, 2000);} else {throw new Error(res.data.message || '发布失败');}}).catch(err => {wx.hideLoading();wx.showToast({ title: typeof err === 'string' ? err : (err.message || '发布失败'), icon: 'none', duration: 2000 });});} catch (error) {wx.hideLoading();wx.showToast({ title: error.message || '发布失败', icon: 'none', duration: 2000 });}
}
5. 消息管理
设计思路:
- 用户之间可以进行消息交流。
- 消息包括文本、图片等内容。
代码实现逻辑:
- 用户发送消息,消息存储到数据库。
- 消息列表页面展示用户之间的消息,并支持加载更多。
- 消息实时轮询,保证用户及时看到新消息。
调用过程:
- 用户输入消息内容 -> 点击发送 -> 调用后端接口 -> 存储消息 -> 更新消息列表 -> 实时轮询新消息。
代码片段 (message/chat.js
中的消息发送部分):
async sendMessage() {const content = this.data.inputContent.trim();if (!content) return;const token = wx.getStorageSync('token');if (!token) return;try {const requestData = {sessionId: this.data.sessionId,senderId: this.data.userInfo.id,content};const res = await wx.request({url: `${app.globalData.baseUrl}/messages/send`,method: 'POST',header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },data: requestData});if (res.statusCode === 200 && res.data.code === 200) {this.setData({ inputContent: '' });const newMessage = res.data.data;newMessage.createTimeStr = this.formatTime(newMessage.createTime);newMessage.senderAvatar = newMessage.sender?.pic ? getImageUrl(newMessage.sender.pic) : '/static/images/icon/default-avatar.png';const messages = [...this.data.messages, newMessage];this.setData({ messages, scrollIntoView: `msg-${newMessage.id}` });} else {wx.showToast({ title: res.data.message || '发送失败', icon: 'none' });}} catch (error) {wx.showToast({ title: error.message || '网络错误', icon: 'none' });}
}
6. 收藏管理
设计思路:
- 用户可以收藏感兴趣的宠物和博客。
- 用户可以查看已收藏的宠物和博客,并进行取消收藏操作。
代码实现逻辑:
- 用户点击收藏按钮,后端记录收藏信息。
- 用户可以在收藏页面查看已收藏的内容,并进行取消收藏操作。
调用过程:
- 用户点击收藏按钮 -> 调用后端接口 -> 记录收藏信息 -> 用户查看收藏列表 -> 取消收藏 -> 调用取消收藏接口。
代码片段 (user/favorite.js
中的收藏部分):
async onFavoriteTap(e) {const { id, type } = e.currentTarget.dataset;const token = wx.getStorageSync('token');if (!token) return;try {const url = type === 'pet' ? `${app.globalData.baseUrl}/favorites/remove/${id}` : `${app.globalData.baseUrl}/blog/favorites/remove`;const data = type === 'pet' ? null : { blogId: id };const method = 'POST';const res = await wx.request({url,method,header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },data});if (res.data.code === 200) {const listKey = type === 'pet' ? 'pets' : 'blogs';const list = this.data[listKey].filter(item => item.id !== id);this.setData({ [listKey]: list });wx.showToast({ title: '已取消收藏', icon: 'success' });} else {throw new Error(res.data.message || '操作失败');}} catch (error) {wx.showToast({ title: error.message || '操作失败', icon: 'none' });}
}
7. 用户信息管理
设计思路:
- 用户可以查看和编辑个人信息。
- 用户可以上传头像、修改昵称、真实姓名、电话号码等。
代码实现逻辑:
- 用户选择头像或填写个人信息。
- 提交后,后端验证并更新用户信息。
调用过程:
- 用户选择头像或填写信息 -> 提交表单 -> 调用后端接口 -> 更新用户信息。
代码片段 (user/profile.js
中的用户信息保存部分):
async onSave() {try {if (this.data.userInfo.telephone && !/^1[3-9]\d{9}$/.test(this.data.userInfo.telephone)) {wx.showToast({ title: '手机号码格式不正确', icon: 'none' });return;}if (this.data.userInfo.email && !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.data.userInfo.email)) {wx.showToast({ title: '邮箱格式不正确', icon: 'none' });return;}wx.showLoading({ title: '保存中...', mask: true });const updateData = {id: this.data.userInfo.id,...this.data.userInfo};const res = await wx.request({url: `${app.globalData.baseUrl}/user/update`,method: 'POST',data: updateData,header: {'Authorization': `Bearer ${wx.getStorageSync('token')}`,'Content-Type': 'application/json'}});if (res.data.code === 200) {wx.setStorageSync('userInfo', this.data.userInfo);app.globalData.userInfo = this.data.userInfo;wx.showToast({ title: '保存成功', icon: 'success' });setTimeout(() => {wx.navigateBack();}, 1500);} else {throw new Error(res.data.message || '保存失败');}} catch (error) {wx.showToast({ title: error.message || '保存失败', icon: 'none' });} finally {wx.hideLoading();}
}
8. 首页展示与导航
设计思路:
- 首页展示轮播图、推荐宠物和最新故事,吸引用户关注。
- 提供导航功能,用户可以跳转到不同的页面。
代码实现逻辑:
- 加载轮播图、推荐宠物和最新故事的数据。
- 处理图片路径,确保显示正确的图片。
- 提供跳转功能,如跳转到宠物详情、博客详情、发布宠物等。
调用过程:
- 页面加载 -> 初始化数据 -> 加载轮播图、推荐宠物和最新故事 -> 展示数据 -> 用户点击跳转 -> 导航到对应页面。
代码片段 (index/index.js
中的首页加载部分):
initData: function() {this.loadBanners();this.loadRecommendPets();this.loadLatestBlogs();
}loadBanners: function() {const that = this;wx.request({url: `${getApp().globalData.baseUrl}/banners`,success: function(res) {if (res.data.code === 200) {const banners = res.data.data.map(banner => {let imageUrl = banner.imageUrl;if (imageUrl && imageUrl.includes('localhost')) {const serverUrl = config.baseUrl.match(/^(https?:\/\/[^\/]+)/)[0];imageUrl = imageUrl.replace(/http:\/\/localhost:8080/, serverUrl);}return { ...banner, imageUrl };});that.setData({ bannerList: banners });}},complete: function() {that.setData({ loading: false });}});
}
9. 忘记密码
设计思路:
- 用户可以通过手机号找回密码。
- 系统验证用户信息并重置密码。
代码实现逻辑:
- 用户输入用户名、手机号和新密码。
- 系统验证手机号格式和密码一致性。
- 发送重置密码请求到后端。
调用过程:
- 用户输入信息 -> 提交表单 -> 验证信息 -> 调用后端接口 -> 重置密码 -> 返回结果。
代码片段 (user/forgot-password.js
中的重置密码部分):
async onResetPassword() {if (this.data.loading) return;if (!this.data.userName || !this.data.telephone) {this.setData({ errorMsg: '请输入用户名和手机号' });return;}if (!/^1[3-9]\d{9}$/.test(this.data.telephone)) {this.setData({ errorMsg: '请输入正确的手机号' });return;}if (!this.data.password || !this.data.confirmPassword) {this.setData({ errorMsg: '请输入新密码' });return;}if (this.data.password !== this.data.confirmPassword) {this.setData({ errorMsg: '两次输入的密码不一致' });return;}if (this.data.password.length < 6) {this.setData({ errorMsg: '密码长度不能少于6位' });return;}this.setData({ loading: true, errorMsg: '' });try {const res = await wx.request({url: `${app.globalData.baseUrl}/user/reset-password`,method: 'POST',header: { 'Content-Type': 'application/json' },data: { userName: this.data.userName, telephone: this.data.telephone, password: this.data.password }});if (res.statusCode === 200 && res.data.code === 200) {wx.showToast({ title: '密码重置成功', icon: 'success' });setTimeout(() => {wx.navigateBack();}, 1500);} else {throw new Error(res.data.message || '未知错误');}} catch (error) {this.setData({ errorMsg: error.message || '重置密码失败,请重试' });} finally {this.setData({ loading: false });}
}
10. 用户设置
设计思路:
- 用户可以修改通知设置、切换深色模式、修改密码、清除缓存和退出登录。
- 提供关于我们的页面链接。
代码实现逻辑:
- 用户选择设置项,如修改通知设置、切换深色模式等。
- 修改密码时,用户输入旧密码和新密码,后端验证并更新密码。
- 清除缓存时,删除本地存储的所有数据。
- 退出登录时,清除用户信息并返回登录页。
调用过程:
- 用户选择设置项 -> 修改设置 -> 更新本地存储或调用后端接口 -> 返回结果。
代码片段 (user/settings.js
中的修改密码部分):
changePassword: function() {wx.navigateTo({url: '/pages/user/change-password'});
}logout: function() {const that = this;wx.showModal({title: '提示',content: '确定要退出登录吗?',success: function(res) {if (res.confirm) {wx.request({url: `${getApp().globalData.baseUrl}/user/logout`,method: 'POST',header: { 'Authorization': wx.getStorageSync('token') },success: function(res) {if (res.data.code === 0) {wx.removeStorageSync('userInfo');wx.removeStorageSync('token');that.setData({ userInfo: null });wx.showToast({ title: '已退出登录', icon: 'success' });setTimeout(() => {wx.reLaunch({ url: '/pages/user/index' });}, 1500);} else {wx.showToast({ title: res.data.message || '退出失败', icon: 'none' });}},fail: function() {wx.showToast({ title: '网络错误', icon: 'none' });}});}}});
}
11. 宠物详情与编辑
设计思路:
- 用户可以查看宠物的详细信息,包括图片、描述等。
- 用户可以编辑已发布的宠物信息。
代码实现逻辑:
- 加载宠物详情数据,处理图片路径。
- 编辑宠物时,用户可以修改图片、描述等信息。
- 提交编辑内容,后端验证并更新宠物信息。
调用过程:
- 用户查看宠物详情 -> 加载数据 -> 用户点击编辑 -> 修改信息 -> 提交表单 -> 更新宠物信息。
代码片段 (pet/detail.js
中的宠物详情加载部分):
loadPetDetail() {const that = this;wx.request({url: `${app.globalData.baseUrl}/pets/${this.data.petId}`,success: function(res) {if (res.statusCode === 200 && res.data.code === 200) {const pet = res.data.data;let images = [];let mainImage = '/static/images/pets/default.jpg';if (pet.pic) {images = pet.pic.split(',').map(pic => {pic = pic.trim();if (!pic.startsWith('http') && !pic.startsWith('https')) {if (pic.startsWith('/adopt')) {pic = pic.substring(6);}if (!pic.startsWith('/')) {pic = '/' + pic;}return `${app.globalData.baseUrl}${pic}`;}return pic;});mainImage = images[0];}that.setData({ pet, images, mainImage });} else {wx.showToast({ title: res.data.message || '加载失败', icon: 'none' });}}});
}
12. 领养申请管理
设计思路:
- 用户可以查看和管理领养申请,包括通过和拒绝申请。
- 管理员可以查看所有领养申请,并进行批量审核。
代码实现逻辑:
- 加载领养申请列表,处理图片路径。
- 管理员或宠物发布者可以审核申请,填写拒绝理由。
- 审核通过或拒绝后,更新申请状态,并通知相关用户。
调用过程:
- 用户查看领养申请列表 -> 加载数据 -> 用户点击审核 -> 填写拒绝理由 -> 提交审核 -> 更新申请状态。
代码片段 (adopt/manage.js
中的领养申请审核部分):
async updateAdoptStatus(e) {const { id, status } = e.currentTarget.dataset;try {const res = await wx.request({url: `${app.globalData.baseUrl}/adopt/status`,method: 'PUT',data: { id, status },header: { 'Authorization': `Bearer ${wx.getStorageSync('token')}`, 'Content-Type': 'application/json' }});if (res.data.code === 200) {wx.showToast({ title: '更新成功', icon: 'success' });this.loadAdoptions(true);} else {throw new Error(res.data.message || '更新失败');}} catch (error) {wx.showToast({ title: error.message || '更新失败', icon: 'none' });}
}
13. 用户收藏管理
设计思路:
- 用户可以收藏宠物和博客。
- 用户可以在收藏页面查看和取消收藏。
代码实现逻辑:
- 加载用户收藏的宠物和博客列表。
- 用户点击取消收藏按钮,发送请求到后端。
- 成功取消收藏后,更新本地收藏列表。
调用过程:
- 用户进入收藏页面 -> 加载收藏列表 -> 用户点击取消收藏 -> 发送请求 -> 更新收藏列表。
代码片段 (user/favorite.js
中的取消收藏部分):
async onFavoriteTap(e) {const { id, type } = e.currentTarget.dataset;const token = wx.getStorageSync('token');if (!token) return;try {const url = type === 'pet' ? `${app.globalData.baseUrl}/favorites/remove/${id}` : `${app.globalData.baseUrl}/blog/favorites/remove`;const data = type === 'pet' ? null : { blogId: id };const method = 'POST';const res = await wx.request({url,method,header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },data});if (res.data.code === 200) {const listKey = type === 'pet' ? 'pets' : 'blogs';const list = this.data[listKey].filter(item => item.id !== id);this.setData({ [listKey]: list });wx.showToast({ title: '已取消收藏', icon: 'success' });} else {throw new Error(res.data.message || '操作失败');}} catch (error) {wx.showToast({ title: error.message || '操作失败', icon: 'none' });}
}
14. 用户注册
设计思路:
- 新用户可以通过填写注册信息来创建账户。
- 注册信息包括用户名、密码、真实姓名、手机号等。
代码实现逻辑:
- 用户填写注册信息,提交表单。
- 后端验证注册信息的合法性,并创建新用户。
- 注册成功后,返回登录页。
调用过程:
- 用户填写注册信息 -> 提交表单 -> 验证信息 -> 调用后端接口 -> 创建新用户 -> 返回登录页。
代码片段 (user/register.js
中的注册部分):
async onRegister() {if (!this.validateForm()) return;try {const res = await wx.request({url: `${app.globalData.baseUrl}/user/register`,method: 'POST',data: {userName: this.data.username,password: this.data.password,role: 'USER',status: 1,...(this.data.realName ? { realName: this.data.realName } : {}),...(this.data.telephone ? { telephone: this.data.telephone } : {}),...(this.data.email ? { email: this.data.email } : {}),...(this.data.sex ? { sex: this.data.sex } : {}),...(this.data.birthday ? { birthday: this.data.birthday } : {}),...(this.data.description ? { description: this.data.description } : {})},header: { 'Content-Type': 'application/json' }});if (res.statusCode === 200 && res.data.code === 200) {wx.showToast({ title: '注册成功', icon: 'success' });setTimeout(() => {wx.navigateBack();}, 1500);} else {throw new Error(res.data.message || '未知错误');}} catch (error) {wx.showToast({ title: error.message || '注册失败,请重试', icon: 'none' });} finally {wx.hideLoading();}
}
15. 用户评论管理
设计思路:
- 用户可以查看和删除自己的评论。
- 用户可以对宠物或博客发表评论。
代码实现逻辑:
- 加载用户评论列表,处理图片路径。
- 用户点击删除按钮,发送请求到后端。
- 成功删除评论后,更新本地评论列表。
调用过程:
- 用户进入评论页面 -> 加载评论列表 -> 用户点击删除 -> 发送请求 -> 更新评论列表。
代码片段 (user/comments.js
中的删除评论部分):
deleteComment: function(e) {const commentId = e.currentTarget.dataset.id;const that = this;wx.showModal({title: '提示',content: '确定要删除这条评论吗?',success: function(res) {if (res.confirm) {wx.request({url: `${getApp().globalData.baseUrl}/comments/${commentId}`,method: 'DELETE',header: { 'Authorization': wx.getStorageSync('token') },success: function(res) {if (res.data.code === 0) {wx.showToast({ title: '删除成功', icon: 'success' });that.setData({ currentPage: 1, hasMore: true, commentList: [] }, () => {that.loadComments();});} else {wx.showToast({ title: res.data.message || '删除失败', icon: 'none' });}}});}}});
}
16. 消息轮询与通知
设计思路:
- 实现实时消息轮询,确保用户能及时看到新消息。
- 消息轮询定时器每30秒检查一次未读消息。
代码实现逻辑:
- 在应用启动和前台显示时,启动消息轮询定时器。
- 每30秒调用一次未读消息接口,检查是否有新消息。
- 如果有新消息,更新全局未读消息计数,并显示小红点。
调用过程:
- 应用启动或进入前台 -> 启动消息轮询 -> 定时检查未读消息 -> 更新未读消息计数 -> 显示小红点。
代码片段 (mp-weixin/app.js
中的消息轮询部分):
startCheckingMessages() {console.log('开始检查未读消息');this.stopCheckingMessages();this.checkUnreadMessages();this.globalData.messagePollingTimer = setInterval(() => {this.checkUnreadMessages();}, 30000);
}async checkUnreadMessages() {try {const token = this.globalData.token;const userInfo = this.globalData.userInfo;if (!token || !userInfo) return;const res = await wx.request({url: `${this.globalData.baseUrl}/messages/unread/count`,method: 'GET',header: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },data: { userId: userInfo.id }});if (res.statusCode === 200 && res.data.code === 200) {const unreadCount = res.data.data || 0;this.globalData.unreadMessageCount = unreadCount;if (unreadCount > 0) {wx.showTabBarRedDot({ index: 3 });} else {wx.hideTabBarRedDot({ index: 3 });}}} catch (error) {console.error('检查未读消息失败:', error);}
}
17. 图片资源路径管理
设计思路:
- 统一处理图片路径,确保图片路径的正确性和完整性。
- 提供工具函数,方便在各个页面调用。
代码实现逻辑:
- 检查图片路径是否为完整的URL,如果不是则拼接基础URL。
- 如果是静态资源路径,直接返回。
- 如果路径以
/adopt
开头,移除它并拼接基础URL。
调用过程:
- 各页面调用工具函数 -> 检查图片路径 -> 返回完整的图片URL。
代码片段 (utils/imagePathUtils.js
中的图片路径处理部分):
const getImageUrl = (path) => {if (!path) return '/static/images/tabbar/user.png';if (path.startsWith('http://') || path.startsWith('https://')) return path;if (path.startsWith('/static/')) return path;if (path.startsWith('/')) return `${app.globalData.baseUrl}${path}`;return `${app.globalData.baseUrl}/${path}`;
};module.exports = { getImageUrl };
以上是对整个项目的前端业务功能的具体实现和调用过程的详细分析。
每个功能模块都遵循了清晰的设计思路、详细的代码实现逻辑和明确的调用过程,确保系统的稳定性和用户体验。
三、可能的答辩问题
一)如何处理用户登录状态?
解答:项目通过 wx.getStorageSync
方法从本地存储中获取用户的 token
和 userInfo
,并在每次页面加载时进行验证。如果用户未登录或登录状态不完整,会提示用户先登录,并跳转到登录页面。此外,在 app.js
中,应用启动时也会检查登录状态,并通过 clearLoginState
方法清除不完整的登录状态。
代码片段:
// 文件: adopt/apply.js
if (!token || !userInfo || !isLogin) {wx.showModal({title: '提示',content: '请先登录后再申请领养',success(res) {if (res.confirm) {wx.navigateTo({url: '/pages/user/login'});} else {wx.navigateBack();}}});return;
}
二)项目是如何处理图片路径的?
解答:项目中使用了 utils/imagePathUtils.js
中的 getImageUrl
方法来处理图片路径。该方法会根据图片路径的不同情况(是否为完整 URL、是否为静态资源路径等),返回完整的图片 URL。同时,在多个地方(如 index/index.js
和 blog/edit.js
)都会调用此方法来处理图片路径。
代码片段:
// 文件: utils/imagePathUtils.js
const getImageUrl = (path) => {if (!path) {console.error('图片路径为空');return '/static/images/tabbar/user.png';}if (path.startsWith('http://') || path.startsWith('https://')) {return path;}if (path.startsWith('/static/')) {return path;}if (path.startsWith('/')) {return `${app.globalData.baseUrl}${path}`;} else {return `${app.globalData.baseUrl}/${path}`;}
}
三)项目是如何实现表单验证的?
解答:项目在多个页面中实现了表单验证,例如在 adopt/apply.js
中,通过正则表达式验证手机号格式,并检查家庭成员数是否为有效的数字。此外,还提供了友好的提示信息,确保用户输入符合要求。
代码片段:
// 文件: adopt/apply.js
validateForm(formData) {const phoneReg = /^1[3-9]\d{9}$/;if (!formData.phone || !phoneReg.test(formData.phone)) {wx.showToast({title: '请输入正确的手机号',icon: 'none'});return false;}if (formData.familyMembers && (isNaN(formData.familyMembers) || formData.familyMembers < 1)) {wx.showToast({title: '请输入正确的家庭成员数',icon: 'none'});return false;}return true;
}
四)如何处理与后端的数据交互?
解答:项目通过 wx.request
方法与后端进行数据交互。每次请求都携带了 Authorization
头部,确保请求的安全性。此外,项目还使用了 Promise
包装 wx.request
,以便更好地处理异步操作。例如,在 adopt/apply.js
中,提交表单时会发送 POST 请求给后端,并根据响应结果进行相应处理。
代码片段:
// 文件: adopt/apply.js
wx.request({url: `${app.globalData.baseUrl}/adopt/apply`,method: 'POST',header: {'Content-Type': 'application/json','Authorization': `Bearer ${token}`},data: requestData,success: (res) => {if (res.data && (res.data.code === 0 || res.data.code === 200)) {wx.showToast({title: '申请提交成功',icon: 'success',duration: 2000});} else {wx.showToast({title: res.data?.message || '提交失败,请重试',icon: 'error'});}},fail: (error) => {wx.showToast({title: '网络错误,请重试',icon: 'error'});}
});
五)项目是如何处理轮播图的?
解答:项目在 index/index.js
中实现了轮播图的加载和展示。首先通过 wx.request
请求获取轮播图数据,然后根据返回的数据动态生成轮播图项。为了确保图片路径的正确性,还会对图片路径进行处理,确保路径是完整的 URL。
代码片段:
// 文件: index/index.js
loadBanners: function() {wx.request({url: `${getApp().globalData.baseUrl}/banners`,success: function(res) {if (res.data.code === 200) {const banners = res.data.data.map(banner => {let imageUrl = banner.imageUrl;if (imageUrl && imageUrl.includes('localhost')) {const serverUrl = config.baseUrl.match(/^(https?:\/\/[^\/]+)/)[0];imageUrl = imageUrl.replace(/http:\/\/localhost:8080/, serverUrl);}return {...banner,imageUrl};});that.setData({ bannerList: banners });}}});
}
六)项目是如何实现分页加载的?
解答:项目在多个页面(如 adopt/list.js
和 user/favorite.js
)中实现了分页加载。通过 wx.request
请求分页数据,并根据返回的 total
和 list
动态更新页面数据。每次加载更多数据时,会增加 pageNum
,并通过 hasMore
判断是否还有更多数据可以加载。
代码片段:
// 文件: adopt/list.js
async loadAdopts(refresh = false) {if (refresh) {this.setData({pageNum: 1,hasMore: true});}if (!this.data.hasMore) return;try {const token = wx.getStorageSync('token');const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/adopt/list`,method: 'GET',data: {page: this.data.pageNum,size: this.data.pageSize},header: {'Authorization': `Bearer ${token}`},success: resolve,fail: reject});});if (res.data.code === 200) {const list = res.data.data.list || [];const total = res.data.data.total || 0;this.setData({adopts: refresh ? list : [...this.data.adopts, ...list],hasMore: this.data.pageNum * this.data.pageSize < total,pageNum: this.data.pageNum + 1});}} catch (error) {console.error('[领养申请] 加载列表出错:', error);}
}
七)项目是如何处理用户权限的?
解答:项目通过 wx.getStorageSync
获取用户信息,并在页面加载时检查用户角色(如 isAdmin
)。在 adopt/list.js
中,只有管理员或宠物发布者才能审核领养申请,且不能审核自己的申请。此外,通过 checkLogin
方法确保用户已登录。
代码片段:
// 文件: adopt/list.js
const canApprove = (this.data.isAdmin || (this.data.isPetPublisher && item.pet && item.pet.rescuerId === this.data.userId &&item.userId !== this.data.userId)
) && item.state === 1;this.setData({isAdmin: userInfo && userInfo.role === 'ADMIN',userId: userInfo ? userInfo.id : null
});
八)项目是如何处理图片上传的?
解答:项目在 blog/publish.js
和 blog/edit.js
中实现了图片上传功能。通过 wx.chooseImage
选择图片,然后使用 wx.uploadFile
方法上传图片到服务器。上传成功后,返回的图片路径会被处理成完整的 URL 并保存到 tempImages
中,供后续使用。
代码片段:
// 文件: blog/publish.js
chooseImage() {const that = this;const remainCount = 9 - this.data.tempImages.length;if (remainCount <= 0) {wx.showToast({title: '最多上传9张图片',icon: 'none'});return;}wx.chooseImage({count: remainCount,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function(res) {const newTempImages = [...that.data.tempImages, ...res.tempFilePaths];that.setData({tempImages: newTempImages});}});
}
九)项目是如何处理消息轮询的?
解答:项目在 message/chat.js
中实现了消息轮询功能。通过 setInterval
每隔 5 秒检查一次新消息。每次轮询时,会发送 GET 请求获取最新的消息列表,并将其与现有消息列表进行对比,过滤出新消息并更新页面。
代码片段:
// 文件: message/chat.js
startPolling() {this.stopPolling();this.data.pollingTimer = setInterval(() => {if (this.data.sessionId) {this.checkNewMessages();}}, 5000);
}
十)项目是如何处理用户收藏的?
解答:项目在 user/favorites.js
中实现了用户收藏功能。通过 wx.request
请求获取用户的收藏列表,并根据不同的收藏类型(宠物或博客)分别处理数据。同时,提供了一键取消收藏和单个取消收藏的功能,确保用户可以方便地管理自己的收藏。
代码片段:
// 文件: user/favorites.js
onFavoriteTap(e) {const { id, type } = e.currentTarget.dataset;const url = type === 'pet'? `${app.globalData.baseUrl}/favorites/remove/${id}`: `${app.globalData.baseUrl}/blog/favorites/remove`;const data = type === 'pet' ? null : { blogId: id };const method = type === 'pet' ? 'POST' : 'POST';const res = await new Promise((resolve, reject) => {wx.request({url,method,header: {'Authorization': `Bearer ${wx.getStorageSync('token')}`,'Content-Type': 'application/json'},data,success: res => resolve(res),fail: err => reject(err)});});if (res.data.code === 200) {const listKey = type === 'pet' ? 'pets' : 'blogs';const list = this.data[listKey].filter(item => item.id !== id);this.setData({ [listKey]: list });}
}
十一)项目是如何处理用户信息更新的?
解答:项目在 user/profile.js
中实现了用户信息更新功能。用户可以选择更新头像、昵称、真实姓名等信息。更新头像时,会先下载微信头像到本地临时文件,再上传到服务器。更新其他信息时,会发送 POST 请求将更新后的用户信息保存到服务器,并同步更新本地存储和全局状态。
代码片段:
// 文件: user/profile.js
saveInfo() {const { userInfo, tempFilePath } = this.data;if (tempFilePath) {wx.uploadFile({url: `${app.globalData.baseUrl}/user/updatePic`,filePath: tempFilePath,name: 'file',header: {'token': wx.getStorageSync('token')},success: (res) => {const data = JSON.parse(res.data);if (data.code === 0) {userInfo.pic = data.data.url;this.updateUserInfo();}}});} else {this.updateUserInfo();}
}
十二)项目是如何处理用户注册的?
解答:项目在 user/register.js
中实现了用户注册功能。用户输入基本信息(用户名、密码、真实姓名等),并通过表单验证确保输入合法。注册时,会发送 POST 请求将用户信息发送到服务器,并根据响应结果提示用户注册成功或失败。
代码片段:
// 文件: user/register.js
async onRegister() {if (!this.validateForm()) {return;}try {wx.showLoading({title: '注册中...',mask: true});const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/user/register`,method: 'POST',data: {userName: this.data.username,password: this.data.password,role: 'USER',status: 1,...(this.data.realName ? { realName: this.data.realName } : {}),...(this.data.telephone ? { telephone: this.data.telephone } : {}),...(this.data.email ? { email: this.data.email } : {}),...(this.data.sex ? { sex: this.data.sex } : {}),...(this.data.birthday ? { birthday: this.data.birthday } : {}),...(this.data.description ? { description: this.data.description } : {})},success: res => resolve(res),fail: err => reject(err)});});if (res.statusCode === 200 && res.data.code === 200) {wx.showToast({title: '注册成功',icon: 'success'});setTimeout(() => {wx.navigateBack();}, 1500);} else {wx.showToast({title: res.data.message || '注册失败',icon: 'none'});}} catch (error) {wx.showToast({title: error.errMsg || '注册失败,请重试',icon: 'none'});} finally {wx.hideLoading();}
}
十三)项目是如何处理用户忘记密码的?
解答:项目在 user/forgot-password.js
中实现了用户忘记密码功能。用户输入用户名和手机号,并设置新密码。通过表单验证确保输入合法后,发送 POST 请求重置密码,并根据响应结果提示用户重置成功或失败。
代码片段:
// 文件: user/forgot-password.js
async onResetPassword() {if (this.data.loading) {return;}if (!this.data.userName || !this.data.telephone) {this.setData({errorMsg: '请输入用户名和手机号'});return;}if (!/^1[3-9]\d{9}$/.test(this.data.telephone)) {this.setData({errorMsg: '请输入正确的手机号'});return;}if (!this.data.password || !this.data.confirmPassword) {this.setData({errorMsg: '请输入新密码'});return;}if (this.data.password !== this.data.confirmPassword) {this.setData({errorMsg: '两次输入的密码不一致'});return;}if (this.data.password.length < 6) {this.setData({errorMsg: '密码长度不能少于6位'});return;}this.setData({ loading: true });try {const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/user/reset-password`,method: 'POST',header: {'Content-Type': 'application/json'},data: {userName: this.data.userName,telephone: this.data.telephone,password: this.data.password},success: res => resolve(res),fail: err => reject(err)});});if (res.statusCode === 200 && res.data.code === 200) {wx.showToast({title: '密码重置成功',icon: 'success'});setTimeout(() => {wx.navigateBack();}, 1500);} else {throw new Error(res.data.message || '重置密码失败');}} catch (error) {this.setData({errorMsg: typeof error === 'string' ? error : (error.message || error.errMsg || '重置密码失败,请重试')});} finally {this.setData({ loading: false });}
}
十四)项目是如何处理领养申请的?
解答:项目在 adopt/apply.js
中实现了领养申请功能。用户填写申请表单,包括姓名、电话、地址等信息,并选择房屋类型和是否租房等选项。提交表单时,会发送 POST 请求将表单数据发送到服务器,并根据响应结果提示用户申请成功或失败。
代码片段:
// 文件: adopt/apply.js
submitForm(e) {const formData = e.detail.value;if (!this.validateForm(formData)) {return;}this.setData({ submitting: true });const requestData = {petId: this.data.petId,remark: JSON.stringify({name: formData.name,phone: formData.phone,wechat: formData.wechat,address: formData.address,houseType: this.data.houseTypes[formData.houseTypeIndex],isRent: formData.isRent,landlordAgree: formData.landlordAgree,familyMembers: formData.familyMembers,familyAgree: formData.familyAgree,hasPetExperience: formData.hasPetExperience,description: formData.description})};wx.request({url: `${app.globalData.baseUrl}/adopt/apply`,method: 'POST',header: {'Content-Type': 'application/json','Authorization': `Bearer ${token}`},data: requestData,success: (res) => {if (res.data.code === 200) {wx.showToast({title: '申请提交成功',icon: 'success'});setTimeout(() => {wx.navigateBack();}, 2000);} else {wx.showToast({title: res.data.message || '提交失败,请重试',icon: 'error'});}},fail: (error) => {wx.showToast({title: '网络错误,请重试',icon: 'error'});},complete: () => {this.setData({ submitting: false });}});
}
十五)项目是如何处理消息通知的?
解答:项目在 mp-weixin/app.js
中实现了消息通知功能。应用启动时会检查未读消息数量,并通过 wx.showTabBarRedDot
和 wx.hideTabBarRedDot
方法显示或隐藏小红点。每隔 30 秒会自动检查一次未读消息数量。
代码片段:
// 文件: mp-weixin/app.js
async checkUnreadMessages() {try {const token = this.globalData.token;const userInfo = this.globalData.userInfo;if (!token || !userInfo) {console.log('用户未登录,跳过检查未读消息');return;}const res = await new Promise((resolve, reject) => {wx.request({url: `${this.globalData.baseUrl}/messages/unread/count`,method: 'GET',header: {'Authorization': `Bearer ${token}`,'Content-Type': 'application/json'},data: {userId: userInfo.id},success: res => resolve(res),fail: err => reject(err)});});if (res.statusCode === 200 && res.data.code === 200) {const unreadCount = res.data.data || 0;this.globalData.unreadMessageCount = unreadCount;if (unreadCount > 0) {wx.showTabBarRedDot({index: 3});} else {wx.hideTabBarRedDot({index: 3});}}} catch (error) {console.error('检查未读消息失败:', error);}
}
十六)项目是如何处理领养申请详情的?
解答:项目在 adopt/detail.js
中实现了领养申请详情功能。页面加载时会发送 GET 请求获取申请详情,并解析 remark
字段为表单数据。此外,还提供了审核通过和拒绝的功能,确保管理员可以方便地处理领养申请。
代码片段:
// 文件: adopt/detail.js
async loadAdoptDetail() {try {const token = wx.getStorageSync('token');const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/adopt/detail/${this.data.id}`,method: 'GET',header: {'Authorization': 'Bearer ' + token,'Content-Type': 'application/json'},success: resolve,fail: reject});});if (res.data.code === 200) {const adoptInfo = res.data.data;let formData = {};try {if (adoptInfo.remark) {formData = JSON.parse(adoptInfo.remark);}} catch (error) {console.error('[申请详情] 解析表单数据失败:', error);}this.setData({adoptInfo,formData});}} catch (error) {wx.showToast({title: error.message || '加载失败',icon: 'none'});}
}
十七)项目是如何处理图片预览的?
解答:项目在 blog/publish.js
和 blog/edit.js
中实现了图片预览功能。通过 wx.previewImage
方法展示用户选择的图片。在 blog/publish.js
中,还会处理图片路径,确保预览图片的 URL 是完整的。
代码片段:
// 文件: blog/publish.js
previewImage(e) {const src = e.currentTarget.dataset.src;const currentUrl = src.startsWith('http') ? src : `${app.globalData.baseUrl}${src}`;const urls = this.data.tempImages.map(img => {if (img.startsWith('http')) {return img;}return `${app.globalData.baseUrl}${img}`;});wx.previewImage({current: currentUrl,urls: urls});
}
十八)项目是如何处理用户信息更新的?
解答:项目在 user/profile.js
中实现了用户信息更新功能。用户可以修改昵称、真实姓名、手机号、邮箱等信息,并通过 wx.uploadFile
更新头像。更新信息时,会发送 POST 请求将更新后的用户信息发送到服务器,并同步更新本地存储和全局状态。
代码片段:
// 文件: user/profile.js
async onSave() {try {wx.showLoading({title: '保存中...',mask: true});const updateData = {id: this.data.userInfo.id};const fields = ['userName', 'realName', 'telephone', 'email', 'sex', 'birthday', 'location', 'description', 'pic'];fields.forEach(field => {if (this.data.userInfo[field]) {updateData[field] = this.data.userInfo[field];}});const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/user/update`,method: 'POST',data: updateData,header: {'Authorization': `Bearer ${wx.getStorageSync('token')}`,'Content-Type': 'application/json'},success: res => resolve(res),fail: err => reject(err)});});if (res.data.code === 200) {wx.setStorageSync('userInfo', this.data.userInfo);app.globalData.userInfo = this.data.userInfo;wx.showToast({title: '保存成功',icon: 'success'});setTimeout(() => {wx.navigateBack();}, 1500);}} catch (error) {wx.showToast({title: typeof error === 'string' ? error : (error.message || '保存失败'),icon: 'none'});} finally {wx.hideLoading();}
}
十九)项目是如何处理用户注销的?
解答:项目在 user/settings.js
中实现了用户注销功能。用户点击注销按钮后,会弹出确认框,确认后发送 POST 请求到后端进行注销操作。注销成功后,清除本地存储的用户信息,并跳转到登录页面。
代码片段:
// 文件: user/settings.js
logout() {const that = this;wx.showModal({title: '提示',content: '确定要退出登录吗?',success: function(res) {if (res.confirm) {wx.request({url: `${getApp().globalData.baseUrl}/user/logout`,method: 'POST',header: {'Authorization': wx.getStorageSync('token')},success(res) {if (res.data.code === 0) {wx.removeStorageSync('userInfo');wx.removeStorageSync('token');that.setData({userInfo: null});wx.showToast({title: '已退出登录',icon: 'success'});setTimeout(() => {wx.reLaunch({url: '/pages/user/index'});}, 1500);}}});}}});
}
二十)项目是如何处理宠物推荐的?
解答:项目在 index/index.js
中实现了宠物推荐功能。页面加载时会发送 GET 请求获取推荐宠物列表,并根据返回的数据动态生成宠物卡片。此外,还提供了跳转到推荐宠物列表的功能,确保用户可以方便地查看更多推荐宠物。
代码片段:
// 文件: index/index.js
loadRecommendPets() {wx.request({url: `${getApp().globalData.baseUrl}/pets/recommend`,success: function(res) {if (res.data.code === 200) {const pets = res.data.extra.data || [];const formattedPets = pets.map(pet => {let images = [];let mainImage = '/static/images/pets/default.jpg';if (pet.pic) {images = pet.pic.split(',').map(pic => {pic = pic.trim();if (!pic.startsWith('http') && !pic.startsWith('https')) {if (pic.startsWith('/adopt')) {pic = pic.substring(6);}if (!pic.startsWith('/')) {pic = '/' + pic;}return `${getApp().globalData.baseUrl}${pic}`;}return pic;});mainImage = images[0];}return {...pet,images,mainImage};});that.setData({ recommendPets: formattedPets });}}});
}
二十一)项目是如何处理领养记录的?
解答:项目在 user/adopts.js
中实现了领养记录功能。通过 wx.request
请求获取用户的领养记录,并根据返回的数据动态生成记录列表。每条记录包含了宠物信息、审核时间和状态等,并提供了查看详情的功能。
代码片段:
// 文件: user/adopts.js
async loadRecords() {if (this.data.loading || !this.data.hasMore) {return;}try {this.setData({ loading: true });const token = wx.getStorageSync('token');const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/adopt/approved`,method: 'GET',header: {'Authorization': `Bearer ${token}`,'Content-Type': 'application/json'},data: {page: this.data.page,size: this.data.size},success: res => resolve(res),fail: err => reject(err)});});if (res.data.code === 200) {const newRecords = res.data.data.list || [];newRecords.forEach(record => {if (!record.pet || !record.pet.petName) {record.pet = record.pet || {};record.pet.petName = '加载失败';record.pet.pic = '/static/images/icon/error-pet.png';}if (record.reviewTime) {const date = record.reviewTime.replace(' ', 'T');record.reviewTime = new Date(date).toLocaleDateString('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit'}).replace(/\//g, '-');} else {record.reviewTime = '未知时间';}if (record.pet && record.pet.pic) {record.pet.pic = record.pet.pic.split(',')[0];if (!record.pet.pic.startsWith('http')) {record.pet.pic = `${app.globalData.baseUrl}${record.pet.pic}`;}}});this.setData({records: [...this.data.records, ...newRecords],hasMore: newRecords.length === this.data.size});}} catch (error) {console.error('[adopts] 加载记录失败:', error);this.setData({ hasLoadError: true });} finally {this.setData({ loading: false });}
}
二十二)项目是如何处理博客发布的?
解答:项目在 blog/publish.js
中实现了博客发布功能。用户填写博客标题、内容、选择封面图片和标签后,通过 wx.uploadFile
方法上传图片,然后发送 POST 请求将博客信息发送到服务器。发布成功后,会提示用户并返回上一页。
代码片段:
// 文件: blog/publish.js
submitForm(e) {if (!this.data.formData.title.trim()) {wx.showToast({title: '请输入故事标题',icon: 'none'});return;}if (!this.data.formData.content.trim()) {wx.showToast({title: '请输入故事内容',icon: 'none'});return;}if (this.data.tempImages.length === 0) {wx.showToast({title: '请至少上传一张图片',icon: 'none'});return;}wx.showLoading({title: '正在发布...',mask: true});this.uploadImages().then(uploadedImages => {const submitData = {title: this.data.formData.title.trim(),content: this.data.formData.content.trim(),coverImage: uploadedImages.join(','),tags: this.data.selectedTags.join(','),status: 1};return new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/blogs`,method: 'POST',data: submitData,header: {'Authorization': `Bearer ${cleanToken}`,'Content-Type': 'application/json'},success: resolve,fail: reject});});}).then(res => {if (res.statusCode === 200 && res.data.code === 200) {wx.showToast({title: '发布成功',icon: 'success'});setTimeout(() => {wx.navigateBack();}, 2000);}}).catch(err => {wx.showToast({title: typeof err === 'string' ? err : (err.message || '发布失败'),icon: 'none'});}).finally(() => {wx.hideLoading();});
}
二十三)项目是如何处理博客编辑的?
解答:项目在 blog/edit.js
中实现了博客编辑功能。页面加载时会发送 GET 请求获取博客详情,并填充到表单中。用户可以修改博客标题、内容、封面图片和标签,然后通过 wx.uploadFile
方法上传图片,最后发送 PUT 请求将修改后的博客信息保存到服务器。
代码片段:
// 文件: blog/edit.js
async loadBlogDetail() {try {wx.showLoading({title: '加载中...',mask: true});const res = await new Promise((resolve, reject) => {wx.request({url: `${app.globalData.baseUrl}/blogs/${this.data.blogId}`,method: 'GET',success: resolve,fail: reject});});if (res.statusCode === 200 && res.data.code === 200) {const blog = res.data.data;let images = [];if (blog.coverImage) {images = blog.coverImage.split(',').map(pic => {pic = pic.trim();if (pic.startsWith('/static/')) {return pic;}if (!pic.startsWith('http') && !pic.startsWith('https')) {if (pic.startsWith('/adopt')) {pic = pic.substring(6);}if (!pic.startsWith('/')) {pic = '/' + pic;}return `${app.globalData.baseUrl}${pic}`;}return pic;});}let selectedTags = [];if (blog.tags) {selectedTags = blog.tags.split(',');}this.setData({'formData.title': blog.title,'formData.content': blog.content,contentLength: blog.content.length,tempImages: images,selectedTags});wx.hideLoading();}} catch (error) {console.error('加载博客详情失败:', error);wx.hideLoading();wx.showToast({title: error.message || '加载失败',icon: 'none'});setTimeout(() => wx.navigateBack(), 1500);}
}
二十四)项目是如何处理用户评论的?
解答:项目在 user/comments.js
中实现了用户评论功能。通过 wx.request
请求获取用户的评论列表,并根据返回的数据动态生成评论项。每条评论包含了评论内容、时间、宠物或博客信息等,并提供了删除评论的功能。
代码片段:
// 文件: user/comments.js
loadComments(isRefresh = false) {if (this.data.loading) return;if (!isRefresh && !this.data.hasMore) return;const that = this;this.setData({ loading: true });wx.request({url: `${getApp().globalData.baseUrl}/user/comments`,method: 'GET',header: {'Authorization': wx.getStorageSync('token')},data: {page: isRefresh ? 1 : this.data.currentPage,size: this.data.pageSize},success(res) {if (res.data.code === 0) {const newList = res.data.data || [];that.setData({commentList: isRefresh ? newList : [...that.data.commentList, ...newList],currentPage: isRefresh ? 2 : that.data.currentPage + 1,hasMore: newList.length === that.data.pageSize});}},fail() {wx.showToast({title: '网络错误',icon: 'none'});},complete() {that.setData({ loading: false });wx.stopPullDownRefresh();}});
}
二十五)项目是如何处理用户收藏的?
解答:项目在 user/favorites.js
中实现了用户收藏功能。用户可以在收藏页面切换查看宠物收藏和博客收藏,并通过 wx.request
请求获取相应的收藏列表。每条收藏项包含了收藏对象的信息,并提供了取消收藏的功能。
代码片段:
// 文件: user/favorites.js
async loadFavorites(refresh = false) {if (this.data.loading || (!refresh && !this.data.hasMore)) {return;}const token = wx.getStorageSync('token');this.setData({ loading: true });try {const url = this.data.activeTab === 'pets' ? `${app.globalData.baseUrl}/favorites/list`: `${app.globalData.baseUrl}/blog/favorites/list`;const res = await new Promise((resolve, reject) => {wx.request({url,method: 'GET',header: {'Authorization': `Bearer ${token}`,'Content-Type': 'application/json'},data: {pageNum: refresh ? 1 : this.data.pageNum,pageSize: this.data.pageSize},success: res => resolve(res),fail: err => reject(err)});});if (res.data.code === 200) {const { data: pageInfo } = res.data;const list = this.data.activeTab === 'pets' ? pageInfo.list : pageInfo.list;const formattedList = list.map(item => {if (this.data.activeTab === 'pets' && item.pic) {let images = [];let mainImage = '/static/images/pets/default.jpg';images = item.pic.split(',').map(pic => {pic = pic.trim();if (!pic.startsWith('http') && !pic.startsWith('https')) {if (pic.startsWith('/adopt')) {pic = pic.substring(6);}if (!pic.startsWith('/')) {pic = '/' + pic;}return `${app.globalData.baseUrl}${pic}`;}return pic;});mainImage = images[0];return {...item,images,mainImage};} else if (this.data.active
项目后端
一、项目的技术架构概况
- 一句话概括:这是一个基于 SSM(Spring + SpringMVC + MyBatis)框架的宠物领养和管理平台,采用了 MVC 架构,利用 MyBatis 进行数据库操作,使用JWT进行身份验证,并通过自定义注解和拦截器实现权限控制。该项目具备完善的用户认证、权限控制、文件上传、微信登录等功能,适用于宠物领养和管理场景。
一)技术架构主要包括
- Spring:负责管理应用中的对象(Bean),协调各个组件之间的依赖关系,提供事务管理等服务。
- Spring MVC:作为 Web 框架,处理 HTTP 请求和响应,提供 RESTful API 接口。
- MyBatis:作为 ORM(对象关系映射)工具,简化数据库操作,与 Spring 结合使用,提供强大的 SQL 映射功能。
- MySQL:作为数据库管理系统,负责存储宠物信息、用户信息、领养申请信息、审核记录等各类数据。
- JWT (JSON Web Token):用于用户认证和授权,通过在HTTP头部传递token实现无状态的认证机制。
- PageHelper:用于分页查询,简化了分页逻辑的实现。
- Lombok:减少样板代码,如getter、setter等,提高开发效率。
- Servlet:用于处理上传目录初始化等Web容器相关的操作。
二)运行环境包括
- Java 8 或更高版本:确保兼容性和性能。
- Maven:作为构建工具,管理依赖和构建项目。
- MySQL:作为关系型数据库管理系统,存储应用程序数据。
- Tomcat :作为Web服务器,运行应用程序。
三)项目结构分析
1. 项目目录结构
backend/src/main/java/pet
:包含项目的Java代码,具体分为以下几个子模块:annotation
:自定义注解,如RequireRole.java
,用于权限控制。config
:配置类,如UploadDirectoryInitializer.java
、WebConfig.java
和WechatConfig.java
,用于初始化上传目录、配置跨域访问和微信登录等。controller
:控制器层,处理HTTP请求,如AdoptController.java
、UserController.java
等。exception
:自定义异常类,如AuthorizationException.java
、BusinessException.java
,用于处理不同类型的异常。interceptor
:拦截器类,如LoginInterceptor.java
、RoleInterceptor.java
,用于拦截请求进行权限验证。mapper
:MyBatis映射接口,如AdoptMapper.java
、UserMapper.java
,用于与数据库交互。model
:实体类,如AdoptRecord.java
、User.java
,表示数据库中的表结构。service
:服务层接口和实现类,如AdoptService.java
、AdoptServiceImpl.java
,封装业务逻辑。utils
:工具类,如FileLoad.java
、JwtUtil.java
,提供文件上传、JWT生成和解析等功能。Application.java
:应用程序的入口类,配置了组件扫描和Web MVC。
2. 关键文件和功能
UploadDirectoryInitializer.java
:实现了ServletContextListener
接口,在应用启动时初始化上传目录。WebConfig.java
:配置了跨域资源共享(CORS),允许前端跨域访问后端API。WechatConfig.java
:配置了微信登录的相关参数,如App ID、App Secret等。LoginInterceptor.java
:拦截请求,检查用户是否登录,确保未登录用户不能访问受保护的资源。RoleInterceptor.java
:进一步检查用户角色,确保只有具有适当权限的用户可以访问特定资源。AdoptController.java
:处理领养申请的增删改查操作,涉及领养申请的提交、审批、拒绝和取消等。UserController.java
:处理用户相关的操作,如注册、登录、微信登录、修改个人信息等。FileLoad.java
:提供了文件上传和删除的功能,支持宠物图片、用户头像等文件的上传。JwtUtil.java
:提供了JWT的生成、解析和验证功能,确保用户身份的安全性。Result.java
:用于统一API响应格式,封装了成功和失败的响应结果。
3. 数据库相关
resources/mapper/*.xml
:MyBatis的XML映射文件,定义了SQL语句和实体类之间的映射关系。database.properties
:配置了数据库连接信息,如URL、用户名和密码。upload.properties
:配置了文件上传的基础目录和其他相关参数。wechat.properties
:配置了微信登录的相关参数。
4. 配置文件
applicationContext.xml
:Spring的配置文件,配置了Bean和其他Spring相关设置。mybatis-config.xml
:MyBatis的全局配置文件,配置了MyBatis的行为和属性。springmvc-servlet.xml
:Spring MVC的配置文件,配置了视图解析器、拦截器等。web.xml
:传统的Web应用配置文件。
5. 前端静态资源
webapp/static
:存放前端静态资源,如HTML、CSS、JavaScript文件。webapp/static/admin/pages
:管理员页面的静态资源。webapp/static/images/banner
:存放轮播图的图片资源。
6. 微信小程序部分
mp-weixin
:存放微信小程序的代码,包括页面、组件和配置文件。components
:小程序组件,如评论组件。pages
:小程序页面,如领养、博客、评论、消息等。utils/imagePathUtils.js
:提供了图像路径处理的工具函数。
二、主要业务功能介绍
以下业务功能涵盖了一个宠物领养平台的主要需求,包括用户管理、宠物管理、领养管理、评论与互动、消息管理、统计信息等。
-
用户管理
- 用户可以通过登录页面输入账号和密码进行系统登录,支持普通用户和管理员两种身份。
- 支持微信登录,用户可以通过微信授权登录系统。
- 用户可以注册账号,填写用户名、密码、真实姓名、电话、邮箱等信息。
- 用户可以更新个人信息,包括头像、密码、昵称等。
- 管理员可以查看、编辑、删除用户信息,并管理用户状态(启用/禁用)。
- 用户可以查看自己的收藏、评论、领养申请等信息。
- 用户可以重置密码,需要提供用户名和绑定的手机号进行验证。
-
宠物管理
- 用户可以发布宠物信息,填写宠物名称、类型、品种、性别、体重、生日、疫苗接种情况、绝育情况、健康状况等。
- 用户可以上传宠物图片,支持多张图片上传。
- 用户可以更新或删除自己发布的宠物信息。
- 用户可以查看推荐宠物、宠物列表以及特定宠物的详细信息。
- 用户可以收藏感兴趣的宠物,并查看自己的收藏列表。
- 用户可以增加宠物的浏览次数。
- 管理员可以批量上传宠物图片,支持多张图片同时上传。
-
领养管理
- 用户可以提交领养申请,选择想要领养的宠物并填写相关信息。
- 用户可以查看自己的领养申请记录,包括申请状态(申请中、已通过、已拒绝、已取消)。
- 管理员或宠物发布者可以审核领养申请,审核通过后更新宠物状态为“已领养”。
- 管理员或宠物发布者可以拒绝领养申请,并填写拒绝理由。
- 用户可以取消自己的领养申请,但只能取消处于“申请中”的申请。
- 用户可以查看已通过的领养记录,并加载完整的宠物信息。
-
评论与互动
- 用户可以在宠物或博客页面发表评论,并查看评论列表。
- 用户可以对评论进行点赞或取消点赞,查看自己点赞过的评论。
- 用户可以对评论进行回复,并查看回复列表。
- 用户可以删除自己的评论或回复。
- 用户可以查看所有评论(仅管理员有权限)。
-
博客管理
- 用户可以发布博客,填写标题、内容、封面图片、分类、标签等信息。
- 用户可以更新或删除自己发布的博客。
- 用户可以收藏感兴趣的博客,并查看自己的收藏列表。
- 用户可以查看最新的博客列表。
- 用户可以增加博客的浏览次数。
- 用户可以对博客进行点赞或取消点赞。
-
消息管理
- 用户之间可以通过私信进行交流,支持初始化会话、发送消息、查看会话列表和消息列表。
- 用户可以标记消息为已读,查看未读消息数量。
- 用户可以删除会话中的消息。
-
统计信息
- 管理员可以查看用户总数、宠物总数、领养申请总数和评论总数。
- 管理员可以查看特定用户的收藏数量、领养申请数量等。
-
权限控制
- 系统通过拦截器实现权限控制,确保不同角色的用户只能访问其有权限的资源。
- 普通用户只能访问公开资源和个人相关资源,管理员可以访问所有资源并进行管理操作。
- 某些特定操作需要特定角色(如管理员或宠物发布者)才能执行。
-
轮播图管理
- 管理员可以添加、编辑、删除轮播图,设置轮播图的顺序和状态(激活/未激活)。
- 用户可以查看活跃的轮播图列表。
-
全局异常处理
- 系统提供了全局异常处理器,捕获并处理所有未捕获的异常,返回友好的错误信息给用户。
-
文件上传与下载
- 系统支持多种类型的文件上传,包括宠物图片、用户头像、博客封面图片等。
- 系统支持文件删除功能,确保用户上传的文件在不再需要时可以被删除。
-
JWT 认证
- 系统使用 JWT(JSON Web Token)进行用户认证,确保每次请求都经过有效的身份验证。
- 用户登录后会生成 JWT Token,后续请求需要携带此 Token 进行身份验证。
以上功能模块共同构成了宠物领养平台的核心业务逻辑,确保用户能够方便地发布、管理和领养宠物,同时也为管理员提供了强大的管理工具。
三、各文件的作用
-
RequireRole.java:
- 自定义注解,用于方法级别的权限控制,指定哪些角色可以访问该方法。
-
UploadDirectoryInitializer.java:
- 实现
ServletContextListener
接口,在应用启动时初始化上传目录,确保上传目录及其子目录存在。
- 实现
-
WebConfig.java:
- 配置Spring MVC的跨域资源共享(CORS),允许来自不同域的请求访问后端接口。
-
WechatConfig.java:
- 配置微信相关参数,如appId、appSecret等,用于微信登录和其他微信接口的调用。
-
TestBannerController.java:
- 测试轮播图控制器,用于测试轮播图相关功能(具体实现未提供)。
-
AdoptController.java:
- 处理与领养申请相关的请求,包括提交申请、获取申请列表、查看详情、取消申请、审核申请等。
-
AnswerController.java:
- 处理与回复相关的请求,包括发表回复、删除回复、获取回复详情、点赞和取消点赞等。
-
BannerController.java:
- 处理与轮播图相关的请求,包括获取活动轮播图、保存、更新和删除轮播图等。
-
BlogController.java:
- 处理与博客相关的请求,包括获取最新博客、创建博客、更新博客、删除博客、上传博客图片、增加浏览次数等。
-
BlogFavoriteController.java:
- 处理与博客收藏相关的请求,包括添加收藏、取消收藏、检查是否已收藏、获取收藏列表等。
-
CommentController.java:
- 处理与评论相关的请求,包括获取评论列表、发表评论、删除评论、点赞和取消点赞等。
-
FavoriteController.java:
- 处理与宠物收藏相关的请求,包括添加收藏、取消收藏、检查是否已收藏、获取收藏列表等。
-
MessageController.java:
- 处理与私信消息相关的请求,包括初始化会话、发送消息、获取会话列表、分页获取会话消息列表、标记消息为已读、获取未读消息数等。
-
PetController.java:
- 处理与宠物相关的请求,包括获取宠物列表、推荐宠物、获取宠物详情、创建宠物、上传宠物图片、更新宠物信息、删除宠物信息、获取救助者发布的宠物列表、获取宠物类型和品种等。
-
StatsController.java:
- 处理统计数据相关的请求,包括获取用户总数、宠物总数、领养申请总数、评论总数等,主要用于管理员查看统计数据。
-
UserController.java:
- 处理与用户相关的请求,包括用户注册、登录、微信登录、登出、获取用户列表、更新用户信息、删除用户、获取用户信息、重置密码等。
-
AuthorizationException.java:
- 定义权限异常类,用于抛出权限不足的异常。
-
BusinessException.java:
- 定义业务异常类,用于抛出业务逻辑错误的异常。
-
GlobalExceptionHandler.java:
- 全局异常处理器,捕获并处理所有未捕获的异常,返回统一的错误响应。
-
LoginInterceptor.java:
- 拦截器,用于拦截请求并处理登录逻辑,确保用户已经登录,允许特定路径的匿名访问。
-
RoleInterceptor.java:
- 拦截器,用于拦截请求并检查用户角色权限,确保用户有权限访问特定资源。
-
AdoptMapper.java:
- MyBatis Mapper接口,用于领养记录的数据访问操作,如查询、插入、更新、删除等。
-
AnswerMapper.java:
- MyBatis Mapper接口,用于回复的数据访问操作,如查询、插入、更新、删除等。
-
BannerMapper.java:
- MyBatis Mapper接口,用于轮播图的数据访问操作,如查询、插入、更新、删除等。
-
BlogFavoriteMapper.java:
- MyBatis Mapper接口,用于博客收藏的数据访问操作,如查询、插入、更新、删除等。
-
BlogMapper.java:
- MyBatis Mapper接口,用于博客的数据访问操作,如查询、插入、更新、删除等。
-
CommentLikeMapper.java:
- MyBatis Mapper接口,用于评论点赞的数据访问操作,如查询、插入、更新、删除等。
-
CommentMapper.java:
- MyBatis Mapper接口,用于评论的数据访问操作,如查询、插入、更新、删除等。
-
FavoriteMapper.java:
- MyBatis Mapper接口,用于宠物收藏的数据访问操作,如查询、插入、更新、删除等。
-
MessageMapper.java:
- MyBatis Mapper接口,用于私信消息的数据访问操作,如查询、插入、更新、删除等。
-
MessageSessionMapper.java:
- MyBatis Mapper接口,用于私信会话的数据访问操作,如查询、插入、更新、删除等。
-
PetMapper.java:
- MyBatis Mapper接口,用于宠物的数据访问操作,如查询、插入、更新、删除等。
-
UserMapper.java:
- MyBatis Mapper接口,用于用户的数据访问操作,如查询、插入、更新、删除等。
-
AdoptRecord.java:
- 定义领养记录实体类,包含领养申请的相关字段和状态常量。
-
Answer.java:
- 定义回复实体类,包含回复的相关字段,默认值设置及关联的用户和评论信息。
-
Banner.java:
- 定义轮播图实体类,包含轮播图的相关字段和状态常量。
-
Blog.java:
- 定义博客实体类,包含博客的相关字段和状态常量,默认值设置及关联的作者和评论信息。
-
BlogFavorite.java:
- 定义博客收藏实体类,包含博客收藏的相关字段。
-
BlogFavoriteRequest.java:
- 定义博客收藏请求的DTO类,用于接收前端传递的博客收藏请求参数。
-
Comment.java:
- 定义评论实体类,包含评论的相关字段,默认值设置及关联的用户、宠物、博客和回复信息。
-
CommentLike.java:
- 定义评论点赞实体类,包含评论点赞的相关字段。
-
Favorite.java:
- 定义宠物收藏实体类,包含宠物收藏的相关字段,默认值设置及关联的用户和宠物信息。
-
Message.java:
- 定义私信消息实体类,包含私信消息的相关字段及关联的发送者信息。
-
MessageSession.java:
- 定义私信会话实体类,包含私信会话的相关字段及关联的两个用户信息。
-
Pet.java:
- 定义宠物实体类,包含宠物的相关字段和状态常量,默认值设置及关联的救助者和评论信息。
-
User.java:
- 定义用户实体类,包含用户的相关字段和角色、状态常量,提供判断用户角色和状态的方法。
-
AdoptServiceImpl.java:
- 领养服务的实现类,处理领养申请的业务逻辑,如提交申请、获取申请列表、查看详情、更新申请状态等。
-
AnswerServiceImpl.java:
- 回复服务的实现类,处理回复的业务逻辑,如发表回复、删除回复、获取回复列表、点赞和取消点赞等。
-
BannerServiceImpl.java:
- 轮播图服务的实现类,处理轮播图的业务逻辑,如获取活动轮播图、保存、更新和删除轮播图等。
-
BlogFavoriteServiceImpl.java:
- 博客收藏服务的实现类,处理博客收藏的业务逻辑,如添加收藏、取消收藏、检查是否已收藏、获取收藏列表等。
-
BlogServiceImpl.java:
- 博客服务的实现类,处理博客的业务逻辑,如获取博客详情、创建博客、更新博客、删除博客等。
-
CommentServiceImpl.java:
- 评论服务的实现类,处理评论的业务逻辑,如发表评论、删除评论、获取评论列表、点赞和取消点赞等。
-
FavoriteServiceImpl.java:
- 宠物收藏服务的实现类,处理宠物收藏的业务逻辑,如添加收藏、取消收藏、检查是否已收藏、获取收藏列表等。
-
MessageServiceImpl.java:
- 私信消息服务的实现类,处理私信消息的业务逻辑,如初始化会话、发送消息、获取会话列表、分页获取会话消息列表、标记消息为已读、获取未读消息数等。
-
PetServiceImpl.java:
- 宠物服务的实现类,处理宠物的业务逻辑,如获取宠物详情、创建宠物、更新宠物信息、删除宠物信息、获取宠物列表、推荐宠物等。
-
UserServiceImpl.java:
- 用户服务的实现类,处理用户的业务逻辑,如用户登录、注册、微信登录、更新用户信息、删除用户、获取用户列表、重置密码等。
-
AdoptService.java:
- 定义领养服务接口,声明领养申请相关的业务方法。
-
AnswerService.java:
- 定义回复服务接口,声明回复相关的业务方法。
-
BannerService.java:
- 定义轮播图服务接口,声明轮播图相关的业务方法。
-
BlogFavoriteService.java:
- 定义博客收藏服务接口,声明博客收藏相关的业务方法。
-
BlogService.java:
- 定义博客服务接口,声明博客相关的业务方法。
-
CommentService.java:
- 定义评论服务接口,声明评论相关的业务方法。
-
FavoriteService.java:
- 定义宠物收藏服务接口,声明宠物收藏相关的业务方法。
-
MessageService.java:
- 定义私信消息服务接口,声明私信消息相关的业务方法。
-
PetService.java:
- 定义宠物服务接口,声明宠物相关的业务方法。
-
UserService.java:
- 定义用户服务接口,声明用户相关的业务方法。
-
FileLoad.java:
- 文件上传工具类,提供上传和删除文件的功能,支持多种类型的文件上传(如宠物图片、用户头像、博客图片等)。
-
JwtUtil.java:
- JWT工具类,用于生成、解析和验证JWT Token,包含从Token中获取用户ID和角色的方法。
-
Result.java:
- API响应结果类,定义统一的API响应格式,包含状态码、消息和数据,支持添加额外数据。
-
Application.java:
- 应用程序的入口配置类,配置Spring MVC的组件扫描和Web配置,实现WebMvcConfigurer接口。
四、主要业务功能在代码中的具体实现 & 调用过程
以下是一些主要业务功能的代码调用过程,涉及控制器(Controller)层接收请求、服务(Service)层处理业务逻辑、数据访问对象(DAO)层与数据库交互,以及实体(Entity)层表示数据模型。这些调用过程涵盖了用户认证、数据管理、业务逻辑处理等关键方面,展示了系统如何响应用户请求并处理数据。
一)用户登录流程
- 用户访问登录页面并通过 POST 请求提交登录表单(用户名、密码)到
/user/login
。 UserController
的loginuser
方法通过@PostMapping("/login")
接收这些数据。- 方法内部首先验证用户名是否为空,若为空则返回失败提示。
- 调用
userService.loginuser
方法验证用户名和密码,若验证成功则生成 JWT Token 并将其返回给客户端。 - 将用户信息存入 session,并返回包含用户信息和 token 的 JSON 响应。
代码片段:
@PostMapping("/login")
public Result loginuser(HttpSession session, @RequestBody User loginRequest) {System.out.println("Login attempt - userName: " + loginRequest.getUserName());if (loginRequest.getUserName() == null || loginRequest.getUserName().trim().isEmpty()) {System.out.println("Login failed - username is empty");return Result.fail("用户名不能为空");}try {User user = userService.loginuser(loginRequest.getUserName(), loginRequest.getPassword());if (user != null) {if (user.getPic() == null || user.getPic().isEmpty()) {user.setPic(FileLoad.getDefaultAvatar());userService.update(user);}String token = JwtUtil.generateToken(user);session.setAttribute("user", user);System.out.println("Login successful for user: " + user.getUserName() + ", role: " + user.getRole());Map<String, Object> data = new HashMap<>();data.put("user", user);data.put("token", token);data.put("isAdmin", user.isAdmin());data.put("role", user.getRole());return Result.success(data);} else {System.out.println("Login failed - invalid credentials for user: " + loginRequest.getUserName());return Result.fail("用户名或密码错误");}} catch (Exception e) {System.err.println("Login error for user: " + loginRequest.getUserName());e.printStackTrace();return Result.fail("登录失败,请重试");}
}
二)领养申请流程
- 用户访问领养申请页面并通过 POST 请求提交申请表单(领养记录)到
/adopt/apply
。 AdoptController
的apply
方法通过@PostMapping("/apply")
接收这些数据。- 方法内部首先从请求头中提取 token,并验证其有效性。
- 如果 token 有效,解析出用户 ID 并设置到领养记录中。
- 调用
adoptService.apply
方法将领养记录保存到数据库,并更新宠物状态为“申请中”。 - 返回操作结果,成功则返回申请提交成功的提示,失败则返回相应错误信息。
代码片段:
@PostMapping("/apply")
public Result apply(@RequestBody AdoptRecord adoptRecord, HttpServletRequest request) {try {String token = request.getHeader("Authorization");if (token == null || !token.startsWith("Bearer ")) {return Result.fail("请先登录");}token = token.substring(7);Integer userId = JwtUtil.getUserId(token);if (userId == null) {return Result.fail("登录已过期,请重新登录");}adoptRecord.setUserId(userId);adoptRecord.setState(AdoptRecord.STATUS_PENDING);adoptRecord.setCreateTime(new Date());adoptRecord.setUpdateTime(new Date());boolean success = adoptService.apply(adoptRecord);if (success) {return Result.success("申请提交成功");} else {return Result.fail("申请提交失败");}} catch (Exception e) {return Result.fail("申请提交失败:" + e.getMessage());}
}
三)宠物管理
- 用户访问宠物管理页面并通过 POST 请求提交创建宠物表单(宠物信息)到
/pets
。 PetController
的createPet
方法通过@PostMapping
接收这些数据。- 方法内部首先从请求头中提取 token,并验证其有效性。
- 如果 token 有效,解析出用户 ID 并设置为宠物的救助者 ID。
- 调用
petService.createPet
方法将宠物信息保存到数据库。 - 返回操作结果,成功则返回创建成功的宠物信息,失败则返回相应错误信息。
代码片段:
@PostMapping
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<Pet> createPet(@RequestBody Pet pet, @RequestHeader("Authorization") String token) {try {String cleanToken = token.replace("Bearer ", "").trim();User user = userService.getUserByToken(cleanToken);if (user == null) {return Result.fail("请先登录");}pet.setRescuerId(user.getId());pet.setCreateTime(new Date());pet.setUpdateTime(new Date());pet.setState(Pet.STATUS_AVAILABLE);Pet savedPet = petService.createPet(pet);return Result.success(savedPet);} catch (Exception e) {return Result.fail("创建宠物信息失败:" + e.getMessage());}
}
四)博客管理
- 用户访问博客管理页面并通过 POST 请求提交创建博客表单(博客信息)到
/blogs
。 BlogController
的createBlog
方法通过@PostMapping
接收这些数据。- 方法内部首先从请求头中提取 token,并验证其有效性。
- 如果 token 有效,解析出用户 ID 并设置为博客的作者 ID。
- 调用
blogService.createBlog
方法将博客信息保存到数据库。 - 返回操作结果,成功则返回创建成功的博客信息,失败则返回相应错误信息。
代码片段:
@PostMapping
public Result<Blog> createBlog(@RequestBody Blog blog, @RequestHeader("Authorization") String token) {try {if (token == null || !token.startsWith("Bearer ")) {return Result.fail("请先登录");}String actualToken = token.substring(7);User user = JwtUtil.getUser(actualToken);if (user == null) {return Result.fail("请先登录");}blog.setAuthorId(user.getId());Blog createdBlog = blogService.createBlog(blog);return Result.success(createdBlog);} catch (Exception e) {e.printStackTrace();return Result.error("创建博客失败:" + e.getMessage());}
}
五)评论管理
- 用户访问评论管理页面并通过 POST 请求提交评论表单(评论信息)到
/pets/{petId}/comments
或/blogs/{blogId}/comments
。 CommentController
的addPetComment
和addBlogComment
方法分别通过@PostMapping("/pets/{petId}/comments")
和@PostMapping("/blogs/{blogId}/comments")
接收这些数据。- 方法内部首先从请求头中提取 token,并验证其有效性。
- 如果 token 有效,解析出用户 ID 并设置到评论中。
- 调用
commentService.addComment
方法将评论信息保存到数据库。 - 返回操作结果,成功则返回创建成功的评论信息,失败则返回相应错误信息。
代码片段:
@PostMapping("/pets/{petId}/comments")
public Result<Comment> addPetComment(@PathVariable Integer petId,@RequestBody Comment comment,@RequestHeader("Authorization") String token) {if (token == null || !token.startsWith("Bearer ")) {return Result.fail("请先登录");}String actualToken = token.substring(7);User user = JwtUtil.getUser(actualToken);if (user == null) {return Result.fail("请先登录");}comment.setPetId(petId);comment.setUserId(user.getId());Comment saved = commentService.addComment(comment);return Result.success(saved);
}@PostMapping("/blogs/{blogId}/comments")
public Result<Comment> addBlogComment(@PathVariable Integer blogId,@RequestBody Comment comment,@RequestHeader("Authorization") String token) {if (token == null || !token.startsWith("Bearer ")) {return Result.fail("请先登录");}String actualToken = token.substring(7);User user = JwtUtil.getUser(actualToken);if (user == null) {return Result.fail("请先登录");}comment.setBlogId(blogId);comment.setUserId(user.getId());Comment saved = commentService.addComment(comment);return Result.success(saved);
}
六)私信管理
- 用户访问私信管理页面并通过 POST 请求提交初始化会话表单(用户 ID1、用户 ID2、宠物 ID)到
/messages/session/init
。 MessageController
的initSession
方法通过@PostMapping("/session/init")
接收这些数据。- 方法内部首先从请求头中提取 token,并验证其有效性。
- 如果 token 有效,解析出当前用户 ID,并验证其是否为发起会话的两个用户之一。
- 调用
messageService.initSession
方法初始化会话,并返回会话信息。 - 返回操作结果,成功则返回初始化会话成功的提示及会话信息,失败则返回相应错误信息。
代码片段:
@PostMapping("/session/init")
public Result initSession(@RequestBody Map<String, Object> params, HttpServletRequest request) {try {System.out.println("开始初始化会话,参数:" + params);String token = request.getHeader("Authorization");if (token == null || !token.startsWith("Bearer ")) {return Result.fail("请先登录");}token = token.substring(7);Integer currentUserId = JwtUtil.getUserId(token);if (currentUserId == null) {return Result.fail("登录已过期,请重新登录");}Integer userId1 = (Integer) params.get("userId1");Integer userId2 = (Integer) params.get("userId2");if (userId1 == null || userId2 == null) {return Result.fail("用户ID不能为空");}if (!currentUserId.equals(userId1) && !currentUserId.equals(userId2)) {return Result.fail("无权限初始化此会话");}if (userId1.equals(userId2)) {return Result.fail("不能给自己发私信");}String type = (String) params.get("type");Integer sourceId = (Integer) params.get("sourceId");Integer petId = null;if ("pet".equals(type)) {petId = sourceId;}MessageSession session = messageService.initSession(userId1, userId2, petId);System.out.println("会话初始化成功:" + session);return Result.success("初始化会话成功").add("data", session);} catch (Exception e) {System.out.println("初始化会话失败:" + e.getMessage());e.printStackTrace();return Result.fail("初始化会话失败: " + e.getMessage());}
}
七)文件上传与下载
- 用户访问文件上传页面并通过 POST 请求上传文件(如宠物图片、用户头像等)到
/pets/upload
、/uploadAvatar
等接口。 PetController
的uploadPetImages
方法或UserController
的updatePic
方法通过@PostMapping
接收文件。- 方法内部首先从请求头中提取 token,并验证其有效性。
- 如果 token 有效,解析出用户 ID 或宠物 ID,并调用
FileLoad.uploadPetPic
或FileLoad.uploadUserPic
方法上传文件。 - 返回操作结果,成功则返回上传成功的文件路径,失败则返回相应错误信息。
代码片段:
@PostMapping("/{id}/images")
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<String> uploadPetImages(@PathVariable Integer id, @RequestParam("files") MultipartFile[] files,HttpSession session) {try {Pet pet = petService.getPetById(id);if (pet == null) {return Result.fail("宠物不存在");}User user = (User) session.getAttribute("user");if (!User.ROLE_ADMIN.equals(user.getRole()) && !pet.getRescuerId().equals(user.getId())) {return Result.fail("只有宠物的救助者才能上传图片");}StringBuilder imageUrls = new StringBuilder();for (MultipartFile file : files) {String fileName = FileLoad.uploadPetPic(file);if (imageUrls.length() > 0) {imageUrls.append(",");}imageUrls.append(fileName);}pet.setPic(imageUrls.toString());pet.setUpdateTime(new Date());petService.updatePet(pet);return Result.success(imageUrls.toString());} catch (Exception e) {return Result.fail("上传图片失败:" + e.getMessage());}
}@PostMapping("/updatePic")
public Result updatePic(@RequestHeader("Authorization") String token, @RequestParam MultipartFile file) {try {if (token == null || !token.startsWith("Bearer ")) {return Result.error("请先登录");}String cleanToken = token.replace("Bearer ", "").trim();Integer userId = JwtUtil.getUserId(cleanToken);if (userId == null) {return Result.error("登录已过期,请重新登录");}User user = userService.findById(userId);if (user == null) {return Result.error("用户不存在");}if (user.getPic() != null && !user.getPic().isEmpty() && !user.getPic().equals(FileLoad.getDefaultAvatar())) {FileLoad.deleteFile(user.getPic());}String fileName = FileLoad.uploadUserPic(file);if (fileName == null) {return Result.error("上传失败");}user.setPic(fileName);Integer update = userService.update(user);if (update > 0) {return Result.success().add("data", new HashMap<String, String>() {{put("pic", fileName);}});} else {FileLoad.deleteFile(fileName);return Result.error("更新失败");}} catch (IOException e) {return Result.error(e.getMessage());} catch (Exception e) {return Result.error("服务器错误");}
}
八)微信登录流程
- 用户访问微信登录页面并通过 POST 请求提交微信登录表单(code 和 userInfo)到
/user/wx-login
。 UserController
的wxLogin
方法通过@PostMapping("/wx-login")
接收这些数据。- 方法内部首先验证参数是否完整,若不完整则返回失败提示。
- 调用
userService.wxLogin
方法通过微信 API 获取用户信息并创建或更新用户记录。 - 生成 JWT Token 并将其返回给客户端。
- 返回操作结果,成功则返回登录成功的提示及用户信息,失败则返回相应错误信息。
代码片段:
@PostMapping("/wx-login")
public Result wxLogin(@RequestBody Map<String, Object> loginRequest, HttpSession session) {try {System.out.println("收到微信登录请求: " + loginRequest);String code = (String) loginRequest.get("code");Map<String, Object> userInfo = (Map<String, Object>) loginRequest.get("userInfo");if (code == null || userInfo == null) {System.err.println("登录失败,缺少必要参数 - code: " + code + ", userInfo: " + userInfo);return Result.fail("登录失败,缺少必要参数");}User user = userService.wxLogin(code, userInfo);if (user != null) {String token = JwtUtil.generateToken(user);session.setAttribute("user", user);System.out.println("微信登录成功 - 用户: " + user.getUserName() + ", token: " + token);Map<String, Object> data = new HashMap<>();data.put("user", user);data.put("token", token);return Result.success(data);} else {System.err.println("微信登录失败 - 用户信息为空");return Result.fail("微信登录失败");}} catch (Exception e) {System.err.println("微信登录异常: " + e.getMessage());e.printStackTrace();return Result.fail("微信登录失败," + e.getMessage());}
}
五、侧重点功能详细讲解
一)用户登录与权限管理
- 代码实现逻辑:
UserController
中的loginuser
方法接收用户提交的登录信息。- 通过
UserService
的loginuser
方法验证用户名和密码。 - 使用
JwtUtil
生成JWT Token,并将用户信息存入Session。 - 如果用户存在但已被禁用,则返回登录失败。
- 如果用户不存在或密码错误,则返回登录失败。
- 设置默认头像和默认角色。
- 调用过程:
- 用户在登录页面填写用户名和密码并提交。
UserController
的loginuser
方法被触发,执行用户验证逻辑。- 根据验证结果,生成JWT Token并返回给客户端。
- 设计思路:
- 使用JWT(JSON Web Token)实现无状态的用户认证,提升系统安全性。
- 使用Session存储用户信息,便于后续操作时快速获取用户信息。
- 使用MD5加密用户密码,保证用户密码的安全性。
@PostMapping("/login")
public Result loginuser(HttpSession session, @RequestBody User loginRequest){// 登录逻辑处理
}
二)领养申请管理
- 代码实现逻辑:
AdoptController
中的apply
方法接收用户的领养申请。- 通过
JwtUtil
从Token中提取用户ID,验证用户是否已登录。 - 检查宠物是否存在且状态为“待领养”。
- 检查用户是否已经申请过该宠物。
- 更新宠物状态为“申请中”,并保存领养申请记录。
approve
和reject
方法用于管理员或宠物发布者审核领养申请。- 审核通过时,更新申请状态为“已通过”,并更新宠物状态为“已领养”。
- 审核拒绝时,更新申请状态为“已拒绝”,并更新宠物状态为“待领养”。
- 调用过程:
- 用户在领养申请页面提交申请。
AdoptController
的apply
方法被触发,执行领养申请逻辑。- 审核人员在领养管理页面进行审核操作。
AdoptController
的approve
或reject
方法被触发,执行审核逻辑。
- 设计思路:
- 使用事务管理确保领养申请和宠物状态更新的一致性。
- 通过权限校验确保只有管理员或宠物发布者可以审核领养申请。
- 使用状态机模式管理领养申请的不同状态(申请中、已通过、已拒绝、已取消)。
@PostMapping("/apply")
public Result apply(@RequestBody AdoptRecord adoptRecord, HttpServletRequest request) {// 领养申请逻辑处理
}@PostMapping("/approve/{id}")
public Result approve(@PathVariable Integer id, @RequestBody(required = false) java.util.Map<String, String> params, HttpServletRequest request) {// 审核通过逻辑处理
}@PostMapping("/reject/{id}")
public Result reject(@PathVariable Integer id, @RequestBody(required = false) java.util.Map<String, String> params, HttpServletRequest request) {// 审核拒绝逻辑处理
}
三)宠物信息管理
- 代码实现逻辑:
PetController
中的createPet
方法接收用户提交的宠物信息。- 通过
JwtUtil
从Token中提取用户ID,验证用户是否已登录。 - 设置救助者ID、创建时间和更新时间。
updatePet
和deletePet
方法用于更新和删除宠物信息。getPets
方法用于分页查询宠物列表,支持多种筛选条件。getRecommendedPets
方法用于获取推荐宠物列表,默认为最新的5只待领养宠物。
- 调用过程:
- 用户在宠物发布页面提交宠物信息。
PetController
的createPet
方法被触发,执行宠物信息发布逻辑。- 用户在宠物管理页面进行更新或删除操作。
PetController
的updatePet
或deletePet
方法被触发,执行更新或删除逻辑。- 用户在宠物列表页面进行分页查询。
PetController
的getPets
方法被触发,执行分页查询逻辑。
- 设计思路:
- 使用分页查询减少一次性加载的数据量,提升性能。
- 支持多种筛选条件,方便用户查找符合要求的宠物。
- 使用事务管理确保宠物信息更新和删除的一致性。
@PostMapping
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<Pet> createPet(@RequestBody Pet pet, @RequestHeader("Authorization") String token) {// 创建宠物信息逻辑处理
}@PutMapping("/{id}")
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<Pet> updatePet(@PathVariable Integer id, @RequestBody Pet pet, @RequestHeader("Authorization") String token) {// 更新宠物信息逻辑处理
}@DeleteMapping("/{id}")
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<Void> deletePet(@PathVariable Integer id, @RequestHeader("Authorization") String token) {// 删除宠物信息逻辑处理
}@GetMapping("/list")
public Result<PageInfo<Pet>> getPets(@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "10") Integer size,@RequestParam(required = false) String type,@RequestParam(required = false) String breed,@RequestParam(required = false) String gender,@RequestParam(required = false) String minAgeStr,@RequestParam(required = false) String maxAgeStr,@RequestParam(required = false) Boolean isVaccinated,@RequestParam(required = false) Boolean isSterilized,@RequestParam(required = false) Integer state) {// 分页查询宠物列表逻辑处理
}
四)私信消息管理
- 代码实现逻辑:
MessageController
中的initSession
方法初始化私信会话。- 检查用户是否已登录,并验证当前用户是否是会话的参与者之一。
sendMessage
方法用于发送私信。getSessionList
方法用于获取用户的私信会话列表。getMessageList
方法用于分页获取会话消息列表。markAsRead
方法用于标记消息为已读。getUnreadCount
方法用于获取用户的未读消息数。
- 调用过程:
- 用户在聊天页面点击与另一个用户聊天,触发
initSession
方法。 - 用户发送消息时,触发
sendMessage
方法。 - 用户查看私信会话列表时,触发
getSessionList
方法。 - 用户查看某一会话的消息列表时,触发
getMessageList
方法。 - 用户标记消息为已读时,触发
markAsRead
方法。 - 用户查看未读消息数时,触发
getUnreadCount
方法。
- 用户在聊天页面点击与另一个用户聊天,触发
- 设计思路:
- 使用会话机制管理私信,确保消息的有序性和一致性。
- 分页查询减少一次性加载的数据量,提升性能。
- 使用事务管理确保消息发送和会话更新的一致性。
@PostMapping("/session/init")
public Result initSession(@RequestBody Map<String, Object> params, HttpServletRequest request) {// 初始化会话逻辑处理
}@PostMapping("/send")
public Result<Message> sendMessage(@RequestBody Map<String, Object> params) {// 发送私信逻辑处理
}@GetMapping("/sessions")
public Result<List<MessageSession>> getSessionList(@RequestParam Integer userId) {// 获取会话列表逻辑处理
}@GetMapping("/list")
public Result<List<Message>> getMessageList(@RequestParam Integer sessionId,@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "20") Integer pageSize) {// 获取会话消息列表逻辑处理
}@PostMapping("/session/{sessionId}/read")
public Result<Void> markAsRead(@PathVariable Integer sessionId,@RequestParam Integer userId) {// 标记消息为已读逻辑处理
}@GetMapping("/unread/count")
public Result<Integer> getUnreadCount(@RequestParam Integer userId) {// 获取未读消息数逻辑处理
}
五)博客管理
- 代码实现逻辑:
BlogController
中的createBlog
方法接收用户提交的博客信息。- 通过
JwtUtil
从Token中提取用户ID,验证用户是否已登录。 - 设置作者ID、创建时间和更新时间。
updateBlog
和deleteBlog
方法用于更新和删除博客信息。getLatestBlogs
方法用于获取最新的博客列表。getBlogById
方法用于获取指定ID的博客详情。
- 调用过程:
- 用户在博客发布页面提交博客信息。
BlogController
的createBlog
方法被触发,执行博客信息发布逻辑。- 用户在博客管理页面进行更新或删除操作。
BlogController
的updateBlog
或deleteBlog
方法被触发,执行更新或删除逻辑。- 用户在博客列表页面查看最新博客。
BlogController
的getLatestBlogs
方法被触发,执行最新博客查询逻辑。- 用户在博客详情页面查看指定ID的博客详情。
BlogController
的getBlogById
方法被触发,执行博客详情查询逻辑。
- 设计思路:
- 使用分页查询减少一次性加载的数据量,提升性能。
- 支持多种查询条件,方便用户查找感兴趣的博客。
- 使用事务管理确保博客信息更新和删除的一致性。
@PostMapping
public Result<Blog> createBlog(@RequestBody Blog blog, @RequestHeader("Authorization") String token) {// 创建博客逻辑处理
}@PutMapping("/{id}")
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<Blog> updateBlog(@PathVariable Integer id, @RequestBody Blog blog, @RequestHeader("Authorization") String token) {// 更新博客逻辑处理
}@DeleteMapping("/{id}")
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result<Void> deleteBlog(@PathVariable Integer id, @RequestHeader("Authorization") String token) {// 删除博客逻辑处理
}@GetMapping("/latest")
public Result getLatestBlogs() {// 获取最新博客逻辑处理
}@GetMapping("/{id}")
public Result<Blog> getBlogById(@PathVariable Integer id) {// 获取博客详情逻辑处理
}
六)评论管理
- 代码实现逻辑:
CommentController
中的addPetComment
和addBlogComment
方法接收用户提交的评论信息。- 通过
JwtUtil
从Token中提取用户ID,验证用户是否已登录。 - 设置评论的宠物ID或博客ID、用户ID、创建时间和更新时间。
getPetComments
和getBlogComments
方法用于分页查询宠物或博客的评论列表。deleteComment
方法用于删除评论。likeComment
和unlikeComment
方法用于点赞或取消点赞评论。checkLike
方法用于检查用户是否已点赞。
- 调用过程:
- 用户在宠物或博客详情页面提交评论。
CommentController
的addPetComment
或addBlogComment
方法被触发,执行评论发布逻辑。- 用户在评论列表页面查看评论。
CommentController
的getPetComments
或getBlogComments
方法被触发,执行评论查询逻辑。- 用户删除自己的评论时,触发
deleteComment
方法。 - 用户点赞或取消点赞评论时,触发
likeComment
或unlikeComment
方法。 - 用户查看自己是否已点赞时,触发
checkLike
方法。
- 设计思路:
- 使用分页查询减少一次性加载的数据量,提升性能。
- 支持多种查询条件,方便用户查找感兴趣的评论。
- 使用事务管理确保评论信息更新和删除的一致性。
@PostMapping("/pets/{petId}/comments")
public Result<Comment> addPetComment(@PathVariable Integer petId,@RequestBody Comment comment,@RequestHeader("Authorization") String token) {// 发布宠物评论逻辑处理
}@PostMapping("/blogs/{blogId}/comments")
public Result<Comment> addBlogComment(@PathVariable Integer blogId,@RequestBody Comment comment,@RequestHeader("Authorization") String token) {// 发布博客评论逻辑处理
}@GetMapping("/pets/{petId}/comments")
public Result<Page<Comment>> getPetComments(@PathVariable Integer petId,@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "10") Integer size,@RequestHeader(value = "Authorization", required = false) String token) {// 获取宠物评论逻辑处理
}@GetMapping("/blogs/{blogId}/comments")
public Result<Page<Comment>> getBlogComments(@PathVariable Integer blogId,@RequestParam(defaultValue = "1") Integer page,@RequestParam(defaultValue = "10") Integer size,@RequestHeader(value = "Authorization", required = false) String token) {// 获取博客评论逻辑处理
}@DeleteMapping("/comments/{id}")
public Result<Boolean> deleteComment(@PathVariable Integer id,@RequestHeader("Authorization") String token) {// 删除评论逻辑处理
}@PostMapping("/pets/{petId}/comments/{commentId}/like")
public Result likeComment(@PathVariable Integer petId,@PathVariable Integer commentId,@RequestHeader("Authorization") String token) {// 点赞评论逻辑处理
}@DeleteMapping("/pets/{petId}/comments/{commentId}/like")
public Result unlikeComment(@PathVariable Integer petId,@PathVariable Integer commentId,@RequestHeader("Authorization") String token) {// 取消点赞评论逻辑处理
}@GetMapping("/pets/{petId}/comments/{commentId}/like")
public Result checkLike(@PathVariable Integer petId,@PathVariable Integer commentId,@RequestHeader("Authorization") String token) {// 检查是否已点赞逻辑处理
}
六、数据库表结构以及表关系梳理
这些表通过外键关系相互连接,构成了一个能够支持宠物领养系统的数据结构。每个表都有其特定的角色和功能,并且通过外键与其他表建立关系,确保了数据的完整性和一致性。
一)user
表
- 作用:存储用户信息,包括普通用户和管理员。
- 结构:
id
:主键,自增,唯一标识一个用户。userName
:用户名。password
:用户密码,存储为MD5加密后的字符串。realName
:真实姓名。telephone
:电话号码。email
:电子邮件地址。birthday
:出生日期。sex
:性别,通常用’M’表示男性,'F’表示女性。pic
:用户头像路径。role
:用户角色,如USER
或ADMIN
。openId
:微信登录用户的唯一标识符。location
:用户位置信息。description
:用户描述或简介。status
:用户状态,0表示禁用,1表示启用。lastLoginTime
:最后一次登录时间。createTime
:创建时间。updateTime
:更新时间。
二)pet
表
- 作用:存储宠物信息,包括宠物的基本属性和状态。
- 结构:
id
:主键,自增,唯一标识一个宠物。petName
:宠物名字。petType
:宠物类型,如猫、狗等。petSubType
:宠物子类型,如品种。breed
:宠物品种。sex
:宠物性别,通常用’M’表示雄性,'F’表示雌性。weight
:宠物体重。birthday
:宠物生日。isVaccinated
:是否已接种疫苗,布尔值。isSterilized
:是否已绝育,布尔值。healthStatus
:健康状况描述。pic
:宠物图片路径,多个图片用逗号分隔。state
:宠物状态,如待领养、申请中、已领养。remark
:备注信息。rescuerId
:救助者ID,关联到user
表。viewCount
:浏览次数,默认为0。favoriteCount
:收藏次数,默认为0。createTime
:创建时间。updateTime
:更新时间。
三)adopt_record
表
- 作用:存储领养申请记录,记录用户对宠物的领养申请情况。
- 结构:
id
:主键,自增,唯一标识一条领养申请记录。userId
:申请人ID,关联到user
表。petId
:申请领养的宠物ID,关联到pet
表。state
:申请状态,如申请中、已通过、已拒绝、已取消。remark
:备注信息。reviewComment
:审核意见。reviewerId
:审核人ID,关联到user
表。reviewTime
:审核时间。createTime
:创建时间。updateTime
:更新时间。
四)favorite
表
- 作用:存储用户对宠物的收藏记录。
- 结构:
id
:主键,自增,唯一标识一条收藏记录。userId
:收藏者ID,关联到user
表。petId
:被收藏的宠物ID,关联到pet
表。createTime
:创建时间。updateTime
:更新时间。
五)blog
表
- 作用:存储博客文章信息。
- 结构:
id
:主键,自增,唯一标识一篇博客。title
:博客标题。content
:博客内容。authorId
:作者ID,关联到user
表。coverImage
:封面图片路径。category
:分类。tags
:标签,多个标签用逗号分隔。viewCount
:浏览次数,默认为0。likeCount
:点赞次数,默认为0。favoriteCount
:收藏次数,默认为0。commentCount
:评论次数,默认为0。status
:博客状态,如草稿、已发布。createTime
:创建时间。updateTime
:更新时间。
六)blog_favorite
表
- 作用:存储用户对博客的收藏记录。
- 结构:
id
:主键,自增,唯一标识一条收藏记录。blogId
:被收藏的博客ID,关联到blog
表。userId
:收藏者ID,关联到user
表。createTime
:创建时间。updateTime
:更新时间。
七)comment
表
- 作用:存储评论信息,包括对宠物和博客的评论。
- 结构:
id
:主键,自增,唯一标识一条评论。petId
:评论的宠物ID,关联到pet
表,允许为空。blogId
:评论的博客ID,关联到blog
表,允许为空。userId
:评论者ID,关联到user
表。parentId
:父评论ID,用于构建评论的层级结构,允许为空。content
:评论内容。likeCount
:点赞次数,默认为0。replyCount
:回复次数,默认为0。createTime
:创建时间。updateTime
:更新时间。isLiked
:当前用户是否已点赞,布尔值,默认为false。likes
:点赞数,默认为0。
八)answer
表
- 作用:存储评论的回复信息。
- 结构:
id
:主键,自增,唯一标识一条回复。userId
:回复者ID,关联到user
表。commentId
:回复的评论ID,关联到comment
表。replyId
:回复的目标回复ID,用于构建多级回复结构,允许为空。content
:回复内容。likeCount
:点赞次数,默认为0。createTime
:创建时间。updateTime
:更新时间。
九)comment_like
表
- 作用:存储评论的点赞记录。
- 结构:
id
:主键,自增,唯一标识一条点赞记录。commentId
:点赞的评论ID,关联到comment
表。userId
:点赞者ID,关联到user
表。createTime
:创建时间。updateTime
:更新时间。
十)message_session
表
- 作用:存储私信会话信息。
- 结构:
id
:主键,自增,唯一标识一会话。userId1
:会话参与者1的ID,关联到user
表。userId2
:会话参与者2的ID,关联到user
表。petId
:关联的宠物ID,关联到pet
表,允许为空。lastMessage
:最近一条消息内容。lastMessageTime
:最近一条消息的时间。unreadCount1
:用户1的未读消息数。unreadCount2
:用户2的未读消息数。createTime
:创建时间。updateTime
:更新时间。
十一)message
表
- 作用:存储私信消息内容。
- 结构:
id
:主键,自增,唯一标识一条消息。sessionId
:会话ID,关联到message_session
表。senderId
:发送者ID,关联到user
表。content
:消息内容。isRead
:消息是否已读,布尔值,默认为false。createTime
:创建时间。updateTime
:更新时间。
十二)banner
表
- 作用:存储轮播图信息。
- 结构:
id
:主键,自增,唯一标识一张轮播图。imageUrl
:轮播图图片URL。linkUrl
:点击轮播图跳转的链接。sort
:排序字段,默认为0。isActive
:是否激活,0表示未激活,1表示激活。createTime
:创建时间。updateTime
:更新时间。
十三)表和表的关系
adopt_record
表通过userId
和petId
分别与user
表和pet
表关联,表示用户对宠物的领养申请。favorite
表通过userId
和petId
分别与user
表和pet
表关联,表示用户对宠物的收藏。blog
表通过authorId
与user
表关联,表示博客的作者。blog_favorite
表通过blogId
和userId
分别与blog
表和user
表关联,表示用户对博客的收藏。comment
表通过userId
、petId
和blogId
分别与user
表、pet
表和blog
表关联,表示用户对宠物或博客的评论。answer
表通过userId
和commentId
分别与user
表和comment
表关联,表示用户对评论的回复。comment_like
表通过commentId
和userId
分别与comment
表和user
表关联,表示用户对评论的点赞。message_session
表通过userId1
、userId2
和petId
分别与user
表和pet
表关联,表示两个用户之间的私信会话,可能涉及某只宠物。message
表通过sessionId
和senderId
分别与message_session
表和user
表关联,表示私信会话中的具体消息。
这些表之间通过外键建立了紧密的联系,确保了数据的一致性和完整性,共同支撑了宠物领养系统的各项功能,如用户管理、宠物信息管理、领养申请、收藏、评论、私信等功能模块。
七、可能的答辩问题
一)如何实现用户的登录和注册功能?
解答:用户登录和注册功能由UserController
中的loginuser
和add
方法实现。用户提交用户名和密码后,系统通过UserService
中的loginuser
方法验证用户信息。注册功能通过add
方法验证用户名是否已存在,并设置默认头像和角色。登录成功后,生成JWT Token并通过HttpSession
保存用户信息。
代码片段:
@PostMapping("/login")
public Result loginuser(HttpSession session, @RequestBody User loginRequest){// 登录逻辑
}@PostMapping("/register")
public Result add(@RequestBody User user){// 注册逻辑
}
二)系统如何处理并发用户登录?
解答:系统使用JwtUtil
生成和验证JWT Token来管理用户会话,每个用户登录后都会生成一个唯一的Token。Token的生成和验证是线程安全的,确保多个用户可以同时登录而不会产生冲突。
代码片段:
public static String generateToken(User user) {// 生成Token逻辑
}
三)系统如何进行权限控制?
解答:权限控制通过自定义注解@RequireRole
和拦截器RoleInterceptor
实现。@RequireRole
用于标注需要特定角色才能访问的API,RoleInterceptor
在请求到达控制器之前检查用户是否有权限访问。
代码片段:
@RequireRole({User.ROLE_USER, User.ROLE_ADMIN})
public Result updatePet(@PathVariable Integer id, @RequestBody Pet pet, @RequestHeader("Authorization") String token) {// 更新宠物逻辑
}
四)领养申请功能是如何实现的?
解答:领养申请功能通过AdoptController
实现,用户提交申请时,系统调用AdoptService
的apply
方法验证宠物状态和用户是否已申请。申请成功后,宠物状态变为“申请中”。
代码片段:
@PostMapping("/apply")
public Result apply(@RequestBody AdoptRecord adoptRecord, HttpServletRequest request) {// 申请逻辑
}
五)系统如何处理领养申请的审批流程?
解答:领养申请的审批流程通过AdoptController
中的approve
和reject
方法实现。管理员或宠物发布者可以审核申请,审核通过或拒绝时,更新申请状态和宠物状态,并记录审核信息。
代码片段:
@PostMapping("/approve/{id}")
public Result approve(@PathVariable Integer id, @RequestBody(required = false) java.util.Map<String, String> params, HttpServletRequest request) {// 审核通过逻辑
}@PostMapping("/reject/{id}")
public Result reject(@PathVariable Integer id, @RequestBody(required = false) java.util.Map<String, String> params, HttpServletRequest request) {// 审核拒绝逻辑
}
六)系统如何实现微信登录功能?
解答:微信登录通过UserController
中的wxLogin
方法实现。用户通过微信授权获取code,系统调用微信接口获取用户信息,创建或更新用户记录,并生成JWT Token。
代码片段:
@PostMapping("/wx-login")
public Result wxLogin(@RequestBody Map<String, Object> loginRequest, HttpSession session) {// 微信登录逻辑
}
七)系统如何处理文件上传和下载?
解答:文件上传和下载通过FileLoad
工具类实现。上传文件时,系统根据文件类型选择不同的上传目录,并返回文件的访问路径。下载文件时,系统根据文件路径删除文件。
代码片段:
public static String uploadPetPic(MultipartFile file) throws IOException {// 上传宠物图片逻辑
}public static boolean deleteFile(String filePath) {// 删除文件逻辑
}
八)系统如何实现分页查询功能?
解答:分页查询功能通过PageHelper
插件实现。在查询数据前,使用PageHelper.startPage
方法设置分页参数,查询完成后,返回PageInfo
对象封装分页结果。
代码片段:
PageHelper.startPage(page, size);
List<Pet> pets = petMapper.findPets(type, breed, gender, minAge, maxAge, isVaccinated, isSterilized, state);
return new PageInfo<>(pets);
九)系统如何实现评论和回复功能?
解答:评论和回复功能通过CommentController
和AnswerController
实现。用户发表评论时,系统调用CommentService
的addComment
方法保存评论;回复评论时,系统调用AnswerService
的addAnswer
方法保存回复。评论和回复都支持点赞和取消点赞。
代码片段:
@PostMapping("/pets/{petId}/comments")
public Result<Comment> addPetComment(@PathVariable Integer petId,@RequestBody Comment comment,@RequestHeader("Authorization") String token) {// 发表宠物评论逻辑
}@PostMapping("/pets/{petId}/comments/{commentId}/like")
public Result likeComment(@PathVariable Integer petId,@PathVariable Integer commentId,@RequestHeader("Authorization") String token) {// 点赞评论逻辑
}
十)系统如何处理异常情况?
解答:系统通过全局异常处理器GlobalExceptionHandler
捕获所有未处理的异常,并返回统一的Result
对象给客户端。针对特定类型的异常,如AuthorizationException
和BusinessException
,有不同的处理逻辑。
代码片段:
@ControllerAdvice
public class GlobalExceptionHandler {@ExceptionHandler(Exception.class)@ResponseBodypublic Result handleException(Exception e) {// 异常处理逻辑}
}
十一)系统如何实现数据分页和排序?
解答:数据分页和排序通过PageHelper
插件和MyBatis的动态SQL实现。在查询数据前,使用PageHelper.startPage
方法设置分页参数,并在SQL中添加排序条件。查询完成后,返回PageInfo
对象封装分页和排序结果。
代码片段:
PageHelper.startPage(page, size);
List<Blog> blogs = blogMapper.findRecentBlogs(limit);
return new PageInfo<>(blogs);
十二)系统如何实现私信消息功能?
解答:私信消息功能通过MessageController
和MessageService
实现。用户发起私信时,系统调用MessageService
的sendMessage
方法保存消息,并更新会话状态。用户可以通过MessageController
的getMessageList
方法获取会话消息列表。
代码片段:
@PostMapping("/send")
public Result<Message> sendMessage(@RequestBody Map<String, Object> params) {// 发送私信逻辑
}@GetMapping("/list")
public Result<List<Message>> getMessageList(@RequestParam Integer sessionId,@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "20") Integer pageSize) {// 获取会话消息列表逻辑
}
十三)系统如何处理数据一致性和事务管理?
解答:系统通过Spring的@Transactional
注解实现事务管理,确保多个数据库操作要么全部成功,要么全部回滚。对于涉及多表操作的场景,如领养申请审批,系统会在同一个事务中更新多个表的数据,确保数据一致性。
代码片段:
@Transactional
public boolean apply(AdoptRecord adoptRecord) {// 领养申请逻辑
}
十四)系统如何实现跨域资源共享(CORS)?
解答:系统通过WebConfig
类中的addCorsMappings
方法配置CORS,允许来自任意域名的请求。配置了允许的HTTP方法、请求头和最大缓存时间,确保前后端分离项目可以正常通信。
代码片段:
@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").maxAge(3600);}
}
十五)系统如何实现用户收藏和取消收藏功能?
解答:用户收藏和取消收藏功能通过FavoriteController
和BlogFavoriteController
实现。用户收藏宠物或博客时,系统调用FavoriteService
或BlogFavoriteService
的addFavorite
方法保存收藏记录;取消收藏时,调用removeFavorite
方法删除记录,并更新收藏数量。
代码片段:
@PostMapping("/add/{petId}")
public Result addFavorite(@PathVariable Integer petId, HttpServletRequest request) {// 收藏宠物逻辑
}@PostMapping("/remove/{petId}")
public Result removeFavorite(@PathVariable Integer petId, HttpServletRequest request) {// 取消收藏逻辑
}
十六)系统如何实现轮播图管理功能?
解答:轮播图管理功能通过BannerController
和BannerService
实现。管理员可以添加、删除和更新轮播图,系统通过BannerMapper
与数据库交互,保存或查询轮播图信息。
代码片段:
@PostMapping
public Result<?> saveBanner(@RequestBody Banner banner) {// 保存轮播图逻辑
}@DeleteMapping("/{id}")
public Result<?> deleteBanner(@PathVariable Integer id) {// 删除轮播图逻辑
}
十七)系统如何实现博客文章的发布和管理?
解答:博客文章的发布和管理通过BlogController
和BlogService
实现。用户提交博客内容时,系统调用BlogService
的createBlog
方法保存博客,并设置默认状态为草稿。管理员可以审核博客,将其状态更改为已发布。
代码片段:
@PostMapping
public Result<Blog> createBlog(@RequestBody Blog blog, @RequestHeader("Authorization") String token) {// 创建博客逻辑
}@PutMapping("/{id}")
public Result<Blog> updateBlog(@PathVariable Integer id, @RequestBody Blog blog, @RequestHeader("Authorization") String token) {// 更新博客逻辑
}
十八)系统如何实现用户信息的修改和密码重置?
解答:用户信息的修改和密码重置通过UserController
中的update
和resetPassword
方法实现。用户修改信息时,系统调用UserService
的update
方法更新用户记录;重置密码时,系统验证用户名和手机号,并更新用户密码。
代码片段:
@PostMapping("/update")
public Result update(@RequestBody User user){// 更新用户信息逻辑
}@PostMapping("/reset-password")
public Result resetPassword(@RequestBody Map<String, String> request) {// 重置密码逻辑
}
十九)系统如何实现图片上传和展示?
解答:图片上传和展示通过FileLoad
工具类和各控制器中的上传接口实现。用户上传图片时,系统根据图片类型选择不同的上传目录,并返回图片的访问路径。展示图片时,系统根据图片路径从服务器读取图片并返回给前端。
代码片段:
public static String uploadPetPic(MultipartFile file) throws IOException {// 上传宠物图片逻辑
}public static String uploadBlogImage(MultipartFile file) throws IOException {// 上传博客图片逻辑
}
二十)系统如何实现统计数据功能?
解答:统计数据功能通过StatsController
实现。管理员可以查询用户总数、宠物总数、领养申请总数和评论总数。系统调用相应服务类的方法,统计不同类型的记录数量,并返回给前端。
代码片段:
@GetMapping("/user/count")
@RequireRole(User.ROLE_ADMIN)
public Result<Integer> getUserCount() {// 获取用户总数逻辑
}@GetMapping("/adopt/count")
@RequireRole(User.ROLE_ADMIN)
public Result<Integer> getAdoptCount() {// 获取领养申请总数逻辑
}
相关文章:
基于微信小程序开发的宠物领养平台——代码解读
项目前端 一、项目的技术架构概况 一句话概括:该项目是基于微信小程序开发的宠物领养平台,采用原生小程序框架进行用户界面的构建,使用 wx.request 进行 API 请求,并通过 getApp() 和本地存储来管理全局状态和用户信息。 一&am…...
KICK第五课:Mac 系统下安装 Xcode 或 Clang
Mac 系统下安装 Xcode 或 Clang 详细指南 一、安装前的准备 确认系统版本 macOS 10.9 及以上版本支持 Xcode 和 Clang。若版本过低,需先升级系统。 了解工具区别 Xcode:苹果官方 IDE,包含完整开发环境、模拟器、调试工具等,适合…...
PHP语法基础
PHP语法基础 一,变量 在PHP中,变量是存储数据的容器,其灵活性和动态类型系统是PHP的核心特性之一。以下是PHP变量的详细解析,涵盖声明、作用域、类型转换及最佳实践: 1. 变量基础 声明与命名规则 无需显式声明类型&…...
嵌入式硬件: GPIO与二极管基础知识详解
1. 前言 在嵌入式系统和硬件开发中,GPIO(通用输入输出)是至关重要的控制方式,而二极管作为基础电子元件,广泛应用于信号整流、保护电路等。本文将从基础原理出发,深入解析GPIO的输入输出模式,包…...
母婴商城系统Springboot设计与实现
项目概述 《母婴商城系统Springboot》是一款基于Springboot框架开发的母婴类电商平台,旨在为母婴产品提供高效、便捷的在线购物体验。该系统功能全面,涵盖用户管理、商品分类、商品信息、商品资讯等核心模块,适合母婴电商企业或个人开发者快…...
Redis相关面试题
以下是150道Redis相关面试题: Redis基础概念 1. Redis是什么? Redis是一个开源的、基于内存的高性能键值存储数据库,常用于缓存、消息队列等场景。 2. Redis的特点有哪些? • 高性能,读写速度快。 • 支持多种数据…...
ArcGIS助力水文分析:数据处理、地图制作与流域特征提取
在水文水环境保护中,对于信息的采集、处理和分析是关键步骤。水文水环境及其相关数据均具有空间分布特征,传统的方法难以发挥作用。地理信息系统(GIS)强大的空间数据管理和分析功能,在空间信息处理上有独到的优势&…...
docker桌面版启动redis,解决无法连接
docker run -d --name redis -p 6379:6379 -v E:\2\redis\redis.conf:/usr/local/etc/redis/redis.conf redis redis-server /usr/local/etc/redis/redis.conf 在本地创建一个目录,里面有个redis.conf文件,内容如下,启动时绑定这个配置文件目…...
Vue 项目中 CDN 引入的利弊及解决方案
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。通过调试发送时间主要消耗…...
【QT】】qcustomplot的使用
1.下载并添加qcustomplot.c和qcustomplot.h文件 拖动一个Widget,提升为qcustomplot 成功后是这样的, 改第三行:greaterThan(QT_MAJOR_VERSION, 4): QT widgets printsupport 编译,不报错,出现带坐标轴的界面&#…...
第三周日志-web(2)
原本计划的web不是这个,但是b站上一个大佬讲web做到了连我都能听懂,不趁热打铁学一学记一记就怕忘记了 指路:Shiro反序列化漏洞(一)-shiro550流程分析_哔哩哔哩_bilibili khttps://www.zhihu.com/question/486555909 学模板先看看结构和功…...
KICK第四讲Linux 系统下安装 GCC 编译器全指南
Linux 系统下安装 GCC 编译器全指南 GCC(GNU Compiler Collection)是 Linux 系统下最常用的编译器之一,支持 C/C、Java 等多种编程语言。本文将介绍不同 Linux 发行版下的安装方法,帮助开发者快速配置开发环境。 一、使用包管理…...
SpringCloud 学习笔记1(Spring概述、工程搭建、注册中心、负载均衡、 SpringCloud LoadBalancer)
文章目录 SpringCloudSpringCloud 概述集群和分布式集群和分布式的区别和联系 微服务什么是微服务?分布式架构和微服务架构的区别微服务的优缺点?拆分微服务原则 什么是 SpringCloud ?核心功能与组件 工程搭建父项目的 pom 文件 注册中心Rest…...
go 安装swagger
1、依赖安装: # 安装 swag 命令行工具 go install github.com/swaggo/swag/cmd/swaglatest# 安装 gin-swagger 和 swagger 文件的依赖 go get -u github.com/swaggo/gin-swagger go get -u github.com/swaggo/files 2、测试 cmd中输入: swag -v 如果…...
Java中关于Optional的 orElse 操作,以及 orElse 与 orElseGet 的区别
文章目录 1. 大概说明2. 详细分析2.1 .orElse 操作2.2 .orElse 的作用:避免空指针异常2.3 为什么要用?2.4 orElseGet如何使用2.5 orElse和orElseGet的区别 1. 大概说明 这篇文章的目的是为了说明: orElse 如何使用orElseGet 如何使用两者的…...
Sqlmap注入工具简单解释
安装 1. 安装 Python SQLMap 是基于 Python 开发的,所以要先安装 Python 环境。建议安装 Python 3.9 或更高版本,可从 Python 官方网站 下载对应操作系统的安装包,然后按照安装向导完成安装。 2. 获取 SQLMap 可以从 SQLMap 的官方 GitHu…...
petalinxu 在zynq的FPGA下的ST7735S的驱动配置
spi的接线: 【TFT模块排针8】 【开发板spi,gpio】【antminers9】 VCC ----------- 3.3V ----------- 3.3V GND ----------- GND ----------- GND BLK(背光)-------GPIO----------- BANK34_L4N_RXD2(w13; j2.12; gpio[2]) RST(复位ÿ…...
数据篇| App爬虫入门(一)
App 的爬取相比 Web 端爬取更加容易,反爬虫能力没有那么强,而且数据大多是以 JSON 形式传输的,解析更加简单。在 Web 端,我们可以通过浏览器的开发者工具监听到各个网络请求和响应过程,在 App 端如果想要查看这些内容就需要借助抓包软件。常见抓包软件有: 工具名称…...
【6】拓扑排序学习笔记
前言 有向无环图和拓扑排序直接关联到中后期的图论建模思想,是很重要的基础知识。这个如果不彻底弄懂,以后图论会很困难。 有向无环图 正如其名,一个边有向,没有环的图,也叫DAG。 DAG图实际运用:描述含…...
OpenCV实现图像特征提取与匹配
一、特征检测与描述子提取 选择特征检测器 常用算法包括: ORB:一种高效的替代SIFT和SURF的算法,主要用于移动机器人和增强现实等领域。适合实时应用,结合FAST关键点与BRIEF描述子。SIFT(尺度不变特征变…...
MyBatis 的核心配置文件是干什么的? 它的结构是怎样的? 哪些是必须配置的,哪些是可选的?
MyBatis 的核心配置文件(通常命名为 mybatis-config.xml)是 MyBatis 应用程序的入口点,它定义了 MyBatis 的全局配置信息 。 核心配置文件的作用: 配置 MyBatis 的运行时行为: 通过 <settings> 标签设置全局参数ÿ…...
VLAN,DHCP实验访问物理机
目标 三层交换机完成DHCP自动分配IP地址不同vlan间完成通信DNS服务器能够解析www.baidu.com,使PC机能够访问连接真实物理机,PC机与物理机能够互相访问 步骤 一、创建VLAN,配置好PC机和交换机的IP地址 LSW1 [LSW1]vlan batch 10 20 Info: T…...
六十天前端强化训练之第十七天React Hooks 入门:useState 深度解析
欢迎来到编程星辰海的博客讲解 看完可以给一个免费的三连吗,谢谢大佬! 目录 一、知识讲解 1. Hooks 是什么? 2. useState 的作用 3. 基本语法解析 4. 工作原理 5. 参数详解 a) 初始值设置方式 b) 更新函数特性 6. 注意事项 7. 类组…...
解决 HTTP 请求中的编码问题:从乱码到正确传输
文章目录 解决 HTTP 请求中的编码问题:从乱码到正确传输1. **问题背景**2. **乱码问题的原因**2.1 **客户端编码问题**2.2 **请求头缺失**2.3 **服务器编码问题** 3. **解决方案**3.1 **明确指定请求体编码**3.2 **确保请求头正确**3.3 **动态获取响应编码** 4. **调…...
跨国企业网络案例分析:SD-WAN智能组网
跨国企业面临的网络问题日益增加,如全球供应链协同、跨国研发协作及实时生产数据传输等场景,对网络质量提出更高要求。本文将深度解析某跨国工业集团如何通过SD-WAN实现网络架构智能化转型。 该集团以上海全球总部为核心,构建了覆盖亚欧美三大…...
视频孪生与三维视频融合:重构工业现场的“数字视网膜“
在浙江某精密制造企业的总控中心,30米长的曲面屏上实时跳动着工厂的每个生产细节:机械臂的运动轨迹与数字模型完全同步,质检工位的操作误差被自动标记,AGV小车的行进路径在三维空间中以光带形式可视化呈现。这种虚实交融的场景并非…...
STM32Cubemx-H7-7-OLED屏幕
如何把江科大的OLED标准库文件换成hal库的文件 前言 本文讲解如在hHAL库中使用OLED,其实江科大做的文件好已经很好了 只讲操作,不讲废话,默认大家都有32基本操作 创建工程 首先创建工程 把那两个引脚设置成开漏 获取标准库文件 打开江科大O…...
FPGA为何要尽量减少组合逻辑的使用
在FPGA设计中,组合逻辑的使用确实需要谨慎,尤其是要尽量减少它的复杂性。这并不是因为组合逻辑本身不好,而是因为它在实际应用中容易引发一系列问题,而这些问题往往与FPGA的设计哲学和硬件特性相冲突。让我从几个关键点来和你聊聊…...
缓存使用的具体场景有哪些?缓存的一致性问题如何解决?缓存使用常见问题有哪些?
缓存使用场景、一致性及常见问题解析 一、缓存的核心使用场景 1. 高频读、低频写场景 典型场景:商品详情页、新闻资讯、用户基本信息。特点:数据更新频率低,但访问量极高。策略: Cache-Aside(旁路缓存)&a…...
基于 RWA 模型与 AI - Agent 协同的企业级 aPAAS 架构设计
一、引言 在企业数字化转型不断深化的当下,现实世界资产(RWA)模型与人工智能智能体(AI - Agent)的协同融合,为企业级应用平台即服务(aPAAS)架构的创新发展带来了新契机。这种架构旨在…...
基于“动手学强化学习”的知识点(一):第 14 章 SAC 算法(gym版本 >= 0.26)
第 14 章 SAC 算法(gym版本 > 0.26) 摘要SAC 算法(连续)SAC 算法(离散) 摘要 本系列知识点讲解基于动手学强化学习中的内容进行详细的疑难点分析!具体内容请阅读动手学强化学习&…...
【QT:信号和槽】
QT信号涉及的三要素:信号源、信号类型、信号的处理方式。 QT的信号槽机制: 给按钮的点击操作关联一个处理函数,用户点击按钮时触发,对应的处理函数就会执行 QT中使用connect函数将信号和槽关联起来,信号触发…...
Oracle中的INHERIT PRIVILEGES权限
Oracle中的INHERIT PRIVILEGES权限 存储过程和用户函数的AUTHID属性调用者权限vs定义者权限一个简单的示例INHERIT PRIVILEGES权限的含义INHERIT PRIVILEGES权限的安全隐患注意到Oracle 19c数据库中有如下权限信息: SQL> select grantor,grantee,table_name,privilege fro…...
Compose笔记(九)--Checkbox
这一节主要了解一下Compose中的Checkbox,它是Jetpack Compose UI框架中的一个组件,用于创建复选框功能。它允许用户从一个集合中选择一个或多个项目,可以将一个选项打开或关闭。与传统的Android View系统中的Checkbox相比,Compose…...
CSS中粘性定位
1.如何设置为粘性定位? 给元素设置posttion:sticky 即可实现粘性定位. 可以使用left, right ,top, bottom 四个属性调整位置,不过最常用的是top 值. 2.粘性定位的参考点在哪里? 离他最近的一个拥有"滚动机制"的祖先元素,即便这个祖先不是最近的真实可滚动祖先. 3.粘…...
日本IT|AWS工作内容及未来性、以及转职的所需资质和技能
AWSとは AWSはAmazon Web Services(アマゾンウェブサービス)の略称です。 名称から分かるとおり、ネットを通じた通販などを事業として行っているAmazon.com社がクラウドサービスとして運営しています。 本来であれば自分たちでインフラ環境を構築する…...
《Spring日志整合与注入技术:从入门到精通》
1.Spring与日志框架的整合 1.Spring与日志框架进行整合,日志框架就可以在控制台中,输出Spring框架运行过程中的一些重要的信息。 好处:方便了解Spring框架的运行过程,利于程序的调试。 Spring如何整合日志框架 Spring5.x整合log4j…...
如何判断一个项目用的是哪个管理器
如何判断一个项目用的是哪个管理器 npm: 如果项目中存在 package-lock.json 文件,这通常意味着项目使用 npm 作为包管理器。package-lock.json 文件会锁定项目的依赖版本,确保在不同环境中安装相同的依赖。 pnpm: 如果项目中存在 pnpm-lock.yaml 文件&a…...
软件工程概述
软件开发生命周期 软件定义时期:包括可行性研究和详细需求分析,任务是确定软件开发的总目标。 问题定义可行性研究(经济、技术、操作、社会可行性,确定问题和解决办法)需求分析(确定功能需求,性…...
文件系统 linux ─── 第19课
前面博客讲解的是内存级文件管理,接下来介绍磁盘级文件管理 文件系统分为两部分 内存级文件系统 : OS加载进程 ,进程打开文件, OS为文件创建struct file 和文件描述符表 ,将进程与打开的文件相连, struct file 内还函数有指针表, 屏蔽了底层操作的差异,struct file中还有内核级…...
一篇博客搞定时间复杂度
时间复杂度 1、什么是时间复杂度?2、推导大O的规则3、时间复杂度的计算3.1 基础题 13.2 基础题 23.3基础题 33.4进阶题 13.5进阶题 23.6 偏难题 13.7偏难题 2(递归) 前言: 算法在编写成可执行程序后,运行时要耗费时间和…...
微信小程序实现根据不同的用户角色显示不同的tabbar并且可以完整的切换tabbar
直接上图上代码吧 // login/login.js const app getApp() Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函…...
S_on@atwk的意思
S_onatwk 可能是某种自动化或控制系统中的符号或标记,尤其在PLC(可编程逻辑控制器)编程中,类似的表达方式通常用于表示特定的信号、状态或操作。 我们可以分析这个表达式的各个部分: S_on:通常࿰…...
Liunx启动kafka并解决kafka时不时挂掉的问题
kafka启动步骤 先启动zookeeper,启动命令如下 nohup ./zookeeper-server-start.sh /home/kafka/kafka/config/zookeeper.properties > /home/kafka/kafka/zookeeper.log 2>&1 &再启动kafka,启动命令如下 nohup ./kafka-server-start.sh…...
16 | 实现简洁架构的 Store 层
提示: 所有体系课见专栏:Go 项目开发极速入门实战课;欢迎加入 云原生 AI 实战 星球,12 高质量体系课、20 高质量实战项目助你在 AI 时代建立技术竞争力(聚焦于 Go、云原生、AI Infra);本节课最终…...
华为hcia——Datacom实验指南——以太网帧和IPV4数据包格式(一)
实验开始 第一步配置环境 第二步配置客户端 如图所示,我们把客户端的ip配置成192.168.1.10,网关设为192.168.1.1 第三步配置交换机1 system-view sysname LSW1 vlan batch 10 interface ethernet0/0/1 port link-type access port default vlan 10 qu…...
ubuntu软件——视频、截图、图片、菜单自定义等
视频软件,大部分的编码都能适应 sudo apt install vlc图片软件 sudo apt install gwenview截图软件 sudo apt install flameshot设置快捷键 flameshot flameshot gui -p /home/cyun/Pictures/flameshot也就是把它保存到一个自定义的路径 菜单更换 sudo apt r…...
CSS中z-index使用详情
定位层级 1.定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的; 2.如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上; 3.可以通过CSS属性z-index调整元素的显示层级; 4.z-index的属性值是数字,没有单位,值越大显示层级越高; 5.只有定位的元素…...
qt 自带虚拟键盘的编译使用记录
一、windows 下编译 使用vs 命令窗口,分别执行: qmake CONFIG"lang-en_GB lang-zh_CN" nmake nmake install 如果事先没有 指定需要使用的输入法语言就进行过编译,则需要先 执行 nmake distclean 清理后执行 qmake 才能生效。 …...
杨辉三角形(信息学奥赛一本通-2043)
【题目描述】 例5.11 打印杨辉三角形的前n(2≤n≤20)行。杨辉三角形如下图: 当n5时 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 输出: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 【输入】 输入行数n。 【输出】 输出如题述三角形。n行&#…...