# 高校学生实习信息管理系统前端 **Repository Path**: Hunter-Zack/webclient_school ## Basic Information - **Project Name**: 高校学生实习信息管理系统前端 - **Description**: 毕业设计 高校学生实习信息管理系统 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 3 - **Created**: 2024-01-09 - **Last Updated**: 2024-01-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 夜寒不近流苏，只怜她、后庭梅瘦。 ## 部分小改动 ### 修改标题 ![image-20230214192333817](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230214192338.png) ### 修改端口号 ![image-20230214192530852](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230214192534.png) ### 修改页面标题 ![image-20230214192626287](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230214192630.png) ### 修改ip访问 ![image-20230214192743596](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230214192746.png) # 江天一色无纤尘，皎皎空中孤月轮。 ## 路由改动 ### 添加评论区管理的路由以及替代界面 ### 添加讨论区文章的界面 ## 页面改动 # 仰天大笑出门去，我辈岂是蓬蒿人。 > 新的想法： > > 系统管理员： > > 新增： > > ​ 邮件提醒更新信息 > > -------- > > 学生： > > 新增： > > ​ 企业信息【应该重新规划一张表格 可以为空】 > > ​ 当前实习状态【0 未实习 1实习中 2实习完毕】 > > 考虑： > > ​ 是否新增【集中实习 分散实习】 > > ----- > > 指导老师： > > 新增： > > ​ 添加学生寄语板块【简单公告】 > > 考虑： > > ​ 与学生交流的模块，放弃web socket ，使用定时每秒获取信息 ## 企业信息表格 ```sql CREATE TABLE `enterprise` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `name` varchar(255) NULL COMMENT '名称', `orgtype` varchar(255) NULL COMMENT '类型', `code` varchar(255) NULL COMMENT '统一社会信用代码', `memo` varchar(200) NULL COMMENT '备注', `deleted` tinyint(4) NOT NULL DEFAULT '0' COMMENT '0--正常 1--删除', `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '修改时间', `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB COMMENT '企业信息表'; ``` ## 学生信息表格 ```sql CREATE TABLE `student` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键', `phone` varchar(11) NOT NULL DEFAULT '' COMMENT '手机号', `login_no` varchar(50) NOT NULL COMMENT '学生登录账号', `nick_name` varchar(30) NOT NULL DEFAULT '沉默的金子' COMMENT '昵称', `username` varchar(20) NOT NULL DEFAULT '' COMMENT '昵称', `password` varchar(80) NOT NULL DEFAULT '123456' COMMENT '密码', `email` varchar(20) DEFAULT 'test@qq.com' COMMENT '邮箱', `head_url` varchar(200) DEFAULT 'https://tianwenle.oss-cn-hangzhou.aliyuncs.com/t01cb4bcb769b6ac146.jpg' COMMENT '头像地址', `year` bigint(20) DEFAULT NULL COMMENT '学年', `class_name` bigint(20) DEFAULT NULL COMMENT '班级', `class_no` bigint(20) DEFAULT NULL COMMENT '几班', `teacher_id` bigint(20) NOT NULL COMMENT '辅导老师编号', `department_id` bigint(20) NOT NULL COMMENT '学院编号', `deleted` tinyint(4) NOT NULL DEFAULT '0' COMMENT '0--正常 1--删除', `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '修改时间', `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 --------------------- 在原表的基础上 添加实习状态 work_status tinyint default 0 ALTER TABLE student MODIFY COLUMN work_status TINYINT DEFAULT 0 COMMENT '当前实习状态【0 未实习 1实习中 2实习完毕】' ``` ## 学生在企业实习信息表 ```sql create table work_info( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键', `user_id` bigint(20) NOT NULL COMMENT '用户编号', `enterprise_id` bigint(20) NOT NULL COMMENT '企业编号', work_start_time TIMESTAMP COMMENT '实习开始时间', work_end_time TIMESTAMP COMMENT '实习结束时间', `deleted` tinyint(4) NOT NULL DEFAULT '0' COMMENT '0--正常 1--删除', `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '修改时间', `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY key(`id`) )ENGINE=InnoDB DEFAULT CHARSET=utf8 ``` ## 创建学生企业实习的数据库 ## 创建新的服务service_work ### 添加配置文件 ```yaml server: port: 8003 spring: application: name: service-work # 设置数据源 datasource: username: root password: 123456 driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/gra_user?characterEncoding=utf-8&useSSL=false profiles: active: dev cloud: nacos: discovery: server-addr: 127.0.0.1:8848 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl ``` ### 注册网关 ```yaml - id: service-work # uri: lb://service-work predicates: - Path=/*/work/** # 路径匹配 ``` ## 修改学生的信息 > 思来想去，实习状态还是不给老师和管理员修改实习状态的权限了 > > 只给学生可以修改实习状态，以及所在企业的信息 ### 添加企业类型 简单添加即可 ![image-20230216210019474](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230216210022.png) ### 修改管理员表格中的信息 管理员课查看实习状态 ![image-20230216203636211](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230216203640.png) ### 编写实习状态枚举类 ```java public static String getWorkStr(Integer workStatus){ // 获取所有的枚举类 WorkStatusEnum[] enums = WorkStatusEnum.values(); // 判断需要的类型 for (WorkStatusEnum workStatusEnum : enums) { if (Objects.equals(workStatusEnum.workStatus, workStatus)){ return workStatusEnum.workStr; } } return ""; } ``` ### 修改后端包装代码 重构用户对象 ```java // 判断学生是否已经实习了 Integer workStatus = student.getWorkStatus(); student.setWorkStatusStr(WorkStatusEnum.getWorkStr(workStatus)); ``` ### 修改前端界面，添加学生实习情况的列 ![image-20230217083502000](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230217083506.png) ### 学生自己填写实习状态 **添加新的路由** ```js { path: '/work', component: Layout, redirect: '/work/list', children: [ { path: 'list', name: '实习进度管理', component: () => import('@/views/work/index'), meta: { title: '实习进度管理', icon: 'form' } } ] } ``` ### 添加企业信息的表单 ### 添加工作信息的表单 ### 添加实习报告对企业信息的约束 ## 配置rabbitmq消息队列 ### 创建rabbitmq的工具类模块 **发送消息服务** ```java /* * Copyright (c) 2006, 2023, wuyahan 编写 * */ package com.graduation.rabbit.service; import org.springframework.amqp.AmqpException; import org.springframework.amqp.rabbit.core.RabbitTemplate; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; /** *

