我想在某按钮点击后跳转到 localhost/in 页面呢
时间: 2023-07-15 19:11:52 浏览: 60
如果你的网站是通过 HTTP 协议访问的,那么可以使用 JavaScript 中的 `window.location` 对象来实现页面的跳转。具体实现代码如下:
```javascript
// 获取按钮元素
const button = document.querySelector('button');
// 点击按钮后跳转到 localhost/in 页面
button.addEventListener('click', () => {
window.location.href = 'http://localhost/in';
});
```
如果你的网站是通过 HTTPS 协议访问的,那么在跳转时需要注意一些安全性问题,建议使用服务器端重定向来实现。
相关问题
python写一个好看的登录页面并连接数据库,登录成功后跳转其他页面
这是一个简单的Python Flask框架的示例代码,用于创建一个好看的登录页面并连接数据库,并且在登录成功后跳转到其他页面。在这个示例中,我们将使用SQLite作为我们的数据库,以及Bootstrap作为我们的CSS框架。
首先,我们需要安装Flask和SQLite:
```
pip install Flask
pip install sqlite3
```
接下来,我们创建一个名为app.py的Python文件,并将以下代码添加到文件中:
```python
from flask import Flask, render_template, request, redirect, url_for, session, flash
import sqlite3
app = Flask(__name__)
app.secret_key = "secret_key" # 设置一个用于加密 session 的密钥
# 定义数据库连接方法
def get_db_connection():
conn = sqlite3.connect('database.db')
conn.row_factory = sqlite3.Row
return conn
# 定义登录页面路由
@app.route('/', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
conn = get_db_connection()
user = conn.execute('SELECT * FROM users WHERE username = ? AND password = ?', (username, password)).fetchone()
conn.close()
if user is None:
flash('Invalid username or password', 'error')
return redirect(url_for('login'))
else:
session['user'] = user['username']
return redirect(url_for('home'))
return render_template('login.html')
# 定义主页路由
@app.route('/home')
def home():
if 'user' in session:
return render_template('home.html')
else:
return redirect(url_for('login'))
# 定义注销路由
@app.route('/logout')
def logout():
session.pop('user', None)
return redirect(url_for('login'))
if __name__ == '__main__':
app.run(debug=True)
```
在我们的代码中,我们首先导入了Flask、render_template、request、redirect、url_for、session和flash等模块。然后,我们创建了一个Flask应用程序实例,并设置了一个用于加密session的密钥。
接下来,我们定义了一个get_db_connection方法,用于连接SQLite数据库。然后,我们定义了一个login路由,用于渲染登录页面,并在提交表单后验证用户的凭据。如果登录成功,我们将用户添加到session中,并重定向到主页。否则,我们将用户重定向回登录页面,并显示错误消息。
在主页路由中,我们检查用户是否已经登录,如果是,则渲染主页模板,否则重定向到登录页面。
最后,我们定义了一个logout路由,用于从session中删除用户,然后将用户重定向回登录页面。
接下来,我们创建一个名为login.html的HTML模板文件,并将以下代码添加到文件中:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center mb-4">Login</h1>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-danger">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST">
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
```
在我们的HTML模板中,我们首先包含了Bootstrap CSS框架。然后,我们在一个容器中创建一个表单,用于输入用户名和密码。如果用户输入了无效的凭据,我们将显示一个错误消息。
接下来,我们创建一个名为home.html的HTML模板文件,并将以下代码添加到文件中:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center mb-4">Welcome {{ session['user'] }}</h1>
<a href="{{ url_for('logout') }}" class="btn btn-danger btn-block">Logout</a>
</div>
</div>
</div>
</body>
</html>
```
在我们的HTML模板中,我们首先包含了Bootstrap CSS框架。然后,我们在一个容器中创建一个欢迎消息,并创建一个注销按钮,该按钮将用户重定向回登录页面。
最后,我们需要创建一个名为database.db的SQLite数据库,并创建一个名为users的表,该表包含用户名和密码。可以使用以下SQL语句创建这个表:
```sql
CREATE TABLE users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
username TEXT NOT NULL,
password TEXT NOT NULL
);
INSERT INTO users (username, password) VALUES ('admin', 'admin');
INSERT INTO users (username, password) VALUES ('user', 'user');
```
现在我们可以运行我们的Python应用程序,打开一个浏览器窗口,并访问http://localhost:5000。如果你输入正确的用户名和密码,你将被重定向到主页。如果你点击注销按钮,你将被重定向回登录页面。
用django和matplotlib 实现在网页输入数据跳转到绘制图,写出具体代码
好的,我会尽力回答你的问题。以下是用 Django 和 Matplotlib 实现在网页输入数据跳转到绘制图的具体代码:
1. 创建 Django 项目,包含一个名为 "plot" 的应用程序
```
django-admin startproject myproject
cd myproject
python manage.py startapp plot
```
2. 在应用程序 "plot" 中创建一个视图 "plot_view"
```python
# plot/views.py
import matplotlib.pyplot as plt
from django.shortcuts import render
def plot_view(request):
if request.method == 'POST':
x = request.POST['x']
y = request.POST['y']
x_data = [int(i) for i in x.split(',')]
y_data = [int(i) for i in y.split(',')]
fig, ax = plt.subplots()
ax.plot(x_data, y_data)
ax.set_xlabel('X Label')
ax.set_ylabel('Y Label')
ax.set_title('Plot')
# 把图形保存到图片并返回给前端
fig.savefig('plot.png')
with open('plot.png', 'rb') as f:
image_data = f.read()
return HttpResponse(image_data, content_type='image/png')
return render(request, 'plot.html')
```
3. 创建一个 HTML 模板,用于输入数据
```html
<!-- plot/templates/plot.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plot</title>
</head>
<body>
<form action="{% url 'plot' %}" method="post">
{% csrf_token %}
<label for="x">X:</label><input type="text" name="x"><br>
<label for="y">Y:</label><input type="text" name="y"><br>
<input type="submit" value="Plot">
</form>
</body>
</html>
```
4. 在 "urls.py" 中配置路由,将 "plot_view" 关联到 URL "/plot/"
```python
# plot/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.plot_view, name='plot'),
]
```
5. 在 "myproject/urls.py" 中将 "/plot/" 关联到应用程序 "plot"
```python
# myproject/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('', include('plot.urls')),
path('admin/', admin.site.urls),
]
```
现在,在网页浏览器中输入地址 "http://localhost:8000/plot/",即可访问数据输入页面,输入数据并点击 "Plot" 按钮,即可跳转到绘图页面,从而实现在网页输入数据跳转到绘制图的功能。