参数 :感谢您注册<input id="app" type="text" >,您的验证码是<input id="code" type="text" > 渲染:<div id="render-dynamic-str"></div>
时间: 2025-06-19 14:54:12 浏览: 13
这是一个动态生成字符串并渲染到页面的需求场景,我们可以基于用户输入的内容实时拼接一段包含“用户名”和“验证码”的信息,并将其展示在指定区域。以下是具体实现步骤以及完整代码:
---
### 实现思路
1. **捕获用户输入**
使用两个 `<input>` 输入框分别获取“用户名”和“验证码”。通过 `oninput` 事件监听它们的值变化。
2. **动态拼接字符串**
根据输入的数据动态构造目标字符串(例如:“感谢您注册[用户名],您的验证码是[验证码]。”)
3. **更新 DOM 内容**
将拼接好的结果插入到指定的 `<div>` 容器内 (`id=render-dynamic-str`)。
---
### 示例代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态生成字符串示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<label for="username">姓名:</label><br/>
<input id="username" type="text" v-model="name" @input="generateMessage"><br/><br/>
<label for="verifyCode">验证码:</label><br/>
<input id="verifyCode" type="text" v-model="code" @input="generateMessage"><br/><br/>
<h4>最终显示:</h4>
<div id="render-dynamic-str">{{ resultMessage }}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '', // 用户名
code: '', // 验证码
resultMessage: '' // 最终生成的消息
},
methods: {
generateMessage() {
if (!this.name || !this.code) {
this.resultMessage = ''; // 若任一字段为空,则清空消息
} else {
this.resultMessage = '感谢您注册' + this.name + ',您的验证码是' + this.code;
}
}
}
});
</script>
</body>
</html>
```
---
### 运行效果说明
1.
阅读全文
相关推荐








一、题目
基于Python的Flask框架,编程实现一个WEB程序,为用户提供中学信息查询功能。
二、要求
1.创建项目文件夹(符合本项要求不得分,不符扣35分,满分100分)
按“学号-姓名-结课项目”格式进行命名(例如:20777999-张三-结课项目),用于存储程序源文件和数据文件。
2.准备数据(30分)
选定自己籍贯所在地级市及其邻近的两个地级市共3个。例如,张三是桂林市人,通过广西行政区划图可选择3个邻近地级市有桂林、柳州、梧州。详细数据如下,将其保存到EXCEL文件中,并置于项目根目录中:
1)地级市数据(City),文件名必须为“地级市数据.xlsx”。 内容示例:
表2-1 地级市数据示例
地级市名称 电话区号 简介
桂林市 0773 ……
柳州市 0772 ……
梧州市 0774 ……
2)中学数据(School),文件名必须以所在地级市的名称命名,且与“地级市数据.xlsx”中的名称一致。共有3个中学数据文件(即每个地级市一个)。每个数据文件中应包含该地级市的至少5所著名中学数据。例如“桂林市.xlsx”的文件内容如下:
表2-2 桂林市中学数据示例
中学名称 所在城区 简介
桂林市桂林中学 临桂区 ……
桂林市第十八中学 七星区
广西师范大学附属中学 叠彩区 ……
桂林市逸仙中学 象山区
桂林市中山中学 叠彩区
…… …… ……
3.设计并实现地级市数据(City)和中学数据(School)的数据模型,并以“一对多”方式进行关联,其中简介包含富文本内容。实现后台管理界面,可由后台界面录入前面准备好的数据(10分)。
4.设计地级市详情页面,显示其所有信息(10分)。
5.设计中学列表页面,用户可以按城市进行过滤。列表中,每个中学只占一行,且包含名称、邮编和一个“详情”链接,点击链接可转到该中学的详情页面(20分)。
6.设计中学详情页面,显示中学的所有信息,包括所属城市,点击“所属城市”可跳转到城市的详情页面(10分)。
7.使用Bootstrap 美化所有页面,在所有页面右上角显示学号、姓名、籍贯所在地级市等信息(10分,没有显示信息的扣30分)。
8.在中学列表页面中加入搜索功能,使用户能输入一个中学名,程序能给出搜索结果。如果有匹配项,用户可点击其链接,以跳转到中学的详情页面(10分)。
9.源码中标识符的命名要求合理贴切,如:类名、函数名和变量名等。 base.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中学信息查询系统</title> </head> <body> 中学信息查询 学号: 22300434 | 姓名: 王渝钦 | 籍贯: 桂林市 {% block content %}{% endblock %} <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
cities.html
地级市列表 {% for city in cities %} {{ city.name }} 电话区号: {{ city.area_code }} 查看详情 {% endfor %} {% endblock %} city_detail.html {{ city.name }} 电话区号: {{ city.area_code }} 简介 {{ city.description }} 所属中学 {% for school in city.schools %} {{ school.name|replace("_", " ") }} {{ school.district }} {% endfor %} 返回列表 {% endblock %} Index.html 欢迎使用中学信息查询系统 查询各地级市及其中学的详细信息
查看所有地级市 查看所有中学 {% endblock %} school_detail.html {{ school.name }} 所在城区: {{ school.district }} 所属城市: {{ school.city.name }} 简介 {{ school.description }} 返回列表 {% endblock %} Scholl.html {% extends "base.html" %} 中学列表 <form class="row g-3"> <select name="city_id" class="form-select"> <option value="">所有城市</option> {% for city in cities %} <option value="{{ city.id }}" {% if city.id|string == selected_city %}selected{% endif %}> {{ city.name }} </option> {% endfor %} </select> <input type="text" name="search" class="form-control" placeholder="搜索中学名称" value="{{ search or '' }}"> <button type="submit" class="btn btn-primary">筛选</button> </form> 中学名称 所在城区 邮编 所属城市 操作 {% for school in schools %} {{ school.name }} {{ school.district }} {{ school.postal_code }} {{ school.city.name|replace("_", " ") }} 详情 {% endfor %} {% endblock %} from flask import Flask, render_template, request, redirect, url_for from flask_sqlalchemy import SQLAlchemy from flask_admin import Admin from flask_admin.contrib.sqla import ModelView import pandas as pd import os
app = Flask(name)
app.config[‘SQLALCHEMY_DATABASE_URI’] = ‘sqlite:///schools.db’
app.config[‘SECRET_KEY’] = ‘your-secret-key’
db = SQLAlchemy(app)
class City(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), unique=True, nullable=False)
area_code = db.Column(db.String(10))
description = db.Column(db.Text)
schools = db.relationship(‘School’, backref=‘city’, lazy=True)
class School(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(100), nullable=False)
district = db.Column(db.String(50))
postal_code = db.Column(db.String(20))
description = db.Column(db.Text)
city_id = db.Column(db.Integer, db.ForeignKey(‘city.id’), nullable=False)
admin = Admin(app, name=‘后台管理’, template_mode=‘bootstrap3’)
admin.add_view(ModelView(City, db.session))
admin.add_view(ModelView(School, db.session))
def initialize_data():
with app.app_context():
db.create_all()
if not City.query.first():
import_data()
def import_data():
city_df = pd.read_excel(‘地级市数据.xlsx’)
for _, row in city_df.iterrows():
city = City(name=row[‘地级市名称’], area_code=row[‘电话区号’], description=row[‘简介’])
db.session.add(city)
db.session.commit()
for city in City.query.all(): filename = f"{city.name}.xlsx" if os.path.exists(filename): school_df = pd.read_excel(filename) for _, row in school_df.iterrows(): school = School( name=row['中学名称'], district=row['所在城区'], postal_code=row['邮编'], description=row['简介'], city_id=city.id ) db.session.add(school) db.session.commit()
@app.route(‘/’)
def index():
return render_template(‘index.html’)
@app.route(‘/cities’)
def cities():
cities = City.query.all()
return render_template(‘cities.html’, cities=cities)
@app.route(‘/city/int:city_id’)
def city_detail(city_id):
city = City.query.get_or_404(city_id)
return render_template(‘city_detail.html’, city=city)
@app.route(‘/schools’)
def schools():
city_id = request.args.get(‘city_id’)
search = request.args.get(‘search’)
query = School.query
if city_id:
query = query.filter_by(city_id=city_id)
if search:
query = query.filter(School.name.like(f’%{search}%'))
schools = query.all()
cities = City.query.all()
return render_template(‘schools.html’,
schools=schools,
cities=cities,
selected_city=city_id,
search=search)
@app.route(‘/school/int:school_id’)
def school_detail(school_id):
school = School.query.get_or_404(school_id)
return render_template(‘school_detail.html’, school=school)
if name == ‘main’:
initialize_data()
app.run(debug=True, port=8000) 根据以上内容 编写 1系统分析与设计
详细阐述程序所实现的各大功能,可辅以用例图、功能框图、ER图等等进行说明。重点突出,详略得当。不得简单地复制粘贴题目内容。
1.1需求分析
详细阐述需求分析。
1.2系统设计
详细阐述系统设计。










