如何修改PHP短信解析方法以返回JSON替代HTML适配Vue.js前端

Hey Marek, no worries at all—let's turn that HTML-generating PHP code into something Vue.js can easily work with (JSON!). I'll walk you through the process step by step, including that big block of condition checks you're confused about.

First, Let's Understand What the Original Code Does #

Before we change anything, let's map out what your current code is doing:

• It decrypts the SMS content using caesarCipher, splits it into an array called $par
• Calls hzsGetSMSPosition to get location-related data (stored in $ret)
• Adds extra height info if $par[6] has a value
• Checks each character in $par[25] to build a list of current statuses (like "ťažký úraz" if the first character is '1')
• Glues all this into an HTML string ($ret[0]) to return

The Plan: Switch to Building a JSON Object #

Instead of building an HTML string, we'll create a PHP associative array (which translates directly to a JSON object) that holds all the data points. Then we'll output that array as JSON.

Modified Code Example #

Here's how to rewrite your code to return JSON:

<?php
// Keep your existing decryption and position fetching logic
$par = explode(';', caesarCipher($m[1], -3)); 
$ret = hzsGetSMSPosition($par, $sender, 'cz'); 

// Initialize an empty array to hold our response data
$response = [];

// Add position data to the response
// Assuming $ret[0] is the location text from hzsGetSMSPosition
$response['position'] = $ret[0];

// Handle additional height info
if ($par[6] != '') {
    // No need for HTML line breaks ($nl) here—we're sending raw data
    $response['additional_height'] = 'Nadm. výška: ' . hsc($par[6]) . ' m';
}

// Handle current statuses
$terajsi_stav = array(); 
// Pad $par[25] with zeros to avoid index errors (keep this line!)
$par[25] .= '000000000000000000'; 

// The condition checks stay almost the same—we're just collecting the statuses into an array
if ($par[25][0] == '1') $terajsi_stav[] = 'ťažký úraz'; 
if ($par[25][1] == '1') $terajsi_stav[] = 'autonehoda so zranením'; 
if ($par[25][2] == '1') $terajsi_stav[] = 'bolesť na hrudi'; 
if ($par[25][3] == '1') $terajsi_stav[] = 'ťažké krvácanie'; 
if ($par[25][4] == '1') $terajsi_stav[] = 'alergická reakcia'; 
if ($par[25][5] == '1') $terajsi_stav[] = 'dýchavičnosť'; 
if ($par[25][6] == '1') $terajsi_stav[] = 'iný problém / bolesť brucha'; 
if ($par[25][7] == '1') $terajsi_stav[] = 'bezvedomie'; 
if ($par[25][8] == '1') $terajsi_stav[] = 'svedok'; 
if ($par[25][9] == '1') $terajsi_stav[] = 'lavína'; 
if ($par[25][10] == '1') $terajsi_stav[] = 'uviaznutie'; 
if ($par[25][11] == '1') $terajsi_stav[] = 'zablúdenie'; 
if ($par[25][12] == '1') $terajsi_stav[] = 'zranenie v horách'; 

// Add the status list to our response (even empty, Vue can handle it)
$response['current_status'] = $terajsi_stav;

// Tell the browser we're sending JSON
header('Content-Type: application/json');
// Convert the PHP array to JSON and output it
echo json_encode($response);
?>

Key Changes Explained #

1. No more HTML building: Instead of appending text to $ret[0], we store each piece of data as a key-value pair in $response.
2. Status checks stay intact: That big block of if statements is just collecting strings into an array—we don't need to change that logic at all! We just add the final array to our JSON response.
3. JSON output: Using header('Content-Type: application/json') ensures the frontend knows it's receiving JSON, and json_encode() converts our PHP array into a valid JSON string.

How to Use This in Vue.js #

Once your PHP endpoint returns JSON, you can fetch it in Vue using fetch() or axios, then display the data directly. For example:

// In your Vue component
async fetchSMSData() {
  const response = await fetch('your-php-endpoint.php');
  const data = await response.json();
  // Now you can use data.position, data.additional_height, data.current_status
  console.log(data.current_status); // Will be an array of statuses (or empty)
}

That's it! This approach keeps all your existing SMS parsing logic intact, just changes how the data is formatted for your Vue frontend.

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