什么时候template会出现?类似template: ‘<h3>{{ postTitle }}</h3>‘

628 篇文章 6 订阅
template: '<h3>{{ postTitle }}</h3>'
<!DOCTYPE html>
<html>
    <head>
    </head>
<div id="app">
  <post-item :post-title="title"></post-item>
</div>

        
          <script src="https://unpkg.com/vue@next"></script>

          <script>
            const app = Vue.createApp({
             data(){
               return {
                 title: 'Java无难事'
                } 
             }
            });
            app.component('PostItem', {
              props: ['postTitle'],
              setup(props){
                Vue.watchEffect(() => {
                  console.log(props.postTitle);
                })
              },
              template: '<h3>{{ postTitle }}</h3>'
            });
            const vm = app.mount('#app');
        </script>
    </head>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你设计一个Flask网页,并实现你需要的功能。首先你需要安装Flask和pandas库,你可以使用以下命令来安装它们: ```python pip install flask pandas ``` 接下来,你可以在一个名为app.py的Python文件中编写Flask应用程序代码,代码如下: ```python from flask import Flask, render_template, request import pandas as pd app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/submit', methods=['POST']) def submit(): data = { '异常时间': request.form['异常时间'], '异常地点': request.form['异常地点'], '异常现象': request.form['异常现象'], '生产线别': request.form['生产线别'], '生产班别': request.form['生产班别'], '生产机种': request.form['生产机种'], '备注': request.form['备注'] } df = pd.DataFrame(data, index=[0]) df.to_excel('D:/data.xlsx', index=False, header=False, mode='a') return render_template('success.html') @app.route('/query', methods=['GET', 'POST']) def query(): if request.method == 'GET': return render_template('query.html') else: df = pd.read_excel('D:/data.xlsx', header=None) condition = '' for key, value in request.form.items(): if value: condition += f"{key}=='{value}' and " if condition: df = df.query(condition[:-5]) return render_template('query.html', tables=[df.to_html(classes='data', header=False)], titles=df.columns.values) if __name__ == '__main__': app.run(debug=True) ``` 在这个代码中,我们使用了Flask框架和pandas库。Flask框架可以帮助我们快速搭建一个Web应用程序,而pandas库可以帮助我们处理Excel数据。代码中包含了三个路由: 1. `/` 路由,用来展示主页,该页面包含了左侧菜单栏和两个表单,分别用来提交数据和查询数据。 2. `/submit` 路由,用来处理数据提交,将数据保存到D盘下的data.xlsx文件中。 3. `/query` 路由,用来处理数据查询,从D盘下的data.xlsx文件中查询数据,根据条件返回查询结果。 我们还需要编写三个HTML页面,分别为index.html、success.html和query.html。代码如下: index.html: ```html <!DOCTYPE html> <html> <head> <title>异常信息登记系统</title> </head> <body> <div class="sidebar"> <h3>菜单</h3> <ul> <li><a href="#">登记异常信息</a></li> <li><a href="#">查询异常信息</a></li> </ul> </div> <div class="content"> <h1>异常信息登记系统</h1> <form action="/submit" method="POST"> <h2>登记异常信息</h2> <label>异常时间:</label> <input type="text" name="异常时间"><br><br> <label>异常地点:</label> <input type="text" name="异常地点"><br><br> <label>异常现象:</label> <input type="text" name="异常现象"><br><br> <label>生产线别:</label> <input type="text" name="生产线别"><br><br> <label>生产班别:</label> <input type="text" name="生产班别"><br><br> <label>生产机种:</label> <input type="text" name="生产机种"><br><br> <label>备注:</label> <input type="text" name="备注"><br><br> <input type="submit" value="提交"> </form> <form action="/query" method="POST"> <h2>查询异常信息</h2> <label>异常时间:</label> <input type="text" name="异常时间"><br><br> <label>异常地点:</label> <input type="text" name="异常地点"><br><br> <label>异常现象:</label> <input type="text" name="异常现象"><br><br> <label>生产线别:</label> <input type="text" name="生产线别"><br><br> <label>生产班别:</label> <input type="text" name="生产班别"><br><br> <label>生产机种:</label> <input type="text" name="生产机种"><br><br> <input type="submit" value="查询"> </form> </div> </body> </html> ``` success.html: ```html <!DOCTYPE html> <html> <head> <title>异常信息登记系统</title> </head> <body> <div class="sidebar"> <h3>菜单</h3> <ul> <li><a href="#">登记异常信息</a></li> <li><a href="#">查询异常信息</a></li> </ul> </div> <div class="content"> <h1>异常信息登记系统</h1> <p>数据提交成功!</p> </div> </body> </html> ``` query.html: ```html <!DOCTYPE html> <html> <head> <title>异常信息查询系统</title> </head> <body> <div class="sidebar"> <h3>菜单</h3> <ul> <li><a href="#">登记异常信息</a></li> <li><a href="#">查询异常信息</a></li> </ul> </div> <div class="content"> <h1>异常信息查询系统</h1> <form action="/query" method="POST"> <label>异常时间:</label> <input type="text" name="异常时间"><br><br> <label>异常地点:</label> <input type="text" name="异常地点"><br><br> <label>异常现象:</label> <input type="text" name="异常现象"><br><br> <label>生产线别:</label> <input type="text" name="生产线别"><br><br> <label>生产班别:</label> <input type="text" name="生产班别"><br><br> <label>生产机种:</label> <input type="text" name="生产机种"><br><br> <input type="submit" value="查询"> </form> {% if tables %} <h2>查询结果</h2> {{ tables|safe }} {% endif %} </div> </body> </html> ``` 在这些HTML页面中,我们定义了一个菜单栏和两个表单,分别用于提交数据和查询数据。提交数据后,我们跳转到success.html页面,告诉用户提交成功。查询数据时,我们根据条件从Excel文件中查询数据,并将结果展示在query.html页面上。 最后,你可以在命令行中启动应用程序: ```python python app.py ``` 然后在浏览器中访问http://localhost:5000,就可以使用异常信息登记系统了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值