【学生选课管理系统】项目笔记

项目难点

涉及到多个关联的数据库

脚手架

在这里我使用的是element-plus框架👉
具体文献参考->element-plus官网

  • 运行项目（同时运行前端和后端）

    1. program/xsxk/vue/package.json
    2. program/xsxk/springboot/src/main/java/com/example/SpringbootApplication.java

  • 在该脚手架中，加入了自定义异常检查 exception

遇到文件夹名称全红解决方案

IDEA中，如果项目目录显示红色，主要是有版本控制所导致的，解决办法就是——解除版本控制。

  1. 🔺打开 → File->setting->目录映射->VCS->null

一定要注意拼写拼写拼写

批注：formVisible 和 fromVisible

SpringBoot启动失败Application run failed的解决办法

★这个问题得具体问题具体分析，得看下面那些报错什么意思，不能直接去网上找解决办法，查阅好多博主写的文章都没解决，大致出现问题的原因如下：

  1. 注解问题：
    Controller、service层的注解缺失会造成创建bean时出现错误。
    @Controller@Service

  2. 依赖包缺失，检查pom配置文件
    检查pom.xml文件下是否缺失依赖或者有多余的依赖，判断是否对bean的正常创建有影响。

  3. xml包中存在空文件：
    在 XML格式声明中的编码伪属性前面必须有空格

  4. 报错信息：Error parsing Mapper XML. The XML location is ‘file [D:\gitee\self_development\program\xsxk\springboot\target\classes\mapper\StudentMapper.xml]’. Cause: org.apache.ibatis.builder.BuilderException: An invalid property ‘score’ was found in mapping #{collegeId, score = #{score}. Valid properties are javaType,jdbcType,mode,numericScale,resultMap,typeHandler,jdbcTypeName

  • An invalid property – 不合法属性

