devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

flask前后端项目--实例-前端部分：-4-vue-Element Plus_elementplus 前后台项目示例

作者：我家自动化 | 2024-02-07 17:15:32

赞

踩

elementplus 前后台项目示例

flask前后端项目--实例-前端部分：-4-vue-Element Plus组件添加事项

一、实验测试步骤

1.Element Plus添加

1.先备份App.VUE，然后修改app.vue的内容，数据来源资Element Plus的表格table

2. 数据来源资Element Plus的表格table

3. 运行服务，展示界面数据，说明复制的数据是正确

 

二、实际项目代码

实施前记得备份修改的数据

2.1修改前端魔板内容，展示的内容

  1. <template>
  2.   <div style="margin: 0 auto;width: 100%">
  3.     <h1 style="text-align: center"> 图书管理系统</h1>
  4. <!--    添加图书按钮-->
  5.     <el-button type="primary" @click="add_dialog_visible=true" size="small">添加图书</el-button>
  6.  
  7. <!--    展示数据的表格-->
  8.     <el-table :data="books" style="margin: 20px auto;">
  9.       <el-table-column label="编号" prop="book_number"></el-table-column>
  10.       <el-table-column label="书名" prop="book_name"></el-table-column>
  11.       <el-table-column label="类型" prop="book_type"></el-table-column>
  12.       <el-table-column label="价格" prop="book_prize"></el-table-column>
  13.       <el-table-column label="作者" prop="book_author"></el-table-column>
  14.       <el-table-column label="出版社" prop="book_publisher"></el-table-column>
  15.       <el-table-column label="操作" align="right" width="200px">
  16.         <template #default="scope">
  17.  
  18.          <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
  19.           <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
  20.  
  21.  
  22.         </template>
  23.       </el-table-column>
  24.  
  25.     </el-table>
  26.  
  27.   </div>
  28.  
  29. </template>

2.2代码部分内容：

  1. <script setup>
  2.   import axios from "axios";
  3.   import {reactive,ref,onMounted} from "vue";
  4.   import {ElMessageBox}from 'element-plus'
  5.  
  6.   const books=reactive([])
  7.  
  8.   //请求后端数据,像后端请求数据
  9.   const getStudent=()=>{
  10.     axios.get("http://127.0.0.1:5000/books",).then(
  11.         res=>{
  12.           //删除旧的数据
  13.           books.splice(0,books.length)
  14.           //解压新的数据并且添加
  15.           books.push(...res.data.results)
  16.           console.log("更新数据")
  17.         }
  18.     )
  19.  
  20.   }
  21.  
  22.   //在页面上删除数据
  23.   const handleDelete=(index,scope)=>{
  24.     console.log(index,scope)
  25.     axios.delete("http://127.0.0.1:5000/books/${scope.id}").then(
  26.  
  27.         ()=>{getStudent()}
  28.  
  29.     )
  30.   }
  31.  
  32.   //页面加载完毕后再获取后台数据,生命周期的一个钩子函数
  33.   onMounted(()=>{
  34.     getStudent()
  35.   })
  36.  
  37.  
  38. </script>

三、展示界面

3.1后台启动：

3.2.前台运行

3.3界面展示--已经从后端获取了数据

 

 备注内容信息

3.4备注：---前端

 

