flask-vue_todolist-curd实例练习

最新推荐文章于 2024-08-30 12:27:37 发布
最新推荐文章于 2024-08-30 12:27:37 发布
阅读量365 收藏 2
点赞数 1
分类专栏： vue学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anRanKong/article/details/106150808
版权

一、前言
总览：
在这里插入图片描述
之前实现两个curd的demo，一个是只用vue在前端前端，一个是只用flask主要实现后端的接口，这次是将flask-vue结合起来实现将数据实际增删改到数据库的curd。但没有使用vue-cli，因为vue-cli和flask两个不是一个端口，也不是一个域，进行数据请求(axios)时会产生跨域问题，要想解决这个问题应该是要设置服务器，通过nginx的反向代理来解决，但最近主要是想实现对数据库的数据操作。所以就直接在flask的templates中实现vue框架了。

github地址：https://github.com/anRank/flask-vue_curd-.git

二、代码分析
这次还是遇到挺多新问题的，比如js和python的异步问题，导致数据处理中需要添加额外的条件进行控制。还有在视图函数中对sqlite3数据库的一些操作等等等。等再逐步分析一下这些问题吧。

持续逐步更新中~

三、代码

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue.js"></script>
    <script src="../static/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row :gutter="24">
        <el-col :span="10">
            <el-input v-model="searchData" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" @click="handleSearch()">查询</el-button>
        </el-col>
        <el-col :span="10">
            <el-input v-model="addData" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-col>
    </el-row>

    <br>

    <template>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="200">
            </el-table-column>

            <el-table-column prop="mission" label="任务" width="600" >
                <template slot-scope="{row, $index}">
                    <span  v-if="editable[$index]">
                        <el-input v-model="updateData" @blur="saveUpdate($index)"></el-input>
                    </span>
                    <span v-else>
                        ${ tableData[$index].mission }
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop="level" label="等级" width="200">
                <template slot-scope="{row, $index}">
                    <el-button type="text" @click="levelDown($index)">-</el-button>
                    ${ tableData[$index].level }
                    <el-button type="text" @click="levelUp($index)">+</el-button>
                </template>

            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleUpdate(scope.$index, tableData)">编辑</el-button>
                    <el-button type="primary" size="small" @click="handleDelete(scope.$index, tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        delimiters: ['${', '}'],
        data: {
            searchData: '',
            addData: '',
            updateData: '',
            searchData: '',
            getData: [],
            tableData: [{
                date: '2020-05-12',
                mission: '学习',
                level: "A",
            }],
            editable: [false,],
            levelArr: ['S', 'A', 'B', 'C', 'D'],
            searchResult: [],
            tempData: [],
        },
        methods: {
            handleSearch() {
                if(this.searchData == '') {
                    if (this.tempData != '') {
                        this.tableData = this.tempData;
                        this.tempData = [];
                        this.searchResult = [];
                    }
                }
                else {
                    let search = this.searchData;
                    for(let i=0;i<this.tableData.length;i++) {
                        for(let j=0;j<search.length;j++) {
                            if(this.tableData[i].mission.indexOf(search[j]) > -1) {
                                this.searchResult.push(this.tableData[i]);
                                break;
                            }
                        }
                    }
                    this.tempData = this.tableData;
                    this.searchData = '';
                    this.tableData = this.searchResult;
                }
            },

            handleAdd() {
                var tempData = this.addData;
                this.addData = '';
                var nowDate = new Date().format("yyyy-MM-dd");
                var level = "S";
                var newTable = { date: nowDate, mission: tempData, level: level, editIf: false};
                this.tableData.push(newTable);
                this.editable.push(false);

                axios({
                    url: '/submit',
                    method: 'post',
                    data: {"date": nowDate, "mission": tempData, "level": level}
                }).then((res) => {
                    console.log(res.config.data)
                }).catch((err) => {
                    console.log(err)
                })
            },

            handleDelete(index, rows) {
                let nowDate = this.tableData[index].date
                let tempData = this.tableData[index].mission
                let level = this.tableData[index].level
                axios({
                    url: '/deletedata',
                    method: 'post',
                    data: {"date": nowDate, "mission": tempData, "level": level}
                }).then((res) => {
                    console.log(res.config.data)
                }).catch((err) => {
                    console.log(err)
                })
                rows.splice(index, 1);
            },

            handleUpdate(index, rows) {
                Vue.set(this.editable, index, true);

            },

            saveUpdate(index) {
                let tempData = this.tableData[index].mission;
                this.tableData[index].mission = this.updateData;
                Vue.set(this.editable, index, false);

                let upd = this.updateData;
                this.updateData = '';
                let nowDate = this.tableData[index].date
                let level = this.tableData[index].level
                axios({
                    url: '/update',
                    method: 'post',
                    data: {"date": nowDate, "mission": tempData, "level": level, "new": upd}
                }).then((res) => {
                    console.log(res.config.data)
                }).catch((err) => {
                    console.log(err)
                })
                rows.splice(index, 1);
            },

            levelUp(index) {
                let p;
                for(let i=0;i<5;i++) {
                    if(this.tableData[index].level == this.levelArr[i]) {
                        p = i;
                    }
                }
                if(p!=0){
                    p--;
                    this.tableData[index].level = this.levelArr[p];
                }

            },

            levelDown(index) {
                let p;
                for(let i=0;i<5;i++) {
                    if(this.tableData[index].level == this.levelArr[i]) {
                        p = i;
                    }
                }
                if(p!=4) {
                    p++;
                    this.tableData[index].level = this.levelArr[p];
                }
            },

        },

        created: function () {
        axios({
            url: '/readdata',
            method: 'get'
        }).then((res) => {
            console.log(res)
            let d = res.data
            d = d.replace(/^\s*|\s*$/g,"");
            this.getData = d.split(" ")
            let t = []
            for(let i=0;i<this.getData.length;i++) {
                dic = {"date": this.getData[i], "mission": this.getData[i+1], "level": this.getData[i+2]}
                t.push(dic)
                this.tableData.push(dic)
                i+=2;
            }
        }).catch((err) => {
            console.log(err)
        })
        }
    })

    Date.prototype.format = function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };

        if(/(y+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }

        for(var k in o){
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(
                    RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }

        return fmt;
    }
</script>
</html>

后端：

import os
from flask_sqlalchemy import SQLAlchemy
from flask import Flask, render_template, url_for, request, flash
import ast
import json
import sqlite3 as sql


basedir = os.path.abspath(os.path.dirname(__file__))

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'data.sqlite')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)