🔺在解决以上问题之后发现仍然不能运行，所以我就采取最原始的办法，将之前运行成功后写的那些文件一一删除，然后重新写一份，排除错误的代码，然后成功解决🎇（泪目）
真的是实在没有办法了，重写了一份，也不知道哪里有改动，反正就是没出错了 :(

  • 综上所述：还得是要养成一边写代码一边运行的习惯才行，然后记得备注和检查错别字😭

tableDate 和 tableData 找不同

  • 在网页上面显示请求成功，说明已经连接上数据库，但是依旧显示不出教师信息，说明是前端有问题，于是我反过来检查代码，嘿？你猜这么着，拼写错误！😊

⭐嘻嘻，注意不要犯低级错误喔~

405报错

一般是因为请求函数报错，经常是因为请求接口对不上缘故，多检查一下

error: "Method Not Allowed"
path: "/teacher/update"
status: 405
timestamp: "2024-11-05T02:58:22.373+00:00"
  • GET / PUT / POST / DELETE

404报错

  • 接口UI有问题

图片上传失败

添加教师图片，明明已经显示avatar已经修改完成，但是怎么也上传不到数据库，我刚开始以为可能出错有以下几点：

  1. 前端没写好，对接不上
  2. FileController文档
  3. 接口

⚪然而无论我怎么检查代码完全都没有问题时候，灵光一闪，我教师类的avatar是不是没有写好。
🔺嘻嘻，果不其然，没有写getAvatar函数

  • 明明很简答的问题又耽搁很久时间，所以说细心细心再细心，不过能想到教师类的我简直就是天才。日常辛苦我自己了：）

请求错误

  1. 数据库申请代码报错

Cannot read properties of undefined (reading ‘sex’)

遇到这种报错，基本上是遇到了 xxx.sex，比如form.sex，如果这个xxx（form）是undefined，那么就会出现这样的报错。

点击没反应排查方法

  1. F12查看网络请求，接口和参数有无问题
  2. 后台是否报错
  3. 打断点判断出问题具体环节

user.role，

  • 那么如果这个user是个undefined（未被定义）的时候，再去访问这个user里面的某个属性变量的时候，就会报这种错误。

针对管理员和学生无法看到课程信息bug

  1. 导致teachid可以被三个角色定义，其他角色也调用到teacher的if语句中

  2. 由于教师数据库没有其他角色信息

  3. 故查询不到课程

// 分页查询
const load = () => {let teacherId= nullif(data.user.role === 'TEACHER') {teacherId = data.user.id}request.get('/course/selectPage', {params: {pageNum: data.pageNum,pageSize: data.pageSize,name: data.name,teacherId: teacherId  //误写成 data.user.id }}).then(res => {data.tableData = res.data?.listdata.total = res.data?.total})
}

遗忘知识点

  • type="primary" 表示这个按钮是“主要”按钮，通常用来表示主要操作或强调重要功能。例如，在一个表单中，“提交”按钮通常会被设置为主要按钮，以引起用户的注意。

在 Element UI 中，常见的按钮类型还有：

  • default: 默认按钮
  • success: 成功按钮
  • warning: 警告按钮
  • danger: 危险按钮
  • info: 信息按钮
  • el-form-item：是Element UI库中用来包裹表单项的组件。在表单里，每个表单项都放在el-form-item里，不仅能让布局更整齐，还能给这些项添加标签和做验证

el-form就是整个表单，而el-form-item就是里面的每一个小格子啦。每个el-form-item都可以有个label属性来显示标签，比如“用户名”、“密码”这些。然后里面就可以放各种输入框啦，像el-input、el-select这些。

  • autocomplete=“off” – 用来关闭浏览器的自动填充功能的。

在JavaScript或TypeScript项目中，import 语句用于导入模块。你提到的两种导入方式主要区别在于路径的不同，这会影响代码如何解析和加载相应的模块。

  1. 绝对路径 vs 相对路径

    • import request from "@/utils/request"; 使用了绝对路径（也称为别名路径）。这种路径通常由构建工具（如Webpack）配置的别名来解析。例如，@/ 可能被配置为项目的根目录。
    • import request from "../../utils/request"; 使用的是相对路径，从当前文件的位置向上两级目录找到 utils/request 模块。

  2. 依赖解析

    • 绝对路径：如果使用绝对路径，你需要确保构建工具已经正确配置了这些路径别名，否则会导致模块找不到的问题。
    • 相对路径：相对路径依赖于文件的物理位置，因此在不同的文件结构中可能需要调整路径。

  3. 可维护性

    • 绝对路径：使用绝对路径可以使你的模块导入更加简洁和一致，特别是在大型项目中，可以减少路径深度带来的复杂性。
    • 相对路径：相对路径更直观地反映了文件之间的层级关系，但在项目结构调整时可能需要频繁修改。

示例

  • **import request from “@/utils/request”;**和
  • **import request from “…/…/utils/request”;**的区别

假设项目结构如下：

project-root/
│
├── src/
│   ├── components/
│   │   └── MyComponent.vue
│   ├── utils/
│   │   └── request.js
│
└── webpack.config.js
Webpack配置（webpack.config.js）
const path = require('path');module.exports = {// ...其他配置...resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
};
使用绝对路径

在 MyComponent.vue 中：

import request from '@/utils/request';
使用相对路径

在 MyComponent.vue 中：

import request from '../../utils/request';

总结

选择哪种方式取决于项目需求和团队约定。如果项目使用构建工具并且已经配置了路径别名，那么使用绝对路径会更加方便和一致。如果不使用构建工具或者项目较小，相对路径可能会更直接一些。

  • ElMessage.success(‘操作成功’)

这个涉及到的知识点有：

  1. Element UI框架：ElMessage.success('操作成功') 是 Element UI 框架中的一个方法，用于显示一个成功的提示信息。在使用该方法前，需要先引入 Element UI 框架。
  2. 字符串模板语法：如果你想要在 ElMessage.success 中加入变量，可以使用 ES6 的字符串模板语法，例如：const name = "John"; ElMessage.success(Hello, ${name}!);。这样，变量 name 的值就会被插入到字符串中，输出的结果类似于：Hello, John!。你也可以使用拼接字符串的方式，例如：const name = "John"; ElMessage.success("Hello, " + name + "!");。
  3. 全局重写：对于 Vue.js 3，你可以通过在 main.js 文件中全局重写 app.config.globalProperties 来修改 ElMessage.success 的行为。
  4. 组件VNode的生成：无论组件嵌套多深，只要在 Vue.component 中定义全局组件，这些构造函数都会被添加到组件的原型链上。生成的文本和 my-button 组件的 VNode 会一起作为最终 #app VNode 的组成部分。
  5. Scope（作用域）和组件间通信：通过 scope 标签和自定义事件传递数据，推荐使用全局事件总线进行组件间的复杂通信。
  6. 组件定义位置：全局组件的定义应放在 Vue 实例创建之前，因为 Vue 实例在初始化时需要先知道所有的组件信息才能正确挂载。
  7. 确认操作：在用户执行一些重要的操作时，为了防止误操作，可以使用弹窗组件来进行二次确认。
  • placeholder
    它就是input和textarea标签的一个属性，用来在文本框内啥都没输入的时候显示灰色的提示文字。这样用户就知道该填啥啦！不过啊，placeholder属性还没被CSS标准收进去哦。不同浏览器得用不同的伪元素来改它的样式
  1. 比如Chrome、Edge这些就用 ::webkit-input-placeholder
  2. Firefox用的是 ::-moz-placeholder。
  • @RequestParam和@RequestBody
public Result selectPage(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "5") Integer pageSize) {

这段代码是一个Java方法的声明，通常用于Spring框架中的控制器类（Controller）。这个方法名为selectPage，它接受两个参数：pageNum和pageSize，并返回一个Result对象。

知识点解释

  1. Spring MVC:

    • Spring MVC是Spring框架的一部分，用于构建Web应用程序。它使用控制器来处理HTTP请求，并将请求映射到相应的处理方法上。

  2. @RequestParam:

    • @RequestParam注解用于将HTTP请求参数绑定到控制器方法的参数上。
    • defaultValue属性指定了当请求中没有提供相应参数时使用的默认值。例如，如果请求中没有提供pageNum参数，那么它的默认值将是1；如果没有提供pageSize参数，那么它的默认值将是5。

  3. 分页查询:

    • 分页查询是一种常见的数据库操作，用于在大量数据中分批获取数据。pageNum表示当前页码，pageSize表示每页显示的数据条数。

  4. Result:

    • Result是一个自定义的返回类型，通常用于封装API的响应结果。它可以包含状态码、消息以及实际的数据内容。

@RequestParam 和 @RequestBody 的区别

  • @RequestParam:

    • 用于从URL请求参数中获取数据。
    • 适用于GET请求或POST请求中的表单数据。
    • 示例：
      @GetMapping("/example")
public String example(@RequestParam String name) {return "Hello, " + name;
}

  • @RequestBody:

    • 用于从HTTP请求体中获取数据，通常用于POST请求。
    • 适用于接收JSON、XML等格式的数据，并将其转换为Java对象。
    • 示例：
      @PostMapping("/example")
public String example(@RequestBody User user) {return "User created: " + user.getName();
}

总结

这段代码定义了一个分页查询的方法，通过@RequestParam注解从请求中获取分页参数，并返回一个封装了查询结果的Result对象。@RequestParam和@RequestBody的主要区别在于它们获取数据的方式不同，前者从URL参数中获取数据，后者从请求体中获取数据。

  • < el-table-column label=“职称” prop=“title”>< /el-table-column>中的prop是什么意思

在 Vue.js 框架中，el-table-column 是 Element UI 库中的一个组件，用于定义表格的列。prop 属性在这个上下文中表示该列对应的数据对象中的字段名。

具体来说，当你使用 el-table-column 时，你通常会将一个数组的数据传递给 el-table 组件，这个数组中的每个对象代表一行数据。prop 属性的值就是这些对象中的属性名，它告诉 el-table-column 应该从每行数据对象中提取哪个属性来显示在表格的这一列中。

例如：

<el-table :data="tableData"><el-table-column label="姓名" prop="name"></el-table-column><el-table-column label="年龄" prop="age"></el-table-column><el-table-column label="职称" prop="title"></el-table-column>
</el-table>

假设 tableData 是这样的：

[{ name: '张三', age: 25, title: '工程师' },{ name: '李四', age: 30, title: '经理' }
]

那么，el-table-column 的 label 属性会显示为 “职称”，而 prop 属性会告诉表格从每个对象中提取 title 属性的值来填充这一列。因此，表格中第三列会显示 “工程师” 和 “经理”。

  • data.form = JSON.parse(JSON.stringify(row))
    这个代码片段是JavaScript中的一种深拷贝操作，涉及的知识点包括JSON对象、字符串和JavaScript对象的转换。具体来说，它使用了JSON.parse()和JSON.stringify()两个方法来实现对象的深拷贝。

详细解释：

  1. JSON.stringify(row):

    • JSON.stringify() 是一个JavaScript内置的方法，用于将JavaScript对象转换为一个JSON格式的字符串。
    • 在这个例子中，它将变量row（假设它是一个对象）转换为一个JSON字符串。

  2. JSON.parse(…):

    • JSON.parse() 是另一个JavaScript内置的方法，用于将JSON格式的字符串解析成JavaScript对象。
    • 这里，它将之前通过JSON.stringify(row)得到的JSON字符串重新解析回一个新的JavaScript对象。

整体作用：

data.form = JSON.parse(JSON.stringify(row)) 这行代码的作用是将row对象进行深拷贝，并将结果赋值给data.form。深拷贝意味着新的对象与原对象之间没有引用关系，修改新对象不会影响到原对象。

涉及的知识点：

  • JSON (JavaScript Object Notation): 一种轻量级的数据交换格式。
  • JSON.stringify(): 将JavaScript对象转换为JSON字符串。
  • JSON.parse(): 将JSON字符串转换为JavaScript对象。
  • 深拷贝 vs 浅拷贝:
    • 浅拷贝: 只复制对象的引用，不复制对象的内容。
    • 深拷贝: 完全复制对象及其子对象的内容，使得新旧对象之间互不影响。

示例代码：

let row = {name: "Alice",age: 30,address: {city: "Wonderland",zipCode: "12345"}
};let data = {};
data.form = JSON.parse(JSON.stringify(row));console.log(data.form); // 输出：{ name: "Alice", age: 30, address: { city: "Wonderland", zipCode: "12345" } }

在这个例子中，data.form是row的一个深拷贝，对data.form的任何修改都不会影响到row。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/59637.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Git LFS

Git LFS

Git LFS&#xff08;Git Large File Storage&#xff09;是一个用于管理和版本控制大文件的工具&#xff0c;它扩展了 Git 的功能&#xff0c;帮助处理大文件或二进制文件的存储和管理问题。 为什么需要 Git LFS&#xff1f; Git 默认是针对文本文件进行优化的&#xff0c;尤…
阅读更多...
bat批量处理脚本细节研究

bat批量处理脚本细节研究

文章目录 bat批处理脚本&#xff08;框架&#xff09;set变量设置基本语法显示环境变量 自定义环境变量临时环境变量和永久环境变量特殊环境变量和系统默认环境变量set命令利用选项的其他应用 !与%解析变量的区别/为什么使用setlocal enabledelayedexpansion区别%的规则!使用 %…
阅读更多...
Java 网络编程（一）—— UDP数据报套接字编程

Java 网络编程（一）—— UDP数据报套接字编程

概念 在网络编程中主要的对象有两个&#xff1a;客户端和服务器。客户端是提供请求的&#xff0c;归用户使用&#xff0c;发送的请求会被服务器接收&#xff0c;服务器根据请求做出响应&#xff0c;然后再将响应的数据包返回给客户端。 作为程序员&#xff0c;我们主要关心应…
阅读更多...
使用C++来编写VTK项目时，就是要写自己的算法

使用C++来编写VTK项目时，就是要写自己的算法

其实&#xff0c;使用VTK可以使用很多种语言&#xff0c;比如java&#xff0c;python&#xff0c;和C。那么为什么非要使用C 呢&#xff1f;一个原因是觉得C语言处理数据比较快&#xff0c;另一个原因是需要自己写算法。通过继承polyDataAlgorithm来写自己的算法&#xff0c;很…
阅读更多...
【RK3588 Linux 5.x 内核编程】-等待队列（WaitQueue）

【RK3588 Linux 5.x 内核编程】-等待队列（WaitQueue）

等待队列（WaitQueue） 文章目录 等待队列（WaitQueue）1、等待队列介绍2、等待队列初始化2.1 静态初始化2.2 动态初始化3、队列任务排队3.1 wait_event3.2 wait_event_timeout3.3 wait_event_cmd3.4 wait_event_interruptible3.5 wait_event_interruptible_timeout3.6 wait_ev…
阅读更多...
[ 内网渗透实战篇-2 ] 父域子域架构的搭建与安装域环境判断域控定位组策略域森林架构配置信任关系

[ 内网渗透实战篇-2 ] 父域子域架构的搭建与安装域环境判断域控定位组策略域森林架构配置信任关系

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…
阅读更多...
unity c# Tcp网络通讯

unity c# Tcp网络通讯

本篇附带源代码&#xff0c;带有处理拆包分包粘包&#xff0c;也会撰明具体内容。 首先对于tcp就是挥手机制&#xff0c;三次握手四次挥手机制。 一、三次握手 具体过程为简单解释为&#xff1a; 1、客户端请求服务器链接&#xff0c;等待服务器确认。&#xff08;服务器如…
阅读更多...
FileLink跨网数据摆渡系统：打破网络隔阂，轻松实现跨网络数据传输

FileLink跨网数据摆渡系统：打破网络隔阂，轻松实现跨网络数据传输

在数字化时代&#xff0c;跨网络、跨区域的数据传输成为了企业和个人信息流通的重大挑战。而如今&#xff0c;FileLink跨网数据摆渡系统的问世&#xff0c;彻底解决了这一难题&#xff0c;帮助用户实现快速、安全、无缝的跨网络数据传输。 1. 跨网络数据传输的痛点 随着企业信…
阅读更多...
高级 SQL 技巧详解

高级 SQL 技巧详解

文章目录 高级 SQL 技巧详解一、引言二、窗口函数1、窗口函数的使用1.1、RANK() 函数示例1.2、常用窗口函数 三、公共表表达式&#xff08;CTE&#xff09;2、CTE 的使用2.1、CTE 示例 四、索引优化3、索引的创建与优化3.1、创建索引3.2、索引类型与注意事项 五、事务管理4、事…
阅读更多...
MySQL_聚合函数分组查询

MySQL_聚合函数分组查询

上篇复习&#xff1a; 设计数据库时的三大范式1.第一范式&#xff0c;一行数据中每一列不可再分 关系型数据库必须要满足第一范式&#xff0c;设计表的时候&#xff0c;如果每一列都可以用SQL规定的数据类型描述&#xff0c;就天然满足第一范式. 2.第二范式&#xff0c;在第一…
阅读更多...
【Ai教程】Ollma安装 | 0代码本地运行Qwen大模型，保姆级教程来了！

【Ai教程】Ollma安装 | 0代码本地运行Qwen大模型，保姆级教程来了！

我们平时使用的ChatGPT、kimi、豆包等Ai对话工具&#xff0c;其服务器都是部署在各家公司的机房里&#xff0c;如果我们有一些隐私数据发到对话中&#xff0c;很难保证信息是否安全等问题&#xff0c;如何在保证数据安全的情况下&#xff0c;又可以使用大预言模型&#xff0c;O…
阅读更多...
FastAPI全方位分析：优劣尽显

FastAPI全方位分析：优劣尽显

近年来，随着技术的飞速发展，快速构建高性能API的需求越来越强烈。Python作为一个广泛使用的编程语言，也在这一领域下涌现出了许多优秀的框架。FastAPI便是其中一颗璀璨的新星。 FastAPI以其卓越的性能和独特的功能吸引了众多开发者。本文将深入剖析FastAPI的各个方面，详细…
阅读更多...
LongVU :Meta AI 的解锁长视频理解模型，利用自适应时空压缩技术彻底改变视频理解方式

LongVU :Meta AI 的解锁长视频理解模型，利用自适应时空压缩技术彻底改变视频理解方式

Meta AI在视频理解方面取得了令人瞩目的里程碑式成就&#xff0c;推出了LongVU&#xff0c;这是一种开创性的模型&#xff0c;能够理解以前对人工智能系统来说具有挑战性的长视频。 研究论文 "LongVU&#xff1a;用于长视频语言理解的时空自适应压缩 "提出了一种革命…
阅读更多...
二分答案—愤怒的牛-P1676 [USACO05FEB] Aggressive cows G

二分答案—愤怒的牛-P1676 [USACO05FEB] Aggressive cows G

[USACO05FEB] Aggressive cows G 题目描述 农夫约翰建造了一座有 n n n 间牛舍的小屋&#xff0c;牛舍排在一条直线上&#xff0c;第 i i i 间牛舍在 x i x_i xi​ 的位置&#xff0c;但是约翰的 m m m 头牛对小屋很不满意&#xff0c;因此经常互相攻击。约翰为了防止牛之…
阅读更多...
什么是兼容性测试

什么是兼容性测试

兼容性测试&#xff0c;提供具有兼容性特性的云端设备&#xff08;覆盖主流品牌、SDK、分辨率&#xff09;&#xff0c;通过模拟用户行为进行真机测试。及时有效的发现应用中存在的兼容性问题。解除测试人员的双手&#xff0c;提高测试效率&#xff0c;保证产品在海量真机上的高…
阅读更多...
IDEA:ctrl+/ 快捷键生成的注释，设置“//”开始位置

IDEA:ctrl+/ 快捷键生成的注释，设置“//”开始位置

问题场景&#xff1a; IDEA中使用 ctrl/ 快捷键&#xff0c;//显示在最左边&#xff08;顶格&#xff09;&#xff0c;不美观&#xff0c;中间隔了好长的空格&#xff0c;如图&#xff1a; 解决方法: 操作步骤 File–>Sttings–>Editor–>Code Style–>Java–>…
阅读更多...
中文文章进行加密编码及解码的方法python实现

中文文章进行加密编码及解码的方法python实现

愿我们终有重逢之时，而你还记得我们曾经讨论的话题。 group 868373192 second group 277356808 在Python中，可以使用多种方法对中文文章进行加密编码及解码。以下是几种常见的方法： 1. 使用Base64编码 Base64是一种基于64个可打印字符来表示二进制数据的编码方式。它可以…
阅读更多...
掌握springboot过滤器,拦截器 ,aop

掌握springboot过滤器,拦截器 ,aop

前言&#xff1a; Spring Boot 中的过滤器&#xff08;Filter&#xff09;、拦截器&#xff08;Interceptor&#xff09;和 AOP&#xff08;面向切面编程&#xff09;都是处理请求的常用技术&#xff0c;但它们在处理请求的时机、范围和方式上有所不同。下面详解分别介绍&#…
阅读更多...
XLA中生成Causal Mask上三角-inf矩阵

XLA中生成Causal Mask上三角-inf矩阵

transformers生成CausalAttentionMask的上三角-inf矩阵&#xff1a; 参考transformers源码 import torch import torch_xla import torch_xla.core.xla_model as xm import osos.environ[PJRT_DEVICE]IPU # os.environ[PJRT_DEVICE]GPU # os.environ[XLA_FLAGS]--xla_dump_tog…
阅读更多...
IDEA2024下安装kubernetes插件并配置进行使用

IDEA2024下安装kubernetes插件并配置进行使用

【1】安装插件 其实2024.2.3下默认已经安装了kubernetes插件&#xff0c;如果你发现自己IDEA中没有&#xff0c;在市场里面检索并下载即可。 【2】kubernetes配置 ① 前置工作 首先你要准备一个config文件和一个kubectl.exe 。 config文件类似如下&#xff1a; apiVersi…
阅读更多...
最新文章

Copyright @ 2022~2023