springboot-crud5--RESTful请求架构

本文介绍了RESTful架构作为一种软件设计风格,用于客户端和服务器之间的交互。核心原则是通过URI来标识资源,并利用HTTP请求方法区分对资源的创建、读取、更新和删除(CRUD)操作。在SpringBoot中,使用`@Controller`和`@GetMapping`等注解实现RESTful接口,页面链接和后端方法映射遵循约定,模板引擎自动处理路径拼接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

restufCRUD

RESTful: 是一种软件架构的风格,不是标准,只提供设计原则和约束条件【满足这样的原则和条件的就是RESTful 】;使用于客户端和服务端交互的软件

RESTful 的原则和风格:URI :资源名称/资源标识 / HTTP请求方式区分对资源的CRUD操作

普通的CRUDRESTfulCRUD
查询====getEmpemp------GET
添加===addEmp?参数emp-----POST
修改====upadteEmp?参数emp/+{标识}(拼串的方式)------PUT
删除=====deleteEmp?idemp/{标识}---------DELETE

URI的风格是:资源的名称/资源的表示。使用HTTP的请求方式表示对资源的操作


1.页面上发出请求: <a class="nav-link"   th:href="@{/emps}" >  发出的请求为emps

2.Controller 内处理emps 请求
@Controller
public class EmployeeController {
    //查询所有员工返回列表页面
    @Autowired
    EmployeeDao employeedao;
    
    @GetMapping("/emps")
    public String Emps(Model model){
    
        Collection<Employee> list = employeedao.getAll();
        //将数据返回页面进行共享数据放在Model  或者是Map  中都是在request 域中的
        model.addAttribute("emps",list);
        
        //thymeleaf 执行默认拼串
        //classpath:/templates/xxx  .html
        return "emp/list";
    }
}
 
3.在页面上获取数据
<tr th:each="emp:${emps}">
	<td th:text="emp.id"></td>
	<td>[[${emp.lastName}]]</td>
	<td th:text="${emp.email}">ipsum</td>
	<td th:text="${emp.gender}==0?'女':'男'">dolor</td>
	<td th:text="${emp.department.departmentName}">sit</td>
	<td th:text="${#dates.format(emp.birth, 'dd/MMM/yyyy HH:mm')}"></td> 使用#dates这个工具
</tr>

在页面上写连接:th:href="@{/xxx}"
后端的代码中写处理连接的方法@Controller 注解的类下 @xxMapping(“处理的请求”)
1.页面都是自templates 目录下的,在返回这些页面时:不加templates 和 后=后缀.html 模板引擎会自己帮我们拼接完整的路径
2.在自定义视图映射的时候映射的页面也不用写完整的路径,模板引擎会帮我们拼好完整的串。但是映射的url 要写成/xxx 的形式

### 使用 Spring Boot 和 Vue.js 搭建前后端分离的项目结构 #### 1. 创建 Spring Boot 后端工程 为了快速启动并运行 Spring 应用程序,Spring Boot 设计让开发者能够尽可能快地构建应用程序并且减少配置文件的需求[^3]。 在集成开发环境 Intellij IDEA 中新建一个 Maven 或 Gradle 工程,并引入必要的依赖项如 `spring-boot-starter-web` 和 `spring-boot-starter-data-jpa` 来支持 RESTful API 及持久层操作。对于数据库连接,则可以选用 MySQL 数据库作为存储介质[^2]。 ```xml <dependencies> <!-- Web Starter --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- JPA Starter --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <!-- MySQL Connector --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> </dependencies> ``` 完成上述设置之后,在主类上添加 `@RestController` 注解以便定义控制器方法处理 HTTP 请求;同时编写实体类映射表单字段以及 Repository 接口用于执行 CRUD 操作。 #### 2. 构建 Vue.js 前端应用 安装 Node.js 环境后可以直接利用命令行工具 vue-cli 快速建立新的 web 应用: ```bash npm install -g @vue/cli vue create frontend-app cd frontend-app npm run serve ``` 此过程会引导用户选择预设选项或手动配置特性,最终生成的基础模板已经包含了完整的目录结构和基础组件[^4]。 #### 3. 实现前后端通信机制 按照前后端分离架构的设计理念,前端页面应当通过调用后端提供的 RESTful API 进行数据交换。因此需要确保两个部分部署在同一服务器下或者跨域资源共享 CORS 设置正确无误。 例如可以在 Vue 组件内部发起 AJAX 请求获取列表信息: ```javascript // src/components/ExampleComponent.vue import axios from 'axios'; export default { data() { return { items: [] }; }, mounted() { axios.get('/api/items') .then(response => this.items = response.data); } } ``` 而后端对应的 Controller 方法则负责接收请求参数并将查询结果封装成 JSON 返回给客户端: ```java @RestController @RequestMapping("/api") public class ItemController { private final ItemRepository repository; public ItemController(ItemRepository repository) { this.repository = repository; } @GetMapping("/items") List<Item> all() { return repository.findAll(); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值