{"id":2066,"date":"2026-04-30T15:47:17","date_gmt":"2026-04-30T07:47:17","guid":{"rendered":"https:\/\/hueil.top\/?p=2066"},"modified":"2026-04-30T17:21:01","modified_gmt":"2026-04-30T09:21:01","slug":"springboot-vue-%e9%a1%b9%e7%9b%ae%e5%bc%80%e5%8f%91","status":"publish","type":"post","link":"https:\/\/hueil.top\/?p=2066","title":{"rendered":"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1"},"content":{"rendered":"\n

SpringBoot \u662f\u4ec0\u4e48<\/h1>\n\n\n\n

SpringBoot \u662f\u73b0\u4ee3 Java \u540e\u7aef\u5f00\u53d1\u7684 \u201c\u6807\u914d\u201d<\/strong>\uff0c\u5b83\u628a Spring \u7684\u5f3a\u5927\u80fd\u529b\u4e0e \u201c\u6781\u7b80\u5f00\u53d1\u201d \u5b8c\u7f8e\u7ed3\u5408\uff0c\u8ba9\u5f00\u53d1\u8005\u4e13\u6ce8\u4e1a\u52a1\u3001\u8fdc\u79bb\u914d\u7f6e<\/strong>\uff0c\u662f\u5b66\u4e60 Java Web\u3001\u5fae\u670d\u52a1\u3001\u4e91\u539f\u751f\u7684\u5fc5\u5b66\u6846\u67b6<\/strong>\u3002<\/p>\n\n\n\n

\u4e00\u53e5\u8bdd\u6982\u62ec\uff1a<\/p>\n\n\n\n

\n

SpringBoot = Spring \u57fa\u7840\u80fd\u529b + \u81ea\u52a8\u914d\u7f6e + \u8d77\u6b65\u4f9d\u8d56 + \u5185\u5d4c\u670d\u52a1\u5668 + \u751f\u4ea7\u7ea7\u76d1\u63a7<\/strong><\/p>\n<\/blockquote>\n\n\n\n

Vue\u662f\u4ec0\u4e48<\/h1>\n\n\n\n

Vue\uff08\u5168\u79f0 Vue.js\uff09<\/strong> \u662f\u4e00\u5957\u6e10\u8fdb\u5f0f JavaScript \u524d\u7aef\u6846\u67b6<\/strong>\uff0c\u662f\u8f7b\u91cf\u3001\u6613\u5b66\u3001\u7ec4\u4ef6\u5316\u7684\u524d\u7aef\u6846\u67b6\uff0c\u662f\u76ee\u524d\u56fd\u5185\u5f00\u53d1\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u3001\u524d\u540e\u7aef\u5206\u79bb\u9879\u76ee\u7684\u9996\u9009\u524d\u7aef\u6280\u672f\uff0c\u548c SpringBoot \u662f\u9ec4\u91d1\u642d\u6863\u3002<\/p>\n\n\n\n

\u4e00\u53e5\u8bdd\uff1aVue \u5c31\u662f\u5e2e\u6211\u4eec\u5feb\u901f\u3001\u7b80\u6d01\u5199\u7f51\u9875\u524d\u7aef\u4ee3\u7801\u7684\u5de5\u5177\u6846\u67b6\u3002<\/strong><\/p>\n\n\n\n

\u4e00\u3001\u73af\u5883\u51c6\u5907<\/h1>\n\n\n\n
    \n
  1. JDK 17+<\/li>\n\n\n\n
  2. MySQL 8.0+<\/li>\n\n\n\n
  3. Node.js 16+<\/li>\n\n\n\n
  4. IDEA + VS Code<\/li>\n<\/ol>\n\n\n\n
    \n\n\n\n

    \u4e8c\u3001 SpringBoot \u9879\u76ee\u642d\u5efa<\/h1>\n\n\n\n

    \u8bdd\u4e0d\u591a\u8bf4\uff0c\u76f4\u63a5\u4e0a\u5b9e\u64cd<\/p>\n\n\n\n

    \u6b65\u9aa4 1\uff1a\u521b\u5efa SpringBoot \u9879\u76ee<\/h2>\n\n\n\n
      \n
    1. \u6253\u5f00 IDEA \u2192 New Project \u2192 Spring Boot<\/strong><\/li>\n\n\n\n
    2. \u9879\u76ee\u4fe1\u606f\uff1a\n
        \n
      • Java 24<\/li>\n\n\n\n
      • Maven<\/li>\n\n\n\n
      • SpringBoot 4.0.6<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • \u52fe\u9009\u4f9d\u8d56\uff1a\n
          \n
        • Spring Web<\/li>\n\n\n\n
        • Spring Data JPA<\/li>\n\n\n\n
        • MySQL Driver<\/li>\n\n\n\n
        • Lombok<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n

          \u4fee\u6539application.properties<\/p>\n\n\n\n

          # \u7aef\u53e3\nserver.port=8080\n\n# \u6570\u636e\u5e93\u8fde\u63a5\nspring.datasource.url=jdbc:mysql:\/\/localhost:3306\/desserts?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8\nspring.datasource.username=root\nspring.datasource.password=root\nspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver\n\n# JPA\nspring.jpa.hibernate.ddl-auto=update\nspring.jpa.show-sql=true<\/code><\/pre>\n\n\n\n
          \u6b65\u9aa4\u4e8c\uff1a\u521b\u5efa\u524d\u7aefVue\u9879\u76ee<\/h2>\n\n\n\n
          \u5728\u9879\u76ee\u76ee\u5f55\u4e2d\u6253\u5f00\u547d\u4ee4\u63d0\u793a\u7b26\uff0c\u521b\u5efaVue\u9879\u76ee<\/p>\n\n\n\n
          npm create vue@latest\n\n\u8fdb\u5165vue\u9879\u76ee\u76ee\u5f55\u5b89\u88c5\u4f9d\u8d56<\/code><\/pre>\n\n\n\n
          npm install\nnpm install axios element-plus vue-router<\/code><\/pre>\n\n\n\n
          \u4fee\u6539\u524d\u7aef\u7684main.js\u6587\u4ef6\uff0c\u4e0e\u540e\u7aef\u8fde\u63a5<\/p>\n\n\n\n
          import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport router from '.\/router'\nimport ElementPlus from 'element-plus'\nimport 'element-plus\/dist\/index.css'\nimport axios from 'axios'\n\nconst app = createApp(App)\n\naxios.defaults.baseURL = 'http:\/\/localhost:8080'\napp.config.globalProperties.$axios = axios\n\napp.use(ElementPlus)\napp.use(router)\napp.mount('#app')<\/code><\/pre>\n\n\n\n
          \u521b\u5efa\u8def\u7531\uff0c\u5728src\u4e0b\u521b\u5efarouter\u76ee\u5f55\uff0c\u521b\u5efaindex.js<\/p>\n\n\n\n
          import { createRouter, createWebHistory } from 'vue-router'\nimport Home from '..\/views\/Home.vue'\n\nconst routes = [\n  {\n    path: '\/',\n    name: 'Home',\n    component: Home\n  }\n]\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes\n})\n\nexport default router<\/code><\/pre>\n\n\n\n
          \u5728src\u76ee\u5f55\u4e0b\u521b\u5efaviews\u76ee\u5f55\uff0c\u521b\u5efaHome.vue<\/p>\n\n\n\n
          <template>\n  <div style=\"padding: 20px;\">\n    <h1>Vue \u524d\u7aef\u5df2\u542f\u52a8\u6210\u529f\uff01<\/h1>\n    <el-button type=\"primary\" @click=\"testBackend\" style=\"margin: 20px 0;\">\n      \u8c03\u7528 SpringBoot \u63a5\u53e3\n    <\/el-button>\n    <p style=\"color: blue; font-size: 18px;\">{{ msg }}<\/p>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue'\nimport axios from 'axios'\n\nconst msg = ref('')\n\nconst testBackend = async () => {\n  try {\n    \/\/ \u76f4\u63a5\u4f7f\u7528\u5b8c\u6574\u5730\u5740\u8bf7\u6c42\uff0c\u4e0d\u4f9d\u8d56baseURL\u914d\u7f6e\n    const res = await axios.get('http:\/\/localhost:8080\/test')\n    msg.value = res.data\n  } catch (err) {\n    console.error('\u8bf7\u6c42\u5931\u8d25:', err)\n    \/\/ \u6253\u5370\u9519\u8bef\u8be6\u60c5\u5230\u63a7\u5236\u53f0\uff0c\u65b9\u4fbf\u6392\u67e5\n    alert('\u8bf7\u6c42\u5931\u8d25\uff01\u9519\u8bef\u8be6\u60c5\u5df2\u6253\u5370\u5728\u63a7\u5236\u53f0\uff0c\u8bf7\u6309F12\u67e5\u770b')\n    msg.value = '\u8bf7\u6c42\u5931\u8d25\uff01\u8bf7\u68c0\u67e5\u63a7\u5236\u53f0\u9519\u8bef'\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
          \u6b65\u9aa4\u4e09\uff1a\u540e\u7aef\u5b9e\u73b0\u63a5\u53e3\u8fde\u63a5<\/h2>\n\n\n\n
          \u914d\u7f6e\u8de8\u57df:\u5728com.example.website_mater\u76ee\u5f55\u4e0b\u521b\u5efaconfig \uff0c controller\u76ee\u5f55.config\u76ee\u5f55\u4e0b\u521b\u5efaCorsConfig.java<\/p>\n\n\n\n
          package com.example.website_mater.config;\n\nimport org.springframework.context.annotation.Configuration;\nimport org.springframework.web.servlet.config.annotation.CorsRegistry;\nimport org.springframework.web.servlet.config.annotation.WebMvcConfigurer;\n\n@Configuration\npublic class CorsConfig implements WebMvcConfigurer {\n    @Override\n    public void addCorsMappings(CorsRegistry registry) {\n        registry.addMapping(\"\/**\")\n                \/\/ \u660e\u786e\u6307\u5b9a\u5141\u8bb8\u7684\u524d\u7aef\u6e90\uff08\u5fc5\u987b\u548c\u4f60\u7684\u6d4f\u89c8\u5668\u5730\u5740\u4e00\u81f4\uff09\n                .allowedOrigins(\"http:\/\/localhost:5173\")\n                \/\/ \u5141\u8bb8\u6240\u6709\u8bf7\u6c42\u65b9\u6cd5\n                .allowedMethods(\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\")\n                \/\/ \u5141\u8bb8\u6240\u6709\u8bf7\u6c42\u5934\n                .allowedHeaders(\"*\")\n                \/\/ \u5141\u8bb8\u643a\u5e26Cookie\n                .allowCredentials(true)\n                \/\/ \u9884\u68c0\u8bf7\u6c42\u6709\u6548\u671f\n                .maxAge(3600);\n    }\n}<\/code><\/pre>\n\n\n\n
          \u5728controller\u76ee\u5f55\u4e0b\u521b\u5efaTestController.java<\/p>\n\n\n\n
          package com.example.website_mater.controller;\n\nimport org.springframework.web.bind.annotation.CrossOrigin;\nimport org.springframework.web.bind.annotation.GetMapping;\nimport org.springframework.web.bind.annotation.RestController;\n\n@RestController\n@CrossOrigin(origins = \"http:\/\/localhost:5173\") \/\/ \u76f4\u63a5\u653e\u884c\u524d\u7aef\u5730\u5740\npublic class TestController {\n    @GetMapping(\"\/test\")\n    public String test() {\n        return \"\u2705 SpringBoot \u8fde\u63a5\u6210\u529f\uff01\u524d\u540e\u7aef\u8054\u8c03\u5b8c\u6210\uff01\";\n    }\n}<\/code><\/pre>\n\n\n\n
          \u5b9e\u73b0\u6548\u679c\uff0c\u5355\u51fb\u6309\u94ae\u540e\u51fa\u73b0\u8fde\u63a5\u6210\u529f\u63d0\u793a<\/p>\n\n\n\n
          \"\"<\/div><\/figure>\n\n\n\n
          \u6b65\u9aa4\u56db\uff1a\u7528\u6237\u767b\u5f55\uff08\u8fde\u63a5\u6570\u636e\u5e93\uff09<\/h2>\n\n\n\n
          \u65b0\u5efa\u6570\u636e\u8868<\/p>\n\n\n\n
          CREATE DATABASE desserts;\nUSE desserts;\n\nCREATE TABLE t_user (\n    id INT PRIMARY KEY AUTO_INCREMENT,\n    username VARCHAR(50) NOT NULL UNIQUE,\n    password VARCHAR(100) NOT NULL,\n    active int \n);<\/code><\/pre>\n\n\n\n
          \u540e\u7aef\u5b9e\u73b0\u63a5\u53e3\uff0c\u5728src\u4e0b\u521b\u5efaservice\u76ee\u5f55\uff0c\u521b\u5efaUserService.java<\/p>\n\n\n\n
          package com.example.website_mater.service;\n\nimport com.example.website_mater.entity.User;\nimport com.example.website_mater.mapper.UserMapper;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.stereotype.Service;\n\n@Service\npublic class UserService {\n\n    @Autowired\n    private UserMapper userMapper;\n\n    \/\/ \u6ce8\u518c\n    public String register(User user) {\n        User exist = userMapper.findByUsername(user.getUsername());\n        if (exist != null) {\n            return \"\u7528\u6237\u540d\u5df2\u5b58\u5728\";\n        }\n        userMapper.save(user);\n        return \"\u6ce8\u518c\u6210\u529f\";\n    }\n\n    \/\/ \u767b\u5f55\n    public String login(User user) {\n        User exist = userMapper.findByUsername(user.getUsername());\n        if (exist == null) {\n            return \"\u7528\u6237\u4e0d\u5b58\u5728\";\n        }\n        if (!exist.getPassword().equals(user.getPassword())) {\n            return \"\u5bc6\u7801\u9519\u8bef\";\n        }\n        return \"\u767b\u5f55\u6210\u529f\";\n    }\n}<\/code><\/pre>\n\n\n\n
          \u5728src\u4e0b\u521b\u5efamapper\u76ee\u5f55\uff0c\u521b\u5efaUserMapper.java<\/p>\n\n\n\n
          package com.example.website_mater.mapper;\n\nimport com.example.website_mater.entity.User;\nimport org.springframework.data.jpa.repository.JpaRepository;\n\npublic interface UserMapper extends JpaRepository<User, Integer> {\n    User findByUsername(String username);\n}<\/code><\/pre>\n\n\n\n
          \u5728src\u4e0b\u521b\u5efaentity\u76ee\u5f55\uff0c\u521b\u5efaUser.java<\/p>\n\n\n\n
          package com.example.website_mater.entity;\n\nimport jakarta.persistence.*;\nimport lombok.Data;\n\n@Data\n@Entity\n@Table(name = \"t_user\")\npublic class User {\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    private Integer id;\n    private String username;\n    private String password;\n    private int active;\n}<\/code><\/pre>\n\n\n\n
          \u5728controller\u4e0b\u521b\u5efaUserController.java<\/p>\n\n\n\n
          package com.example.website_mater.controller;\n\nimport com.example.website_mater.entity.User;\nimport com.example.website_mater.service.UserService;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.web.bind.annotation.*;\n\n@RestController\n@RequestMapping(\"\/user\")\n@CrossOrigin(origins = \"http:\/\/localhost:5173\")\npublic class UserController {\n\n    @Autowired\n    private UserService userService;\n\n    @PostMapping(\"\/register\")\n    public String register(@RequestBody User user) {\n        return userService.register(user);\n    }\n\n    @PostMapping(\"\/login\")\n    public String login(@RequestBody User user) {\n        return userService.login(user);\n    }\n}<\/code><\/pre>\n\n\n\n
          \u6b65\u9aa4\u4e94\uff1a\u524d\u7aef\u767b\u5f55\u9875\u9762<\/h2>\n\n\n\n
          \u914d\u7f6e\u8def\u7531<\/p>\n\n\n\n
          import { createRouter, createWebHistory } from 'vue-router'\nimport Login from '..\/views\/Login.vue'\nimport Register from '..\/views\/Register.vue'\nimport Home from '..\/views\/Home.vue'\n\nconst routes = [\n  { path: '\/', redirect: '\/login' },\n  { path: '\/login', component: Login },\n  { path: '\/register', component: Register },\n  { path: '\/home', component: Home }\n]\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes\n})\n\nexport default router<\/code><\/pre>\n\n\n\n
          \u7f16\u5199\u767b\u5f55\u9875\u9762\u4ee3\u7801<\/p>\n\n\n\n
          <template>\n  <div style=\"width: 400px; margin: 100px auto;\">\n    <h2>\u7528\u6237\u767b\u5f55<\/h2>\n    <el-input v-model=\"user.username\" placeholder=\"\u7528\u6237\u540d\" style=\"margin:10px 0;\" \/>\n    <el-input v-model=\"user.password\" placeholder=\"\u5bc6\u7801\" type=\"password\" style=\"margin:10px 0;\" \/>\n    <el-button type=\"primary\" @click=\"login\" style=\"width:100%;\">\u767b\u5f55<\/el-button>\n    <el-button @click=\"$router.push('\/register')\" style=\"width:100%;margin-top:10px;\">\u53bb\u6ce8\u518c<\/el-button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue'\nimport axios from 'axios'\nimport { ElMessage } from 'element-plus'\nimport { useRouter } from 'vue-router'\nconst router = useRouter()\n\nconst user = ref({ username: '', password: '' })\n\nconst login = async () => {\n  const res = await axios.post('http:\/\/localhost:8080\/user\/login', user.value)\n  ElMessage.success(res.data)\n  if (res.data === '\u767b\u5f55\u6210\u529f') {\n    router.push('\/home')\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
          \u7f16\u5199\u6ce8\u518c\u9875\u9762\u4ee3\u7801<\/p>\n\n\n\n
          <template>\n  <div style=\"width: 400px; margin: 100px auto;\">\n    <h2>\u7528\u6237\u6ce8\u518c<\/h2>\n    <el-input v-model=\"user.username\" placeholder=\"\u7528\u6237\u540d\" style=\"margin:10px 0;\" \/>\n    <el-input v-model=\"user.password\" placeholder=\"\u5bc6\u7801\" type=\"password\" style=\"margin:10px 0;\" \/>\n    <el-button type=\"primary\" @click=\"register\" style=\"width:100%;\">\u6ce8\u518c<\/el-button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue'\nimport axios from 'axios'\nimport { ElMessage } from 'element-plus'\nimport { useRouter } from 'vue-router'\nconst router = useRouter()\n\nconst user = ref({ username: '', password: '' })\n\nconst register = async () => {\n  const res = await axios.post('http:\/\/localhost:8080\/user\/register', user.value)\n  ElMessage.success(res.data)\n  if (res.data === '\u6ce8\u518c\u6210\u529f') {\n    router.push('\/login')\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
          \u6b65\u9aa4\u516d\uff1a\u7528\u6237\u767b\u5f55\u4fe1\u606f\u4fdd\u5b58<\/h2>\n\n\n\n
          \u540e\u7aef\u4fee\u6539 UserController.java<\/strong><\/p>\n\n\n\n
          package com.example.website_mater.controller;\n\nimport com.example.website_mater.entity.User;\nimport com.example.website_mater.service.UserService;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.web.bind.annotation.*;\n\n@RestController\n@RequestMapping(\"\/user\")\n@CrossOrigin(origins = \"http:\/\/localhost:5173\")\npublic class UserController {\n\n    @Autowired\n    private UserService userService;\n\n    @PostMapping(\"\/register\")\n    public String register(@RequestBody User user) {\n        return userService.register(user);\n    }\n\n    \/\/ \u6539\u6210\u8fd9\u4e2a\n    @PostMapping(\"\/login\")\n    public Object login(@RequestBody User user) {\n        User loginUser = userService.getLoginUser(user);\n        if (loginUser == null) {\n            return \"\u7528\u6237\u540d\u6216\u5bc6\u7801\u9519\u8bef\";\n        }\n        return loginUser;\n    }\n\n}<\/code><\/pre>\n\n\n\n
          \u4fee\u6539 UserService.java<\/strong><\/p>\n\n\n\n
          @Service\npublic class UserService {\n\n    @Autowired\n    private UserMapper userMapper;\n\n    public String register(User user) {\n        User exist = userMapper.findByUsername(user.getUsername());\n        if (exist != null) {\n            return \"\u7528\u6237\u540d\u5df2\u5b58\u5728\";\n        }\n        userMapper.save(user);\n        return \"\u6ce8\u518c\u6210\u529f\";\n    }\n\n    public String login(User user) {\n        User exist = userMapper.findByUsername(user.getUsername());\n        if (exist == null) {\n            return \"\u7528\u6237\u4e0d\u5b58\u5728\";\n        }\n        if (!exist.getPassword().equals(user.getPassword())) {\n            return \"\u5bc6\u7801\u9519\u8bef\";\n        }\n        return \"\u767b\u5f55\u6210\u529f\";\n    }\n\n    \/\/ \u65b0\u589e\u8fd9\u4e2a\u65b9\u6cd5\n    public User getLoginUser(User user) {\n        User u = userMapper.findByUsername(user.getUsername());\n        if (u == null) return null;\n        if (!u.getPassword().equals(user.getPassword())) return null;\n        return u;\n    }\n}<\/code><\/pre>\n\n\n\n
          \u524d\u7aef\u9996\u9875\u663e\u793a\u767b\u5f55\u4fe1\u606f<\/p>\n\n\n\n
          login.vue<\/p>\n\n\n\n
          <template>\n  <div style=\"width: 400px; margin: 100px auto;\">\n    <h2 style=\"text-align: center;\">\u7528\u6237\u767b\u5f55<\/h2>\n    <el-input \n      v-model=\"user.username\" \n      placeholder=\"\u8bf7\u8f93\u5165\u7528\u6237\u540d\" \n      style=\"margin:10px 0;\" \n    \/>\n    <el-input \n      v-model=\"user.password\" \n      placeholder=\"\u8bf7\u8f93\u5165\u5bc6\u7801\" \n      type=\"password\" \n      style=\"margin:10px 0;\" \n    \/>\n    <el-button type=\"primary\" @click=\"login\" style=\"width:100%;margin-top:10px;\">\n      \u767b\u5f55\n    <\/el-button>\n    <el-button @click=\"$router.push('\/register')\" style=\"width:100%;margin-top:10px;\">\n      \u53bb\u6ce8\u518c\n    <\/el-button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue'\nimport { useRouter } from 'vue-router'\nimport axios from 'axios'\nimport { ElMessage } from 'element-plus'\n\nconst router = useRouter()\n\/\/ \u7ed1\u5b9a\u8868\u5355\u6570\u636e\nconst user = ref({\n  username: '',\n  password: ''\n})\n\n\/\/ \u767b\u5f55\u65b9\u6cd5\nconst login = async () => {\n  try {\n    const res = await axios.post('http:\/\/localhost:8080\/user\/login', user.value)\n    \n    \/\/ \u5982\u679c\u8fd4\u56de\u6709 id\uff0c\u8bf4\u660e\u662f\u7528\u6237\u5bf9\u8c61 = \u767b\u5f55\u6210\u529f\n    if (res.data.id) {\n      ElMessage.success('\u767b\u5f55\u6210\u529f')\n\n      \/\/ ========== \u4fdd\u5b58\u7528\u6237\u4fe1\u606f\u5230\u672c\u5730\u5b58\u50a8 ==========\n      localStorage.setItem('userId', res.data.id)\n      localStorage.setItem('username', res.data.username)\n\n      \/\/ \u8df3\u8f6c\u5230\u9996\u9875\n      router.push('\/home')\n    } else {\n      \/\/ \u8fd4\u56de\u5b57\u7b26\u4e32\u63d0\u793a\uff1a\u7528\u6237\u540d\u5bc6\u7801\u9519\u8bef\n      ElMessage.error(res.data)\n    }\n  } catch (err) {\n    ElMessage.error('\u8bf7\u6c42\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u540e\u7aef\u670d\u52a1\u662f\u5426\u542f\u52a8')\n    console.log(err)\n  }\n}\n<\/script><\/code><\/pre>\n\n\n\n
          \"\"<\/div><\/figure>\n\n\n\n
          \u9996\u9875\u663e\u793aHome.vue<\/p>\n\n\n\n
          <template>\n  <div style=\"text-align: center; margin-top: 120px;\">\n    <h1>\ud83c\udf89 \u6b22\u8fce\u8fdb\u5165\u7cfb\u7edf\u4e3b\u9875<\/h1>\n    <h3 style=\"margin: 20px 0;\">\u5f53\u524d\u767b\u5f55\u7528\u6237\uff1a{{ loginName }}<\/h3>\n\n    <el-button type=\"danger\" @click=\"logout\">\u9000\u51fa\u767b\u5f55<\/el-button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref, onMounted } from 'vue'\nimport { useRouter } from 'vue-router'\n\nconst router = useRouter()\n\/\/ \u5b9a\u4e49\u663e\u793a\u7684\u7528\u6237\u540d\nconst loginName = ref('')\n\n\/\/ \u9875\u9762\u52a0\u8f7d\u65f6\u8bfb\u53d6\u672c\u5730\u5b58\u50a8\u7684\u7528\u6237\u540d\nonMounted(() => {\n  loginName.value = localStorage.getItem('username') || '\u6e38\u5ba2'\n})\n\n\/\/ \u9000\u51fa\u767b\u5f55\nconst logout = () => {\n  \/\/ \u6e05\u7a7a\u672c\u5730\u4fdd\u5b58\u7684\u7528\u6237\u4fe1\u606f\n  localStorage.removeItem('userId')\n  localStorage.removeItem('username')\n\n  \/\/ \u8df3\u56de\u767b\u5f55\u9875\n  router.push('\/login')\n}\n<\/script><\/code><\/pre>\n\n\n\n
          \"\"<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"
          SpringBoot \u662f\u4ec0\u4e48 SpringBoot \u662f\u73b0\u4ee3 Java \u540e\u7aef\u5f00\u53d1\u7684 \u201c\u6807\u914d\u201d\uff0c\u5b83\u628a Spring […]<\/p>\n","protected":false},"author":1,"featured_media":2120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2066","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn"],"yoast_head":"\nSpringBoot & Vue \u9879\u76ee\u5f00\u53d1 - Hueil\u306e\u5c0f\u7a9d<\/title>\n<meta name=\"description\" content=\"\u8ba1\u7b97\u673a\u5e94\u7528\uff0cPython\uff0cJava\uff0c\u4fe1\u606f\u5b89\u5168\uff0c\u7f51\u7ad9\u7f8e\u5316,\u7269\u8054\u7f51\uff0cC\/C++\u7b97\u6cd5\u5206\u6790,\u7f51\u7ad9\u5b9e\u6218\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hueil.top\/?p=2066\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1 - Hueil\u306e\u5c0f\u7a9d\" \/>\n<meta property=\"og:description\" content=\"\u8ba1\u7b97\u673a\u5e94\u7528\uff0cPython\uff0cJava\uff0c\u4fe1\u606f\u5b89\u5168\uff0c\u7f51\u7ad9\u7f8e\u5316,\u7269\u8054\u7f51\uff0cC\/C++\u7b97\u6cd5\u5206\u6790,\u7f51\u7ad9\u5b9e\u6218\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hueil.top\/?p=2066\" \/>\n<meta property=\"og:site_name\" content=\"Hueil\u306e\u5c0f\u7a9d\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-30T07:47:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-30T09:21:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png\" \/>\n\t<meta property=\"og:image:width\" content=\"428\" \/>\n\t<meta property=\"og:image:height\" content=\"355\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"\u5c0f\u5f20\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u5c0f\u5f20\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hueil.top\/?p=2066#article\",\"isPartOf\":{\"@id\":\"https:\/\/hueil.top\/?p=2066\"},\"author\":{\"name\":\"\u5c0f\u5f20\",\"@id\":\"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88\"},\"headline\":\"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1\",\"datePublished\":\"2026-04-30T07:47:17+00:00\",\"dateModified\":\"2026-04-30T09:21:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hueil.top\/?p=2066\"},\"wordCount\":92,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88\"},\"image\":{\"@id\":\"https:\/\/hueil.top\/?p=2066#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png\",\"articleSection\":[\"\u6587\u7ae0\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hueil.top\/?p=2066#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hueil.top\/?p=2066\",\"url\":\"https:\/\/hueil.top\/?p=2066\",\"name\":\"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1 - Hueil\u306e\u5c0f\u7a9d\",\"isPartOf\":{\"@id\":\"https:\/\/hueil.top\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hueil.top\/?p=2066#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hueil.top\/?p=2066#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png\",\"datePublished\":\"2026-04-30T07:47:17+00:00\",\"dateModified\":\"2026-04-30T09:21:01+00:00\",\"description\":\"\u8ba1\u7b97\u673a\u5e94\u7528\uff0cPython\uff0cJava\uff0c\u4fe1\u606f\u5b89\u5168\uff0c\u7f51\u7ad9\u7f8e\u5316,\u7269\u8054\u7f51\uff0cC\/C++\u7b97\u6cd5\u5206\u6790,\u7f51\u7ad9\u5b9e\u6218\",\"breadcrumb\":{\"@id\":\"https:\/\/hueil.top\/?p=2066#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hueil.top\/?p=2066\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/hueil.top\/?p=2066#primaryimage\",\"url\":\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png\",\"contentUrl\":\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png\",\"width\":428,\"height\":355},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hueil.top\/?p=2066#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/hueil.top\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hueil.top\/#website\",\"url\":\"https:\/\/hueil.top\/\",\"name\":\"Hueil\u306e\u5c0f\u7a9d\",\"description\":\"Hueil\u7684\u5c0f\u7834\u7ad9\",\"publisher\":{\"@id\":\"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hueil.top\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88\",\"name\":\"\u5c0f\u5f20\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/hueil.top\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/hueil.top\/wp-content\/uploads\/2025\/08\/Hueil.jpg\",\"contentUrl\":\"https:\/\/hueil.top\/wp-content\/uploads\/2025\/08\/Hueil.jpg\",\"width\":940,\"height\":940,\"caption\":\"\u5c0f\u5f20\"},\"logo\":{\"@id\":\"https:\/\/hueil.top\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/hueil.top\"],\"url\":\"https:\/\/hueil.top\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1 - Hueil\u306e\u5c0f\u7a9d","description":"\u8ba1\u7b97\u673a\u5e94\u7528\uff0cPython\uff0cJava\uff0c\u4fe1\u606f\u5b89\u5168\uff0c\u7f51\u7ad9\u7f8e\u5316,\u7269\u8054\u7f51\uff0cC\/C++\u7b97\u6cd5\u5206\u6790,\u7f51\u7ad9\u5b9e\u6218","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hueil.top\/?p=2066","og_locale":"zh_CN","og_type":"article","og_title":"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1 - Hueil\u306e\u5c0f\u7a9d","og_description":"\u8ba1\u7b97\u673a\u5e94\u7528\uff0cPython\uff0cJava\uff0c\u4fe1\u606f\u5b89\u5168\uff0c\u7f51\u7ad9\u7f8e\u5316,\u7269\u8054\u7f51\uff0cC\/C++\u7b97\u6cd5\u5206\u6790,\u7f51\u7ad9\u5b9e\u6218","og_url":"https:\/\/hueil.top\/?p=2066","og_site_name":"Hueil\u306e\u5c0f\u7a9d","article_published_time":"2026-04-30T07:47:17+00:00","article_modified_time":"2026-04-30T09:21:01+00:00","og_image":[{"width":428,"height":355,"url":"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png","type":"image\/png"}],"author":"\u5c0f\u5f20","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u5c0f\u5f20","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hueil.top\/?p=2066#article","isPartOf":{"@id":"https:\/\/hueil.top\/?p=2066"},"author":{"name":"\u5c0f\u5f20","@id":"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88"},"headline":"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1","datePublished":"2026-04-30T07:47:17+00:00","dateModified":"2026-04-30T09:21:01+00:00","mainEntityOfPage":{"@id":"https:\/\/hueil.top\/?p=2066"},"wordCount":92,"commentCount":0,"publisher":{"@id":"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88"},"image":{"@id":"https:\/\/hueil.top\/?p=2066#primaryimage"},"thumbnailUrl":"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png","articleSection":["\u6587\u7ae0"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hueil.top\/?p=2066#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hueil.top\/?p=2066","url":"https:\/\/hueil.top\/?p=2066","name":"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1 - Hueil\u306e\u5c0f\u7a9d","isPartOf":{"@id":"https:\/\/hueil.top\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hueil.top\/?p=2066#primaryimage"},"image":{"@id":"https:\/\/hueil.top\/?p=2066#primaryimage"},"thumbnailUrl":"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png","datePublished":"2026-04-30T07:47:17+00:00","dateModified":"2026-04-30T09:21:01+00:00","description":"\u8ba1\u7b97\u673a\u5e94\u7528\uff0cPython\uff0cJava\uff0c\u4fe1\u606f\u5b89\u5168\uff0c\u7f51\u7ad9\u7f8e\u5316,\u7269\u8054\u7f51\uff0cC\/C++\u7b97\u6cd5\u5206\u6790,\u7f51\u7ad9\u5b9e\u6218","breadcrumb":{"@id":"https:\/\/hueil.top\/?p=2066#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hueil.top\/?p=2066"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/hueil.top\/?p=2066#primaryimage","url":"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png","contentUrl":"https:\/\/hueil.top\/wp-content\/uploads\/2026\/04\/Springboot.png","width":428,"height":355},{"@type":"BreadcrumbList","@id":"https:\/\/hueil.top\/?p=2066#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/hueil.top\/"},{"@type":"ListItem","position":2,"name":"SpringBoot & Vue \u9879\u76ee\u5f00\u53d1"}]},{"@type":"WebSite","@id":"https:\/\/hueil.top\/#website","url":"https:\/\/hueil.top\/","name":"Hueil\u306e\u5c0f\u7a9d","description":"Hueil\u7684\u5c0f\u7834\u7ad9","publisher":{"@id":"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hueil.top\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"https:\/\/hueil.top\/#\/schema\/person\/b3ed2232564570b957865ad1cefe7b88","name":"\u5c0f\u5f20","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/hueil.top\/#\/schema\/person\/image\/","url":"https:\/\/hueil.top\/wp-content\/uploads\/2025\/08\/Hueil.jpg","contentUrl":"https:\/\/hueil.top\/wp-content\/uploads\/2025\/08\/Hueil.jpg","width":940,"height":940,"caption":"\u5c0f\u5f20"},"logo":{"@id":"https:\/\/hueil.top\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/hueil.top"],"url":"https:\/\/hueil.top\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/posts\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hueil.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2066"}],"version-history":[{"count":37,"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/posts\/2066\/revisions"}],"predecessor-version":[{"id":2129,"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/posts\/2066\/revisions\/2129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hueil.top\/index.php?rest_route=\/wp\/v2\/media\/2120"}],"wp:attachment":[{"href":"https:\/\/hueil.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hueil.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hueil.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}