更新样式，增加用户无权限表现

TheBattleCar/README.md

@@ -0,0 +1,2 @@
+python app.py
+登陆 127.0.0.1:8000/login

TheBattleCar/app.py

@@ -1,131 +1,376 @@
-from flask import Flask, render_template, request, redirect, url_for, session
-from flask import Flask, request, jsonify, send_from_directory
 import os
+import uuid
+import logging
+from datetime import datetime
+from flask import Flask, current_app, session, redirect, url_for, request, flash, render_template, jsonify, send_from_directory
+from flask_sqlalchemy import SQLAlchemy
+from flask_mysqldb import MySQL
+import MySQLdb.cursors
+from werkzeug.utils import secure_filename
+from flask_login import LoginManager, UserMixin, login_user, login_required, current_user
+from wtforms import Form, StringField
+from wtforms.validators import Length, EqualTo, ValidationError
+import pymysql
 
+conn = pymysql.connect(host="localhost", port=3306,
+                       user="root", password="lin556688",
+                       database="mydatabase", charset="utf8mb4")
+
+# 初始化 Flask 应用
 app = Flask(__name__)
-app.secret_key = 'your_secret_key'  # 用于会话管理，请替换为更安全的密钥
-app.config['UPLOAD_FOLDER'] = 'uploads'  # 设置上传文件存储目录
+app.config['SECRET_KEY'] = 'your_secret_key'
+app.secret_key = os.urandom(24)  # 生成更安全的会话密钥
+app.config['UPLOAD_FOLDER'] = 'uploads/'  # 设置上传文件存储目录
 os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)  # 确保目录存在
 
