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

项目难点

涉及到多个关联的数据库

脚手架

在这里我使用的是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.xdnf.cn/news/6960.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

科技成果跃然“屏”上，虚拟展厅引领科技展示新风尚

科技成果跃然“屏”上，虚拟展厅引领科技展示新风尚

一、沉浸式互动体验增强吸引力 虚拟科技展厅利用虚拟现实等先进技术&#xff0c;为科技成果打造了一个沉浸式的展示空间。用户可以通过手机、平板、电脑等设备&#xff0c;身临其境地浏览科技成果&#xff0c;感受其独特魅力。与传统的线下展厅相比&#xff0c;虚拟展厅不受物…
阅读更多...
Linux学习笔记

Linux学习笔记

九月二十六号: 三种网络连接的区别: 克隆的虚拟机文件可以放在另一台电脑上一样使用 LINUX目录结构: 查看linux IP地址的指令: ifconfig 查看ens33对应的 通过Xshell输入reboot会使linux重启 vim使用: 关机&重启命令&用户登录和注销: 用户管理: pwd: 显示当前在哪个…
阅读更多...
数字信号处理-FPGA插入不同误码率的模拟源

数字信号处理-FPGA插入不同误码率的模拟源

module data_error_injector (input clk, // 时钟信号&#xff0c;50MHzinput reset, // 复位信号&#xff0c;高有效input DIN_EN, // 数据输入使能&#xff0c;高有效input [7:0] ERROR_LEVEL, // 错误等级…
阅读更多...
华为OD机试 - 学生排名（Java 2024 E卷 100分）

华为OD机试 - 学生排名（Java 2024 E卷 100分）

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…
阅读更多...
快速学习Django框架以开发Web API

快速学习Django框架以开发Web API

简介 Django是一个高级Python Web框架，它鼓励快速开发和简洁实用的设计。由经验丰富的开发者构建，Django可以为你处理大量的Web开发任务，使你能够专注于编写应用的关键组件。Django的模块化设计、可复用性和广泛的社区支持，使其成为开发Web应用和API的理想选择。 在本文中…
阅读更多...
真·香！深度体验 zCloud 数据库云管平台 -- DBA日常管理篇

真·香！深度体验 zCloud 数据库云管平台 -- DBA日常管理篇

点击蓝字 关注我们 zCloud 作为一款业界领先的数据库云管平台&#xff0c;通过云化自治的部署能力、智能巡检和诊断能力、知识即代码的沉淀能力&#xff0c;为DBA的日常管理工作带来了革新式的简化与优化。经过一周的深度体验&#xff0c;今天笔者与您深入探讨 zCloud 在数据库…
阅读更多...
探索PickleDB：Python中的轻量级数据存储利器

探索PickleDB：Python中的轻量级数据存储利器

文章目录 探索PickleDB&#xff1a;Python中的轻量级数据存储利器1. 背景&#xff1a;为什么选择PickleDB&#xff1f;2. PickleDB是什么&#xff1f;3. 如何安装PickleDB&#xff1f;4. 简单的库函数使用方法创建和打开数据库设置数据获取数据删除数据保存数据库 5. 应用场景与…
阅读更多...
PPT文件设置了修改权限，如何取消权？

PPT文件设置了修改权限，如何取消权？

不知道大家在使用PPT文件的时候&#xff0c;是否遇到过下面的提示框&#xff0c;这就是PPT文件设置了修改权限&#xff0c;只有输入密码才可以编辑文件。 如果我们没有输入密码&#xff0c;以只读方式进入&#xff0c;那么我们会发现功能栏中的按钮全是灰色&#xff0c;无法使用…
阅读更多...
【测试工具篇一】全网最强保姆级教程抓包工具Fiddler（2）

【测试工具篇一】全网最强保姆级教程抓包工具Fiddler（2）

本文接上篇Fiddler介绍&#xff0c;开始讲fiddler如何使用之前&#xff0c;给大家讲讲http以及web方面的小知识&#xff0c;方便大家后面更好得理解fiddler使用。 目录 一、软件体系结构---B/S与C/S架构 B/S架构 C/S架构 二、HTTP基础知识 什么是http请求和响应? http协…
阅读更多...
健身房管理新纪元：SpringBoot技术应用

健身房管理新纪元：SpringBoot技术应用

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…
阅读更多...
vue3 ref,shallowRef,reactive,shallowReactive使用的简单异同点说明

vue3 ref,shallowRef,reactive,shallowReactive使用的简单异同点说明

1、这几个都是负责data的存储及读取的&#xff0c;我们常用的是ref,reactive。 2、看一下shallowRef这个,shallowReactive与其类似。 说明&#xff1a;以官网的说明&#xff0c;这个state.value.count 2是不会触发视图更新的&#xff0c;但是如果直接在<script setup lang…
阅读更多...
6.0、静态路由

6.0、静态路由

路由器最主要的功能就是转发数据包。路由器转发数据包时需要查找路由表&#xff08;你可以理解为地图&#xff09;&#xff0c;管理员可以直接手动配置路由表&#xff0c;这就是静态路由。 1.什么是路由&#xff1f; 在网络世界中&#xff0c;路由是指数据包在网络中的传输路…
阅读更多...
分分钟让你了解Web接口测试！

分分钟让你了解Web接口测试！

01 什么是接口 百度说&#xff1a;接口泛指实体把自己提供给外界的一种抽象化物&#xff08;可以为另一实体&#xff09;&#xff0c;用以由内部操作分离出外部沟通方法&#xff0c;使其能被内部修改而不影响外界其他实体与其交互的方式 上面这句有点抽象&#xff0c;网上的资…
阅读更多...
Java8新特性/java

Java8新特性/java

1.lambda表达式 区别于js的箭头函数&#xff0c;python、cpp的lambda表达式&#xff0c;java8的lambda是一个匿名函数&#xff0c;java8运行把函数作为参数传递进方法中。 语法格式 (parameters) -> expression 或 (parameters...) ->{ statements; }实战 替代匿名内部类…
阅读更多...
如何在 uniapp 中实现图形验证码

如何在 uniapp 中实现图形验证码

全篇大概2000 字&#xff08;含代码&#xff09;&#xff0c;建议阅读时间10分钟。 什么是图形验证码&#xff1f; 图形验证码&#xff08;也称为图片验证码或验证码图像&#xff09;通常用于防止机器人自动提交表单&#xff0c;确保用户是人工操作。 一、需求 我们希望在一个…
阅读更多...
基于 Java（SpringBoot）+MySQL 开发古诗词学习网站

基于 Java（SpringBoot）+MySQL 开发古诗词学习网站

古诗词系统设计与实现 引言 编写目的 为了保证项目团队按时保质地完成项目目标&#xff0c;便于项目团队成员更好地了解项目情况&#xff0c;使项目工作开展的各个过程合理有序&#xff0c;有必要以文件化的形式&#xff0c;把对于在项目生命周期内的工作任务范围、各项工作…
阅读更多...
基于JavaWeb+MySQL实现口算题卡

基于JavaWeb+MySQL实现口算题卡

爱 math 口算题卡 1. 总体要求 综合运用软件工程的思想&#xff0c;协同完成一个软件项目的开发&#xff0c;掌软件工程相关的技术和方法&#xff1b;组成小组进行选题&#xff0c;通过调研完成项目的需求分析&#xff0c;并详细说明小组成员的分工、项目的时间管理等方面。根…
阅读更多...
Sibyl：提升复杂现实世界推理能力的LLM智能体框架

Sibyl：提升复杂现实世界推理能力的LLM智能体框架

人工智能咨询培训老师叶梓 转载标明出处 大模型&#xff08;LLMs&#xff09;以其卓越的问题解决能力而闻名&#xff0c;这主要归功于它们内在的知识储备、强大的上下文学习能力以及零样本&#xff08;zero-shot&#xff09;能力。然而&#xff0c;这些基于LLM的智能体在长期推…
阅读更多...
Jest项目实战（4）：将工具库顺利迁移到GitHub的完整指南

Jest项目实战（4）：将工具库顺利迁移到GitHub的完整指南

开源代码&#xff1a;将工具库迁移到GitHub 随着项目的成熟和完善&#xff0c;将其开源不仅可以获得更多的用户和贡献者&#xff0c;还能促进项目本身的发展。GitHub作为全球最大的开源协作平台&#xff0c;自然成为了大多数开发者的首选。本文将引导您完成将工具库迁移至GitH…
阅读更多...
ai面试辅助工具有哪些

ai面试辅助工具有哪些

目前市场上常见的AI面试辅助工具包括以下几款‌&#xff1a; ‌白瓜面试‌&#xff1a;这是一款专为在线面试和笔试场景设计的AI助手&#xff0c;支持实时语音识别、图片识别、智能辅助回答等功能&#xff0c;适用于多种岗位和面试平台‌ ‌Interview‌&#xff1a;这是一款基…
阅读更多...
最新文章

Copyright @ 2022~2023