Project: school end - RabbitService *

Powered by wuyahan On 2023-02-18 16:48:06 * * @author wuyahan [tianwenle2000@163.com] * @version 1.0 * @since 17 */ @Service public class RabbitService { @Autowired private RabbitTemplate rabbitTemplate; public boolean save(String exchange, String routing, Object message){ try { rabbitTemplate.convertAndSend(exchange,routing,message); return true; } catch (Exception e) { e.printStackTrace(); } return false; } } ``` **配置消息转换器** ```java package com.graduation.rabbit.config; import org.springframework.amqp.support.converter.Jackson2JsonMessageConverter; import org.springframework.amqp.support.converter.MessageConverter; import org.springframework.boot.SpringBootConfiguration; import org.springframework.context.annotation.Bean; @SpringBootConfiguration public class MQConfig { /** * 配置消息转换器 * @return */ @Bean public MessageConverter messageConverter(){ return new Jackson2JsonMessageConverter(); } } ``` **静态信息** ```java /* * Copyright (c) 2006, 2023, wuyahan 编写 * */ package com.graduation.rabbit.config; /** *

Project: school end - MQConst *

Powered by wuyahan On 2023-02-18 16:43:32 * * @author wuyahan [tianwenle2000@163.com] * @version 1.0 * @since 17 */ public class MQConst { /** * 改变学生的实习信息 */ // 配置交换机名称 public static final String EXCHANGE_DIRECT_STUDENT = "exchange_direct_student"; // 配置路由信息 public static final String ROUTING_STUDENT = "student"; // 配置队列名称 public static final String QUEUE_STUDENT = "queue.student"; } ``` ### 提供者服务 **引入rabbitmq-util模块** ```xml com.graduation rabbitmq_util 0.0.1-SNAPSHOT ``` **配置文件** ```yaml rabbitmq: host: 192.168.51.128 port: 5672 virtual-host: / username: admin password: 123456 ``` ### 消费者服务 同上 ### 测试完毕 成功 ## 实习详细信息展示 ### 预估效果： ![image-20230220091224888](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230220091229.png) ### 需要显示的数据 > 目前想做的是，把企业信息和学生信息分离开来。 > > 需要的信息： > > ​ 1.学生的个人信息 > > ​ 2.企业的基本信息 > > ​ 3.学生在企业的工作信息（考虑信息工作信息表加上具体职务【完成】） > > ![image-20230220101022474](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230220101026.png) > > ​ 4.没了 > > ### 添加路由 ```js { path: 'show/:id', name: '学生实习详细信息', component: () => import('@/views/log/show'), meta: { title: '学生实习详细信息', icon: 'table' }, hidden: true }, ``` ### 编写前端界面 ```vue ``` **编写后端代码:** ```java @Override public Map getStudentAndWorkInfoAndEnterpriseInfo(Long id) { // 要返回的map集合 Map map = new HashMap<>(); // 根据学生id 查询学生的基本信息 Student student = studentClint.getStudent(id); // 对学生信息进行封装 packageStudentInfo(student); // 添加student对象的信息 map.put("student",student); // 根据学生id 查询学生的工作信息 QueryWrapper workInfoQueryWrapper = new QueryWrapper<>(); workInfoQueryWrapper.eq("user_id",id); WorkInfo workInfo = baseMapper.selectOne(workInfoQueryWrapper); if (workInfo != null) { // work_info 没有什么好封装的直接返回即可 map.put("workInfo", workInfo); // 根据统一社会信用编码添加企业的信息 String enterpriseCode = workInfo.getEnterpriseCode(); QueryWrapper enterpriseQueryWrapper = new QueryWrapper<>(); enterpriseQueryWrapper.eq("code", enterpriseCode); // 获取到企业信息 Enterprise enterprise = enterpriseService.getOne(enterpriseQueryWrapper); // 企业信息需要简单封装一下类型 String orgtype = enterprise.getOrgtype(); Dict dict = cmnClient.getDictById(Long.valueOf(orgtype)); // 封装企业信息 enterprise.setEnvStr(dict.getName()); // 添加企业信息 map.put("enterprise", enterprise); } return map; } private void packageStudentInfo(Student student) { // 这里并不需要做什么判断了 当前用户提交了日志报告，那么必然是信息填写完整了 Long teacherId = student.getTeacherId(); // 获取指导老师名字 我感觉这里把老师的信息也展现出来比较好 方面管理员的一些通知 避免二次查询 Teacher teacher = studentClint.getTeacherInfoByTeacherId(teacherId); // 学生的学院 班级 学年 级别 需要查询出来 // 直接拼接到一起 方便展示 // 学院id Long departmentId = student.getDepartmentId(); Dict dept = cmnClient.getDictById(departmentId); // 班级级别 Long classNo = student.getClassNo(); Dict clazz = cmnClient.getDictById(classNo); // 学年 Long year = student.getYear(); Dict yearDict = cmnClient.getDictById(year); // 班级名称 Long className = student.getClassName(); Dict classnameDict = cmnClient.getDictById(className); // 填充班级信息 19级软件工程一班 student.setFullInfo(yearDict.getName() + " " + classnameDict.getName() + " " + clazz.getName()); // 学院还是单独存放比较好 student.setDepartmentName(dept.getName()); // 指导老师的信息 // 老师的名字 String username = teacher.getUsername(); // 老师的手机号 String phone = teacher.getPhone(); // 老师的邮箱 String email = teacher.getEmail(); // 老师的头像 String headUrl = teacher.getHeadUrl(); // 填充教师的信息 Map stringInfo = new HashMap<>(); stringInfo.put("username",username); stringInfo.put("phone",phone); stringInfo.put("email",email); stringInfo.put("headUrl",headUrl); // 数据回填 student.setStringInfo(stringInfo); } ``` ### 实际效果展示 ![image-20230220145850572](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230220145855.png) ### 考虑 `目前系统逐渐完善，要不要把之前的模拟数据删除掉。` ## 讨论区开始 ### 发布话题 #### 页面布局 ![image-20230308113952746](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230308113957.png) #### 创建新的service_talk模块 ![image-20230308210546134](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230308210549.png) #### 配置网关 ```yaml - id: service-talk # uri: lb://service-talk predicates: - Path=/*/talk/** # 路径匹配 ``` ### 想法 > 突然感觉使用jwt生成**token**进行**身份验证**较好 > > 好处： > > ​ 可以携带更多的非明文cookie信息 > > ​ 发帖时，可以区分用户身份 > > ​ 修复用户修改cookie切换登录 > > 坏处： > > ​ **用户身份验证以及获取用户身份的方法都需要修改！** > > 不能辜负老师的厚望： > > ​ 1.放弃明文密码，采用MD5加密 **【完成】** > > ​ 2.采用token的方式来验证身份信息 **【完成】** ![image-20230308215610683](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230308215613.png) ## 添加师生交流答疑 ### 前端完成 ![image-20230322140607639](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230322140614.png) ### 后端模块添加 ```yml - id: service-chat # uri: lb://service-chat predicates: - Path=/chat/** # 路径匹配 - id: service-chat # uri: ws://127.0.0.1:8222 predicates: - Path=/chat # 路径匹配 ``` ## id采用雪花算法 > 莫名发现用户之间的id有重复的 这样操作起来很是麻烦，干脆直接采用雪花算法，保证id不同的同时，也能保证数据库的效率问题。 ## 评论区内容对接 > 目前还是需要一些理解： > > 1. 获取文章的信息 > 2. 获取当前用户的信息 > 3. 获取评论区的内容 ## 数据信息统计信息 > 感觉如果一个系统没有数据统计就会变得很难受！先添加统计信息 后面再决定是否添加邮件通知！ **成品效果：** ![image-20230406202401044](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230406202406.png) **添加echarts依赖:** ```cmd npm install echarts --save ``` **案例代码：** ```vue ``` ## 退出登录 **修改右上角登陆的文字：** ![image-20230412211939744](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230412211948.png) **直接导入js文件,删除当前的token:** ```js import { removeToken } from '@/utils/auth.js' ``` **移除token:** ```js async logout() { // 移除cookie信息 removeToken() // 让网页重新加载 location.reload() } ``` # 朝来新火起新烟，湖色春光净客船。 > 项目慢慢的变得复杂了起来。感觉后面还会继续添加新的东西，所以做一个简短的总结，以保证项目的正常运行。 1. 启动项目时，需要先启动nacos 2. redis 3. rabbitmq # 人生若只如初见,何事秋风悲画扇。 > 当前项目已完成`65%`，仍在==继续完成==。 不好意思老师，现在在上课，就不能开声音了。 **2023-2-15 更新：** ![image-20230217194136553](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230217194140.png) --- 添加了部分新功能，添加了新的数据表格，可以查询学生的实习详情（所在的公司，实习时间等 功能暂未完全实现） --- **学生端：** http://localhost:9531/#/dashboard ---- 学生在提交报告前得添加自己的实习信息 ，包含公司信息、实习经历信息等。 --- **指导老师端：** http://localhost:9534/#/dashboard ---- 指导老师模块 还剩下辅导答疑以及教师寄语板块未实现，辅导老师也可以查看学生的实习详细信息。 ---- **管理员端：** http://localhost:9532/#/dashboard -------------- > 项目完成进度`90%`，正在更替新的技术，更贴合企业级别的 目前就写了这么多，后续会继续完善功能，并做好规划。谢谢。 # 但愿人长久，千里共婵娟。 ![image-20230220175138135](https://gitee.com/lelebushilele/img_note/raw/master/img/2022/20230220175143.png)