前端APP.vue中所有代码

  1. <script setup>
  2.   import axios from "axios";
  3.   import {reactive,ref,onMounted} from "vue";
  4.   import {ElMessageBox}from 'element-plus'
  5.  
  6.   const books=reactive([])
  7.  
  8.   //请求后端数据,像后端请求数据
  9.   const getStudent=()=>{
  10.     axios.get("http://127.0.0.1:5000/books",).then(
  11.         res=>{
  12.           //删除旧的数据
  13.           books.splice(0,books.length)
  14.           //解压新的数据并且添加
  15.           books.push(...res.data.results)
  16.           console.log("更新数据")
  17.         }
  18.     )
  19.  
  20.   }
  21.  
  22.   //在页面上删除数据
  23.   const handleDelete=(index,scope)=>{
  24.     console.log(index,scope)
  25.     axios.delete("http://127.0.0.1:5000/books/${scope.id}").then(
  26.  
  27.         ()=>{getStudent()}
  28.  
  29.     )
  30.   }
  31.  
  32.   //页面加载完毕后再获取后台数据,生命周期的一个钩子函数
  33.   onMounted(()=>{
  34.     getStudent()
  35.   })
  36.  
  37.  
  38. </script>
  39.  
  40. <template>
  41.   <div style="margin: 0 auto;width: 100%">
  42.     <h1 style="text-align: center"> 图书管理系统</h1>
  43. <!--    添加图书按钮-->
  44.     <el-button type="primary" @click="add_dialog_visible=true" size="small">添加图书</el-button>
  45.  
  46. <!--    展示数据的表格-->
  47.     <el-table :data="books" style="margin: 20px auto;">
  48.       <el-table-column label="编号" prop="book_number"></el-table-column>
  49.       <el-table-column label="书名" prop="book_name"></el-table-column>
  50.       <el-table-column label="类型" prop="book_type"></el-table-column>
  51.       <el-table-column label="价格" prop="book_prize"></el-table-column>
  52.       <el-table-column label="作者" prop="book_author"></el-table-column>
  53.       <el-table-column label="出版社" prop="book_publisher"></el-table-column>
  54.       <el-table-column label="操作" align="right" width="200px">
  55.         <template #default="scope">
  56.  
  57.          <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
  58.           <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
  59.  
  60.  
  61.         </template>
  62.       </el-table-column>
  63.  
  64.     </el-table>
  65.  
  66.   </div>
  67.  
  68. </template>
  69.  
  70. <style scoped>
  71.  
  72. </style>

 man.js代码

  1. import {createApp, reactive} from 'vue'
  2. import './style.css'
  3. import App from './App.vue'
  4.  
  5.  
  6. import ElementPlus from 'element-plus'
  7. import 'element-plus/dist/index.css'
  8.  
  9.  
  10.  
  11.  
  12. createApp(App).use(ElementPlus).mount('#app')
  13. // createApp(App).mount('#app')

 

3.5后端所有代码--后端代码组织结构

 后端提供的接口代码：

extension.py
  1. from flask_sqlalchemy import SQLAlchemy
  2. from flask_cors import CORS
  3.  
  4.  
  5. db=SQLAlchemy()
  6.  
  7.  
  8. #跨域请求的问题
  9. cors=CORS()
  10.  
  11. # 所有的其他扩展 文件都是在这里编写
  12.  

 models.py
  1. from extension import db
  2.  
  3.  
  4. class Book(db.Model):
  5.     __tablename__='book'
  6.     id=db.Column(db.Integer,primary_key=True,autoincrement=True)
  7.     book_number=db.Column(db.String(255),nullable=False)
  8.     book_name = db.Column(db.String(255), nullable=False)
  9.     book_type = db.Column(db.String(255), nullable=False)
  10.     book_price = db.Column(db.Float, nullable=False)
  11.     author = db.Column(db.String(255))
  12.     book_publisher=db.Column(db.String(255))
  13.  
  14.  
  15.  
  16.     # 初始化数据，制作数据
  17.     @staticmethod
  18.     def init_db():
  19.         res=[
  20.             (1,'001','猪儿八级天宫','小说',100,'猪八戒','xx出版'),
  21.             (2,'002','孙悟空天宫','小说',000,'孙悟空','xx出版'),
  22.         ]
  23.  
  24.         for ret in res:
  25.             book=Book()
  26.             book.id=ret[0]
  27.             book.book_number=ret[1]
  28.             book.book_name=ret[2]
  29.             book.book_type=ret[3]
  30.             book.book_price=ret[4]
  31.             book.author=ret[5]
  32.             book.book_publisher=ret[6]
  33.  
  34.             db.session.add(book)
  35.  
  36.         db.session.commit()
  37.

