Java Web + Vue 前后端分离跨域解决方案

原创 于 2025-12-20 12:29:15 发布 · 804 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #开发语言

这是一个完整的Java Web后端与Vue前端跨域通信的实现方案。以下是完整的代码和配置说明：

1. 完整的ApiFilter实现

package org.example;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

public class ApiFilter implements Filter {
    private ConcurrentHashMap<String, AtomicInteger> requestCounts;
    private static final int RATE_LIMIT = 100; // 每分钟最多100次请求
    private static final long TIME_WINDOW = 60000; // 1分钟时间窗口
    private static final int SC_TOO_MANY_REQUESTS = 429;
    
    // CORS配置
    private static final String ALLOWED_ORIGINS = "http://localhost:8082";
    private static final String ALLOWED_METHODS = "GET, POST, PUT, DELETE, OPTIONS, PATCH";
    private static final String ALLOWED_HEADERS = "Authorization, Content-Type, X-Requested-With, Accept, Origin";
    private static final String EXPOSE_HEADERS = "Location, Content-Disposition, Authorization";
    private static final boolean ALLOW_CREDENTIALS = true;
    private static final long MAX_AGE = 3600; // 1小时
    
    // 不需要Token验证的白名单路径
    private static final String[] WHITELIST_PATHS = {
        "/api/login",
        "/api/register",
        "/api/auth/login",
        "/api/auth/register",
        "/api/public/"
    };

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        requestCounts = new ConcurrentHashMap<>();
        // 启动清理线程，定期清理过期计数
        Thread cleaner = new Thread(() -> {
            while (!Thread.currentThread().isInterrupted()) {
                try {
                    Thread.sleep(TIME_WINDOW);
                    requestCounts.clear();
                } catch (InterruptedException e) {
                    Thread.currentThread().interrupt();
                    break;
                }
            }
        });
        cleaner.setDaemon(true);
        cleaner.start();
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        // 1. 添加CORS响应头（必须在任何响应之前）
        addCorsHeaders(httpRequest, httpResponse);

        // 2. 处理OPTIONS预检请求
        if ("OPTIONS".equalsIgnoreCase(httpRequest.getMethod())) {
            httpResponse.setStatus(HttpServletResponse.SC_OK);
            return; // 直接返回，不继续处理
        }

        // 3. 获取请求路径并检查是否为白名单
        String requestPath = httpRequest.getRequestURI();
        String contextPath = httpRequest.getContextPath();
        
        // 移除上下文路径
        if (contextPath != null && !"/".equals(contextPath) && requestPath.startsWith(contextPath)) {
            requestPath = requestPath.substring(contextPath.length());
        }
        
        // 检查是否为白名单路径
        boolean isWhitelisted = isWhitelistedPath(requestPath);
        
        // 4. Token验证（白名单路径跳过）
        if (!isWhitelisted) {
            String token = httpRequest.getHeader("Authorization");
            if (!isValidToken(token)) {
                // 返回JSON格式的错误信息
                sendJsonErrorResponse(httpResponse, HttpServletResponse.SC_UNAUTHORIZED, 
                    "未授权访问，请先登录");
                return;
            }
        }

        // 5. 记录日志
        logRequest(httpRequest);

        // 6. 限流检查
        if (isRateLimited(httpRequest)) {
            sendJsonErrorResponse(httpResponse, SC_TOO_MANY_REQUESTS, 
                "请求频率过高，请稍后再试");
            return;
        }

