怀柔区企业网站设计机构提供,东莞网站优化制作,网站怎么做子分类,装修网站怎么建设1.介绍 在本篇博客中#xff0c;我们将详细介绍Vue 3 和 Spring Boot 3 的操作流程和执行步骤。Vue 3 是一款流行的前端框架#xff0c;而Spring Boot 3 是一款广泛应用于后端开发的框架。通过结合使用这两个框架#xff0c;我们可以构建出功能强大的全栈应用。 2.Vue 3 的操…1.介绍 在本篇博客中我们将详细介绍Vue 3 和 Spring Boot 3 的操作流程和执行步骤。Vue 3 是一款流行的前端框架而Spring Boot 3 是一款广泛应用于后端开发的框架。通过结合使用这两个框架我们可以构建出功能强大的全栈应用。 2.Vue 3 的操作流程和执行步骤 2.1 安装Vue CLI 在开始使用Vue 3之前首先需要安装Vue CLI。通过命令行运行npm install -g vue/cli来进行安装。 2.2 创建Vue项目 运行vue create project-name(你的项目名称)命令来创建一个新的Vue项目。在项目创建过程中可以选择使用默认配置或者手动配置项目。 2.3 编写Vue组件 在Vue项目中我们可以使用Vue的单文件组件.vue文件来编写前端组件。通过Vue的语法我们可以实现各种交互和数据绑定。 2.4 运行Vue项目 在项目根目录下运行npm run serve命令即可启动Vue的开发服务器并在浏览器中查看项目运行效果。 3.Spring Boot 3 的操作流程和执行步骤 3.1 环境搭建 首先确保已经安装了Java开发环境和Maven构建工具。然后下载并安装Spring Tool SuiteSTS来进行Spring Boot项目的开发。 3.2 创建Spring Boot项目 在STS中通过选择File - New - Spring Starter Project来创建一个新的Spring Boot项目。在创建过程中可以选择项目的依赖和配置。 3.3 编写Controller和Service 在Spring Boot项目中我们可以通过编写Controller来处理前端请求并通过Service来处理业务逻辑。使用注解来标识Controller和Service。 3.4 运行Spring Boot项目 在STS中右键点击项目并选择Run As - Spring Boot App来运行Spring Boot项目。Spring Boot会自动启动嵌入式的Tomcat服务器并监听指定的端口。 4.使用vue和springboot实现学生管理系统 创建后端API 首先创建一个Spring Boot项目并添加所需的依赖。在项目中创建一个学生实体类包含学生的姓名、年龄等信息。然后创建一个学生控制器类使用Spring MVC的注解来定义API的请求路径和参数实现学生信息的增删改查功能。 学生实体类Student.java示例代码
Entity
Table(name students)
public class Student {IdGeneratedValue(strategy GenerationType.IDENTITY)private Long id;private String name;private int age;// getters and setters
}
学生控制器类StudentController.java示例代码
RestController
RequestMapping(/api/students)
public class StudentController {Autowiredprivate StudentRepository studentRepository;GetMappingpublic ListStudent getAllStudents() {return studentRepository.findAll();}PostMappingpublic Student createStudent(RequestBody Student student) {return studentRepository.save(student);}PutMapping(/{id})public ResponseEntityStudent updateStudent(PathVariable Long id, RequestBody Student studentDetails) {Student student studentRepository.findById(id).orElseThrow(() - new ResourceNotFoundException(Student not found with id: id));student.setName(studentDetails.getName());student.setAge(studentDetails.getAge());Student updatedStudent studentRepository.save(student);return ResponseEntity.ok(updatedStudent);}DeleteMapping(/{id})public ResponseEntityMapString, Boolean deleteStudent(PathVariable Long id) {Student student studentRepository.findById(id).orElseThrow(() - new ResourceNotFoundException(Student not found with id: id));studentRepository.delete(student);MapString, Boolean response new HashMap();response.put(deleted, Boolean.TRUE);return ResponseEntity.ok(response);}
}2. 调用后端API并显示数据 在Vue项目中可以使用axios库发送HTTP请求调用后端API并将返回的学生信息数据渲染到前端页面上。 首先在Vue项目中安装axios库
npm install axios
然后在Vue组件中使用axios发送GET请求获取学生信息并将数据渲染到前端页面上。
实现学生信息的增删改查功能 在Vue项目中可以使用表单和按钮等元素实现学生信息的增删改查功能。通过发送HTTP请求调用后端API来实现数据的增删改查操作。
添加学生表单组件AddStudentForm.vue示例代码
templateform submitaddStudentlabel forname姓名:/labelinput typetext idname v-modelname requiredlabel forage年龄:/labelinput typenumber idage v-modelage requiredbutton typesubmit添加学生/button/form
/templatescript
import axios from axios;export default {data() {return {name: ,age: 0};},methods: {addStudent(event) {event.preventDefault();axios.post(/api/students, {name: this.name,age: this.age}).then(response {// 添加成功后刷新学生列表this.$emit(studentAdded);this.name ;this.age 0;}).catch(error {console.error(error);});}}
};
/script学生列表组件StudentList.vue示例代码 4.解决跨域问题 由于前端和后端运行在不同的域名或端口上可能会出现跨域问题。可以在Spring Boot项目中配置跨域访问的允许选项或者在Vue项目中使用代理来解决跨域问题。 在Spring Boot项目中配置跨域访问的允许选项可以在WebConfig类中添加如下配置
Configuration
public class WebConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/api/**).allowedOrigins(http://localhost:8080).allowedMethods(GET, POST, PUT, DELETE);}
}在Vue项目中使用代理来解决跨域问题可以在vue.config.js文件中添加如下配置
module.exports {devServer: {proxy: {/api: {target: http://localhost:8080,changeOrigin: true}}}
};