-# EXTERNAL_SCOUT_URL = 'http://192.168.78.178:5000/'  # 外部侦查者页面URL
+# 配置日志
+logging.basicConfig(filename='app.log', level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+
+# MySQL 配置
+app.config['MYSQL_HOST'] = 'localhost'
+app.config['MYSQL_USER'] = 'root'  # 替换为你的 MySQL 用户名
+app.config['MYSQL_PASSWORD'] = 'lin556688'  # 替换为你的 MySQL 密码
+app.config['MYSQL_DB'] = 'mydatabase'
+app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
+
+mysql = MySQL(app)
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
+
+# 配置日志记录器
+logging.basicConfig(filename='app.log', level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+# 自定义日志处理器类
+class DatabaseLogHandler(logging.Handler):
+    def emit(self, record):
+        log_entry = self.format(record)
+        # 去掉时间戳中的毫秒部分
+        timestamp = datetime.strptime(record.asctime, '%Y-%m-%d %H:%M:%S,%f').strftime('%Y-%m-%d %H:%M:%S')
+        cursor = mysql.connection.cursor()
+        cursor.execute(
+            "INSERT INTO logs (timestamp, level, message) VALUES (%s, %s, %s)",
+            (timestamp, record.levelname, log_entry)
+        )
+        mysql.connection.commit()
+        cursor.close()
+
+# 添加自定义日志处理器
+db_handler = DatabaseLogHandler()
+db_handler.setLevel(logging.INFO)
+formatter = logging.Formatter('%(asctime)s - %(levelname)s - %(message)s')
+db_handler.setFormatter(formatter)
+logger.addHandler(db_handler)
+
+def allowed_file(filename):
+    return '.' in filename and \
+        filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+# 初始化 Flask-Login
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+
+class User(UserMixin):
+    def __init__(self, id, username, role):
+        self.id = id
+        self.username = username
+        self.role = role
+
+@login_manager.user_loader
+def load_user(user_id):
+    cursor = mysql.connection.cursor()
+    cursor.execute("SELECT * FROM users WHERE id = %s", (user_id,))
+    user_data = cursor.fetchone()
+    cursor.close()
+    
+    if user_data:
+        return User(user_data['id'], user_data['username'], user_data['role'])
+    return None
+
+@app.route('/')
+def home():
+    return render_template('login.html')
+
+@app.route('/view_logs')
+@login_required
+def view_logs():
+    with open('app.log', 'r') as log_file:
+        logs = log_file.readlines()
+    return render_template('logs.html', logs=logs)
 
 # 处理文件上传
 @app.route('/upload', methods=['POST'])
 def upload_file():
+    logger.info("Handling file upload request")
     if 'file' not in request.files:
+        logger.warning("No file part in request")
         return jsonify({'message': 'No file part'}), 400
     file = request.files['file']
     if file.filename == '':
+        logger.warning("No selected file")
         return jsonify({'message': 'No selected file'}), 400
-    if file:
-        filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
+    if file and allowed_file(file.filename):
+        filename = secure_filename(f"{uuid.uuid4().hex}_{file.filename}")
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
         file.save(filepath)
+        logger.info(f"File uploaded successfully: {filename}")
         return jsonify({'message': 'File uploaded successfully', 'filepath': filepath}), 201
+    else:
+        logger.warning("File type not allowed")
+        return jsonify({'message': 'File type not allowed'}), 400
 
-    # 提供上传文件的访问
-
-
+# 提供上传文件的访问
 @app.route('/uploads/<filename>')
 def uploaded_file(filename):
+    logger.info(f"Accessing uploaded file: {filename}")
     return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
 
 # 登录页面
 @app.route('/login', methods=['GET', 'POST'])
 def login():
+    logger.info("Handling login request")
     if request.method == 'POST':
         username = request.form['username']
         password = request.form['password']
-        # 在这里添加你的认证逻辑（例如，从数据库验证用户名和密码）
-        # 假设我们总是接受任何用户名和密码为'admin'的登录
-        if username == 'admin' and password == 'admin':
-            role = request.form['role']
-            session['username'] = username
-            session['role'] = role
-            if role == '侦查者':
+        
+        cursor = mysql.connection.cursor()
+        cursor.execute("SELECT * FROM users WHERE username = %s AND password = %s", (username, password))
+        user_data = cursor.fetchone()
+        cursor.close()
+        
+        if user_data:
+            user = User(user_data['id'], user_data['username'], user_data['role'])
+            login_user(user)
+            logger.info(f"User {username} logged in with role {user_data['role']}")
+            
+            if user_data['role'] == '侦查者':
                 return redirect(url_for('scout'))
-            elif role == '指挥者':
+            elif user_data['role'] == '指挥者':
                 return redirect(url_for('commander'))
-            elif role == '攻击者':
+            elif user_data['role'] == '攻击者':
                 return redirect(url_for('attacker'))
         else:
+            logger.warning("Invalid credentials")
             return "Invalid credentials. Please try again."
+    
     return render_template('login.html')
 
+# 处理数据库语句
+def con_my_sql(sql_code):
+    try:
+        conn.ping(reconnect=True)
+        cursor= conn.cursor(pymysql.cursors.DictCursor)
+        cursor.execute(sql_code)
+        conn.commit()
+        conn.close()
+        return cursor
+    except pymysql.MySQLError as err_massage:
+        conn.rollback()
+        conn.close()
+        return type(err_massage), err_massage
+    
+class RegisterForm(Form):
+    captcha = StringField(validators=[Length(min=4,max=4,message='校验码格式错误')])
+    username = StringField(validators=[Length(min=3,max=10,message='用户名长度必须在3到10个字符之间')])
+    password = StringField(validators=[Length(min=6,max=20,message='密码长度必须在6到20个字符之间')])
+    password_confirm = StringField(validators=[EqualTo('password',message='两次输入的密码不一致')])
+
+    def validate_captcha(self, filed):
+        if filed.data not in ['1111', '2222', '3333']:
+            raise ValidationError('校验码错误')
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'GET':
+        return render_template('register.html')
+    else:
+        form = RegisterForm(request.form)
+        if form.validate():
+            username = form.username.data
+            password = form.password.data
+            captcha = form.captcha.data
+            # 静态注册码进行角色注册
+            if captcha == "1111":
+                role = "侦查者"
+            if captcha == "2222":
+                role = "指挥者"
+            if captcha == "3333":
+                role = "攻击者"
 
+            code = "select * from users where username = '%s'" % username
+            cursor_ans = con_my_sql(code)
+            cursor_select = cursor_ans.fetchall()
+
+            if len(cursor_select) > 0:
+                return '用户已经存在 <a href="/">返回登录</a>'
+            else:
+                code = "INSERT INTO users(username, password, role) VALUES('%s', '%s', '%s')" % (username, password, role)
+                print(con_my_sql(code))
+                return '注册成功 <a href="/">返回登录</a>'
+        else:
+            print(form.errors)
+            return redirect(url_for('register'))
+        
 # 侦查者页面
 @app.route('/scout')
+@login_required
 def scout():
-    if 'username' not in session or session['role'] != '侦查者':
-        return redirect(url_for('login'))
+    logger.info("Accessing scout page")
+    if current_user.role != '侦查者':
+        logger.warning("Unauthorized access to scout page")
+        return '用户无此页面访问权限 <a href="/">返回登录<a/>'
     return render_template('scout.html')
 
-
 # 指挥者页面
 @app.route('/commander')
+@login_required
 def commander():
-    if 'username' not in session or session['role'] != '指挥者':
+    logger.info("Accessing commander page")
+    if current_user.role != '指挥者':
+        logger.warning("Unauthorized access to commander page")
+        return '用户无此页面访问权限 <a href="/">返回登录<a/>'
+
+    # 获取特定目录下的所有文件和攻击坐标状态
+    directory = 'E:/_Ufo/0000jiegou/TheBattleCar/uploads'
+    media_items = []
+
+    try:
+        media_items = [f for f in os.listdir(directory)
+                       if os.path.isfile(os.path.join(directory, f)) and allowed_file(f)]
+    except Exception as e:
+        logger.error(f"Error accessing directory: {str(e)}")
+        flash(f"Error accessing directory: {str(e)}")
+
+    # 获取攻击状态
+    cursor = mysql.connection.cursor()
+    cursor.execute("SELECT id, coordinate, attacked, created_at FROM attacks ORDER BY created_at DESC")
+    attacks = cursor.fetchall()
+    cursor.close()
+
+    return render_template('commander.html', media_items=media_items, attacks=attacks)
+
+# 指挥者发送攻击坐标
+@app.route('/send_attack', methods=['POST'])
+@login_required
+def send_attack():
+    logger.info("Handling send attack request")
+    if current_user.role != '指挥者':
+        logger.warning("Unauthorized access to send attack")
         return redirect(url_for('login'))
-    return render_template('commander.html')
 
+    coordinate = request.form.get('coordinate')
+    if not coordinate:
+        logger.warning("No coordinate provided")
+        return "No coordinate provided", 400
+
+    # 插入攻击坐标到数据库
+    cursor = mysql.connection.cursor()
+    cursor.execute("INSERT INTO attacks (coordinate) VALUES (%s)", (coordinate,))
+    mysql.connection.commit()
+    cursor.close()
+    logger.info(f"Attack coordinate sent: {coordinate}")
+
+    flash('攻击坐标已发送')
+    return redirect(url_for('commander'))
 
 # 攻击者页面
 @app.route('/attacker')
+@login_required
 def attacker():
-    if 'username' not in session or session['role'] != '攻击者':
+    logger.info("Accessing attacker page")
+    if current_user.role != '攻击者':
+        logger.warning("Unauthorized access to attacker page")
+        return '用户无此页面访问权限 <a href="/">返回登录<a/>'
+
+    # 获取攻击坐标列表
+    cursor = mysql.connection.cursor()
+    cursor.execute("SELECT id, coordinate, created_at FROM attacks ORDER BY created_at DESC")
+    attacks = cursor.fetchall()
+    cursor.close()
+
+    return render_template('attacker.html', attacks=attacks)
+
+# 攻击者执行攻击
+@app.route('/execute_attack/<int:attack_id>', methods=['POST'])
+@login_required
+def execute_attack(attack_id):
+    logger.info(f"Handling execute attack request for ID: {attack_id}")
+    if current_user.role != '攻击者':
+        logger.warning("Unauthorized access to execute attack")
         return redirect(url_for('login'))
-    return render_template('attacker.html')
 
+    cursor = mysql.connection.cursor()
+    cursor.execute("UPDATE attacks SET attacked = TRUE WHERE id = %s", (attack_id,))
+    mysql.connection.commit()
+    cursor.close()
+    logger.info(f"Attack executed for ID: {attack_id}")
+
+    flash(f'已对坐标ID为 {attack_id} 的目标完成打击')
+    return redirect(url_for('attacker'))
 
 # 退出登录（清除会话）
 @app.route('/logout')
+@login_required
 def logout():
+    logger.info("Handling logout request")
     session.pop('username', None)
     session.pop('role', None)
     return redirect(url_for('login'))
 
-
-from werkzeug.utils import secure_filename
-import uuid
-
-ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
-
-
-def allowed_file(filename):
-    return '.' in filename and \
-        filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
-
-
+# 发送消息
 @app.route('/send_message', methods=['GET', 'POST'])
+@login_required
 def send_message():
+    logger.info("Handling send message request")
     if request.method == 'POST':
-        # 处理照片上传
-        if 'photo' in request.files:
-            file = request.files['photo']
-            if file.filename == '':
-                return "No selected file", 400
-            if file and allowed_file(file.filename):
-                filename = secure_filename(f"{uuid.uuid4().hex}_{file.filename}")
-                filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-                file.save(filepath)
-                photo_url = url_for('uploaded_file', filename=filename, _external=True)
-            else:
-                return "Allowed file types are png, jpg, jpeg, gif", 400
-        else:
-            photo_url = None
-
-            # 处理消息文本上传
         message = request.form.get('message')
         if not message:
+            logger.warning("No message provided")
             return "No message provided", 400
 
-            # 在这里处理消息和照片的存储或进一步处理
-        # 例如，将消息和照片URL存储到数据库
+        photo_url = None
+        if 'photo' in request.files:
+            file = request.files['photo']
+            if file.filename != '':
+                if file and allowed_file(file.filename):
+                    filename = secure_filename(f"{uuid.uuid4().hex}_{file.filename}")
+                    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                    file.save(filepath)
+                    photo_url = url_for('uploaded_file', filename=filename, _external=True)
+                else:
+                    logger.warning("Allowed file types are png, jpg, jpeg, gif")
+                    return "Allowed file types are png, jpg, jpeg, gif", 400
+
+        # 插入数据到 MySQL
+        cursor = mysql.connection.cursor()
+        cursor.execute("INSERT INTO messages (message, photo_url) VALUES (%s, %s)", (message, photo_url))
+        mysql.connection.commit()
+        cursor.close()
+        logger.info(f"Message sent: {message}, Photo URL: {photo_url}")
 
-        # 返回成功响应或重定向
         return f"Message and photo (if uploaded) have been received. Message: {message}\nPhoto URL: {photo_url if photo_url else 'N/A'}"
 
-        # 如果是GET请求，渲染发送消息的表单
     return render_template('send_message.html')
 
+# 获取所有消息
+@app.route('/messages', methods=['GET'])
+@login_required
+def get_messages():
+    logger.info("Handling get messages request")
+    cursor = mysql.connection.cursor()
+    cursor.execute("SELECT id, message, photo_url, created_at FROM messages")
+    result = cursor.fetchall()
+    cursor.close()
+
+    messages = []
+    for row in result:
+        messages.append({
+            'id': row['id'],
+            'message': row['message'],
+            'photo_url': row['photo_url'],
+            'created_at': row['created_at']
+        })
+
+    return jsonify(messages)
+
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0', port=8000)

TheBattleCar/models.py

@@ -0,0 +1,9 @@
+# models.py
+from flask_sqlalchemy import SQLAlchemy
+
+db = SQLAlchemy()
+
+class User(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    role = db.Column(db.String(20), nullable=False)  # 角色字段，例如 '指挥者' 或 '成员'

TheBattleCar/static/login.css

@@ -0,0 +1,211 @@
+*{
+    /*初始化 清除页面元素的内外边距*/
+    padding: 0;
+    margin: 0;
+    /*盒子模型*/
+    box-sizing: border-box;
+}
+body {
+    /*弹性布局 让页面元素垂直+水平居中*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*让页面始终占浏览器可视区域总高度*/
+    height: 100vh;
+    /*背景渐变色*/
+    background: linear-gradient(#141e30,#243b55);
+
+}
+.login{
+    /*弹性布局 让子元素称为弹性项目*/
+    display: flex;
+    /*让弹性项目垂直排列  原理是改变弹性盒子的主轴方向
+    父元素就是弹性盒子  现在改变后的主轴方向是向下了*/
+    flex-direction: column;
+    /*让弹性项目在交叉轴方向水平居中  现在主轴的方向是向下
+    交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/
+    align-items: center;
+    width: 400px;
+    padding: 40px;
+    background-color: rgba(0, 0, 0, 0.2);
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
+
+}
+
+.login h2{
+    color: #fff;
+    margin-bottom: 30px;
+}
+.login h3{
+    color: #fff;
+    margin-bottom: 10px;
+}
+.login .login_box {
+    /*相对定位*/
+    position: relative;
+    width: 100%;
+}
+.login .login_box input{
+    /*清除input框自带的边框和轮廓*/
+    outline: none;
+    border: none;
+    width: 100%;
+    padding: 10px 0;
+    margin-bottom: 30px;
+    color: #fff;
+    font-size: 16px;
+    border-bottom: 1px solid #fff;
+    /*背景颜色为透明色*/
+    background-color: transparent;
+}
+
+.login .login_box label{
+    position:absolute;
+    top: 0 ;
+    left: 0;
+    padding: 10px 0;
+    color: #fff;
+    /*这个属性的默认值是auto 默认是这个元素可以被点击
+    但是如果我们写了none  就是这个元素不能被点击，就好像它可见但是不能用
+    可望而不可及*/
+    /*这个就是两者的区别*/
+    pointer-events: none;
+    /*加个过度*/
+    transition: all 0.5s;
+}
+/*: focus 选择器是当input获得焦点是触发的样式 + 是相邻兄弟选择器
+    去找与input相邻的兄弟label*/
+/*：valid 选择器是判断input 框的内容是否合法，如果合法会执行下面的属性代码，
+    不合法就不会执行，我们刚开始写布局的时候给input框写了required 我们删掉看对比
+    当没有required的话   input框的值就会被认为一直合法，所以一直都是下方的样式，
+    但是密码不会，密码框的值为空，那么这句话就不合法，required不能为空
+    当我们给密码框写点东西的时候才会执行以下代码
+
+*/
+.login .login_box input:focus + label,
+.login  .login_box input:valid + label{
+    top: -20px;
+    color: #03e9f4;
+    font-size: 12px;
+}
+
+.login a{
+    /*overflow: hidden;*/
+    position: relative;
+    padding: 10px 20px;
+    color: #03e9f4;
+    /*取消a表现原有的下划线*/
+    text-decoration: none;
+    /*同样加个过渡*/
+    transition: all 0.5s;
+}
+.login a:hover {
+    color: #fff;
+    border-radius: 5px;
+    background-color: #03e9f4;
+    box-shadow: 0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4;
+}
+.login a span{
+    position: absolute;
+}
+.login a span:first-child {
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 2px;
+    /*to right 就是往右边 下面的同理*/
+    background: linear-gradient(to right,transparent,#03e9f4);
+    /*动画 名称  时长 linear是匀速运动 infinite是无限次运动*/
+    animation: move1 1s linear infinite;
+
+}
+.login a span:nth-child(2){
+    right: 0;
+    top: -100%;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(transparent,#03e6f4);
+    /*这里多了个0.25s其实是延迟时间*/
+    animation: move2 1s linear 0.25s infinite;
+}
+
+.login a span:nth-child(3){
+    right: -100%;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to left,transparent,#03e9f4);
+
+    animation: move3 1s linear 0.5s infinite;
+}
+
+.login a span:last-child{
+    left: 0;
+    bottom: -100%;
+    width: 2px;
+    height: 100%;
+    background: linear-gradient(#03e9f4,transparent);
+    animation: move4 1s linear 0.75s infinite;
+}
+/*写一下动画 */
+@keyframes move1{
+    0%{
+        left: -100%;
+
+    }
+    50%,
+    100%{
+        left: 100%;
+    }
+}
+
+@keyframes move2{
+    0%{
+        top: -100%;
+
+    }
+    50%,
+    100%{
+        top: 100%;
+    }
+}
+
+@keyframes move3{
+    0%{
+        right: -100%;
+
+    }
+    50%,
+    100%{
+        right: 100%;
+    }
+}
+
+@keyframes move4{
+    0%{
+        bottom: -100%;
+
+    }
+    50%,
+    100%{
+        bottom: 100%;
+    }
+}
+
+.register-button {
+    display: block;
+    width: 100%;
+    height: 41px;
+    text-align: center;
+    background: #add8e6;
+    border: 3 solid #999;
+    border-radius: 5px;
+}
+
+.white-text {
+    color: #fff; /* 设置文本颜色为白色 */
+}
+
+.attack-button {
+    background: #add8e6; /* 背景颜色 */
+}

TheBattleCar/templates/attacker.html

@@ -1,10 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html lang="zh-CN">
 <head>
-    <title>攻击者界面</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>攻击者</title>
+    <link rel="stylesheet" href="/static/login.css">
 </head>
 <body>
-    <h1>攻击者界面</h1>
-    <h2>功能待实现</h2>
+<div class="login">
+    <h2>攻击坐标列表</h2>
+    <ul class="white-text">
+        {% if attacks %}
+            {% for attack in attacks %}
+                <li>
+                    <strong>坐标:</strong> {{ attack.coordinate }} - <em>{{ attack.created_at }}</em>
+                    {% if not attack.attacked %}
+                        <form action="{{ url_for('execute_attack', attack_id=attack.id) }}" method="post" style="display:inline;">
+                            <button type="submit" class="attack-button">打击</button>
+                        </form>
+                    {% else %}
+                        <span>已完成打击</span>
+                    {% endif %}
+                </li>
+            {% endfor %}
+        {% else %}
+            <li>No attack coordinates available.</li>
+        {% endif %}
+    </ul>
+</div>
 </body>
 </html>

TheBattleCar/templates/commander.html

@@ -1,14 +1,118 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>指挥者界面</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>指挥者</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: linear-gradient(#141e30,#243b55);
+        }
+        h1, h2 {
+            text-align: center;
+            margin-top: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+        }
+        form {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        label, input, button {
+            margin: 10px 0;
+        }
+        input[type="text"] {
+            padding: 10px;
+            width: 100%;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        button {
+            padding: 10px 20px;
+            background-color: #add8e6;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        li {
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+        }
+        li strong {
+            margin-right: 10px;
+        }
+        li span {
+            font-style: italic;
+            color: #777;
+        }
+        li img {
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+    </style>
 </head>
 <body>
-    <h1>指挥者查看照片</h1>
-    <ul>
-        {% for media in media_items %}
-            <li><img src="{{ url_for('static', filename=media.filename) }}" width="100"></li>
-        {% endfor %}
-    </ul>
+    <div class="container">
+        <h1>指挥者</h1>
+        <h2>发送攻击坐标</h2>
+        <form action="{{ url_for('send_attack') }}" method="post">
+            <label for="coordinate">攻击坐标:</label>
+            <input type="text" id="coordinate" name="coordinate" required>
+            <button type="submit">发送消息</button>
+        </form>
+
+        <h2>攻击坐标状态</h2>
+        <ul class="white-text">
+            {% if attacks %}
+                {% for attack in attacks %}
+                    <li>
+                        <strong>坐标:</strong> {{ attack.coordinate }} 
+                        - <em>{{ attack.created_at }}</em>
+                        - <span>{% if attack.attacked %}已完成打击{% else %}等待打击{% endif %}</span>
+                    </li>
+                {% endfor %}
+            {% else %}
+                <li>No attack coordinates available.</li>
+            {% endif %}
+        </ul>
+
+        <h2>查看照片</h2>
+        <ul>
+            {% if media_items %}
+                {% for filename in media_items %}
+                    <li>
+                        <a href="{{ url_for('uploaded_file', filename=filename) }}" target="_blank">
+                            <img src="{{ url_for('uploaded_file', filename=filename) }}" width="100">
+                        </a>
+                    </li>
+                {% endfor %}
+            {% else %}
+                <li>No images found in the directory.</li>
+            {% endif %}
+        </ul>
+    </div>
 </body>
 </html>

TheBattleCar/templates/login.html

@@ -1,24 +1,73 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Login</title>
-  </head>
-  <body>
-    <h1>Login</h1>
-    <form method="post">
-      <label for="username">Username:</label>
-      <input type="text" id="username" name="username" required><br>
-      <label for="password">Password:</label>
-      <input type="password" id="password" name="password" required><br>
-      <label for="role">Choose a role:</label>
-      <select id="role" name="role" required>
-        <option value="侦查者">侦查者</option>
-        <option value="指挥者">指挥者</option>
-        <option value="攻击者">攻击者</option>
-      </select><br>
-      <button type="submit">Login</button>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>网络信息系统登录</title>
+    <link rel="stylesheet" href="/static/login.css">
+</head>
+<body>
+<div class="login">
+    <h2>网络信息系统登录</h2>
+    <div class="login_box">
+        <!-- 用户名输入框和标签 -->
+        <input type="text" name="username" id="username" required  />
+        <label for="username">用户名</label>
+    </div>
+    <div class="login_box">
+        <!-- 密码输入框和标签 -->
+        <input type="password" name="password" id="password" required  />
+        <label for="password">密码</label>
+    </div>
+    <!-- 登录链接，这里使用JavaScript来阻止默认链接行为，并可能需要添加自定义的JavaScript来处理登录逻辑 -->
+    <a href="javascript:void(0);" onclick="handleLogin()">
+        登录
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </a>
+
+    <a href="javascript:void(0);" onclick="window.location.href='{{ url_for('register') }}'">
+        注册
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </a>
+
+    <!-- 隐藏的表单，用于实际提交登录数据到服务器 -->
+    <form id="loginForm" method="POST" action="{{ url_for('login') }}" style="display:none;">
+        <input type="text" name="username" id="hiddenUsername" />
+        <input type="password" name="password" id="hiddenPassword" />
     </form>
-  </body>
+
+    <script>
+        function handleLogin() {
+            var username = document.getElementById('username').value;
+            var password = document.getElementById('password').value;
+
+            document.getElementById('hiddenUsername').value = username;
+            document.getElementById('hiddenPassword').value = password;
+
+            document.getElementById('loginForm').submit();
+        }
+
+        function displayMessages(messages) {
+            var messageDiv = document.getElementById('messages');
+            messageDiv.innerHTML = '';
+            messages.forEach(function(message) {
+                var p = document.createElement('p');
+                p.textContent = message;
+                if (message.includes('error')) {
+                    p.style.color = 'red';
+                } else {
+                    p.style.color = 'green';
+                }
+                messageDiv.appendChild(p);
+            });
+        }
+    </script>
+</div>
+</body>
 </html>

TheBattleCar/templates/logs.html

@@ -0,0 +1,17 @@
+<!-- templates/logs.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>View Logs</title>
+</head>
+<body>
+    <h1>Application Logs</h1>
+    <pre>
+        {% for log in logs %}
+            {{ log }}
+        {% endfor %}
+    </pre>
+    <a href="{{ url_for('index') }}">Back to Home</a>
+</body>
+</html>

TheBattleCar/templates/register.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>网络信息系统注册</title>
+    <link rel="stylesheet" href="/static/login.css">
+</head>
+<body>
+<div class="login">
+<form action="/register" method="post">
+    <h2>网络信息系统注册</h2>
+    <div class="login_box">
+        <input type="text" name="captcha" id="captcha" required  />
+        <label for="captcha">注册码</label>
+    </div>
+    <div class="login_box">
+        <input type="text" name="username" id="username" required  />
+        <label for="username">用户名</label>
+    </div>
+    <div class="login_box">
+        <input type="password" name="password" id="password" required  />
+        <label for="password">密码</label>
+    </div>
+    <div class="login_box">
+        <input type="password" name="password_confirm" id="password_confirm" required  />
+        <label for="password_confirm">确认密码</label>
+    </div>
+    <input type="submit" value="注册" class="register-button">
+</div>
+</body>
+</html>
+

TheBattleCar/templates/scout.html

@@ -3,11 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Scout Page</title>
+    <title>侦查者</title>
+    <link rel="stylesheet" href="/static/login.css">
 </head>
 <body>
-    <h1>Scout Page</h1>
-    <button onclick="window.location.href='http://192.168.78.178:5000/'">控制小车</button>
-    <button onclick="window.location.href='{{ url_for('send_message') }}'">发送消息</button>
+<div class="login">
+    <h2>侦查者</h2>
+    <button onclick="window.location.href='http://192.168.146.178:5000/'" class="register-button">控制小车</button>
+    <button onclick="window.location.href='{{ url_for('send_message') }}'" class="register-button">发送消息</button>
+</div>
 </body>
 </html>

TheBattleCar/templates/send_message.html

@@ -1,18 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Send Message</title>
+    <title>发送消息</title>
+    <link rel="stylesheet" href="/static/login.css">
 </head>
 <body>
-    <h1>Send Message</h1>
+<div class="login">
+    <h2>发送消息</h2>
     <form method="post" enctype="multipart/form-data">
-        <label for="message">Message:</label>
+        <h3>消息内容</h3>
         <textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
-        <label for="photo">Upload Photo:</label>
+        <h3>选择图片</h3>
         <input type="file" id="photo" name="photo"><br><br>
-        <button type="submit">Send Message</button>
+        <button type="submit" class="register-button">发送</button>
     </form>
+</div>
 </body>
 </html>

TheBattleCar/templates/upload.html

@@ -0,0 +1,14 @@
+<!-- templates/upload.html -->
+<!DOCTYPE html>
+<html>
+<head>
+    <title>上传照片</title>
+</head>
+<body>
+    <h1>上传照片</h1>
+    <form method="POST" action="{{ url_for('upload') }}" enctype="multipart/form-data">
+        <input type="file" name="file">
+        <input type="submit" value="上传">
+    </form>
+</body>
+</html>

TheBattleCar/test.py

@@ -0,0 +1,6 @@
+# test.py
+from models import db, User
+
+user = User(username='commander', role='指挥者')
+db.session.add(user)
+db.session.commit()

TheBattleCar/test0.py

@@ -0,0 +1,52 @@
+from flask import Flask, request, jsonify
+from flask_mysqldb import MySQL
+import MySQLdb.cursors
+
+app = Flask(__name__)
+
+# MySQL 配置
+app.config['MYSQL_HOST'] = 'localhost'
+app.config['MYSQL_USER'] = 'root'  # 替换为你的 MySQL 用户名
+app.config['MYSQL_PASSWORD'] = 'lin556688'  # 替换为你的 MySQL 密码
+app.config['MYSQL_DB'] = 'mydatabase'
+app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
+
+mysql = MySQL(app)
+
+# 添加消息和照片
+@app.route('/message', methods=['POST'])
+def add_message():
+    message = request.form['message']
+    photo = request.files['photo']
+
+    # 读取照片内容
+    photo_data = photo.read()
+
+    # 插入数据到 MySQL
+    cursor = mysql.connection.cursor()
+    cursor.execute("INSERT INTO messages (message, photo) VALUES (%s, %s)", (message, photo_data))
+    mysql.connection.commit()
+    cursor.close()
+
+    return jsonify({'status': 'success'}), 201
+
+# 获取所有消息
+@app.route('/messages', methods=['GET'])
+def get_messages():
+    cursor = mysql.connection.cursor()
+    cursor.execute("SELECT id, message, created_at FROM messages")  # 不直接查询照片以提高性能
+    result = cursor.fetchall()
+    cursor.close()
+
+    messages = []
+    for row in result:
+        messages.append({
+            'id': row['id'],
+            'message': row['message'],
+            'created_at': row['created_at']
+        })
+
+    return jsonify(messages)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000)