        // 放行请求
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
        // 释放资源
    }

    /**
     * 添加CORS响应头
     */
    private void addCorsHeaders(HttpServletRequest request, HttpServletResponse response) {
        String origin = request.getHeader("Origin");
        
        // 允许指定源的跨域请求
        if (origin != null && (origin.contains("localhost") || origin.contains("127.0.0.1"))) {
            response.setHeader("Access-Control-Allow-Origin", origin);
        } else {
            // 生产环境应该配置具体的域名
            response.setHeader("Access-Control-Allow-Origin", ALLOWED_ORIGINS);
        }
        
        response.setHeader("Access-Control-Allow-Methods", ALLOWED_METHODS);
        response.setHeader("Access-Control-Allow-Headers", ALLOWED_HEADERS);
        response.setHeader("Access-Control-Expose-Headers", EXPOSE_HEADERS);
        response.setHeader("Access-Control-Max-Age", String.valueOf(MAX_AGE));
        
        if (ALLOW_CREDENTIALS) {
            response.setHeader("Access-Control-Allow-Credentials", "true");
        }
        
        // 对于预检请求，添加额外的头
        if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setHeader("Access-Control-Allow-Headers", 
                "Authorization, Content-Type, X-Requested-With, Accept, Origin, " +
                "Access-Control-Request-Method, Access-Control-Request-Headers, X-Requested-With");
        }
    }

    /**
     * 检查是否为白名单路径
     */
    private boolean isWhitelistedPath(String path) {
        for (String whitelistPath : WHITELIST_PATHS) {
            if (path.equals(whitelistPath) || path.startsWith(whitelistPath)) {
                return true;
            }
        }
        return false;
    }

    /**
     * Token验证逻辑
     */
    private boolean isValidToken(String token) {
        if (token == null || token.trim().isEmpty()) {
            return false;
        }
        
        // 移除Bearer前缀（如果存在）
        if (token.startsWith("Bearer ")) {
            token = token.substring(7);
        }
        
        // 这里应该实现真正的Token验证逻辑
        // 例如：验证JWT Token的有效性、过期时间等
        // 暂时返回true，实际项目中需要根据业务逻辑实现
        return validateJwtToken(token);
    }
    
    /**
     * 验证JWT Token（示例）
     */
    private boolean validateJwtToken(String token) {
        // TODO: 实现JWT Token验证逻辑
        // 这里应该是实际的Token验证，例如：
        // 1. 解析JWT
        // 2. 验证签名
        // 3. 检查过期时间
        // 4. 验证用户信息
        // 暂时返回true
        return true;
    }

    /**
     * 发送JSON格式的错误响应
     */
    private void sendJsonErrorResponse(HttpServletResponse response, int statusCode, String message) 
            throws IOException {
        response.setStatus(statusCode);
        response.setContentType("application/json;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        
        String jsonResponse = String.format(
            "{\"success\": false, \"code\": %d, \"message\": \"%s\", \"timestamp\": %d}",
            statusCode, message, System.currentTimeMillis()
        );
        
        response.getWriter().write(jsonResponse);
        response.getWriter().flush();
    }

    private void logRequest(HttpServletRequest request) {
        String clientIP = getClientIP(request);
        String userAgent = request.getHeader("User-Agent");
        String method = request.getMethod();
        String uri = request.getRequestURI();
        String queryString = request.getQueryString();
        
        String logMessage = String.format(
            "API请求: %s %s%s | IP: %s | User-Agent: %s",
            method, 
            uri,
            queryString != null ? "?" + queryString : "",
            clientIP,
            userAgent != null ? userAgent : "Unknown"
        );
        
        System.out.println(logMessage);
    }

    private boolean isRateLimited(HttpServletRequest request) {
        String clientIP = getClientIP(request);
        AtomicInteger count = requestCounts.computeIfAbsent(clientIP, k -> new AtomicInteger(0));
        int currentCount = count.incrementAndGet();

        // 简单限流：每分钟最多RATE_LIMIT次请求
        boolean limited = currentCount > RATE_LIMIT;
        if (limited) {
            System.out.println("限流客户端: " + clientIP + ", 当前计数: " + currentCount);
        }
        return limited;
    }

    private String getClientIP(HttpServletRequest request) {
        String xfHeader = request.getHeader("X-Forwarded-For");
        if (xfHeader == null) {
            return request.getRemoteAddr();
        }
        // X-Forwarded-For可能包含多个IP，取第一个
        return xfHeader.split(",")[0].trim();
    }
}

2. Vue前端配置

2.1 Axios全局配置