class Todolist(db.Model):
    __tablename__ = 'todolist'
    id = db.Column(db.Integer, primary_key=True)
    date = db.Column(db.String(64))
    mission = db.Column(db.String(64))
    level = db.Column(db.String(64))

    def __init__(self, date, mission, level):
        self.date = date
        self.mission = mission
        self.level = level

    def __repr__(self):
        return '<Todolist %r>' % self.mission


@app.route('/')
def index():
    return 'Welcome!'


@app.route('/submit', methods=['GET', 'POST'])
def submit():
    if request.method == 'POST':
        data = request.data.decode()
        if data != '':  # 这里有个异步的问题。。
            d = eval(data)
            date = d['date']
            mission = d['mission']
            level = d['level']
            newlist = Todolist(date, mission, level)
            db.session.add(newlist)
            db.session.commit()
        return render_template('index.html')
    else:
        return render_template('index.html')


@app.route('/readdata')
def readdata():
    con = sql.connect("data.sqlite")
    con.row_factory = sql.Row
    cur = con.cursor()
    cursor = cur.execute("select date, mission, level from todolist")
    res = ''
    for row in cursor:
        res = res + ' ' + str(row[0]) + ' ' + str(row[1]) + ' ' + str(row[2])
    return res


@app.route('/deletedata', methods=['GEt', 'POST'])
def deletedata():
    data = request.data.decode()
    if request.method == 'POST':
        if data != '':  # 这里有个异步的问题。。
            d = eval(data)
            date = d['date']
            mission = d['mission']
            level = d['level']
            newlist = Todolist.query.filter_by(date=date, mission=mission, level=level).first()
            db.session.delete(newlist)
            db.session.commit()
            print('ok')
            return render_template('index.html')
    else:
        return render_template('index.html')


@app.route('/update', methods=['GET', 'POST'])
def update():
    data = request.data.decode()
    if request.method == 'POST':
        if data != '':  # 这里有个异步的问题。。
            d = eval(data)
            date = d['date']
            mission = d['mission']
            level = d['level']
            upd = d['new']
            nlist = Todolist.query.filter_by(date=date, mission=mission, level=level).first()
            nlist.mission = upd
            db.session.commit()
            return render_template('index.html')
    else:
        return render_template('index.html')


