企业官网程序-苏逸博客网

前端（官网页面） —— 使用 HTML + CSS + JavaScript（响应式）

后端（网站后台） —— 使用 Python + Flask 框架

数据库 —— SQLite（轻量级，适合演示）

安装说明与部署步骤

这个项目是一个简单的“公司官网 + 后台管理系统”，支持管理员登录、管理新闻/产品内容。

🌐 一、项目结构

company_website/
│
├── frontend/                    # 前端官网页面
│   ├── index.html
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
│
├── backend/                     # 后端 Flask 项目
│   ├── app.py
│   ├── models.py
│   ├── routes.py
│   ├── templates/
│   │   ├── admin_login.html
│   │   ├── admin_dashboard.html
│   │   └── index.html           # 前端模板（由后端渲染）
│   └── static/
│       ├── css/
│       └── js/
│
├── database/
│   └── site.db                  # SQLite 数据库文件（自动生成）
│
└── requirements.txt             # Python 依赖

🖥️ 二、前端官网页面（HTML/CSS/JS）

frontend/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>星辰科技 - 领先的科技解决方案</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <header>
    <div class="container">
      <h1>星辰科技</h1>
      <nav>
        <a href="#home">首页</a>
        <a href="#about">关于我们</a>
        <a href="#services">服务</a>
        <a href="#contact">联系</a>
      </nav>
    </div>
  </header>

  <section id="home" class="hero">
    <div class="container">
      <h2>创新科技，引领未来</h2>
      <p>我们提供最前沿的技术解决方案，助力企业数字化转型。</p>
      <button onclick="location.href='#contact'">联系我们</button>
    </div>
  </section>

  <section id="about" class="section">
    <div class="container">
      <h2>关于我们</h2>
      <p>星辰科技成立于2020年，专注于人工智能、大数据和云计算服务。</p>
    </div>
  </section>

  <section id="services" class="section">
    <div class="container">
      <h2>我们的服务</h2>
      <div class="cards">
        <div class="card"><h3>AI开发</h3><p>定制化AI模型开发</p></div>
        <div class="card"><h3>云服务</h3><p>稳定高效的云平台部署</p></div>
        <div class="card"><h3>数据分析</h3><p>深度数据挖掘与可视化</p></div>
      </div>
    </div>
  </section>

  <section id="contact" class="section">
    <div class="container">
      <h2>联系我们</h2>
      <form id="contactForm">
        <input type="text" placeholder="姓名" required />
        <input type="email" placeholder="邮箱" required />
        <textarea placeholder="留言"></textarea>
        <button type="submit">提交</button>
      </form>
    </div>
  </section>

  <footer>
    <div class="container">
      <p>&copy; 2025 星辰科技. 保留所有权利.</p>
    </div>
  </footer>

  <script src="js/script.js"></script>
</body>
</html>

frontend/css/style.css

* { margin: 0; padding: 0; box-sizing: border-box; }

body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

header {
  background: #007BFF;
  color: white;
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
header h1 { display: inline; }
nav { float: right; }
nav a { color: white; margin-left: 1rem; text-decoration: none; }

.hero {
  background: url('https://via.placeholder.com/1500x600') no-repeat center;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
}
.hero .container h2 { font-size: 3rem; margin-bottom: 1rem; }

.section {
  padding: 4rem 0;
  text-align: center;
}
.section h2 { margin-bottom: 2rem; color: #007BFF; }

.cards {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.card {
  background: #f4f4f4;
  padding: 1.5rem;
  border-radius: 8px;
  width: 250px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#contact form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#contact input, #contact textarea, #contact button {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
#contact button {
  background: #007BFF;
  color: white;
  cursor: pointer;
}

footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 1.5rem 0;
}

frontend/js/script.js

document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  alert('感谢您的留言，我们会尽快联系您！');
  this.reset();
});

⚙️ 三、后端（Flask + SQLite）

requirements.txt

Flask==2.3.3
Flask-SQLAlchemy==3.0.5
Werkzeug==2.3.7

backend/models.py

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class News(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)
    created_at = db.Column(db.DateTime, default=db.func.now())

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    password = db.Column(db.String(100), nullable=False)  # 实际项目应加密

backend/routes.py

from flask import Blueprint, render_template, request, redirect, url_for, session, flash
from .models import db, News, User

bp = Blueprint('main', __name__)

@bp.route('/')
def index():
    news_list = News.query.order_by(News.created_at.desc()).all()
    return render_template('index.html', news_list=news_list)

@bp.route('/admin/login', methods=['GET', 'POST'])
def admin_login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        user = User.query.filter_by(username=username, password=password).first()
        if user:
            session['admin_logged_in'] = True
            return redirect(url_for('main.admin_dashboard'))
        else:
            flash('用户名或密码错误')
    return render_template('admin_login.html')

@bp.route('/admin/dashboard', methods=['GET', 'POST'])
def admin_dashboard():
    if not session.get('admin_logged_in'):
        return redirect(url_for('main.admin_login'))

    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        news = News(title=title, content=content)
        db.session.add(news)
        db.session.commit()
        flash('新闻添加成功！')

    news_list = News.query.all()
    return render_template('admin_dashboard.html', news_list=news_list)

@bp.route('/admin/logout')
def admin_logout():
    session.pop('admin_logged_in', None)
    return redirect(url_for('main.admin_login'))