// src/utils/axios.js
import axios from 'axios';
import { Message } from 'element-ui'; // 如果你使用Element UI

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || 'http://localhost:8081',
  timeout: 10000, // 请求超时时间
  withCredentials: true, // 允许携带cookie
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 从本地存储获取token
    const token = localStorage.getItem('access_token') || 
                  sessionStorage.getItem('access_token');
    
    // 如果token存在，将其添加到请求头
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    
    // 设置Content-Type
    if (!config.headers['Content-Type']) {
      config.headers['Content-Type'] = 'application/json';
    }
    
    return config;
  },
  error => {
    console.error('请求错误:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    
    // 如果返回的code不是200，则判断为错误
    if (res.code && res.code !== 200) {
      Message({
        message: res.message || '请求失败',
        type: 'error',
        duration: 5 * 1000
      });
      
      // 401: 未登录
      if (res.code === 401) {
        // 清除token并跳转到登录页
        localStorage.removeItem('access_token');
        sessionStorage.removeItem('access_token');
        window.location.href = '/login';
      }
      
      // 429: 请求频率过高
      if (res.code === 429) {
        Message({
          message: '操作过于频繁，请稍后再试',
          type: 'warning',
          duration: 3 * 1000
        });
      }
      
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    console.error('响应错误:', error);
    
    // 处理HTTP错误
    if (error.response) {
      switch (error.response.status) {
        case 401:
          Message({
            message: '登录已过期，请重新登录',
            type: 'error',
            duration: 5 * 1000
          });
          localStorage.removeItem('access_token');
          sessionStorage.removeItem('access_token');
          window.location.href = '/login';
          break;
        case 403:
          Message({
            message: '没有权限访问',
            type: 'error',
            duration: 5 * 1000
          });
          break;
        case 404:
          Message({
            message: '请求的资源不存在',
            type: 'error',
            duration: 5 * 1000
          });
          break;
        case 429:
          Message({
            message: '请求频率过高，请稍后再试',
            type: 'warning',
            duration: 5 * 1000
          });
          break;
        case 500:
          Message({
            message: '服务器内部错误',
            type: 'error',
            duration: 5 * 1000
          });
          break;
        default:
          Message({
            message: error.response.data?.message || '请求失败',
            type: 'error',
            duration: 5 * 1000
          });
      }
    } else if (error.request) {
      Message({
        message: '网络连接失败，请检查网络设置',
        type: 'error',
        duration: 5 * 1000
      });
    } else {
      Message({
        message: error.message || '请求失败',
        type: 'error',
        duration: 5 * 1000
      });
    }
    
    return Promise.reject(error);
  }
);

export default service;

2.2 Vue环境配置

// vue.config.js
module.exports = {
  devServer: {
    port: 8082, // 前端开发服务器端口
    proxy: {
      '/api': {
        target: 'http://localhost:8081', // 后端地址
        changeOrigin: true, // 允许跨域
        ws: true, // 代理websockets
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  },
  // 其他配置...
};

2.3 Vue登录组件示例

<template>
  <div class="login-container">
    <el-form 
      ref="loginForm" 
      :model="loginForm" 
      :rules="loginRules" 
      class="login-form"
      label-position="left"
    >
      <h3 class="title">系统登录</h3>
      
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
        />
      </el-form-item>
      
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      
      <el-form-item>
        <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
      </el-form-item>
      
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/user';
import { setToken } from '@/utils/auth';

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      rememberMe: false,
      loading: false
    };
  },
  mounted() {
    // 从本地存储获取记住的密码
    const rememberedUsername = localStorage.getItem('remembered_username');
    if (rememberedUsername) {
      this.loginForm.username = rememberedUsername;
      this.rememberMe = true;
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          
          // 调用登录接口
          login({
            username: this.loginForm.username,
            password: this.loginForm.password
          })
            .then(response => {
              // 登录成功
              const token = response.data.token;
              
              // 保存token
              if (this.rememberMe) {
                // 长期存储
                localStorage.setItem('access_token', token);
                localStorage.setItem('remembered_username', this.loginForm.username);
              } else {
                // 会话存储
                sessionStorage.setItem('access_token', token);
                localStorage.removeItem('remembered_username');
              }
              
              // 设置axios默认header
              this.$axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
              
              // 跳转到首页
              this.$router.push('/dashboard');
            })
            .catch(error => {
              console.error('登录失败:', error);
              this.$message.error(error.message || '登录失败');
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  width: 400px;
  padding: 35px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.title {
  margin: 0 auto 40px;
  text-align: center;
  color: #707070;
  font-size: 26px;
  font-weight: 700;
}
</style>

2.4 API接口封装

// src/api/user.js
import request from '@/utils/axios';

export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  });
}

export function logout() {
  return request({
    url: '/api/logout',
    method: 'post'
  });
}

export function getUserInfo() {
  return request({
    url: '/api/user/info',
    method: 'get'
  });
}

export function register(data) {
  return request({
    url: '/api/register',
    method: 'post',
    data
  });
}

3. 后端登录API实现（JSON版本）

package org.example;

import com.google.gson.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.stream.Collectors;

@WebServlet("/api/login")
public class LoginApiServlet extends HttpServlet {
    private UserDAO userDAO;
    private Gson gson = new Gson();
    
    @Override
    public void init() {
        userDAO = new UserDAO();
    }
    
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        
        // 设置响应头
        response.setContentType("application/json;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        
        // 设置CORS头
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8082");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        
        PrintWriter out = response.getWriter();
        JsonObject jsonResponse = new JsonObject();
        
        try {
            // 读取请求体中的JSON数据
            String requestBody = request.getReader().lines()
                .collect(Collectors.joining(System.lineSeparator()));
            
            // 解析JSON
            JsonObject jsonObject = gson.fromJson(requestBody, JsonObject.class);
            
            if (jsonObject == null) {
                jsonResponse.addProperty("success", false);
                jsonResponse.addProperty("message", "请求格式错误");
                jsonResponse.addProperty("code", 400);
                response.setStatus(400);
                out.print(gson.toJson(jsonResponse));
                return;
            }
            
            // 获取用户名和密码
            String username = jsonObject.has("username") ? 
                jsonObject.get("username").getAsString() : null;
            String password = jsonObject.has("password") ? 
                jsonObject.get("password").getAsString() : null;
            
            // 验证参数
            if (username == null || username.trim().isEmpty() ||
                    password == null || password.trim().isEmpty()) {
                jsonResponse.addProperty("success", false);
                jsonResponse.addProperty("message", "用户名和密码不能为空");
                jsonResponse.addProperty("code", 400);
                response.setStatus(400);
                out.print(gson.toJson(jsonResponse));
                return;
            }
            
            // 创建用户对象进行验证
            User user = new User();
            user.setUsername(username);
            user.setPassword(password);
            
            // 验证用户凭据
            if (userDAO.validate(user)) {
                // 生成Token（实际应该使用JWT）
                String token = generateToken(username);
                
                // 获取用户信息
                User fullUser = userDAO.selectUserByUsername(username);
                
                // 构建响应数据
                jsonResponse.addProperty("success", true);
                jsonResponse.addProperty("message", "登录成功");
                jsonResponse.addProperty("code", 200);
                jsonResponse.addProperty("token", token);
                
                JsonObject userObj = new JsonObject();
                userObj.addProperty("id", fullUser.getId());
                userObj.addProperty("username", fullUser.getUsername());
                userObj.addProperty("email", fullUser.getEmail());
                
                jsonResponse.add("data", userObj);
                
                response.setStatus(200);
                out.print(gson.toJson(jsonResponse));
            } else {
                jsonResponse.addProperty("success", false);
                jsonResponse.addProperty("message", "用户名或密码错误");
                jsonResponse.addProperty("code", 401);
                response.setStatus(401);
                out.print(gson.toJson(jsonResponse));
            }
            
        } catch (JsonSyntaxException e) {
            jsonResponse.addProperty("success", false);
            jsonResponse.addProperty("message", "JSON格式错误");
            jsonResponse.addProperty("code", 400);
            response.setStatus(400);
            out.print(gson.toJson(jsonResponse));
        } catch (Exception e) {
            e.printStackTrace();
            jsonResponse.addProperty("success", false);
            jsonResponse.addProperty("message", "服务器内部错误");
            jsonResponse.addProperty("code", 500);
            response.setStatus(500);
            out.print(gson.toJson(jsonResponse));
        } finally {
            out.flush();
            out.close();
        }
    }
    
    @Override
    protected void doOptions(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 处理OPTIONS预检请求
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8082");
        response.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setStatus(HttpServletResponse.SC_OK);
    }
    
    private String generateToken(String username) {
        // 实际应该生成JWT token
        // 这里只是示例，应该使用更安全的方式
        return "jwt_token_" + username + "_" + System.currentTimeMillis();
    }
}

4. Web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    
    <!-- 字符编码过滤器 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.example.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    <!-- API过滤器（处理CORS、限流、Token验证） -->
    <filter>
        <filter-name>ApiFilter</filter-name>
        <filter-class>org.example.ApiFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>ApiFilter</filter-name>
        <url-pattern>/api/*</url-pattern>
    </filter-mapping>
    
    <!-- API Servlet -->
    <servlet>
        <servlet-name>LoginApiServlet</servlet-name>
        <servlet-class>org.example.LoginApiServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginApiServlet</servlet-name>
        <url-pattern>/api/login</url-pattern>
    </servlet-mapping>
    
    <!-- 其他Servlet配置... -->
    
    <!-- 欢迎页面 -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    
</web-app>

5. 字符编码过滤器

package org.example;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter("/*")
public class CharacterEncodingFilter implements Filter {
    
    private String encoding = "UTF-8";
    
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        String encodingParam = filterConfig.getInitParameter("encoding");
        if (encodingParam != null) {
            encoding = encodingParam;
        }
    }
    
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        request.setCharacterEncoding(encoding);
        response.setCharacterEncoding(encoding);
        response.setContentType("text/html;charset=" + encoding);
        chain.doFilter(request, response);
    }
    
    @Override
    public void destroy() {
        // 清理资源
    }
}

6. 关键问题解决

6.1 跨域问题

  1. 预检请求（OPTIONS）处理：过滤器需要正确处理OPTIONS请求

  2. CORS头设置：必须在响应中正确设置CORS头

  3. 凭证（Credentials）：如果前端需要发送Cookie，必须设置Access-Control-Allow-Credentials: true

6.2 认证流程

  1. 登录接口：不需要Token验证，返回Token

  2. 其他接口：需要携带Token验证

  3. Token存储：前端将Token存储在localStorage或sessionStorage中

6.3 限流策略

  1. 基于IP限流：防止恶意请求

  2. 白名单例外：登录等接口不限流

  3. 错误响应：返回429状态码和友好提示

7. 测试步骤

  1. 启动后端：在8081端口启动Java Web应用

  2. 启动前端：在8082端口启动Vue应用

  3. 登录测试：前端调用/api/login接口

  4. Token验证：登录成功后，后续请求自动携带Token

  5. 跨域测试：确保前端可以正常访问后端API

这个方案实现了完整的Java Web + Vue前后端分离跨域通信，包含了安全认证、限流、错误处理等功能。

博客
C语言程序设计基础入门
12-22 145
安装clang-format# Ubuntu: sudo apt install clang-format# Windows: 从LLVM官网下载。# 安装Cppcheck# Ubuntu: sudo apt install cppcheck# Windows: 从官网下载。// 安装C/C++扩展：Microsoft C/C++ Extension// 创建配置文件：tasks.json。统计各分数段人数（90-100、80-89、70-79、60-69、60以下）
博客
基于Java Servlet的用户登录系统设计与实现
12-20 594
本文详细介绍了基于Java Servlet的用户登录系统的设计与实现。系统采用经典的三层架构，具有良好的扩展性和维护性。虽然当前实现是一个基础版本，但提供了完整的工作流程和清晰的代码结构。核心优势清晰的架构分层完整的错误处理机制良好的用户体验设计易于扩展和维护需要改进的地方密码安全性需要加强添加更多的安全防护机制考虑分布式部署时的会话管理此系统可以作为学习Java Web开发的良好起点，也可以作为实际项目的基础框架进行扩展。
博客
Python全栈学习路径：从零基础到人工智能实战
12-12 1105
Python全栈学习路径提供从零基础到AI实战的完整课程体系，覆盖不同学习需求。包含四大模块：就业班（零基础到企业级开发）、青少年编程（10-18岁兴趣培养）、Flask框架（Web开发实战）和机器学习（YOLO算法实战）。课程特色包括体系化学习路径、实战驱动教学、分层教学和全年龄段覆盖，帮助学员掌握从基础编程到人工智能应用的核心技能。适合转行人士、青少年、大学生、职场人士等技术爱好者，提供持续学习支持，确保学以致用。
博客
Thinkphp MVC架构
12-09 66
本文介绍了ThinkPHP中控制器查询数据库并传递数据给视图的几种方法：1.推荐使用模型查询，通过User模型进行数据查询和分页；2.使用Db类直接查询，支持条件查询、排序和分页；3.完整示例展示了控制器中查询数据、统计信息并传递多个变量到视图；4.演示了视图模板中如何显示数据列表和分页；5.介绍了使用助手函数简化查询和视图返回的方法。注意事项包括数据库配置、表名对应、SQL注入防护和性能优化。开发者可根据需求选择模型查询、Db类或助手函数等不同方式。
博客
vite+vue3框架搭建
12-09 45
为你整理了一份 Vite + Vue 3 项目的完整搭建指南。整个流程从最基础的创建开始，涵盖了项目结构、常用功能配置和开发规范。
博客
python机器学习图像识别课程介绍
12-08 777
本文介绍了如何结合Web、TensorFlow和YOLO技术构建完整的图像训练与识别系统。系统包含三大核心组件：YOLO目标检测模型、TensorFlow/PyTorch框架和Flask Web框架，支持用户通过浏览器上传图片并实时获取识别结果。文章提供了三种学习路径选择：基于Flask的后端集成方案、基于TensorFlow.js的前端方案，以及系统性的线下课程学习。详细说明了环境配置、模型训练优化和部署注意事项，包括数据准备、性能优化技巧和生产环境部署建议。最后提供了相关资源下载地址和视频课程链接，帮助
博客
Java Web旅游网站系统介绍
12-08 918
本文介绍了基于JavaEE技术栈的旅游网站系统架构与功能。系统采用B/S架构，技术栈包括后端(Java、Servlet、MyBatis等)、前端(HTML5、Bootstrap、Vue.js等)及数据库(MySQL、Redis等)。功能模块涵盖旅游信息展示、产品预订(酒店、机票、门票等)及在线支付等电子商务服务，支持RESTful API、地图服务、消息队列等扩展功能。系统实现了一个完整的在线旅游服务平台，提供从信息查询到预订支付的一站式解决方案。
博客
ASP.NET MVC 前后端商城系统介绍
12-08 652
本文介绍了一个基于ASP.NET MVC架构的旅游商城系统，该系统采用三层架构模式，实现前后端分离。技术栈包括ASP.NET MVC5/CoreMVC、EntityFramework、SQLServer/MySQL等后端技术，以及Bootstrap、jQuery等前端框架。系统功能涵盖用户管理、产品展示、预订购物车、订单管理及后台管理等模块，具有响应式设计、安全防护和性能优化等特点。数据库设计包含用户、产品、订单等核心表，并支持未来微服务改造和移动端扩展。系统部署支持Windows/Linux环境，提供自动
博客
Uniapp + Coze旅游AI平台应用实现方案
12-04 958
摘要：本文介绍了基于Uniapp+Coze构建的智能在线旅游AI平台，该平台整合了智能行程规划、AI导游导览、个性化推荐和24小时旅游问答等功能。通过自然语言交互和动态推荐，相比传统旅游App提供更智能化的服务体验。文章详细阐述了系统架构、核心功能场景实现方案，包括行程规划、景点讲解和生活助手等功能的技术要点。同时提供了Coze智能体配置指南、Uniapp多端适配建议和MVP开发策略，为开发者构建智能旅游应用提供了完整的实现蓝图。
博客
Uniapp + Coze智能在线课程平台应用实现方案
12-04 841
本文介绍了两种在Uniapp中集成Coze平台AI功能的方案：WebView嵌入H5页面和调用Coze API。WebView方案开发简单但灵活性低，适合快速原型验证；API方案开发难度中等但功能强大，支持深度定制。实施步骤包括：先在Coze平台创建Bot并配置知识库，然后根据所选方案在Uniapp中集成。应用场景包括智能答疑、学习助手等功能，需注意API密钥安全和知识库维护。建议采用后端服务代理API请求以确保安全，并优化流式响应等用户体验。
博客
青少年设计的编程学习路线
11-30 435
为你整理了一份专为青少年设计的编程学习路线，它从兴趣启蒙开始，循序渐进，最终引导至人工智能的应用。
博客
AI语音助手
11-23 754
🎯 系统概述这是一个基于Web的智能语音对话助手系统，集成了先进的语音识别、自然语言处理和实时音频通信技术。系统通过生动的角色动画和情绪反馈，为用户提供沉浸式的语音交互体验。
博客
ThinkPHP5和Laravel框架
11-20 253
在PHP开发中，ThinkPHP5和Laravel都是非常优秀的框架，它们各有特点。下面这个表格能帮你快速了解它们在部署和使用上的核心区别。
博客
flask与fastapi的区别
11-17 1140
Flask：一个经典的、微内核且灵活的 Web 框架。它提供了最基础的功能，其他高级功能（如数据库ORM、用户认证）通过丰富的扩展库来实现。它简单易学，给予开发者极大的自由。FastAPI：一个现代的、高性能的 Web 框架，主要用于构建 API。它内置了基于Python 类型提示的许多开箱即用功能，如自动数据验证、序列化和交互式 API 文档。框架优点缺点Flask简单灵活、生态丰富、学习曲线平缓、适合全栈开发。需要更多样板代码、性能不如 FastAPI、高级功能依赖扩展。FastAPI。
博客
Flask+yolo实现图像识别
11-16 64
通过将Flask的灵活Web框架与YOLO强大的目标检测能力相结合，你可以构建一个功能完整的图像识别系统。这套系统不仅能够处理用户上传的图片并实时返回识别结果，还可以根据具体需求进行定制和扩展。希望这个介绍对你有所帮助！如果你有关于特定部分（如模型训练细节、系统性能优化或前端界面美化）的进一步问题，我很乐意提供更详细的指导。
博客
tensorflow+yolo图片训练和图片识别系统
11-16 813
通过将Flask的灵活Web框架与YOLO强大的目标检测能力相结合，你可以构建一个功能完整的图像识别系统。这套系统不仅能够处理用户上传的图片并实时返回识别结果，还可以根据具体需求进行定制和扩展。希望这个介绍对你有所帮助！如果你有关于特定部分（如模型训练细节、系统性能优化或前端界面美化）的进一步问题，我很乐意提供更详细的指导。
博客
Java Web 项目中Maven 常用库
11-15 122
为了帮你快速了解 Java Web 项目中通过 Maven 引入哪些常用库，下面这个表格汇总了核心场景下的主流选择。你可以根据项目需求进行参考和挑选。
博客
scratch少儿编程课程项目集锦
11-14 1465
这套少儿编程课程体系通过26个精心设计的项目，循序渐进地培养6-12岁儿童的计算思维和创新能力。课程分为基础（6-8岁）、游戏开发（8-10岁）和进阶应用（10-12岁）三个系列，覆盖数字、音乐、美术、物理模拟和AI技术等多个领域。特色项目如悟空编程、太空漫步等，融合数学、物理、音乐等多学科知识，通过角色控制、碰撞检测、数据可视化等编程概念，培养逻辑思维、创意表达和问题解决能力。课程采用"学中做"理念，配有完整教学指导，适合学校、课外班和家庭教育使用。
博客
第7天-摄像头体感游戏
11-14 198
利用摄像头制作体感游戏能让Scratch项目变得更加有趣和互动！以下是详细的制作方法和创意示例。
博客
少年设计的硬件编程课
11-14 1038
这是一份专为少年设计的。本指南旨在帮助青少年从零开始，通过软硬件结合的方式，将代码与现实世界连接起来，培养计算思维、工程能力和创造力。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值