Springboot 如何做前后端分离?

2024-02-17 12:16:46

步骤 1 : 先运行，看到效果，再学习

步骤 2 : 模仿和排错

步骤 3 : 本知识点效果

步骤 4 : 基于前面的知识点

步骤 5 : Category

步骤 6 : CategoryController

步骤 7 : submit.html

步骤 8 : getOne.html

步骤 9 : getMany.html

步骤 1 : 先运行，看到效果，再学习

老规矩，先下载下载区(点击进入)的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
注：启动方式是Springboot特有的，直接运行类：com.how2java.springboot.Application 的主方法。

步骤 2 : 模仿和排错

在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。
采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。

推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。
这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来
这里提供了绿色安装和使用教程：diffmerge 下载和使用教程

步骤 3 : 本知识点效果

本知识点效果有三个，分别是以json方式：提交，获取单个和获取多个
提交

http://localhost:8080/submit.html

获取单个

http://localhost:8080/getOne.html

获取多个

http://localhost:8080/getMany.html

步骤 4 : 基于前面的知识点

基于Restful 风格的springboot进行修改。毕竟Restful 风格的springboot直接转换为json，很方便的啦

步骤 5 : Category

1. 增加个toString() 方便，便于显示
2. 增加个注解：@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" }) ，否则会出错

package com.how2java.springboot.pojo;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

@Entity

@Table(name = "category_")

@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })

public class Category {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

@Column(name = "id")

private int id;

@Column(name = "name")

private String name;

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

@Override

public String toString() {

return "Category [id=" + id + ", name=" + name + "]";

}

步骤 6 : CategoryController

控制器里提供3个方法，分别用来处理json 提交，json获取单个对象，json获取多个对象

package com.how2java.springboot.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.domain.Page;

import org.springframework.data.domain.PageRequest;

import org.springframework.data.domain.Pageable;

import org.springframework.data.domain.Sort;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PutMapping;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.RestController;

import com.how2java.springboot.dao.CategoryDAO;

import com.how2java.springboot.pojo.Category;

@RestController

public class CategoryController {

@Autowired CategoryDAO categoryDAO;

@GetMapping("/category")

public List<Category> listCategory(@RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {

start = start<0?0:start;

Sort sort = new Sort(Sort.Direction.DESC, "id");

Pageable pageable = new PageRequest(start, size, sort);

Page<Category> page =categoryDAO.findAll(pageable);

return page.getContent();

}

@GetMapping("/category/{id}")

public Category getCategory(@PathVariable("id") int id) throws Exception {

Category c= categoryDAO.getOne(id);

System.out.println(c);

return c;

}

@PutMapping("/category")

public void addCategory(@RequestBody Category category) throws Exception {

System.out.println("springboot接受到浏览器以JSON格式提交的数据："+category);

}

步骤 7 : submit.html

访问测试地址：

http://localhost:8080/submit.html

提交成功后，在springboot控制台查看使用json方式提交的数据
注：不要在eclipse自带的浏览器里面点击，自带的浏览器有bug，有时候不能识别jquery, 会导致点击没有反应。使用独立的浏览器，比如chrome,firefox点击测试

<!DOCTYPE html>

<html>

<head>

<title>用AJAX以JSON方式提交数据</title>

</head>

<body>

<form >

id：<input type="text" id="id" value="123" /><br/>

名称：<input type="text" id="name" value="category xxx"/><br/>

</form>

$('#sender').click(function(){

var id=document.getElementById('id').value;

var name=document.getElementById('name').value;

var category={"name":name,"id":id};

var jsonData = JSON.stringify(category);

var page="category";

$.ajax({

type:"put",

url: page,

data:jsonData,

dataType:"json",

contentType : "application/json;charset=UTF-8",

success: function(result){

}

});

alert("提交成功，请在springboot控制台查看服务端接收到的数据");

});

</script>

</body>

</html>

步骤 8 : getOne.html

访问测试地址：

http://localhost:8080/getOne.html

注意：要确保id=10的分类对象存在

<!DOCTYPE html>

<html>

<head>

<title>用AJAX以JSON方式获取数据</title>

</head>

<body>

$('#sender').click(function(){

var url="category/10";

$.get(

url,

function(data) {

console.log(data);

var json=data;

var name =json.name;

var id = json.id;

$("#messageDiv").html("分类id："+ id + "<br>分类名称:" +name );

});

</script>

</body>

</html>

步骤 9 : getMany.html

访问测试地址：

http://localhost:8080/getMany.html

点击按钮，获取多个json数据

<!DOCTYPE html>

<html>

<head>

<title>用AJAX以JSON方式获取数据</title>

</head>

<body>

$('#sender').click(function(){

var url="category?start=0&size=100";

$.get(

url,

function(data) {

var categorys = data;

for(i in categorys){

var old = $("#messageDiv").html();

var category = categorys[i];

$("#messageDiv").html(old + "<br>"+category.id+" ----- "+category.name);

}

});

</script>

</body>

</html>

码农公寓

步骤 1 : 先运行，看到效果，再学习

步骤 2 : 模仿和排错

步骤 3 : 本知识点效果

步骤 4 : 基于前面的知识点

步骤 5 : Category

步骤 6 : CategoryController

步骤 7 : submit.html

步骤 8 : getOne.html

步骤 9 : getMany.html

相关文章