新手求教：如何在办公室局域网部署html5+jQuery Mobile移动Web应用（Qt后端）

Hey there! As someone who’s built internal mobile web tools for small teams before, let me walk you through this step by step—since you’re new to mobile web dev, I’ll keep things practical and avoid overcomplicating things.

一、项目启动步骤 #

1. 先锁定核心需求，快速原型验证 #

• Grab 3-5 of your colleagues for a 15-minute chat to nail down the core features (e.g., meeting room booking, shared equipment checkout, team task tracking). Don’t try to build everything at once—start with the 1-2 features everyone actually needs.
• Sketch a super simple prototype (pen and paper works, or a free tool like Figma’s basic version) to visualize the flow. This helps align expectations before you write any code.

2. 搭建前端基础环境 #

• Start with a basic HTML5 template, and make sure to add the mobile viewport meta tag first—this is critical for proper mobile rendering:

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

• For jQuery Mobile, you can either use a CDN (easiest for beginners) or install via npm. Here’s a quick starter snippet:

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  

• Build 2-3 static pages (e.g., login, home screen, feature list) and test them using Chrome’s Device Simulator (Ctrl+Shift+M) to make sure they look good on phone-sized screens.

3. 后端Qt服务基础搭建 #

• Use Qt’s QHttpServer (available in Qt 5.15+) or the lightweight third-party library QtWebApp if you’re on an older Qt version—both make it easy to build HTTP APIs.
• Start with a simple test endpoint to verify your backend works. Example code snippet:

  #include <QCoreApplication>
  #include <QHttpServer>
  
  int main(int argc, char *argv[]) {
      QCoreApplication app(argc, argv);
      QHttpServer server;
  
      // A test API that returns JSON
      server.route("/api/hello", []() {
          return QJsonObject{{"message", "Hello from Qt backend!"}};
      });
  
      // Serve static frontend files from a "www" folder
      server.serveStaticFiles("/", QDir::currentPath() + "/www");
  
      if (!server.listen(QHostAddress::Any, 8080)) {
          qCritical() << "Server failed to start:" << server.errorString();
          return 1;
      }
      qInfo() << "Server running on http://localhost:8080";
      return app.exec();
  }
  

• Compile and run the backend, then test the endpoint in your browser or Postman to make sure it returns the expected JSON.

4. 前后端联调 & MVP迭代 #

• Use jQuery’s $.ajax to call your Qt backend APIs from the frontend. Example:

  $.ajax({
      url: "/api/hello",
      type: "GET",
      success: function(data) {
          $("#message").text(data.message);
      },
      error: function() {
          alert("Failed to connect to server!");
      }
  });
  

• Build a Minimum Viable Product (MVP)—just the core feature (e.g., meeting room booking with basic create/view functions). Test this with 5-10 colleagues to get feedback, then iterate before adding more features.

二、局域网部署方案 #

1. 后端服务部署 #

• Pick a dedicated office PC or low-cost server (even an old desktop works) to host the backend. Make sure it’s always on.
• Package the Qt backend:
  • On Windows: Use windeployqt.exe (comes with Qt) to bundle all required Qt dependencies into the same folder as your executable. Run windeployqt your_app.exe in the command line.
  • On Linux: Use linuxdeployqt to create a self-contained package.
• Set a static LAN IP: Go to the host’s network settings and assign a static IP (e.g., 192.168.1.100). This way, colleagues don’t have to look up a changing dynamic IP.
• Open the firewall: Allow incoming traffic on your backend’s port (e.g., 8080) in the host’s firewall settings.

2. 前端部署 #

• The easiest way is to put all your frontend files (HTML/CSS/JS) into a www folder in the same directory as your Qt backend executable. The serveStaticFiles code in the example above will serve these files directly, so frontend and backend share the same IP/port—no CORS issues to worry about.
• If you want more flexibility (e.g., separate frontend/backend updates), install Nginx on the host, configure it to serve frontend files on port 80, and set up a reverse proxy to forward /api requests to your Qt backend on port 8080.

3. 让同事访问你的应用 #

• Share the LAN URL with your team: http://[static-ip]:[port] (e.g., http://192.168.1.100:8080). They can open this directly in their mobile browser (Chrome, Safari, etc.).
• For a friendlier experience, set up a local DNS entry: If your office has a router that supports local DNS, map a name like office-app.local to your backend’s static IP. Then colleagues can just type http://office-app.local:8080 instead of remembering the IP.

4. 日常维护 & 更新 #

• Backend updates: Stop the running service, replace the executable (and database file if you’re using SQLite), then restart the service. Always back up the database file before updating.
• Frontend updates: Just replace the files in the www folder—colleagues will see the changes when they refresh their browser.
• Basic monitoring: Add simple logging to your Qt backend (use qInfo()/qCritical()) to track errors. You can also write a small batch/bash script to check if the service is running and restart it if it crashes.

内容的提问来源于stack exchange，提问作者Weily Brown