flask-vue-sqlite3--＞api接口---项目使用--推荐_flask sqlite3

作者：一键难忘520 | 2024-07-27 09:11:21

踩

flask sqlite3

项目简要说明：

本项目采用flask，vue2，axios，sqlite3实现一个前后端分离【api接口】，获取后端的资源的小示例：

项目目录结构：

一数据信息准备：

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

sql插入数据库的语句：

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

二.flask后台代码：


from flask import Flask
from flask import jsonify,render_template
import sqlite3
 
app=Flask(__name__)
 
# sqlite3 row_factory ,python推出了Cursor.Row对象。其实就是列名和值做了个映射，可以通过字符索引来获取值。很方便
# conn.row_factory = sqlite3.Row
@app.route("/api/books")
def books():
    conn=sqlite3.connect("books.db")
    conn.row_factory=sqlite3.Row  #把数据库的字段和查询的信息放在一起
    cur=conn.cursor()
    sql="select * from books"
    rows=cur.execute(sql).fetchall()
 
 
 
    rowsdics=[dict(row) for row in rows]
 
 
 
    return jsonify(rowsdics)
 
 
@app.route("/")
def home():
    return render_template("index.html",title="ht API")
 
 
 
if __name__ == '__main__':
    app.run()

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

三.前端代码的编写

这里选择的是调取离线的vue-js，axios离线的版本实现的调取

关注：离线调取的方式 url-for事项

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

前端全部代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask API</title>
 
 
<!--        1.调用本地离线版本-->
 
        <script src="{{url_for('static',filename='vuev2.6.14.js')}}"></script>
<!--        <script src="{{url_for('static',filename='vue-resource1.5.1.min.js')}}"></script>-->
        <script src="{{url_for('static',filename='axios0.27.2.min.js')}}"></script>
 
<!--2.调用cdn方式，前提必须联网-->
 
<!--    cdn 版本的引用-->
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>
<body>
 
<div id="app">
    <h1>Flask &api &Vuejs&{{title}}</h1>
 
<!--     表格信息-->
    <table border="1" cellpadding="5" cellspacing="5">
        <tr>
            <td>#</td>
            <td>标题</td>
            <td>作者</td>
            <td>定价</td>
        </tr>
 
 
<!--        遍历axios获取的books数据，放入表格中，这里是[[]]方括号，是避免与flask默认的的模板区分，圆括号，通过通过--vue中的delimiters:方括号,进行控制的     -->
 
 
        <tr v-for ="book in books">
           <td>[[book.id]]</td>
           <td>[[book.title]]</td>
           <td>[[book.author]]</td>
           <td>[[book.price]]</td>
 
        </tr>
 
    </table>
 
</div>
 
<script>
 
    var app=new Vue({
        el:"#app",
 
        data:{
            books:[]
        },
        //修改vue中的默认的圆括号数据修改，修改为方括号的方式
        delimiters:["[[","]]"],
        // 挂载成功后，就是调用函数fetchData
        mounted:function () {
             this.fetchData();
        },
 
        methods:{
 
            //#######################vue-axios方式###########################
            //axios的调取方式
            fetchData() {
                axios.get("http://127.0.0.1:5000/api/books")
                .then(respose=>(this.books=respose.data))
                .catch(function (error) {
                    console.log(error)
 
                })
            }
 
 
            //#######################vue-resource1.5.1.min.js###########################
            //调用VUE vue-resource1.5.1.min.js方式
            // fetchData(){
            //     this.$http.get("/api/books").then(rsp=>{
            //         this.books=rsp.body
            //     },err=>{console.log('Error')})
            //
            //
            // }
        }
 
    })
</script>
 
</body>
</html>

效果展示：

后端没有改变，前端再次优化，采用“element”组件优化下界面信息，不然太难看了

饿了么UI地址：

https://element.eleme.cn/#/zh-CN

本次只是优化下前端界面信息：

引入离线的饿了么组件

修改饿了么UI代码的重点地方：

代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask API</title>
 
 
<!--        1.调用本地离线版本-->
 
        <script src="{{url_for('static',filename='vuev2.6.14.js')}}"></script>
<!--        <script src="{{url_for('static',filename='vue-resource1.5.1.min.js')}}"></script>-->
        <script src="{{url_for('static',filename='axios0.27.2.min.js')}}"></script>
<!--        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
        <link rel="stylesheet" href="{{url_for('static',filename='elementui_index.css')}}">
        <script src="{{url_for('static',filename='elementui_2.15.8index.js')}}"></script>
 
<!--2.调用cdn方式，前提必须联网-->
 
<!--    cdn 版本的引用-->
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>
<body>
 
<div id="app">
    <el-tag>{{title}}</el-tag>
<!--    <h1>Flask &api &Vuejs&{{title}}</h1>-->
 
<!-- 饿了么Ui需要一个：data数据而且是一个数组里面存放对象的结构，同时关注prop这个参数，需要修改与数据库中“字段”对应-->
<!--    如我的sqlite3中有4个字段分别为 id，title ，author ，price -->
 
      <el-table
      :data="books"
      style="width: 100%">
 
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
 
          <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
 
      <el-table-column
        prop="author"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="定价">
      </el-table-column>
    </el-table>
 
 
 
</div>
 
<script>
 
    var app=new Vue({
        el:"#app",
 
        data:{
            books:[]
        },
        //修改vue中的默认的圆括号数据修改，修改为方括号的方式
        delimiters:["[[","]]"],
        // 挂载成功后，就是调用函数fetchData
        mounted:function () {
             this.fetchData();
        },
 
        methods:{
 
            //#######################vue-axios方式###########################
            //axios的调取方式
            fetchData() {
                axios.get("http://127.0.0.1:5000/api/books")
                .then(respose=>(this.books=respose.data))
                .catch(function (error) {
                    console.log(error)
 
                })
            }
 
 
            //#######################vue-resource1.5.1.min.js###########################
            //调用VUE vue-resource1.5.1.min.js方式
            // fetchData(){
            //     this.$http.get("/api/books").then(rsp=>{
            //         this.books=rsp.body
            //     },err=>{console.log('Error')})
            //
            //
            // }
        }
 
    })
</script>
 
</body>
</html>

展示下效果：

比以前好看多了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/889513