如何在一个路线内调用多个路线？

小能豆

如何在一个路线内调用多个路线？

我有一个dashboard.html包含三个选项卡的页面。这些选项卡的外观相同，但功能不同，因为它们在后端使用不同的方法呈现。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}
</style>
</head>
<body>
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  </div>
  <div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p> 
  </div>

  <div id="Tokyo" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

</body>
</html>

该视图与此视图类似。问题在于，当我单击选项卡时，所需的视图未显示。

# Dashboard
@app.route('/dashboard')
@is_logged_in
def dashboard():
    form1 = Add_Warehouse(request.form)
    return render_template('dashboard.html',form1=form1)

# Pending user registration
@app.route('/pending')
@is_logged_in
def pending_registration():
    cur = mysql.connection.cursor()
    result = cur.execute('SELECT * from registration')
    data = cur.fetchall()
    if result>0:
        return render_template('dashboard.html', users=data)
    else:
        msg = 'No Pending registration'
        return render_template('dashboard.html',msg=msg)
    cur.close()

# # Company accepting users
@app.route('/accept/<string:id_val>',methods=['POST','GET'])
@is_logged_in
def accept(id_val):
    cur = mysql.connection.cursor()
    cur.execute('INSERT INTO company_customers SELECT r.* FROM registration r WHERE ID=%s',(id_val))
    cur.execute('DELETE FROM registration WHERE ID=%s',(id_val))
    flash("Customer Registered Successfully !!","success")
    mysql.connection.commit()
    cur.close()
    return redirect(url_for('pending_registration'))

@app.route('/reject/<string:id_val>',methods=['POST','GET'])
@is_logged_in
def reject(id_val):
    cur = mysql.connection.cursor()
    cur.execute('DELETE FROM registration WHERE ID=%s',(id_val))
    flash("Customer Rejected !!","danger")
    mysql.connection.commit()
    cur.close()
    return redirect(url_for('pending_registration'))

# Registered Customers
@app.route('/registered')
@is_logged_in
def registered_customers():
    cur = mysql.connection.cursor()
    result = cur.execute('SELECT * from company_customers')
    data = cur.fetchall()
    if result>0:
        return render_template('dashboard.html', customers=data)
    else:
        return render_template('dashboard.html',msg='No customers')
    cur.close()

# Warehouse
class Add_Warehouse(Form):
    product_name = StringField('Name',[validators.Length(min=5,max=20), validators.DataRequired()])
    product_qty = IntegerField('Quantity',[validators.DataRequired()])
    product_price = DecimalField('Price',[validators.DataRequired()])

@app.route('/add_warehouse',methods=['GET','POST'])
def add_warehouse():
    form1 = Add_Warehouse(request.form)
    if request.method == 'POST' and form1.validate():
        product_name = form1.product_name.data
        product_qty = form1.product_qty.data
        product_price = form1.product_price.data

        cur = mysql.connection.cursor()
        cur.execute('INSERT INTO company_warehouse(PRODUCT_NAME,QTY,PRICE_PER_UNIT) VALUES(%s,%s,%s)',(product_name,product_qty,product_price))
        mysql.connection.commit()
        cur.close()
        flash('Product Added !!','success')
        return redirect(url_for('dashboard'))
    return render_template('dashboard.html',form1=form1)

# Show Warehouse stocks
@app.route('/show_stocks')
@is_logged_in
def show_stocks():
    cur = mysql.connection.cursor()
    result = cur.execute('SELECT * from company_warehouse')
    data = cur.fetchall()
    if result>0:
        return render_template('dashboard.html', stocks=data)
    else:
        msg = 'No Pending registration'
        return render_template('dashboard.html',msg=msg)
    cur.close()

这是我的app.py 。需要单击每个相应的选项卡来查看方法pending_registration()、registered_customers()和。show_stocks()