if __name__ == '__main__':
    db.create_all()
    app.run(debug=True)
anRan已存在
关注
专栏目录
flask-todo:Flask Todolist应用程序
05-02
待办事项 先决条件 pip install -r backend/requirements.txt 初始数据库 打开MySQL shell： CREATE DATABASE todo CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; GRANT ALL ON todo. * TO ' todo ' @ ' % ' IDENTIFIED BY ' todo ' ; 打开交互式Python Shell并执行： from backend . app import db db . create_all () 用法 python backend/app.py
flask-vue-template:基于flask和vue的前后端整合框架，开箱即用
05-03
flask-vue-template 基于flask和vue的前后端整合框架，开箱即用 后端使用flask-restplus开发，自带swagger，基于flask_marshmallow序列化对象，orm使用flask-sqlalchemy，已经集成基于token的用户认证，日志功能 ...
CURD练习
weixin_30722589的博客
11-17 145
题目： 1.进入my_test数据库 use my_test 2.向数据库的user集合中插入一个文档 db.user.insert({username:"sunwukong"}) 3.查询user集合中的文档 db.user.find() 4.向数据库的user集合中插入一个文档 db.user.insert({username:"zhubajie"}) 5.查询数据库...
FlaskCRUD应用开发实战：结合Flask和Bootstrap
weixin_30356433的博客
08-30 2063
本文还有配套的精品资源，点击获取 简介：FlaskCRUD是一个使用Python语言和Flask Web框架，结合Bootstrap前端库构建的CRUD应用程序。该教程旨在指导用户如何利用Flask的灵活性快速搭建Web应用，并使用Bootstrap来改善用户体验。内容涵盖Flask的基础知识、Bootstrap的功能介绍、CRUD操作的实现、Python 3编程基础、应用...
SpringBoot框架学习(四)——curd小练习
0117
03-05 919
七、小项目 1.准备工作 将写好的登录页面login.html放入静态资源文件夹内，准备作为首页，并且设置一个原首页。 login登录代码会贴在第三步的最后 dashboard登录后界面的代码会贴在第四步最后 list员工列表界面贴在第五步最后 2.设置首页 设置页面的转换 // 所有的WebMvcConfigurerAdapter组件都会一起起作用 public WebMvcCo...
python flask实现对mongodb数据库的CURD
lyy的博客
10-07 2170
首先关于flask框架，我之前没有用过python的web框架，只是知道有django和flask两种框架，由于之前学过java的spring框架，知道有个MVC这么个东西，然后对于flask就有点束手无策，文件可以随便建立，需要遵循什么结构或者方针吗？百度之后得到了下面这段话这么个结论： Django框架的强大就肯定意味着它是一款重量级框架，而对于初学者来说，这可能是一种灾难。如果初学者没有...
2019-8-6 [Java_Spring]5.Maven的简单CURD练习
景子墨的博客
08-06 191
文章目录5. Maven的简单CURD练习5.1 数据结构准备5.2 大体思路5.3 具体实现5.3.1 实体类5.3.2 DAO层接口5.3.3 DAO层接口实现类5.3.4 Service层接口5.3.5 Service层接口实现类5.3.6 SpringIOC实现-applicatonContext.xml5.3.7 测试器 5. Maven的简单CURD练习 5.1 数据结构准备 数...
flask-vue-ROS:机器人管理平台
03-25
《Flask-Vue-ROS：构建机器人管理平台的深度解析》 在当今的科技领域，机器人技术的发展日新月异，而高效的机器人管理平台则成为支撑这一领域发展的重要基石。"flask-vue-ROS:机器人管理平台"项目，正是这样一个...
Yolov5-Flask-VUE:基于Flask开发后端、VUE开发前端框架，在WEB端部署YOLOv5目标检测模型
05-07
1. 效果： 视频链接： 最终效果： 源码已经上传 Github： 2. YOLOv5模型训练： 训练自己的数据集可以看我这篇博客： 这里演示的话我就用官方训练好的 yolov5m.pt 模型。 3. YOLOv5模型预测： 预测接口： ...
flask-vuejs-template：Flask + Vue JS模板
02-05
Flask-VueJs-Template :hot_pepper: :victory_hand: Flask + Vue.js Web应用程序模板 产品特点 最小烧瓶1.0应用 API具有基于类的安全资源路由 入门级测试套件 +纱 用于后端通信 Vue样本 一键部署+ Gunicorn的...
基于Flask+VUE前后端，在阿里云公网WEB端部署YOLOv5目标检测模型_Yolov5-Flask-VUE.zip
最新发布
09-02
基于Flask+VUE前后端，在阿里云公网WEB端部署YOLOv5目标检测模型_Yolov5-Flask-VUE
todolist-flaskVue
03-22
待办事项项目 喷枪VENV source projectcarton/Scripts/activate 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
flask-todolist：烧瓶应用程序示例-待办事项清单WebApp示例
02-05
烧瓶伏特加 Flask-Todolist是一个简单的“任务清单” Web应用程序，具有大多数Web应用程序的最基本功能，即帐户/登录，API和（某种程度上）交互式UI。 CSS | JS | 我还在Django中构建了一个非常相似的应用程序： : 探索 试试看！ 码头工人 使用docker-compose可以简单地运行： docker-compose build docker-compose up 该应用程序将在 （它使用您将用于部署的为应用程序提供服务，而不仅仅是运行flask run 。） 手动地 如果您希望直接在本地计算机上运行它，建议使用 。 pip install -r
案例练习：联系人CURD 连接数据库
weixin_41938314的博客
05-20 384
技术选型：Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat 1.导入必须用到的jar包 2.先实现查询所有条目的功能（查询功能），真个代码逻辑思路如下图： 3层结构，第一层是servlet（对客户端请求作出响应），第二层是service层（调用和组合dao层的一些基本操作），第三层是dao层（封装一些数据库基本操作）。 3.因为联系人存在各种属性，编写一个User类 package domain; public ..
【JDBC之CURD-install/update/delete小练习】
anyi2351033836的博客
04-09 698
使用try{}catch{}抛异常 注册驱动, ip地址为127.0.0.1,数据库:db3,用户名:root,密码:1234 获取Connection对象 定义sql语句 获取statement对象 执行sql语句 处理结果 判断是否成功 是否资源 public static void main(String[] args) { Connection conn = null; Statement stat = null; try {
SSM练习--CURD之后端代码
weixin_33995481的博客
01-23 109
通过Mybatis的逆向工程生成com.ssm.bean，com.ssm.dao，mapper下的文件 1. 逆向工程生成的数据库操作为单表操作，若要多表操作需要在xml文件下添加相关 的代码如下添加查询员工信息时可以查询部门信息 <!-- ===========新增多表查询============= --> <sql id...
flask + vue.js 实现简单todolist应用
yz764127031的博客
09-13 3116
https://github.com/yangzhezjgs/flask_demo/tree/master/todolist 使用vuejs,axios,flask,sqlalchemy,sqlite3(一个简单的单文件数据库)构建的一个TODOlist应用，练习前后端交互和增删查改。 使用的手脚架为： vue init webpack-simple todolist 搭建环境和依赖略
利用 Flask 写一个 todolist （一）
葫芦娃的爷爷的博客
01-29 1330
准备工作 开始写todolist之前，必然需要写一个简单的程序流程及相关参数，这里我使用思维导图的方式设计了一个简单的界面以及需要实现的内容，较为粗糙，供各位参考。本人自学编程，错漏之处还望各位海涵。 这里主要实现以下几个功能： 时间显示（主要用于显示服务器时间，为后期番茄钟功能进行开发） todolist部分（主要由一个勾选框与文本组成，打勾后自动划线，刷新后自动消失） 新建任务（用于新建t...
利用Vue框架写一个简单的todolist
qq_39039287的博客
07-27 494
这个todolist使用三个部分： HTML页面使用了SUI的Moblie的组件 js需要下载vue.js的源文件 HTML部分代码： <div id="app"> <!-- 头部结构 --> <header class="bar bar-nav"> <a class="icon icon-star ...
Flask-url_map-formatter: 优化输出提高URL路由可读性
资源摘要信息:"Flask-url_map-formatter是一个用于美化Flask应用中`app.url_map`输出的工具。Flask是一个轻量级的Web应用框架，由Python编写，适用于快速构建Web应用。在Flask应用中，`app.url_map`是一个非常重要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值