\u4e00\uff0c\u521b\u5efa\u524d\u7aef<\/h2>\n\n\n\n
\u524d\u7aef\u91c7\u7528node.js\u6280\u672f\u6808\uff0c\u901a\u8fc7\u547d\u4ee4\u521b\u5efavue vite \u9879\u76ee<\/p>\n\n\n\n
npm create vite@latest takeout-web -- --template vue<\/code><\/pre>\n\n\n\ntaskout-web\u662f\u9879\u76ee\u540d\u79f0\uff0c\u63a5\u4e0b\u6765\u5b89\u88c5\u9879\u76ee\u9700\u8981\u91c7\u7528\u7684\u7ec4\u4ef6<\/p>\n\n\n\n
cd takeout-web\nnpm install element-plus axios pinia vue-router@4 dayjs echarts<\/code><\/pre>\n\n\n\n\u8fd9\u91cc\u4e3b\u8981\u7528\u5230\u4e86\u4e09\u4e2a\u7ec4\u4ef6axios\u8d1f\u8d23http\u8bf7\u6c42\uff0celement-plus\u7ec4\u4ef6\u6837\u5f0f\uff0crouter\u7f16\u5199\u9875\u9762\u8def\u7531<\/p>\n\n\n\n
\u5728\u524d\u7aefsrc\u76ee\u5f55\u4e0b\u4fee\u6539main.js\u6587\u4ef6<\/p>\n\n\n\n
import { createApp } from 'vue'\nimport '.\/style.css'\nimport App from '.\/App.vue'\n\ncreateApp(App).mount('#app')\n<\/code><\/pre>\n\n\n\n\u5f15\u5165\u7ec4\u4ef6\u5e76\u6ce8\u518c\uff0c\u914d\u7f6eaxios\u7684\u57fa\u7840\u8bbf\u95eeURL,\u8fde\u63a5\u540e\u7aef\u542f\u52a8\u76848080\u7aef\u53e3<\/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\u8fd9\u91cc\u9700\u8981\u5728\u5f53\u524d\u76ee\u5f55\u521b\u5efa\u4e86router\u76ee\u5f55\u53ca\u5176\u76ee\u5f55\u4e0b\u7684index.js\u914d\u7f6e\u6587\u4ef6<\/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\u4fee\u6539app.vue\u6587\u4ef6<\/p>\n\n\n\n
<script setup>\n\n<\/script>\n\n<template>\n <!-- \u4fee\u6539\u4e3a -->\n <router-view \/>\n<\/template>\n<\/code><\/pre>\n\n\n\n\u5728src\/views\/\u76ee\u5f55\u4e0b\u65b0\u5efaHome.vue<\/p>\n\n\n\n
<template>\n\t<h2>Home<\/h2>\n<\/template>\n\n<script>\n<\/script>\n\n<style>\n<\/style><\/code><\/pre>\n\n\n\n\u542f\u52a8\u524d\u7aef\u67e5\u770b\u6548\u679c ,\u5982\u4e0b\u56fe<\/p>\n\n\n\n
\u5728task-web\u76ee\u5f55\u4e0b\u6267\u884cnpm run dev\n<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-2-1024x578.png\")
<\/div><\/figure>\n\n\n\n\u53ef\u4ee5\u770b\u5230\uff0c\u5df2\u7ecf\u5b9e\u73b0\u4e3b\u9875\u9762\u7684\u663e\u793a\uff0c\u8be5\u9879\u76ee\u6709\u4e09\u4e2a\u9875\u9762\uff0cLogin,Register,Home\u3002\u6839\u636e\u4e1a\u52a1\u903b\u8f91\uff0c\u6211\u4eec\u5e94\u8be5\u5148\u8ba9\u7528\u6237\u767b\u5f55\uff0c\u7136\u540e\u8df3\u8f6c\u5230\u4e3b\u9875\u9762\u3002\u4e0b\u9762\u6211\u4eec\u5148\u521b\u5efa\u5176\u4f59\u4e24\u4e2a\u9875\u9762\uff0c\u5e76\u7f16\u5199\u8def\u7531\u5b88\u536b\u4fdd\u8bc1\u7528\u6237\u4e0d\u80fd\u76f4\u63a5\u8bbf\u95ee\u4e3b\u9875\u8fdb\u884c\u8ba2\u9910\u3002<\/p>\n\n\n\n
\u5728src\/view\u76ee\u5f55\u4e0b\u521b\u5efaLogin.vue , Register.vue\u6587\u4ef6\u3002<\/p>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-3.png\")
<\/div><\/figure>\n\n\n\n\u63a5\u4e0b\u6765\uff0c\u4fee\u6539\u8def\u7531\u914d\u7f6e\u3002<\/p>\n\n\n\n
import { createRouter, createWebHistory } from 'vue-router'\nimport Home from '..\/views\/Home.vue'\nimport Login from '..\/views\/Login.vue'\nimport Register from '..\/views\/Register.vue'\nconst routes = [\n {\n path: '\/',\n name: 'Login',\n component: Login\n },\n {\n\t path: '\/home',\n\t name: \"Home\",\n\t component: Home\n },\n {\n\t path: '\/register',\n\t name: \"Register\",\n\t component: Register\n }\n]\n \nconst router = createRouter({\n history: createWebHistory(),\n routes\n})\n\/\/ \u8def\u7531\u5b88\u536b\uff08\nrouter.beforeEach((to, from, next) => {\n \/\/ \u7981\u6b62\u76f4\u63a5\u8bbf\u95ee \/home\uff0c\u5fc5\u987b\u4ece\u767b\u5f55\u9875\u8df3\u8f6c\u8fc7\u6765\n if (to.path === '\/home' && from.path === '') {\n next('\/login')\n } else {\n next()\n }\n})\nexport default router<\/code><\/pre>\n\n\n\n\u521b\u5efa\u540e\u7aef<\/h2>\n\n\n\n
\u524d\u7aef\u57fa\u7840\u5730\u57fa\u5df2\u642d\u5efa\u5b8c\u6bd5\uff0c\u63a5\u4e0b\u6765\u521b\u5efa\u540e\u7aefspringboot\u9879\u76ee\uff0c\u4f7f\u7528Idea\u65b0\u5efa\u9879\u76ee<\/p>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-4.png\")
<\/div><\/figure>\n\n\n\n\u5f15\u5165pom\u4f9d\u8d56<\/p>\n\n\n\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\n\n\n
\u6570\u636e\u5e93<\/h2>\n\n\n\n
\u73b0\u5728\u5efa\u7acb\u6570\u636e\u5e93\u7ed3\u6784\uff1a<\/p>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-5.png\")
<\/div><\/figure>\n\n\n\n\u5728\u540e\u7aef\u4fee\u6539\u914d\u7f6e\u6587\u4ef6\uff0c\u8fde\u63a5\u6570\u636e\u5e93<\/p>\n\n\n\n
spring.application.name=task-master\n# \u7aef\u53e3\nserver.port=8080\n\n# \u6570\u636e\u5e93\u8fde\u63a5\nspring.datasource.url=jdbc:mysql:\/\/localhost:3306\/task-web?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\u6570\u636e\u5e93\u4e2d\u5404\u8868\u7684\u521b\u5efa\u4ee3\u7801\u53ef\u4ee5\u53c2\u8003\uff1a<\/p>\n\n\n\n
\nSET NAMES utf8mb4;\nSET FOREIGN_KEY_CHECKS = 0;\n\n-- ----------------------------\n-- Table structure for meal_package\n-- ----------------------------\nDROP TABLE IF EXISTS `meal_package`;\nCREATE TABLE `meal_package` (\n `id` int NOT NULL AUTO_INCREMENT,\n `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,\n `price` decimal(38, 2) NULL DEFAULT NULL,\n `create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,\n PRIMARY KEY (`id`) USING BTREE\n) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;\n\n-- ----------------------------\n-- Table structure for orders\n-- ----------------------------\nDROP TABLE IF EXISTS `orders`;\nCREATE TABLE `orders` (\n `id` bigint NOT NULL AUTO_INCREMENT,\n `user_id` int NOT NULL COMMENT '\u8ba2\u9910\u4ebaID',\n `package_id` int NOT NULL COMMENT '\u5957\u9910ID',\n `quantity` int NOT NULL COMMENT '\u4efd\u6570',\n `unit_price` decimal(38, 2) NULL DEFAULT NULL,\n `total_price` decimal(38, 2) NULL DEFAULT NULL,\n `order_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '\u8ba2\u9910\u65f6\u95f4',\n PRIMARY KEY (`id`) USING BTREE,\n INDEX `user_id`(`user_id` ASC) USING BTREE,\n INDEX `package_id`(`package_id` ASC) USING BTREE,\n CONSTRAINT `orders_ibfk_1` FOREIGN KEY (`user_id`) REFERENCES `sys_user` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT,\n CONSTRAINT `orders_ibfk_2` FOREIGN KEY (`package_id`) REFERENCES `meal_package` (`id`) ON DELETE RESTRICT ON UPDATE RESTRICT\n) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;\n\n-- ----------------------------\n-- Table structure for sys_user\n-- ----------------------------\nDROP TABLE IF EXISTS `sys_user`;\nCREATE TABLE `sys_user` (\n `id` int NOT NULL AUTO_INCREMENT,\n `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,\n `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,\n `is_admin` int NULL DEFAULT NULL,\n `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,\n PRIMARY KEY (`id`) USING BTREE\n) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;\n\nSET FOREIGN_KEY_CHECKS = 1;\n<\/code><\/pre>\n\n\n\n\u7528navicat\u6216\u8005sql\u8bed\u53e5\u5728sys_user\u8868\u4e2d\u6dfb\u52a0\u4e24\u6761\u8bb0\u5f55\uff0c\u4f5c\u4e3a\u7ba1\u7406\u5458\u767b\u5f55\u8d26\u6237\u548c\u6d4b\u8bd5\u7528\u6237<\/p>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-6.png\")
<\/div><\/figure>\n\n\n\n\u7f16\u5199\u7528\u6237\u767b\u5f55\u529f\u80fd<\/h2>\n\n\n\n
\u5728\u540e\u7aefsrc\/main\/java\/\u76ee\u5f55\u4e0b\u7684com.example.taskmaster\u4e0b\u521b\u5efa\u8f6f\u4ef6\u5305User<\/p>\n\n\n\n
\u5728\u8fd9\u4e2a\u8f6f\u4ef6\u5305\u4e2d\uff0c\u6211\u4eec\u4f1a\u6309\u7167\u56db\u5c42\u67b6\u6784\u8fdb\u884c\u8bbe\u8ba1\uff0c\u5206\u522b\u662f\u63a7\u5236\u5c42\uff0c\u4e1a\u52a1\u5c42\uff0c\u6570\u636e\u8bbf\u95ee\u5c42\u548c\u5b9e\u4f53\u5c42\u3002<\/p>\n\n\n\n
Controller\u63a7\u5236\u5c42<\/strong>\u662f\u7cfb\u7edf\u7684\u5165\u53e3\uff0c\u8d1f\u8d23\u63a5\u6536\u524d\u7aef\u7684 HTTP \u8bf7\u6c42\u5e76\u8fd4\u56de\u54cd\u5e94\u7ed3\u679c\u3002\u901a\u8fc7@RestController\u3001@RequestMapping\u7b49\u6ce8\u89e3\uff0c\u5b9a\u4e49\u4e86\u7edf\u4e00\u7684 RESTful \u63a5\u53e3\uff0c\u6bd4\u5982\u7528\u6237\u6a21\u5757\u7684\/user\/register\u548c\/user\/login\u3002\u540c\u65f6\uff0c\u6211\u4e5f\u914d\u7f6e\u4e86\u8de8\u57df\u652f\u6301\uff0c\u4fdd\u8bc1\u524d\u540e\u7aef\u8054\u8c03\u7684\u517c\u5bb9\u6027\u3002<\/p>\n\n\n\nService \u4e1a\u52a1\u5c42<\/strong> \u8fd9\u4e00\u5c42\u5c01\u88c5\u4e86\u7cfb\u7edf\u7684\u6838\u5fc3\u4e1a\u52a1\u903b\u8f91\uff0c\u662f\u6574\u4e2a\u67b6\u6784\u7684\u6838\u5fc3\u3002\u4ee5\u7528\u6237\u6a21\u5757\u4e3a\u4f8b\uff0c\u6ce8\u518c\u3001\u767b\u5f55\u7684\u4e1a\u52a1\u6821\u9a8c\u903b\u8f91\u90fd\u5728\u8fd9\u91cc\u5b9e\u73b0\u3002\u5b83\u4f1a\u8c03\u7528 Mapper \u5c42\u63d0\u4f9b\u7684\u6570\u636e\u64cd\u4f5c\u65b9\u6cd5\uff0c\u5b8c\u6210\u4e1a\u52a1\u5904\u7406\uff0c\u540c\u65f6\u4fdd\u8bc1 Controller \u5c42\u548c\u6570\u636e\u5c42\u7684\u89e3\u8026\u3002<\/p>\n\n\n\n Mapper \u6570\u636e\u8bbf\u95ee\u5c42\uff08DAO \u5c42\uff09<\/strong> \u8fd9\u4e00\u5c42\u8d1f\u8d23\u4e0e\u6570\u636e\u5e93\u8fdb\u884c\u4ea4\u4e92\uff0c\u5c01\u88c5\u4e86\u6240\u6709\u7684\u6570\u636e\u8bfb\u5199\u64cd\u4f5c\u3002\u6211\u4f7f\u7528JdbcTemplate\u5b9e\u73b0\u4e86\u5bf9 MySQL \u6570\u636e\u5e93\u7684\u64cd\u4f5c\uff0c\u6bd4\u5982\u6839\u636e\u7528\u6237\u540d\u67e5\u8be2\u7528\u6237\u3001\u63d2\u5165\u65b0\u7528\u6237\u6570\u636e\u7b49 SQL \u903b\u8f91\u90fd\u5728\u8fd9\u91cc\u7f16\u5199\uff0c\u4fdd\u8bc1\u4e1a\u52a1\u5c42\u65e0\u9700\u5173\u5fc3\u5e95\u5c42\u6570\u636e\u5e93\u7684\u5177\u4f53\u5b9e\u73b0\u3002<\/p>\n\n\n\nEntity \u5b9e\u4f53\u5c42\uff08ORM \u6620\u5c04\u5c42\uff09<\/strong> \u8fd9\u4e00\u5c42\u5b9a\u4e49\u4e86\u4e0e\u6570\u636e\u5e93\u8868\u5bf9\u5e94\u7684\u5b9e\u4f53\u7c7b\uff0c\u901a\u8fc7\u7c7b\u7684\u5c5e\u6027\u548c\u6570\u636e\u8868\u5b57\u6bb5\u4e00\u4e00\u6620\u5c04\uff0c\u5b9e\u73b0 ORM \u5bf9\u8c61\u5173\u7cfb\u6620\u5c04\u3002\u6bd4\u5982User.java\u5bf9\u5e94\u6570\u636e\u5e93\u4e2d\u7684sys_user\u8868\uff0c\u4f7f\u7528 Lombok \u7684@Data\u6ce8\u89e3\u7b80\u5316\u4e86\u5b9e\u4f53\u7c7b\u7684\u7f16\u5199\u3002<\/p>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-7.png\")
<\/div><\/figure>\n\n\n\n\u63a5\u4e0b\u6765\u5148\u7f16\u5199\u5b9e\u4f53\u5c42\uff0c\u6620\u5c04\u5b57\u6bb5\u5173\u7cfb\uff0c\u5728Entity\u4e0b\u521b\u5efaUser.java<\/p>\n\n\n\n
package com.example.taskmaster.User.Entity;\n\/\/\u6ce8\u610f\u8def\u5f84\u8981\u4fdd\u6301\u4e00\u81f4\nimport lombok.Data;\n\n@Data\npublic class User {\n private int id;\n private String name;\n private String password;\n private int is_admin;\n\n}\n<\/code><\/pre>\n\n\n\n\u7136\u540e\u7f16\u5199\u6570\u636e\u8bbf\u95ee\u5c42\uff0c\u5728\u8fd9\u5c42\u901a\u8fc7jdbc\u5b9e\u73b0\u6570\u636e\u5e93\u4ea4\u4e92\uff0c\u521b\u5efaUserMapper.java\uff08\u53ef\u4ee5\u901a\u8fc7\u7ee7\u627fJPA\u5b9e\u73b0\u6570\u636e\u5e93\u64cd\u4f5c\u7684\u4ee3\u7801\uff0c\u4f46\u8fd9\u91cc\u662f\u4e3a\u4e86\u5b66\u4e60java\u4ea4\u4e92\u6240\u4ee5\u81ea\u5df1\u7f16\u5199\uff09<\/p>\n\n\n\n
package com.example.taskmaster.User.Mapper;\n\n\nimport com.example.taskmaster.User.Entity.User;\nimport org.springframework.jdbc.core.JdbcTemplate;\nimport org.springframework.jdbc.core.RowMapper;\nimport org.springframework.stereotype.Repository;\n\nimport java.sql.ResultSet;\nimport java.sql.SQLException;\n\n@Repository\npublic class UserMapper {\n\n private final JdbcTemplate jdbcTemplate;\n\n public UserMapper(JdbcTemplate jdbcTemplate) {\n this.jdbcTemplate = jdbcTemplate;\n }\n\n private static final RowMapper<User> USER_ROW_MAPPER = new RowMapper<User>() {\n @Override\n public User mapRow(ResultSet rs, int rowNum) throws SQLException {\n User user = new User();\n user.setId(rs.getInt(\"id\"));\n user.setName(rs.getString(\"name\"));\n user.setPassword(rs.getString(\"password\"));\n user.setIs_admin(rs.getInt(\"is_admin\"));\n return user;\n }\n };\n\n \/**\n * \u6839\u636e\u7528\u6237\u540d\u67e5\u8be2\u7528\u6237\n *\/\n public User findByName(String name) {\n String sql = \"SELECT id, name, password, is_admin FROM sys_user WHERE name = ?\";\n var list = jdbcTemplate.query(sql, USER_ROW_MAPPER, name);\n return list.isEmpty() ? null : list.get(0);\n }\n\n \/**\n * \u4fdd\u5b58\u7528\u6237\n *\/\n public int save(User user) {\n String sql = \"INSERT INTO sys_user (name, password, is_admin) VALUES (?, ?, ?)\";\n return jdbcTemplate.update(sql, user.getName(), user.getPassword(), user.getIs_admin());\n }\n}\n<\/code><\/pre>\n\n\n\n\u7f16\u5199\u4e1a\u52a1\u5c42\uff0c\u5728\u8fd9\u4e00\u5c42\u5b9e\u73b0\u4e1a\u52a1\u903b\u8f91\uff0c\u521b\u5efaUserService.java<\/p>\n\n\n\n
package com.example.taskmaster.User.Service;\n\nimport com.example.taskmaster.User.Entity.User;\nimport com.example.taskmaster.User.Mapper.UserMapper;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.stereotype.Service;\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.findByName(user.getName());\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.findByName(user.getName());\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\n<\/code><\/pre>\n\n\n\n\u6700\u540e\u662f\u63a7\u5236\u5c42\uff0c\u8fd9\u5c42\u91cd\u70b9\u662f\u5b9e\u73b0\u7aef\u53e3\u548chttp\u8bf7\u6c42\u54cd\u5e94\uff0c\u521b\u5efaUserController.java<\/p>\n\n\n\n
package com.example.taskmaster.User.Controller;\n\nimport com.example.taskmaster.User.Entity.User;\nimport com.example.taskmaster.User.Mapper.UserMapper;\nimport com.example.taskmaster.User.Service.UserService;\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.web.bind.annotation.*;\n\nimport java.util.HashMap;\nimport java.util.Map;\n\n@RestController\n@RequestMapping(\"\/user\")\n@CrossOrigin(origins = \"http:\/\/localhost:5173\")\npublic class UserController {\n\n @Autowired\n private UserService userService;\n\n @Autowired\n private UserMapper userMapper;\n\n @PostMapping(\"\/register\")\n public String register(@RequestBody User user) {\n return userService.register(user);\n }\n\n @PostMapping(\"\/login\")\n public Map<String, Object> login(@RequestBody User user) {\n Map<String, Object> result = new HashMap<>();\n User exist = userMapper.findByName(user.getName());\n if (exist == null) {\n result.put(\"msg\", \"\u7528\u6237\u4e0d\u5b58\u5728\");\n result.put(\"data\", null);\n return result;\n }\n if (!exist.getPassword().equals(user.getPassword())) {\n result.put(\"msg\", \"\u5bc6\u7801\u9519\u8bef\");\n result.put(\"data\", null);\n return result;\n }\n Map<String, Object> userData = new HashMap<>();\n userData.put(\"id\", exist.getId());\n userData.put(\"name\", exist.getName());\n userData.put(\"isAdmin\", exist.getIs_admin());\n result.put(\"msg\", \"\u767b\u5f55\u6210\u529f\");\n result.put(\"data\", userData);\n return result;\n }\n}<\/code><\/pre>\n\n\n\n@CrossOrigin(origins = “http:\/\/localhost:5173”)\u8fd9\u6bb5\u7684\u4f5c\u7528\uff1aget\u8bf7\u6c42\u53ef\u4ee5\u6b63\u5e38\u901a\u8fc7\uff0c\u4f46\u662f\u7528\u5230post\u8bf7\u6c42\u65f6\u4f1a\u51fa\u73b0\u8bf7\u6c42\u5931\u8d25\uff0c\u8de8\u57df\u7b49\u95ee\u9898\u3002\u5c0f\u767d\u53ef\u4ee5\u5148\u4e86\u89e3\u4e00\u4e9b\u5e38\u7528\u8bf7\u6c42\u65b9\u5f0f<\/p>\n\n\n\n
\u524d\u7aef\u4e0e\u540e\u7aef\u7684\u8fde\u63a5\u8c03\u7528<\/h2>\n\n\n\n
\u524d\u7aef\uff0c\u540e\u7aef\u90fd\u51c6\u5907\u5b8c\u6bd5\u4e86\uff0c\u90a3\u8be5\u5982\u4f55\u901a\u4fe1\u548c\u8bf7\u6c42\u8d44\u6e90\u5462\uff1f<\/p>\n\n\n\n
\u8fd8\u8bb0\u5f97\u6211\u4eec\u5728\u524d\u7aefmain.js\u4e2d\u5b9a\u4e49\u7684\u8fd9\u4e00\u6761\u5417\uff1f<\/p>\n\n\n\n
axios.defaults.baseURL = 'http:\/\/localhost:8080'<\/code><\/pre>\n\n\n\n\u8fd9\u58f0\u660e\uff0c\u6bcf\u6b21\u8c03\u7528axios\u8fdb\u884chttp\u8bf7\u6c42\u65f6\u9ed8\u8ba4\u4f1a\u5411http:\/\/localhost:8080\u8be5\u5730\u5740\u53d1\u9001\uff0c\u6211\u4eec\u540e\u7aef\u542f\u52a8\u7684\u7aef\u53e3\u6b63\u662f\u8fd9\u4e2a\u5730\u5740\u3002\u63a5\u4e0b\u6765\u6211\u4eec\u5728\u524d\u7aefsrc\u76ee\u5f55\u4e0b\u65b0\u5efaapi\u76ee\u5f55\u5e76\u5728\u5176\u4e2d\u521b\u5efauser.js<\/p>\n\n\n\n
\nimport axios from 'axios'\n\n\/\/ \u767b\u5f55\u63a5\u53e3\nexport const loginApi = (userInfo) => {\n return axios.post('\/user\/login', userInfo)\n}\n\/\/\u6ce8\u518c\u63a5\u53e3\nexport const registerAPI = (userInfo) => {\n return axios.post(\"\/user\/register\",userInfo)\n}\n\n<\/code><\/pre>\n\n\n\n\u5728\u8fd9\u91cc\u7f16\u5199\u4e86\u4e24\u79cd\u8bf7\u6c42\uff0c\u5206\u522b\u5bf9\u5e94controller\u5c42UserController.java\u4e2d\u7528@PostMapper\u6ce8\u89e3\u58f0\u660e\u7684\u63a5\u53e3\uff0cpost\u8bf7\u6c42\u662f\u9700\u8981\u53c2\u6570\u7684\uff0c\u540c\u65f6\u8981\u9002\u914d\u6211\u4eec\u7684\u4e1a\u52a1\u903b\u8f91\uff0c\u800c\u767b\u5f55\u6216\u6ce8\u518c\u90fd\u8981\u7528\u7528\u6237\u540d\u548c\u5bc6\u7801\uff0c\u6240\u4ee5\u6211\u4eec\u7f16\u5199\u767b\u5f55\u754c\u9762\u4ee3\u7801\uff0c\u63a5\u6536\u8fd9\u4e24\u4e2a\u503c\u3002\u540c\u65f6\u901a\u8fc7api\u63a5\u53e3\u53d1\u5230\u540e\u7aef\u8fdb\u884c\u5904\u7406\u83b7\u53d6\u54cd\u5e94\u7ed3\u679c\uff0c\u5b8c\u6210\u767b\u5f55\u6821\u9a8c\u3002<\/p>\n\n\n\n
\u4e0b\u9762\u662fLogin.vue\u767b\u5f55\u754c\u9762\u7684\u4ee3\u7801,\u8fd9\u91cc\u6211\u6ce8\u91ca\u4e86\uff0c\u4e0d\u7136\u53d1\u4e0d\u4e0a\u53bb\u3002<\/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.name\" 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;\">\u6ce8\u518c<\/el-button>\n <\/div>\n<\/template>\n \n<script setup>\nimport { ref } from 'vue'\nimport { ElMessage } from 'element-plus'\nimport { useRouter } from 'vue-router'\nimport { loginApi } from '..\/api\/user'\n\nconst router = useRouter()\nconst user = ref({ name: '', password: '' })\n\nconst login = async () => {\n try {\n const res = await loginApi(user.value)\n const { msg, data } = res.data\n\n if (msg === '\u767b\u5f55\u6210\u529f' && data) {\n ElMessage.success(msg)\n router.push({\n path: '\/home',\n query: {\n userId: data.id,\n userName: data.name,\n isAdmin: data.isAdmin\n }\n })\n } else {\n ElMessage.error(msg || '\u767b\u5f55\u5931\u8d25')\n }\n } catch (err) {\n ElMessage.error('\u767b\u5f55\u8bf7\u6c42\u5931\u8d25')\n }\n}\n<\/script>--><\/code><\/pre>\n\n\n\n\u542f\u52a8\u524d\u540e\u7aef\u8fdb\u884c\u9a8c\u8bc1\uff0c\u8f93\u5165\u8d26\u53f7\u540e\u53ef\u4ee5\u767b\u5f55\u5e76\u81ea\u52a8\u8df3\u8f6c\u5230Home\u9875\u9762\u89c6\u4e3a\u6210\u529f<\/p>\n\n\n\n
\u6ce8\u518c\u9875\u9762\u4ee3\u7801\uff1a<\/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.name\" 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 { ElMessage } from 'element-plus'\nimport { useRouter } from 'vue-router'\nimport { registerAPI } from \"..\/api\/user\"\nconst router = useRouter()\n \nconst user = ref({ name: '', password: '' })\n \nconst register = async () => {\n try {\n const res = await registerAPI(user.value)\n ElMessage.success(res.data)\n if (res.data === '\u6ce8\u518c\u6210\u529f') {\n router.push('\/login')\n }\n } catch (err) {\n ElMessage.warning(\"\u6ce8\u518c\u5931\u8d25\")\n }\n\n \n\n\n}\n\n<\/script>--><\/code><\/pre>\n\n\n\n\u5b9e\u73b0\u65b9\u6cd5\u90fd\u662f\u91c7\u7528v-model\u7ed1\u5b9a\uff0c\u7136\u540e\u5c06user\u7684\u503c\u4f5c\u4e3a\u53c2\u6570\u901a\u8fc7\u8c03\u7528api\uff0caxios\u53d1\u9001\u5230\u540e\u7aef\u8fdb\u884c\u5904\u7406\u5b9e\u73b0\uff0c\u6d41\u7a0b\u524d\u7aef\u53d1\u5305\u5230controller-service-mapper-mysql-data-mapper-service-controller-web<\/p>\n\n\n\n
\u8ba2\u5355\u9875\u9762\u8bbe\u8ba1<\/h2>\n\n\n\n
\u8fd9\u65f6\uff0c\u60f3\u5230\u5927\u591a\u6570\u7f51\u7ad9\u767b\u5f55\u8fdb\u53bb\u540e\u53ef\u4ee5\u663e\u793a\u767b\u5f55\u7528\u6237\u4fe1\u606f\u5e76\u4e14\u6b22\u8fce\u3002\u90a3\u4e48\u5728\u8be5\u9879\u76ee\u4e2d\uff0c\u6211\u662f\u5982\u4f55\u5b9e\u73b0\u7684\u5462\uff1f<\/p>\n\n\n\n
\u5176\u5b9e\u5728\u6211\u53d1\u7684\u540e\u7aefcontroller\u5c31\u9732\u51fa\u7aef\u502a\u4e86\uff0c\u770bUserController.java\u6587\u4ef6<\/p>\n\n\n\n
Map<String, Object> userData = new HashMap<>();\n userData.put(\"id\", exist.getId());\n userData.put(\"name\", exist.getName());\n userData.put(\"isAdmin\", exist.getIs_admin());\n result.put(\"msg\", \"\u767b\u5f55\u6210\u529f\");\n result.put(\"data\", userData);<\/code><\/pre>\n\n\n\n\u5728\u8fd9\u91cc\u6211\u5c06\u767b\u5f55\u4fe1\u606f\u53d1\u9001\u5230\u9875\u9762\u4e2d\uff0c\u7528post\u8bf7\u6c42\u4e2d\u7684\u53c2\u6570\u6765\u8fa8\u522b\u7528\u6237\uff0c\u65e2\u80fd\u5b9e\u73b0\u7528\u6237\u540d\u4fe1\u606f\uff0c\u53c8\u901a\u8fc7is_admin\u5b57\u6bb5\uff0c\u53ef\u4ee5\u5728\u524d\u7aef\u9875\u9762\u4e2d\u7528v-if\u65b9\u6cd5\u8fa8\u522b\u662f\u5426\u662f\u7ba1\u7406\u5458\u8d26\u6237\uff0c\u63d0\u4f9b\u6743\u9650\u9694\u79bb\u3002\u5f53\u7136\uff0c\u8fd9\u662f\u4e0d\u5b89\u5168\u4e5f\u7edd\u5bf9\u4e0d\u89c4\u8303\u7684\uff0c\u4f46\u6bd5\u7adf\u662f\u8bfe\u9898\u8bbe\u8ba1\uff0c\u7b80\u964b\u70b9\u3002\uff08\u5176\u5b9e\u662f\u6211\u6bd4\u8f83\u61d2\uff09<\/p>\n\n\n\n
\u8a00\u5f52\u6b63\u4f20\uff0c\u5f00\u59cb\u5b9e\u73b0\u8ba2\u5355\u4e1a\u52a1<\/p>\n\n\n\n
\u5957\u9910\u4e0e\u8ba2\u5355<\/h2>\n\n\n\n
\u63a5\u4e0b\u6765\uff0c\u7167\u846b\u82a6\u753b\u74e2\uff0c\u521b\u5efa\u8ba2\u5355\u548c\u5957\u9910\u76844\u5c42\u67b6\u6784<\/p>\n\n\n\n![\"\"](\"https:\/\/hueil.top\/wp-content\/uploads\/2026\/06\/image-10.png\")
<\/div><\/figure>\n\n\n\n\u6700\u7ec8\u5b9e\u73b0\u6548\u679c<\/p>\n\n\n\n