<div class="tab">
      <button class="tablinks" href="{{url_for('pending_registration')}}" onclick="opentab(event, 'pending_user_registration')">Pending User Registration</button>
      <button class="tablinks" href="/show_stocks" onclick="opentab(event, 'warehouse')">Warehouse</button>
      <button class="tablinks" href="{{url_for('registered_customers')}}" onclick="opentab(event, 'registered-customer')">Registered Customer</button>
      <button class="tablinks" href="#" onclick="opentab(event, 'settings')">Settings</button>
    </div>
    <div id="pending_user_registration" class="tabcontent">
        <h2 class="d-flex justify-content-center">Pending User Registration</h2>
        {% include 'includes/_messages.html' %}
        <table class="table table-hover table-sm">
          <thead class="alert-primary">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Category</th>
              <th scope="col">Email Id</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for row in users %}
            <tr>
              <th scope="row">{{loop.index}}</th>
              <td>{{row.NAME}}</td>
              <td>{{row.CATEGORY}}</td>
              <td>{{row.EMAIL}}</td>
              <td>
                <a href="/accept/{{row.ID}}" class="btn btn-success btn-sm">Accept</a>
                <a href="/reject/{{row.ID}}" class="btn btn-danger btn-sm">Reject</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
    <div id="warehouse" class="tabcontent" style="display: none;">
      <h2 class="d-flex justify-content-center">Warehouse</h2>
      <a href="/add_warehouse" class="btn btn-info btn-sm mb-2" data-toggle="modal" data-target="#add-warehouse-product">Add Product</a>    
      <table class="table table-bordered table-sm bg-light">
          <thead>
            <tr>
              <th scope="col">PId</th>
              <th scope="col">Name</th>
              <th scope="col">Quantity</th>
              <th scope="col">Price</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for stock in stocks %}
            <tr>
              <th scope="row">stock.cpID</th>
              <td>row.PRODUCT_NAME</td>
              <td>row.QTY</td>
              <td>row.PRICE_PER_UNIT</td>
              <td>
                <a href="#" class="btn btn-warning btn-sm">Update</a>
                <a href="#" class="btn btn-danger btn-sm">Delete</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
    <div id="registered-customer" class="tabcontent" style="display: none;">
        <h2 class="d-flex justify-content-center">Registered Customer</h2>
        {% include 'includes/_messages.html' %}
        <table class="table table-bordered table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Email Id</th>
              <th scope="col">Category</th>
            </tr>
          </thead>
          <tbody>
            {% for row in customers %}
            <tr>
              <th scope="row">{{loop.index}}</th>
              <td>{{row.NAME}}</td>
              <td>{{row.EMAIL}}</td>
              <td>{{row.CATEGORY}}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
</div>

This is the html part.
How can I get my required output ?

阅读 14

2024-12-10

共1个答案

小能豆

To achieve your required output, where each tab (Pending User Registration, Warehouse, and Registered Customer) displays the relevant content based on the button clicked, you need to make the following changes:

Issues:

HTML Button with href: The buttons have href attributes which is not the proper way to switch content via JavaScript. Instead, they should be used with onclick to trigger the corresponding tab content display.
Handling Dynamic Content: You want the tabs to display dynamic content based on the data passed from the Flask routes. For example, the “Pending User Registration” tab should display a list of users fetched from the database, and the “Warehouse” tab should show warehouse stock data.

Solution:

Update the HTML buttons: Replace the buttons that currently have href with ones that will trigger JavaScript to show the correct content.
Pass data to the frontend: In your Flask routes, pass the appropriate data (users, stocks, customers, etc.) to the template.
Modify the JavaScript to handle tab switching properly.

Here’s how you can fix your code:

1. Update the HTML:

Replace the button’s href attributes and use JavaScript to show the correct content in the tab:

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'pending_user_registration')" id="defaultOpen">Pending User Registration</button>
  <button class="tablinks" onclick="openTab(event, 'warehouse')">Warehouse</button>
  <button class="tablinks" onclick="openTab(event, 'registered-customer')">Registered Customer</button>
  <button class="tablinks" onclick="openTab(event, 'settings')">Settings</button>
</div>

