今天学习了如何在电脑上将web应用部署至手机端：
一、环境准备
1. 开发工具与环境
IntelliJ IDEA：安装 Ultimate 版（支持 Java EE 和 Web 开发）。
Java SDK：确保安装 JDK 8+。
数据库：
本地安装 SQL Server 或 Oracle，或使用远程数据库服务器。
配置数据库连接信息（IP、端口、用户名、密码）。
Web 服务器：IDEA 内置 Tomcat（默认支持 Servlet），或手动集成其他服务器（如 Jetty）。
2. 依赖管理
在项目中引入以下依赖（通过 Maven 或 Gradle）：
xml
Copy Code
javax.servlet
javax.servlet-api
4.0.1
provided
com.microsoft.sqlserver
mssql-jdbc
12.2.0.jre8
com.fasterxml.jackson.core
jackson-databind
2.13.0
二、项目配置与部署
1. IDEA 项目配置
创建 Web 项目：
选择 File > New > Project，选择 Java Enterprise，勾选 Web Application。
配置项目名称和路径。
添加 Servlet 和 JavaBean：
在 src/main/java 下编写 Servlet 类（继承 HttpServlet）和 JavaBean。
配置 web.xml（或使用注解）：
在 WEB-INF/web.xml 中定义 Servlet 映射：
xml
Copy Code
MyServlet
com.example.MyServlet
MyServlet
/api/*
2. 数据库连接配置
在 Servlet 或 JavaBean 中配置数据库连接：
java
Copy Code
String url = "jdbc:sqlserver://localhost:1433;databaseName=mydb";
String user = "sa";
String password = "your_password";
Connection conn = DriverManager.getConnection(url, user, password);
建议使用连接池（如 HikariCP）优化性能。
3. 部署到内置 Tomcat
配置 Tomcat：
点击 IDEA 右上角 Add Configuration > + > Tomcat Server > Local。
设置部署目录（默认使用 artifact 生成的 WAR 包）。
启动应用：
点击运行按钮，IDEA 会自动编译并启动 Tomcat。
访问 http://localhost:8080/your-project-name 验证是否成功。
三、手机端运行测试
1. 确保手机与开发机在同一局域网
开发机（PC）和手机连接到同一 WiFi 网络。
2. 获取开发机的局域网 IP
Windows：命令行输入 ipconfig，查找 IPv4 地址（如 192.168.1.100）。
Mac/Linux：终端输入 ifconfig，查找 inet 地址。
3. 允许外部访问 Tomcat
修改 Tomcat 配置，确保绑定到 0.0.0.0（允许外部访问）：
在 IDEA 的 Tomcat 配置中，添加 -Djava.net.preferIPv4Stack=true -Djava.net.preferIPv6Addresses=false 到 VM Options。
4. 手机访问 Web 应用
在手机浏览器输入：
text
Copy Code
http://<开发机IP>:8080/your-project-name
例如：http://192.168.1.100:8080/demo/api/data
5. 处理常见问题
防火墙：开放 8080 端口（Windows/Mac 防火墙设置）。
跨域问题（CORS）：
在 Servlet 中设置响应头：
java
Copy Code
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST");
或使用 @WebFilter 配置全局 CORS 过滤器。
四、调试与优化
1. 手机端调试
Chrome 远程调试：
手机连接 USB 到 PC，启用 USB 调试模式。
在 Chrome 输入 chrome://inspect，选择手机设备实时调试页面。
2. 性能测试
工具：
Postman：测试 API 响应时间和数据正确性。
Lighthouse：分析移动端页面性能（加载速度、PWA 兼容性）。
3. 日志监控
在 IDEA 控制台查看 Servlet 日志，或使用 Log4j 输出到文件：
java
Copy Code
import org.apache.log4j.Logger;
Logger logger = Logger.getLogger(MyServlet.class);
logger.info("Request received from: " + request.getRemoteAddr());
五、高级场景（可选）
1. 打包为混合应用（Hybrid App）
使用 Cordova 封装 Web 应用为安卓 APK：
安装 Cordova：npm install -g cordova
创建项目：cordova create my-app
将 Web 代码复制到 my-app/www 目录。
添加安卓平台：cordova platform add android
构建并安装到手机：cordova run android
2. 使用 PWA 技术
添加 manifest.json 和 Service Worker，使应用支持离线访问：
json
Copy Code
// manifest.json
{
"name": "My App",
"short_name": "App",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"icons": [...]
}
总结：关键步骤
IDEA 配置：创建 Web 项目，集成 Servlet 和数据库。
部署到 Tomcat：通过内置服务器运行应用。
手机访问：确保同局域网，通过 IP 地址直接访问。
调试与优化：使用 Chrome 远程调试和 Lighthouse 分析性能。
通过以上步骤，可以快速在 IDEA 中部署项目并在手机端完成基础测试。如需更复杂功能（如调用摄像头），需结合 Cordova 或 PWA 技术扩展。
浙公网安备 33010602011771号