在 Flask 项目中整合 Bootstrap 和 Vue.js

安静的镜子

已于 2023-04-19 13:48:22 修改

阅读量275

点赞数 1

分类专栏： python 文章标签： flask bootstrap vue.js

于 2023-04-19 11:17:55 首次发布

本文链接：https://blog.csdn.net/weixin_42883164/article/details/130238954

版权

python 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.flask 项目整合bootstarp，参考：

	https://blog.csdn.net/weixin_42883164/article/details/130106333

2.bootstarp，整合vue(步骤)：
2.1安装Vue.js：在Flask项目的根目录下打开命令行终端，运行以下命令来安装Vue.js

npm install vue

2.2在 HTML 模板中引用 Bootstrap 和 Vue 对应的 CSS 和 JavaScript 文件，并调用相应的组件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <title>{% block title %}demo{% endblock %}</title>
    <!-- CSS -->
	 <script src="{{ url_for('static', filename='js/charts.js')}}" type="text/javascript"></script>
	 <script src="{{ url_for('static', filename='js/jquery.slimscroll.min.js')}}" type="text/javascript">			   </script>
	  <!-- 引入vue -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
  </head>
  <body>
    {% block content %}
    {% endblock %}
    <script src="{{ url_for('static', filename='vue.min.js') }}"></script>
    <script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>
  </body>
</html>

2.3在 HTML 模板的 content 块中插入 Vue 组件，例如：

              <div class="row">
                  <div class="col-sm-6" id="myTable">
                      <section class="panel">
                          <header class="panel-heading row align-items-center" style="display: flex">
                              <div style="flex: 9"><span>{{ '{{ message }}' }}</span></div>
                              <div style="flex: 1" onclick="userAdd()">
                                  <button class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> 添加</button>
                              </div>
                          </header>
                          <table class="table">
                              <thead>
                                <tr>
                                  <th>#</th>
                                  <th>{{ data.firstName }}</th>
                                  <th>{{ data.lastName }}</th>
                                  <th>{{ data.userName }}</th>
                                  <th>编辑</th>
                              </tr>
                              </thead>
                              <tbody>
                              {% for user in data.users %}
                                <tr>
                                  <td>{{ user.id }}</td>
                                  <td>{{ user.firstName }}</td>
                                  <td>{{ user.lastName }}</td>
                                  <td>{{ user.userName }}</td>
                                  <td class="row align-items-center">
                                      <button class="btn btn-primary" onclick='userEdit({{ user.id ,user.firstName,user.lastName, user.userName }})' >  edit</button>
                                      <button class="btn btn-primary" onclick='userDelete({{ user.id }})' >  删除</button>
                                  </td>
                              </tr>
                              {% endfor %}
                              </tbody>
                          </table>
                      </section>
                  </div>

              </div>

    <script>
        var app = new Vue({
          el: '#myTable',
          data: {
            message: '用户信息',
          }
        });
    </script>

2.4效果
在这里插入图片描述
2.5注意：引入JavaScript和CSS文件：由于 Flask 框架默认使用 Jinja2 模板引擎，如果您需要在 HTML 文件中使用双括号 {{ }} 来显示变量，需要使用以下写法来避免与 Jinja2 冲突：

{% raw %}
<div id="app">
  {{ '{{ message }}' }}
</div>
{% endraw %}

安静的镜子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在 Flask 项目中整合 Bootstrap 和 Vue.js

flask 整合bootstarp和vue
复制链接

扫一扫

专栏目录

在 Flask 项目中整合 Bootstrap 和 Vue.js

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