<div id="pending_user_registration" class="tabcontent">
  <h2 class="d-flex justify-content-center">Pending User Registration</h2>
  {% include 'includes/_messages.html' %}
  <table class="table table-hover table-sm">
    <thead class="alert-primary">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Category</th>
        <th scope="col">Email Id</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for row in users %}
      <tr>
        <th scope="row">{{loop.index}}</th>
        <td>{{row.NAME}}</td>
        <td>{{row.CATEGORY}}</td>
        <td>{{row.EMAIL}}</td>
        <td>
          <a href="/accept/{{row.ID}}" class="btn btn-success btn-sm">Accept</a>
          <a href="/reject/{{row.ID}}" class="btn btn-danger btn-sm">Reject</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div id="warehouse" class="tabcontent" style="display: none;">
  <h2 class="d-flex justify-content-center">Warehouse</h2>
  <a href="/add_warehouse" class="btn btn-info btn-sm mb-2" data-toggle="modal" data-target="#add-warehouse-product">Add Product</a>
  <table class="table table-bordered table-sm bg-light">
    <thead>
      <tr>
        <th scope="col">PId</th>
        <th scope="col">Name</th>
        <th scope="col">Quantity</th>
        <th scope="col">Price</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for stock in stocks %}
      <tr>
        <th scope="row">{{stock.cpID}}</th>
        <td>{{stock.PRODUCT_NAME}}</td>
        <td>{{stock.QTY}}</td>
        <td>{{stock.PRICE_PER_UNIT}}</td>
        <td>
          <a href="#" class="btn btn-warning btn-sm">Update</a>
          <a href="#" class="btn btn-danger btn-sm">Delete</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div id="registered-customer" class="tabcontent" style="display: none;">
  <h2 class="d-flex justify-content-center">Registered Customer</h2>
  {% include 'includes/_messages.html' %}
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Email Id</th>
        <th scope="col">Category</th>
      </tr>
    </thead>
    <tbody>
      {% for row in customers %}
      <tr>
        <th scope="row">{{loop.index}}</th>
        <td>{{row.NAME}}</td>
        <td>{{row.EMAIL}}</td>
        <td>{{row.CATEGORY}}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

2. Modify JavaScript for Tab Switching:

<script>
// Function to open a tab when a button is clicked
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  // Hide all tab contents
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Remove the "active" class from all tab buttons
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the content of the selected tab
  document.getElementById(tabName).style.display = "block";

  // Add the "active" class to the clicked tab button
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it to open the first tab by default
document.getElementById("defaultOpen").click();
</script>

3. Modify Flask Routes:

Ensure you’re passing the correct data to the template:

# Dashboard route
@app.route('/dashboard')
@is_logged_in
def dashboard():
    form1 = Add_Warehouse(request.form)
    return render_template('dashboard.html', form1=form1)

# Pending user registration
@app.route('/pending')
@is_logged_in
def pending_registration():
    cur = mysql.connection.cursor()
    result = cur.execute('SELECT * from registration')
    data = cur.fetchall()
    cur.close()
    if result > 0:
        return render_template('dashboard.html', users=data)
    else:
        msg = 'No Pending registration'
        return render_template('dashboard.html', msg=msg)

# Registered Customers
@app.route('/registered')
@is_logged_in
def registered_customers():
    cur = mysql.connection.cursor()
    result = cur.execute('SELECT * from company_customers')
    data = cur.fetchall()
    cur.close()
    if result > 0:
        return render_template('dashboard.html', customers=data)
    else:
        return render_template('dashboard.html', msg='No registered customers')

# Warehouse Stocks
@app.route('/show_stocks')
@is_logged_in
def show_stocks():
    cur = mysql.connection.cursor()
    result = cur.execute('SELECT * from company_warehouse')
    data = cur.fetchall()
    cur.close()
    if result > 0:
        return render_template('dashboard.html', stocks=data)
    else:
        msg = 'No warehouse stock found'
        return render_template('dashboard.html', msg=msg)

4. Make Sure Flask Routes Render Correct Data:

Each route (/pending, /registered, /show_stocks) is passing data like users, stocks, or customers to the template, which is then displayed in the correct tab content.

Final Notes:

The buttons are now responsible for switching between tabs without reloading the page.
Each Flask route returns the appropriate data to the template, and the JavaScript logic ensures that the correct tab content is displayed based on which button is clicked.

2024-12-10