flask-vue实现留言板功能

最新推荐文章于 2024-03-14 16:07:08 发布

anRan已存在

最新推荐文章于 2024-03-14 16:07:08 发布

阅读量439

点赞数 2

分类专栏： python学习 vue学习

本文链接：https://blog.csdn.net/anRanKong/article/details/107569592

版权

python学习同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue学习

3 篇文章 0 订阅

订阅专栏

代码地址：https://github.com/anRank/message_board.git
在这里插入图片描述

后端flask：

import os
import string
from flask_sqlalchemy import SQLAlchemy
from flask import Flask, render_template, url_for, request, flash
import sqlite3 as sql
import random

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 Message(db.Model):
    __tablename__ = 'message'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(64))
    content = db.Column(db.String(64))

    def __init__(self, username, content):
        self.username = username
        self.content = content

    def __repr__(self):
        return '<Message %r>' % self.content


@app.route('/')
def home():
    return render_template("message.html")


@app.route('/message')
def message():
    return render_template("message.html")


@app.route('/submit_message', methods=['GET', 'POST'])
def submit_message():
    if request.method == 'POST':
        data = request.data.decode()
        d = eval(data)
        username = ''.join(random.sample(string.ascii_letters + string.digits, 7))
        content = d['content']
        newmessage = Message(username, content)
        db.session.add(newmessage)
        db.session.commit()
        return render_template('message.html')
    else:
        return render_template('message.html')


@app.route('/read_message')
def readmessage():
    con = sql.connect("data.sqlite")
    con.row_factory = sql.Row
    cur = con.cursor()
    cursor = cur.execute("select username, content from message")
    res = ''
    for row in cursor:
        res = res + ' ' + str(row[0]) + ' ' + str(row[1])
    return res


db.create_all()

if __name__ == '__main__':
    db.create_all()
    app.run()

前端-留言板vue：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Message</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>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="{{ url_for('home') }}">首页</a></el-menu-item>
        <el-menu-item index="2">测试</el-menu-item>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4"><a href="{{ url_for('message') }}">留言板</a></el-menu-item>
    </el-menu>  <!--首栏-->
{#    <el-table#}
{#      :data="tableData"#}
{#      style="width: 100%">#}
{#      <el-table-column prop="name" label="Name"></el-table-column>#}
{#      <el-table-column prop="say" label="Content"></el-table-column>#}
{#    </el-table>#}


    <div v-for="site in tableData">
        <el-divider content-position="left">${ site.name }</el-divider>
        <span>${ site.say }</span>
    </div>
    <br>
    <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
    </el-input>
    <br/>
    <div align="center">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        delimiters: ['${', '}'],
        data: {
            tableData: [{
                name: '7qw8er9',
                say: 'blablablabla'
            }],
            textarea: '',
            getData: [],
        },
        methods: {
            handleSubmit(){
                var content = this.textarea;
                this.textarea = '';
                axios({
                    url: '/submit_message',
                    method: 'post',
                    data: {'content': content}
                }).then((res)=>{
                    console.log(res.config.data)
                }).catch((err) => {
                    console.log(err)
                })
                location.reload() {# 刷新页面 #}
            },
        },
        created: function () {
            axios({
                url: '/read_message',
                method: 'get'
            }).then((res) => {
                console.log(res);
                let d = res.data;
                d = d.replace(/^\s*|\s*$/g,"");
                let getData = d.split(" ");
                {#console.log(getData)#}
                for(let i=0;i<getData.length;i++){
                    let dic ={"name": getData[i], "say": getData[i+1]};
                    this.tableData.push(dic)
                    i+=1;
                }
                console.log(this.tableData)
            }).catch((err) => {
                console.log(err)
            })
        },
    })
</script>
</html>

anRan已存在

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flask-vue实现留言板功能

代码地址：https://github.com/anRank/message_board.git后端flask：import osimport stringfrom flask_sqlalchemy import SQLAlchemyfrom flask import Flask, render_template, url_for, request, flashimport sqlite3 as sqlimport randombasedir = os.path.abspath(os.p
复制链接

扫一扫