Building a Timestamp Conversion Tool with Flask and Vue.js
This tutorial walks through creating a web-based timestamp conversion utility that transforms second‑ and millisecond‑level timestamps to dates and vice versa, using a Flask backend API and a Vue.js frontend with styled HTML and CSS.
To simplify second‑ and millisecond‑level timestamp conversions, this article demonstrates how to build a practical web tool using Python's Flask framework for the backend and Vue.js for the frontend, complete with a polished UI.
Project Overview : The tool provides four main functions—converting seconds to date, milliseconds to date, date to seconds, and date to milliseconds—exposed via a Flask API and accessed through a Vue.js interface.
Prerequisites : Ensure Python and Node.js are installed. Required dependencies include Flask , Flask-CORS , and Moment.js for date handling.
Backend Code (save as app.py ):
from flask import Flask, jsonify, request
from flask_cors import CORS
from datetime import datetime
app = Flask(__name__)
CORS(app)
@app.route('/convert', methods=['POST'])
def convert_time():
data = request.get_json()
timestamp = data['timestamp']
timestamp_type = data['timestamp_type']
if timestamp_type == 'seconds':
converted_time = datetime.fromtimestamp(int(timestamp))
elif timestamp_type == 'milliseconds':
converted_time = datetime.fromtimestamp(int(timestamp) / 1000)
else:
return jsonify({'error': 'Invalid timestamp type'})
return jsonify({'result': converted_time.strftime('%Y-%m-%d %H:%M:%S')})
if __name__ == '__main__':
app.run(debug=True)This Flask app defines a /convert POST endpoint that receives a timestamp and its type, performs the appropriate conversion using Python's datetime module, and returns the formatted date.
Frontend Code (save as index.html ):
<!DOCTYPE html>
<html>
<head>
<title>时间转换工具</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.js"></script>
</head>
<body>
<div id="app">
<h1>时间转换工具</h1>
<div class="input-container">
<label for="timestamp">时间戳：</label>
<input type="text" id="timestamp" v-model="timestamp" placeholder="输入时间戳">
</div>
<div class="input-container">
<label for="timestampType">时间戳类型：</label>
<select id="timestampType" v-model="timestampType">
<option value="seconds">秒级时间戳</option>
<option value="milliseconds">毫秒级时间戳</option>
</select>
</div>
<button @click="convertTime">转换</button>
<div class="result" v-if="convertedTime">
<p>转换结果：</p>
<p>{{ convertedTime }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
timestamp: '',
timestampType: 'seconds',
convertedTime: ''
},
methods: {
convertTime() {
axios.post('http://localhost:5000/convert', {
timestamp: this.timestamp,
timestamp_type: this.timestampType
})
.then(response => {
this.convertedTime = response.data.result;
})
.catch(error => {
console.error(error);
});
}
}
});
</script>
</body>
</html>The Vue.js app captures user input, sends it to the Flask API via Axios, and displays the converted date.
Stylesheet (save as style.css ) defines the layout, colors, and responsive elements to give the tool a clean appearance.
Running the Application : Install front‑end dependencies with npm install axios moment , start the Flask server using python app.py , then open index.html in a browser to use the converter.
Conclusion : By following this guide, readers learn how to integrate Flask and Vue.js to create a full‑stack timestamp conversion utility, covering both backend API development and front‑end UI design.
Test Development Learning Exchange
Test Development Learning Exchange
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.