springboot vue完成编辑页面发送接口请求功能

1. 准备工作
   首先，需要准备好以下环境和工具：

2. JDK 1.8及以上版本

3. Maven
4. Node.js

5. Vue CLI：可以通过npm安装：npm install -g vue-cli

6. 创建项目
   使用Vue CLI来创建一个基础的Vue.js项目：

vue init webpack vue-project

执行上述命令会创建一个名为“vue-project”的Vue.js项目。完成后，进入项目的根目录，通过命令行方式启动服务：

npm run dev

1. 编写前端页面
   在“vue-project”的src目录下新建一个“views”目录，在该目录下新建一个“edit.vue”文件。编写前端编辑页面的代码。

<template>
  <div>
    <div>
      <label>标题：</label>
      <input type="text" v-model="title" placeholder="请输入标题"/>
    </div>
    <div>
      <label>内容：</label>
      <textarea v-model="content" placeholder="请输入内容"></textarea>
    </div>
    <div>
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    submit() {
      let params = {
        title: this.title,
        content: this.content
      }
      this.$http.post('/api/save', params).then(res => {
        console.log(res.data);
      });
    }
  }
}
</script>

1. 编写后端接口
   使用Spring Boot框架来编写后端接口。在Spring Boot项目中引入以下依赖：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>1.2.7</version>
</dependency>

在Spring Boot项目中编写一个Controller来处理请求：

@RestController
@RequestMapping("/api")
public class ApiController {
  @PostMapping("/save")
  public String save(@RequestBody Map<String, String> params) {
    String title = params.get("title");
    String content = params.get("content");
    // TODO：保存数据到数据库
    return "保存成功";
  }
}

1. 配置跨域访问
   由于前后端分离，前端代码会跑在不同的端口上，因此需要配置跨域访问。在Spring Boot的启动类上添加如下配置：

@SpringBootApplication
public class Application {
  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }

  @Bean
  public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
          .allowedOrigins("*")
          .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
          .allowedHeaders("*");
      }
    };
  }
}

1. 启动应用程序
   在命令行中，进入Spring Boot项目的根目录，执行以下命令：

mvn clean package

执行以上命令会编译打包程序，完成后，通过以下命令启动程序：

java -jar target/{project_name}.jar

其中{project_name}为项目的名称。

1. 测试
   在浏览器中访问http://localhost:8080/，即可访问前端页面，尝试在前端页面中输入内容，点击“提交”按钮，发送POST请求到后端，后端会返回一个“保存成功”的字符串，表示数据保存完成。

示例1：使用session来模拟数据保存。
下面的示例中，仅在后端使用session模拟了一个简单的保存流程，用于说明整个系统的工作流程。

@RestController
@RequestMapping("/api")
public class ApiController {
  @Autowired
  private HttpSession httpSession;

  @PostMapping("/save")
  public String save(@RequestBody Map<String, String> params) {
    String title = params.get("title");
    String content = params.get("content");
    // TODO：保存数据到数据库
    httpSession.setAttribute("title", title);
    httpSession.setAttribute("content", content);
    return "保存成功";
  }

  @GetMapping("/get")
  public Map<String, String> get() {
    Map<String, String> result = new HashMap<>();
    result.put("title", (String) httpSession.getAttribute("title"));
    result.put("content", (String) httpSession.getAttribute("content"));
    return result;
  }
}

示例2：使用Spring Data JPA来保存数据。
下面的示例中，使用了Spring Data JPA来将数据保存到Mysql数据库。

<!-- pom.xml -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>

// application.properties
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.database=MYSQL
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

// Post.java
@Entity
public class Post {
  @Id
  @GeneratedValue(strategy = GenerationType.AUTO)
  private Long id;
  private String title;
  private String content;

  // 省略Getter/Setter

  public Post(String title, String content) {
    this.title = title;
    this.content = content;
  }
}

// PostRepository.java
public interface PostRepository extends CrudRepository<Post, Long> {
}

// ApiController.java
@RestController
@RequestMapping("/api")
public class ApiController {
  @Autowired
  private PostRepository postRepository;

  @PostMapping("/save")
  public String save(@RequestBody Map<String, String> params) {
    String title = params.get("title");
    String content = params.get("content");
    Post post = new Post(title, content);
    postRepository.save(post);
    return "保存成功";
  }
}