app.py

  1. from flask import Flask,request
  2. from flask.views import MethodView
  3.  
  4. from extension import db,cors
  5. from  models import Book
  6.  
  7.  
  8. app = Flask(__name__)
  9.  
  10. app.config['SQLALCHEMY_DATABASE_URI']='sqlite:///books.sqlite'
  11. app.config['SQLAlCHEMY_TRACK_MODIFICATIONS']=False
  12. db.init_app(app)
  13. cors.init_app(app)
  14.  
  15.  
  16.  
  17. # api提供类
  18. class BookApi(MethodView):
  19.     def get(self,book_id):
  20.         #没有传查询的参数，就是默认查询所有
  21.         if not book_id:
  22.             books:[Book]=Book.query.all()
  23.  
  24.             # 列表推导式，从books中取出数据分别赋值给book对象的不同字段，形成给book对象赋值过程
  25.             results=[
  26.                 {
  27.                  'id':book.id,
  28.                  'book_name':book.book_name,
  29.                  'book_type':book.book_type,
  30.                  'book_price':book.book_price,
  31.                  'book_number':book.book_number,
  32.                  'book_publisher':book.book_publisher,
  33.                  'author':book.author,
  34.  
  35.  
  36.                  }for book in books
  37.             ]
  38.             return {
  39.                 'status':'success',
  40.                 'message':'数据查询成功',
  41.                 'results':results
  42.             }
  43.         #传查询的参数，就是按照查询的参数进行查询数据
  44.         book: [Book] = Book.query.get(book_id)
  45.         return {
  46.             'status': 'success',
  47.             'message': '数据查询成功',
  48.             'result':{
  49.                 'id': book.id,
  50.                 'book_name': book.book_name,
  51.                 'book_type': book.book_type,
  52.                 'book_price': book.book_price,
  53.                 'book_number': book.book_number,
  54.                 'book_publisher': book.book_publisher,
  55.                 'author': book.author,
  56.  
  57.             }
  58.  
  59.         }
  60.  
  61.  
  62.     def post(self):
  63.         # json上传数据的过程
  64.         form=request.json
  65.         book=Book()
  66.         book.book_number=form.get('book_number')
  67.         book.book_name=form.get('book_name')
  68.         book.book_type=form.get('book_type')
  69.         book.book_price=form.get('book_price')
  70.         book.author=form.get('author')
  71.         book.book_publisher=form.get('book_publisher')
  72.  
  73.         db.session.add(book)
  74.         db.session.commit()
  75.  
  76.         return {
  77.             'status':'success',
  78.             'message':'数据添加成功！'
  79.         }
  80.  
  81.     def delete(self,book_id):
  82.         book=Book.query.get(book_id)
  83.         db.session.delete(book)
  84.         db.session.commit()
  85.  
  86.         return {
  87.             'status':'success',
  88.             'message':'数据delete成功！'
  89.         }
  90.  
  91.     def put(self,book_id):
  92.         book:Book=Book.query.get(book_id)
  93.  
  94.         book.book_type=request.json.get('book_type')
  95.         book.book_name=request.json.get('book_name')
  96.         book.book_price=request.json.get('book_price')
  97.         book.book_number=request.json.get('book_number')
  98.         book.book_publisher=request.json.get('book_publisher')
  99.         book.author=request.json.get('author')
  100.         db.session.commit()
  101.  
  102.         return {
  103.             'status': 'success',
  104.             'message': '数据update成功！'
  105.         }
  106.  
  107.  
  108.  
  109. # api提供类的注册的连接，测试可以参考下面的url进行测试
  110.  
  111. book_view=BookApi.as_view('book_api')
  112. app.add_url_rule('/books',defaults={'book_id':None},view_func=book_view,methods=['GET',])
  113. app.add_url_rule('/books',view_func=book_view,methods=['POST',])
  114. app.add_url_rule('/books/<int:book_id>',view_func=book_view,methods=['GET','PUT','DELETE'])
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121. @app.route('/')
  122. def hello_world():  # put application's code here
  123.     return 'Hello World!'
  126. @app.route("/login")
  127. def login():
  128.     return "login"
  130. #生成数据库文件，在程序目录下可以找bools。sqlite这个数据库
  131. #然后再终端中运行‘flask create ’这个命令，就是可以最终生成数据库了
  132. #如果提示报错，多生成几次
  134. @app.cli.command()
  135. def create():
  136.     db.drop_all()
  137.     db.create_all()
  138.     Book.init_db()
  141. if __name__ == '__main__':
  142.     app.run(debug=True)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/66537
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号