用springboot和vue写

好的，使用Spring Boot和Vue.js进行开发可以实现前后端分离，同时也可以提高开发效率和代码的可维护性。下面是一个简单的示例：

1. 后端开发

首先，我们可以使用Spring Initializr创建一个新的Spring Boot项目，并添加所需的依赖，如Web，JPA等。

然后，我们可以创建一个简单的RESTful API，例如：

@RestController
@RequestMapping("/api")
public class ExampleController {

    @Autowired
    private ExampleRepository exampleRepository;

    @GetMapping("/examples")
    public List<Example> getAllExamples() {
        return exampleRepository.findAll();
    }

    @GetMapping("/examples/{id}")
    public Example getExampleById(@PathVariable("id") Long id) {
        return exampleRepository.findById(id).orElse(null);
    }

    @PostMapping("/examples")
    public Example createExample(@RequestBody Example example) {
        return exampleRepository.save(example);
    }

    @PutMapping("/examples/{id}")
    public Example updateExample(@PathVariable("id") Long id, @RequestBody Example example) {
        example.setId(id);
        return exampleRepository.save(example);
    }

    @DeleteMapping("/examples/{id}")
    public void deleteExample(@PathVariable("id") Long id) {
        exampleRepository.deleteById(id);
    }

}

2. 前端开发

对于前端开发，我们可以使用Vue.js创建一个新的项目，并添加所需的依赖，例如Axios等。

然后，我们可以创建一个简单的Vue组件，例如：

<template>
  <div>
    <ul>
      <li v-for="example in examples" :key="example.id">
        {{ example.name }}
      </li>
    </ul>
    <form @submit.prevent="createExample">
      <input type="text" v-model="example.name" placeholder="Enter example name" />
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      examples: [],
      example: {
        name: "",
      },
    };
  },
  mounted() {
    this.getAllExamples();
  },
  methods: {
    getAllExamples() {
      axios.get("/api/examples").then((response) => {
        this.examples = response.data;
      });
    },
    createExample() {
      axios.post("/api/examples", this.example).then((response) => {
        this.examples.push(response.data);
        this.example.name = "";
      });
    },
  },
};
</script>

3. 集成前后端

最后，我们可以将前后端集成起来，例如将Vue组件添加到Spring Boot的视图中：

@Controller
public class ExampleViewController {

    @GetMapping("/")
    public String index() {
        return "index";
    }

}

然后，在Vue组件中使用Axios来调用后端API：

<script>
import axios from "axios";

export default {
  data() {
    return {
      examples: [],
      example: {
        name: "",
      },
    };
  },
  mounted() {
    this.getAllExamples();
  },
  methods: {
    getAllExamples() {
      axios.get("/api/examples").then((response) => {
        this.examples = response.data;
      });
    },
    createExample() {
      axios.post("/api/examples", this.example).then((response) => {
        this.examples.push(response.data);
        this.example.name = "";
      });
    },
  },
};
</script>

这样，我们就可以使用Spring Boot和Vue.js进行全栈开发了。