• flask-vue-sqlite3--＞api接口-优化版本

    flask-vue-sqlite3-->api接口示例：

    代码组成信息：

    最终项目组织截图

     

    一数据信息准备：

    1.准备数据库：字段以及插入的数据信息

    2.数据库数据插入语句：

    insert into books(title,author,price)

    values('中国历史','中国人',99.99),

    ('java','tom',199.99),

    ('golang','地鼠先生',89.99),

    ('python','jerry',100.99)

    insert into books(title,author,price) values('中国历史','中国人',99.99),('java','tom',199.99),('golang','地鼠先生',89.99),('python','jerry',100.99)

    二.flask的配置信息：

    app.py

    1. from flask import Flask
    2. from flask import jsonify,render_template
    3. import sqlite3
    4.  
    5. app=Flask(__name__)
    6.  
    7. @app.route("/api/books")
    8. def books():
    9.     conn=sqlite3.connect("books.db")
    10.     conn.row_factory=sqlite3.Row  #把数据库的字段和查询的字段信息放在一起
    11.     cur=conn.cursor()
    12.     sql="select * from books"
    13.     rows=cur.execute(sql).fetchall()
    14.     rowsdics=[dict(row) for row in rows]
    15.  
    16.     return jsonify(rowsdics)
    17.  
    18.  
    19. @app.route("/")
    20. def home():
    21.     return render_template("index.html",titl="ht API")
    22.  
    23.  
    24.  
    25. if __name__ == '__main__':
    26.     app.run()

    初步数据验证，也就是"/api/books"，测试是否可以获取到数据库的信息

    三.前端的代码的编写

    3.0用互联网文件实现

    index.html文件内容：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Flask API</title>
    6. <!--    本地版本的引用-->
    7. <!--    <script src="vuev2.6.14.js"></script>-->
    8. <!--    <script src="vue-resource1.5.1.min.js"></script>-->
    9.  
    10. <!--    cdn 版本的引用-->
    11.     <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    12.     <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    13. </head>
    14. <body>
    15.  
    16. <div id="app">
    17.     <h1>Flask &api &Vuejs&{{title}}</h1>
    18.  
    19. <!--     表格信息-->
    20.     <table border="1" cellpadding="5" cellspacing="5">
    21.         <th>
    22.             <td>#</td>
    23.             <td>标题</td>
    24.             <td>作者</td>
    25.             <td>定价</td>
    26.         </th>
    27.  
    28.  
    29.  
    30.         <tr v-for ="book in books">
    31.            <td>[[book.id]]</td>
    32.            <td>[[book.title]]</td>
    33.            <td>[[book.author]]</td>
    34.            <td>[[book.price]]</td>
    35.  
    36.         </tr>
    37.  
    38.     </table>
    39.  
    40. </div>
    41.  
    42. <script>
    43.  
    44.     var app=new Vue({
    45.         el:"#app",
    46.  
    47.         data:{
    48.             books:[]
    49.         },
    50.  
    51.         delimiters:["[[","]]"],
    52.         mounted:function () {
    53.              this.fetchData();
    54.         },
    55.  
    56.         methods:{
    57.             fetchData(){
    58.                 this.$http.get("/api/books").then(rsp=>{
    59.                     this.books=rsp.body
    60.                 },err=>{console.log('Error')})
    61.  
    62.  
    63.             }
    64.         }
    65.  
    66.     })
    67. </script>
    68.  
    69. </body>
    70. </html>

    3.1前端代码的优化0---实现离线文件的使用：[]flask --static静态文件的获取

    实现调用本地文件的vuev2.6.14.js文件以及vue-resource1.5.1.min.js的事项，

    重点实现步骤：

            <script src="{{url_for('static',filename='vuev2.6.14.js')}}"></script>
        <script src="{{url_for('static',filename='vue-resource1.5.1.min.js')}}"></script>

    具体实现代码：

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <title>Flask API</title>
    4. <!--    本地版本的引用-->
    5. <!--    <script src="vuev2.6.14.js"></script>-->
    6. <!--    <script src="vue-resource1.5.1.min.js"></script>-->
    7.  
    8. <!--        调用本地版本-->
    9.  
    10.         <script src="{{url_for('static',filename='vuev2.6.14.js')}}"></script>
    11.         <script src="{{url_for('static',filename='vue-resource1.5.1.min.js')}}"></script>
    12.  
    13. <!--        <script src="vuev2.6.14.js"></script>-->
    14. <!--         <script src="vue-resource1.5.1.min.js"></script>-->
    15.  
    16. <!--    cdn 版本的引用-->
    17. <!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
    18. <!--    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
    19. </head>
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Flask API</title>
    6. <!--    本地版本的引用-->
    7. <!--    <script src="vuev2.6.14.js"></script>-->
    8. <!--    <script src="vue-resource1.5.1.min.js"></script>-->
    9.  
    10. <!--        调用本地版本-->
    11.  
    12.         <script src="{{url_for('static',filename='vuev2.6.14.js')}}"></script>
    13.         <script src="{{url_for('static',filename='vue-resource1.5.1.min.js')}}"></script>
    14.  
    15. <!--        <script src="vuev2.6.14.js"></script>-->
    16. <!--         <script src="vue-resource1.5.1.min.js"></script>-->
    17.  
    18. <!--    cdn 版本的引用-->
    19. <!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
    20. <!--    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
    21. </head>
    22. <body>
    23.  
    24. <div id="app">
    25.     <h1>Flask &api &Vuejs&{{title}}</h1>
    26.  
    27. <!--     表格信息-->
    28.     <table border="1" cellpadding="5" cellspacing="5">
    29.         <tr>
    30.             <td>#</td>
    31.             <td>标题</td>
    32.             <td>作者</td>
    33.             <td>定价</td>
    34.         </tr>
    35.  
    36.  
    37.  
    38.         <tr v-for ="book in books">
    39.            <td>[[book.id]]</td>
    40.            <td>[[book.title]]</td>
    41.            <td>[[book.author]]</td>
    42.            <td>[[book.price]]</td>
    43.  
    44.         </tr>
    45.  
    46.     </table>
    47.  
    48. </div>
    49.  
    50. <script>
    51.  
    52.     var app=new Vue({
    53.         el:"#app",
    54.  
    55.         data:{
    56.             books:[]
    57.         },
    58.  
    59.         delimiters:["[[","]]"],
    60.         mounted:function () {
    61.              this.fetchData();
    62.         },
    63.  
    64.         methods:{
    65.             fetchData(){
    66.                 this.$http.get("/api/books").then(rsp=>{
    67.                     this.books=rsp.body
    68.                 },err=>{console.log('Error')})
    69.  
    70.  
    71.             }
    72.         }
    73.  
    74.     })
    75. </script>
    76.  
    77. </body>
    78. </html>

    补充知识：

    默认情况下,Flask 在程序根目录中名为 static 的子目录中寻找静态文件。因此,我们一般在应用的包中创建一个叫static的文件夹,并在里面放置我们的静态文件,我们这里使用了

    ‘url_for’，调用静态文件

     

  • 相关阅读:
    [含毕业设计论文+PPT+源码等]ssm装潢应用系统小程序+Java后台管理系统|前后分离VUE
    EFK(elasticsearch+filebeat+kibana)日志分析平台搭建
    OpenCV实现图像 开闭运算
    游戏陪玩系统app
    【iOS】实现评论区展开效果
    初识href超链接
    ASTM D2863: 塑料最低氧气浓度测试
    ‘std::thread‘ has not been declared
    【Nginx】nginx | 微信小程序验证域名配置
    四、Netty模块组件
  • 原文地址：https://blog.csdn.net/wtt234/article/details/125022172