@bp.route('/admin/delete/<int:id>')
def delete_news(id):
    if not session.get('admin_logged_in'):
        return redirect(url_for('main.admin_login'))
    news = News.query.get_or_404(id)
    db.session.delete(news)
    db.session.commit()
    flash('新闻已删除')
    return redirect(url_for('main.admin_dashboard'))

backend/app.py

from flask import Flask
from .models import db
from .routes import bp

def create_app():
    app = Flask(__name__)
    app.secret_key = 'your-secret-key-here'
    app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///../database/site.db'
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

    db.init_app(app)

    app.register_blueprint(bp)

    with app.app_context():
        db.create_all()

        # 创建默认管理员（仅首次）
        if not User.query.filter_by(username='admin').first():
            admin = User(username='admin', password='admin123')
            db.session.add(admin)
            db.session.commit()

    return app

if __name__ == '__main__':
    app = create_app()
    app.run(debug=True)

📄 四、后台模板（放入 backend/templates/ ）

backend/templates/admin_login.html

<!DOCTYPE html>
<html>
<head>
  <title>管理员登录</title>
  <style>
    body { font-family: Arial; text-align: center; padding: 50px; }
    form { max-width: 300px; margin: 0 auto; }
    input { width: 100%; padding: 10px; margin: 10px 0; }
  </style>
</head>
<body>
  <h2>管理员登录</h2>
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <div style="color: red;">{{ messages[0] }}</div>
    {% endif %}
  {% endwith %}
  <form method="POST">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <input type="submit" value="登录">
  </form>
</body>
</html>

backend/templates/admin_dashboard.html

<!DOCTYPE html>
<html>
<head>
  <title>管理后台</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    table { width: 100%; border-collapse: collapse; margin: 20px 0; }
    table, th, td { border: 1px solid #ccc; }
    th, td { padding: 10px; text-align: left; }
    .flash { color: green; }
  </style>
</head>
<body>
  <h1>新闻管理后台</h1>
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <p class="flash">{{ messages[0] }}</p>
    {% endif %}
  {% endwith %}

  <a href="/admin/logout">登出</a>

  <h2>添加新闻</h2>
  <form method="POST">
    <input type="text" name="title" placeholder="标题" required style="width:300px"><br><br>
    <textarea name="content" placeholder="内容" rows="5" style="width:100%"></textarea><br><br>
    <button type="submit">添加</button>
  </form>

  <h2>现有新闻</h2>
  <table>
    <tr>
      <th>ID</th>
      <th>标题</th>
      <th>内容预览</th>
      <th>操作</th>
    </tr>
    {% for news in news_list %}
    <tr>
      <td>{{ news.id }}</td>
      <td>{{ news.title }}</td>
      <td>{{ news.content[:50] }}...</td>
      <td><a href="/admin/delete/{{ news.id }}">删除</a></td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

backend/templates/index.html （后端渲染的首页，可复用前端结构）

你可以将 frontend/index.html 复制到 backend/templates/index.html ，并添加新闻列表部分：

<!-- 在“关于我们”之后添加 -->
<section id="news" class="section">
  <div class="container">
    <h2>最新动态</h2>
    {% for news in news_list %}
      <div style="border:1px solid #eee; margin:10px 0; padding:10px;">
        <h3>{{ news.title }}</h3>
        <p>{{ news.content[:100] }}...</p>
        <small>{{ news.created_at }}</small>
      </div>
    {% else %}
      <p>暂无新闻</p>
    {% endfor %}
  </div>
</section>

📦 五、安装与运行步骤

1. 创建目录结构

mkdir company_website
cd company_website
mkdir frontend backend/templates backend/static database
mkdir frontend/css frontend/js

2. 安装依赖

pip install -r requirements.txt

3. 放入所有文件

将前端文件放入 frontend/
将后端文件放入 backend/
将模板放入 backend/templates/

4. 启动后端服务

cd backend
python app.py

访问：

前台首页： http://localhost:5000

后台登录： http://localhost:5000/admin/login （账号：admin / 密码：admin123）

🔐 安全建议（生产环境）

使用 bcrypt 加密密码

使用 HTTPS

添加 CSRF 保护

使用更安全的数据库（如 PostgreSQL）

不要将 debug=True 用于生产

本文最后更新于：2025-09-10 11:12:04某些文章具有时效性，若有错误或已失效，请在下方留言

文章版权归作者所有，未经允许请勿转载。

THE END

企业官网程序

企业官网程序

导航系统DHPro4.1.3源码

zibll子主题

支付系统模板

YPay标准版下单界面模板 -UXPayV1.2.0

2025最新总裁导航系统源码全新重构版

最新码支付个人免签支付系统源码三网免挂版本兼容易支付

本站的今时往日

请登录后发表评论

企业官网程序

企业官网程序

导航系统DHPro4.1.3源码

zibll子主题

支付系统模板

YPay标准版下单界面模板 -UXPayV1.2.0

2025最新总裁导航系统源码 全新重构版

最新码支付个人免签支付系统源码 三网免挂版本 兼容易支付

本站的今时往日

请登录后发表评论

2025最新总裁导航系统源码全新重构版

最新码支付个人免签支付系统源码三网免挂版本兼容易支付