随着物流行业的不断发展，越来越多的企业和个人需要了解海运的报价信息。为了方便用户查询和比较不同公司的海运报价，我们可以制作一个海运报价小程序。本文将介绍如何制作一个简单的海运报价小程序。
在制作海运报价小程序之前，我们需要明确以下几点需求：
为了存储海运报价信息，我们需要设计一个数据库表，包含以下字段：
我们可以使用Node.js、Python等后端开发语言搭建一个后端服务，用于处理用户的查询请求和与数据库交互。以下是一个简单的Node.js后端服务示例：
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 连接数据库
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'password',
database: 'ocean_freight'
});
connection.connect();
// 查询报价接口
app.post('/query', (req, res) => {
const { start_port, end_port, goods_type, weight } = req.body;
const sql = `SELECT * FROM quotes WHERE start_port='${start_port}' AND end_port='${end_port}' AND goods_type='${goods_type}' AND weight=${weight}`;
connection.query(sql, (err, results) => {
if (err) {
res.send({ status: 'error', message: err.message });
} else {
res.send({ status: 'success', data: results });
}
});
});
// 启动服务器
const port = 3000;
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
我们可以使用HTML、CSS和JavaScript搭建一个简单的前端界面，用于接收用户输入的信息和展示查询结果。以下是一个简单的前端界面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>**海运**报价查询</title>
<style>
body { font-family: Arial, sans-serif; }
input, button { display: block; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>**海运**报价查询</h1>
<form id="queryForm">
<label for="start_port">起始港：</label>
<input type="text" id="start_port" name="start_port" required><br>
<label for="end_port">目的港：</label>
<input type="text" id="end_port" name="end_port" required><br>
<label for="goods_type">货物类型：</label>
<input type="text" id="goods_type" name="goods_type" required><br>
<label for="weight">货物重量（吨）：</label>
<input type="number" id="weight" name="weight" required><br>
<button type="submit">查询</button>
</form>
<div id="results"></div>
<script>
document.getElementById('queryForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
const response = await fetch('/query', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } });
const result = await response.json();
if (result.status === 'success') {
document.getElementById('results').innerHTML = '';
result.data.forEach((quote) => {
const quoteElement = document.createElement('div');
quoteElement.innerHTML = `
<h3>${quote.company}</h3>
<p>起始港：${quote.start_port}</p>
<p>目的港：${quote.end_port}</p>
<p>货物类型：${quote.goods_type}</p>
<p>货物重量（吨）：${quote.weight}</p>
<p>报价：${quote.price}元</p>
<p>发布时间：${quote.create_time}</p>
`;
document.getElementById('results').appendChild(quoteElement);
});
} else {
alert(result.message);
}
});
</script>
</body>
</html>
一个简单的海运报价小程序就完成了。用户可以输入相关信息进行查询，并在页面上查看查询结果。当然，这只是一个基本的示例，实际项目中可能需要考虑更多的细节和功能。