网站编程需要什么语言,重庆seo网站设计,青岛谁家做网站,四川掌上电力app下载题外话#xff1a;想通过集成腾讯IM来解决即时聊天的问题#xff0c;如果含语音视频#xff0c;腾讯组件一年5万起步#xff0c;贵了#xff01;后面我们改为自己实现这个功能#xff0c;这里只是个总结而已。
图文会诊需求 首先是个图文列表界面 同个界面可以查看具体…题外话想通过集成腾讯IM来解决即时聊天的问题如果含语音视频腾讯组件一年5万起步贵了后面我们改为自己实现这个功能这里只是个总结而已。
图文会诊需求 首先是个图文列表界面 同个界面可以查看具体的图文内容 发起图文的聊天的时候 首先选择患者--再次选择医生团队--最后选择需要参与的医生--发起会话
原有的图文聊天 用了腾讯会议的组件这里要改为我们自己的东西
数据库设计
后面应该有个图文会议的列表
一个图文会议 应该关联患者、医生信息
现有设计是集成IM的在一张表当反映了这些信息 如果重新设计 这个就不太合理了 应该重新设计会议列表、医生 会议关系表 、患者会议关系表三张表.
那我们就创建一张会议表与2张关系表
CREATE TABLE chat_group (id INT AUTO_INCREMENT PRIMARY KEY,title VARCHAR(255) NOT NULL,create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,creator VARCHAR(255) NOT NULL,memo TEXT
);CREATE TABLE doctor_chat_group_relation (id INT AUTO_INCREMENT PRIMARY KEY,doctor_id INT UNSIGNED NOT NULL,chat_group_id INT NOT NULL,datetime DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 记录时间,FOREIGN KEY (doctor_id) REFERENCES sys_doctors(id) ,FOREIGN KEY (chat_group_id) REFERENCES chat_group(id)
)CREATE TABLE patient_chat_group_relation (id INT AUTO_INCREMENT PRIMARY KEY,patient_id INT NOT NULL,chat_group_id INT NOT NULL,datetime DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT 记录时间,FOREIGN KEY (patient_id) REFERENCES sys_patient(id) ,FOREIGN KEY (chat_group_id) REFERENCES chat_group(id)
) ENGINEInnoDB;
插入10条测试数据
INSERT INTO chat_group (title, creator, memo) VALUES
(Group 1, Creator 1, Memo for Group 1),
(Group 2, Creator 2, Memo for Group 2),
(Group 3, Creator 3, Memo for Group 3),
(Group 4, Creator 4, Memo for Group 4),
(Group 5, Creator 5, Memo for Group 5),
(Group 6, Creator 6, Memo for Group 6),
(Group 7, Creator 7, Memo for Group 7),
(Group 8, Creator 8, Memo for Group 8),
(Group 9, Creator 9, Memo for Group 9),
(Group 10, Creator 10, Memo for Group 10); 原来的代码是集成腾讯IM调用它 会议列表页面
现在单独做个页面
要求首先是要显示第一页数据,下拉的时候加载下一页数据
第一步pages.json当中 还需开启上拉加载事件。如下图
enablePullDownRefresh : true,
onReachBottomDistance:100,第二步先下载导入要用到uni-load-more它用于列表中做滚动加载使用展示 loading 的各种状态。 ps:uni-app官网
3第三步编写前端代码
基于Vue和uni-app框架的会诊列表页面开发
一、项目背景
本页面是一个基于Vue和uni-app框架开发的会诊列表页面用于展示医生参与的会诊信息。用户可以通过该页面查看会诊的标题、备注、创建时间等详细信息并支持点击会诊项进入详情页面。
完整代码 templateviewview classtuijian
!-- image src../../static/kehu/u841.svg/image --text 会诊列表/text/viewview classlist uni-list v-for(item ,index) in lists :keyindex uni-list-item showArrow :titleitem.title :noteitem.memo :rightTextitem.createTime clickable clickonClick()/uni-list-item/uni-listuni-load-more :statusstatus :icon-size14 :content-textcontentText //view/view/templatescriptimport {loginRequest} from /api/request.jsexport default {data() {return {status: more,totalCount: 1,params: {doctorId: 0,pageNo: 1,pageSize: 20,keyword: ,total: 0,status: 0},contentText: {contentdown: 加载更多~,contentrefresh: 加载中,contentnomore: 我是有底线的~},lists: [],}},methods: {//获取列表// async getList(){// let paramJson {// page:this.params.pageNo,// limit:this.params.pageSize,// };// let { code,data,total } await app.getReferrerListByPage(paramJson);// // console.info(data)// if(200 code){// // //请求接口成功之后判断加载状态处理数据// this.totalCount total;// if(this.params.pageNo 1){// this.lists data// }else{// this.lists this.lists.concat(data); // }// if (this.params.pageNo * this.params.pageSize total) {// this.status noMore;// }// this.params.pageNo;// } // },async getList() {this.params.doctorId wx.getStorageSync(userInfo).id// this.isloading true// uni.showLoading({// title: 加载中// });try{uni.request({url: loginRequest.baseURL getChatGroups,method: POST,header: {auth-token: wx.getStorageSync(token)},data: {...this.params},success: res {console.log(res: , res)if (res.data.code 200) {// //请求接口成功之后判断加载状态处理数据this.totalCount res.data.data.total;if(this.params.pageNo 1){this.listsres.data.data.chatGroups}else{this.lists this.lists.concat(res.data.data.chatGroups); }if (this.params.pageNo * this.params.pageSize this.totalCount) {this.status noMore;}this.params.pageNo;} else {uni.showToast({title: res.data.msg,icon: error})}}}) } catch (error) {console.error(请求失败, error);uni.showToast({title: 请求失败请稍后再试,icon: error});this.status more; // 恢复为可加载更多状态} finally {this.status more; // 确保最终状态为可加载更多除非已经没有更多数据}// uni.hideLoading()// this.isloading false},//触底加载onReachBottom() {if (this.status ! noMore) {this.status loading;this.getList()} else {this.status noMore}},onClick(item) {// 处理点击事件例如跳转到详情页console.log(点击了项目, item);// 例如uni.navigateTo({ url: /pages/detail/detail?id${item.id} });}},mounted() {this.getList(); // 页面加载时获取第一页数据}}
/scriptstyle
/* 页面或组件的样式表 *//* 设置页面的高度、背景色和滚动行为 */
page {height: 100vh;background-color: #F5F6FA;overflow-y: auto;
}/* 为列表容器设置高度和可能的滚动行为注意这里通常不需要overflow-y因为父元素已经设置了 */
.list-container {height: calc(100vh - 130rpx); /* 使用calc函数计算高度注意rpx是微信小程序的响应式单位 */
}/* 为推荐项设置样式 */
.tuijian {width: 710rpx;height: 94rpx;line-height: 94rpx; /* 设置行高与高度相同使文本垂直居中 */margin: 20rpx; /* 设置外边距 */background-color: rgba(14, 196, 153, 1); /* 设置背景色 */box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度和高度 */display: flex; /* 使用flex布局 */align-items: center; /* 垂直居中 */
}/* 为推荐项中的图片设置样式 */
.tuijian image {/* 注意在微信小程序中应该使用image标签并且它是自闭合的不需要结束标签 */width: 30rpx;height: 30rpx;margin-left: 40rpx;margin-right: 20rpx;
}/* 但是由于image是一个原生组件并且微信小程序不支持直接使用标签名选择器在组件样式中因此上面的选择器应该被重写为类选择器如果图片有特定的类名的话。例如 */
.tuijian .image-class {width: 30rpx;height: 30rpx;margin-left: 40rpx;margin-right: 20rpx;
}/* 为推荐项中的文本设置样式 */
/* 注意在微信小程序中通常使用text标签包裹文本但text并不是一个真正的DOM元素它更像是一个文本容器用于应用样式。然而在.wxss文件中您仍然可以使用类选择器来定义它的样式。 */
.tuijian .text-class {font-size: 36rpx;color: #fff;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.647058823529412); /* 设置文本阴影 */
}/* 但是如果text是您的自定义组件这不太常见则上面的选择器可能适用。否则您应该直接在view或其他容器内使用类选择器来定义文本的样式。 */
/style实际效果如图
。
还行项目item前加个小图标吧 先回顾一下引入图标的方法明天补充 今天晚了 睡觉去
二、页面结构
顶部推荐区域包含一个文本“会诊列表”用于标识页面功能。列表区域展示会诊列表项每个列表项包含标题、备注和创建时间。加载更多区域用于在用户滚动到页面底部时触发加载更多数据的操作。
三、代码说明
1. 模板部分template
view classtuijian包含推荐区域的文本“会诊列表”。uni-list用于包裹列表项支持循环渲染。 uni-list-item列表项包含标题title、备注note和创建时间rightText。uni-load-more加载更多组件根据status状态显示不同的文本内容。
2. 脚本部分script
数据data status加载更多状态支持more可加载更多、loading正在加载和noMore没有更多数据。totalCount总数据量。params请求参数包括医生ID、页码、每页数量、关键词等。contentText加载更多组件的文本内容。lists会诊列表数据。方法methods getList获取会诊列表数据的方法通过uni.request发送请求到后端接口并处理返回的数据。onReachBottom触底加载方法当用户滚动到页面底部时触发调用getList方法加载更多数据。onClick点击列表项的方法当前仅输出点击的项信息可根据需求跳转到详情页面。生命周期钩子mounted 在页面加载时调用getList方法获取第一页数据。
3. 样式部分style
页面样式设置页面高度、背景色和滚动行为。列表容器样式为列表容器设置高度和可能的滚动行为注意这里通常不需要overflow-y因为父元素已经设置了。推荐项样式为推荐项设置宽度、高度、背景色、文本样式等。文本样式为推荐项中的文本设置字体大小、颜色、文本阴影等。
四、开发步骤
创建页面文件在uni-app项目中创建新的页面文件包括.vue、.js、.json和.wxss文件或直接在.vue文件中编写模板、脚本和样式。编写模板根据页面结构编写模板代码包括推荐区域、列表区域和加载更多区域。编写脚本 在data中定义页面所需的数据和状态。编写获取会诊列表数据的方法getList并处理返回的数据。编写触底加载方法onReachBottom调用getList方法加载更多数据。编写点击列表项的方法onClick根据需求处理点击事件。在mounted生命周期钩子中调用getList方法获取第一页数据。编写样式根据页面设计编写样式代码包括页面高度、背景色、列表容器样式、推荐项样式和文本样式等。测试页面在开发环境中测试页面功能确保数据能够正确加载和显示点击事件能够正常触发和处理。
五、注意事项
请求接口确保后端提供的接口地址和参数格式正确且接口能够返回正确的数据格式。数据处理在获取到数据后需要根据需求对数据进行处理如分页、排序等。样式调整根据页面设计调整样式代码确保页面美观和用户体验良好。错误处理在请求数据时需要处理可能出现的错误情况如网络异常、接口返回错误码等并给出相应的提示信息。 3、服务端代码开发
项目背景
本项目的目标是开发一个用于医生与聊天群组关系管理的后端服务。医生可以通过这个服务查询自己所参与的聊天群组列表。这些群组信息将从小程序端发送到后端后端根据医生ID分页返回相关的群组信息。
项目结构
Controller层处理HTTP请求调用Service层的方法并返回响应结果。Service层包含业务逻辑调用Mapper层的方法与数据库进行交互。Mapper层定义与数据库交互的SQL语句。数据模型定义数据传输对象DTO和实体类。
编码步骤
1. 创建数据模型
首先我们需要定义数据传输对象DTO和实体类。
// ChatGroup.java
Data
public class ChatGroup {private Integer pageNo;private Integer pageSize;private Integer doctorId;private Integer total;private Integer status; // 注意原代码中有一个拼写错误将tatus改为statusprivate ListChatGroupDto chatGroups;
}// ChatGroupDto.java
Data
public class ChatGroupDto {private Integer chatGroupId;private String title;private LocalDateTime createTime;private String creator;private String memo;
}// DoctorChatGroupRelation.java
Data
public class DoctorChatGroupRelation {private Integer id;private Integer doctorId;private Integer chatGroupId;private LocalDateTime datetime;
}
2. 创建Mapper接口
Mapper接口定义与数据库交互的SQL语句。
// DoctorChatGroupRelationMapper.java
Mapper
public interface DoctorChatGroupRelationMapper {Select(SELECT COUNT(*) FROM doctor_chat_group_relation WHERE doctor_id #{doctorId})int countByDoctorId(Param(doctorId) Integer doctorId);Select(SELECT dcgr.chat_group_id, cg.title, cg.create_time, cg.creator, cg.memo FROM doctor_chat_group_relation dcgr JOIN chat_group cg ON dcgr.chat_group_id cg.id WHERE dcgr.doctor_id #{doctorId} LIMIT #{offset}, #{limit})ListChatGroupDto findByDoctorIdWithPagination(Param(doctorId) Integer doctorId,Param(offset) int offset,Param(limit) int limit);
}
3. 创建Service接口和实现类
Service层包含业务逻辑调用Mapper层的方法。
// DoctorChatGroupRelationServiceInterface.java
public interface DoctorChatGroupRelationServiceInterface {int countByDoctorId(Integer doctorId);ListChatGroupDto findByDoctorIdWithPagination(Integer doctorId, int pageNo, int pageSize);
}// DoctorChatGroupRelationServiceImpl.java
Service
public class DoctorChatGroupRelationServiceImpl implements DoctorChatGroupRelationServiceInterface {Autowiredprivate DoctorChatGroupRelationMapper doctorChatGroupRelationMapper;Overridepublic int countByDoctorId(Integer doctorId) {return doctorChatGroupRelationMapper.countByDoctorId(doctorId);}Overridepublic ListChatGroupDto findByDoctorIdWithPagination(Integer doctorId, int pageNo, int pageSize) {int offset (pageNo - 1) * pageSize;return doctorChatGroupRelationMapper.findByDoctorIdWithPagination(doctorId, offset, pageSize);}
}
4. 创建Controller
Controller层处理HTTP请求调用Service层的方法并返回响应结果。 // DoctorChatGroupRelationController.java
RestController
RequestMapping(/wechat/client)
Api(value 会议)
public class DoctorChatGroupRelationController {Autowiredprivate DoctorChatGroupRelationServiceInterface doctorChatGroupRelationService;PostMapping(/getChatGroups)public ResponseResultChatGroup getChatGroups(RequestBody ChatGroup chatGroup) {try {Integer doctorId chatGroup.getDoctorId();Integer pageNo chatGroup.getPageNo();Integer pageSize chatGroup.getPageSize();int totalCount doctorChatGroupRelationService.countByDoctorId(doctorId);ListChatGroupDto chatGroups doctorChatGroupRelationService.findByDoctorIdWithPagination(doctorId, pageNo, pageSize);chatGroup.setTotal(totalCount);chatGroup.setChatGroups(chatGroups);chatGroup.setStatus(1); // 可以根据需要设置状态码例如1表示成功return ResponseResult.ok(chatGroup);} catch (Exception e) {return ResponseResult.failed(获取会议列表失败 e.getMessage());}}
}
5. 创建通用的响应结果类
通常我们会创建一个通用的响应结果类来封装返回给客户端的数据。
// ResponseResult.java
Data
public class ResponseResultT {private int code;private String message;private T data;public static T ResponseResultT ok(T data) {ResponseResultT result new ResponseResult();result.setCode(200);result.setMessage(成功);result.setData(data);return result;}public static T ResponseResultT failed(String message) {ResponseResultT result new ResponseResult();result.setCode(500);result.setMessage(message);return result;}
}
注意事项
异常处理在Controller中我们使用try-catch块捕获异常并返回失败的响应结果。这样可以确保即使发生异常客户端也能接收到明确的错误信息。分页处理在Service层我们通过计算偏移量offset来实现分页查询。数据验证在实际项目中需要对接收到的数据进行验证确保数据的有效性和安全性。可以使用Spring的Valid注解和自定义验证器来实现。日志记录在关键业务逻辑处添加日志记录以便在出现问题时进行故障排查。
通过以上步骤我们完成了一个简单的医生聊天群组关系管理后端服务。该服务可以接收小程序端的请求根据医生ID分页返回相关的群组信息。
返回类型 也要封装一下
{code: 200, msg: 操作成功, data: {pageNo: 1, pageSize: 20, doctorId: 350, total: 2, tatus: null,…}}
code: 200
data: {pageNo: 1, pageSize: 20, doctorId: 350, total: 2, tatus: null,…}
chatGroups: [{chatGroupId: 1, title: Group 1, createTime: 2024-11-22 20:57:46, creator: Creator 1,…},…]
0: {chatGroupId: 1, title: Group 1, createTime: 2024-11-22 20:57:46, creator: Creator 1,…}
1: {chatGroupId: 2, title: Group 2, createTime: 2024-11-22 20:57:46, creator: Creator 2,…}
doctorId: 350
pageNo: 1
pageSize: 20
tatus: null
total: 2
msg: 操作成功
