Mighty_Crane
Mighty_Crane

菜鸟关于做前、后端的整理（html、js），以及疑问

涉及到后端的接口py，前端html和js
这三部分就按照如下格式放到server项目主路径下，这样后端机可以作为一个前端server

main.py
	static
		main.js
		main.html

html

首先是html要设定网页的显示

DOCTYPE html>
<html>
<head>
    <title>文件上传测试3title>
    <meta charset="UTF-8"> 
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #preview, #other-image {
            display: none; /* 初始状态不显示图片叉烧包 */
            max-width: 100%;
            max-height: 400px;
            margin-top: 10px;
        }
        #display-area {
            display: flex;
            margin-top: 20px;
        }
        #display-area > div {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            margin-right: 10px;
            background: #f7f7f7;
        }
        #display-area > div:last-child {
            margin-right: 0;
        }
        #form-container {
            margin-bottom: 10px;
        }
        .form-row {
            margin-bottom: 10px;
        }
        .input-small {
            width: 50px; /* 设置一个更小的宽度 */
        }
        #image-preview-container, #other-image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px; /* 或者你希望的高度 */
            border: 1px solid #ddd; /* 可选，为了更好的可视化边框 */
            background: #f7f7f7; /* 可选，背景颜色 */
        }
        #json-result-container {
            /* 滚动条... */
            height: 400px;
            overflow-y: auto; 
            /* 固定这个模块的高度 */
            /* 允许这个模块内容垂直方向上的滚动 */
        }
    style>
head>
<body>
    <h2>文件上传测试3h2>
    <div id="form-container">
        <input type="file" id="fileInput" onchange="displayImage()">
        <div class="form-row">
            <label for="muban_path">模板路径:label>
            <input type="text" id="muban_path" value="muban_url">
        div>
        <div class="form-row">
            <label for="targetname">目标名称:label>
            <input type="text" id="targetname" value="name">
        div>
        <table id="marksTable">
            <thead>
                <tr>
                    <th>Project Typeth>
                    <th>pxth>
                    <th>pyth>
                    <th>pwth>
                    <th>phth>
                    <th>Min Rangeth>
                    <th>Max Rangeth>
                    <th>操作th>
                tr>
            thead>
            <tbody>
                
            tbody>
        table>
        <button type="button" onclick="addMark()">添加 Markbutton>
        <button id="uploadButton" onclick="sendRequest()">上传button>
    div>

<div id="display-area">
    
    <div id="image-preview-container">
        <img id="preview" src="" alt="Image preview will be shown here after selection." style="max-width: 100%; height: auto;">
    div>

    
    <div id="json-result-container">
        <pre id="response">pre>
    div>

    
    <div id="other-image-container">
        
        
        <img id="other-image" src="" alt="Other image will be shown here." style="max-width: 100%; height: auto;">
    div>
div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>

<script type="text/javascript" src="/static/main_3.js">script>
body>
html>

在