vue.js+flask+element-ui简易Demo 气势的信心
vue.js+flask+element-ui简易Demo
气势的信心
计算机/健身爱好者
10 人赞了该文章
最近工作中用到Vue.js加上一直在用的Flask,所以准备写个小小的demo巩固下。
ps:之前一直用unpkg的各种包,发现会出问题,所以demo中将所有需要用到的js包放在本地当中。
项目使用到Flask+flask_jsglue+vue.js+element-ui+data-table.js+axios.js
demo很简单,最基本的flask应用加上几个api方法
index.py:
app = Flask(__name__)
jsglue = JSGlue()
jsglue.init_app(app) # 让js文件中可以使用url_for方法@app.route('/')
def index():return render_template('index.html')@app.route('/get_data')
def get_base_data():return jsonify({'results': results})@app.route('/add', methods=['POST'])
def add():name = request.json.get('name')results.append({'name': name, 'index': str(uuid1())})#uuid让index不唯一,实际开发中可以通过数据库的id来代替return jsonify({'message': '添加成功!'}), 200@app.route('/update', methods=['PUT'])
def update():name = request.json.get('name')index = request.json.get('index')for item in results:if item['index'] == index:item['name'] = namebreakreturn jsonify({'message': '编辑成功!'}), 200@app.route('/delete', methods=['DELETE'])
def delete():name = request.args.get('name')index = request.args.get('index')results.remove({'name': name, 'index': index})return jsonify({'message': '删除成功!'}), 200if __name__ == '__main__':app.run(debug=True)
template
<script type="text/x-template" id="tabel-detail-template"><div><data-tables :data='tableData' :actions-def="getActionsDef()":pagination-def="getPaginationDef()":row-action-def="getRowActionsDef()"action-col-width="80"><el-table-column label="关键词" min-width="400"><template scope="scope"><a :href="scope.row.url" target="_blank" v-text="scope.row.name"></a></template></el-table-column></data-tables><el-dialog :title="formTitle" :visible.sync="dialogFormVisible"><el-form :model="form" @submit.native.prevent><el-form-item label="数据"><el-input ref="valueInput" v-model.trim="form.name" auto-complete="off"@keyup.enter.native="createOrUpdate"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="createOrUpdate">确 定</el-button></div></el-dialog></div>
</script>
index.js
getActionsDef: function () {let self = this;return {width: 5,def: [{name: '添加数据',handler() {self.formType = 'create';self.formTitle = '添加数据';self.form.name = '';self.form.index = '';self.dialogFormVisible = true;},icon: 'plus'}]}},getPaginationDef: function () {return {pageSize: 10,pageSizes: [10, 20, 50]}},getRowActionsDef: function () {let self = this;return [{type: 'primary',handler(row) {self.formType = 'edit';self.form.name = row.name;self.form.index = row.index;self.formTitle = '编辑数据';self.dialogFormVisible = true;},name: '编辑'}, {type: 'danger',handler(row) {if (row.flag === 'true') {self.$message.success("该信息不能删除!")} else {self.$confirm('确认删除该数据?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(function () {let url = Flask.url_for("delete", {name: row.name, index: row.index});axios.delete(url).then(function (response) {self.getCategories();self.$message.success("删除成功!")}).catch(self.showError)});}},name: '删除'}]},getCategories: function () {let url = Flask.url_for("get_base_data");let self = this;axios.get(url).then(function (response) {self.tableData = response.data.results;});},createOrUpdate: function () {let self = this;if (self.form.name === '') {self.$message.error('数据不能为空!');return}if (self.formType === 'create') {let url = Flask.url_for("add");axios.post(url, {name: self.form.name}).then(function (response) {self.getCategories();self.dialogFormVisible = false;self.$message.success('添加成功!')}).catch(self.showError);} else {let url = Flask.url_for("update", {});axios.put(url, {name: self.form.name,index: self.form.index}).then(function (response) {self.getCategories();self.dialogFormVisible = false;self.$message.success('修改成功!')}).catch(self.showError);}}
}
因为demo比较简单,数据存在内存中,仅仅用于展示,读者可自行结合数据库
代码请戳github
发布于 2017-09-18
vue.js+flask+element-ui简易Demo 气势的信心相关推荐
- 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
- npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
- 模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
- Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
- iView 3.3.0 发布,基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
- iView 3.4.0 发布,基于 Vue.js 的企业级 UI 组件库
百度智能云 云生态狂欢季 热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
- 运用vue.js写的表格小demo
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习vue.js,我把工作中项目里面的一个小实例用vue.js重构了下,写成一个小demo,巩固自己所学,并与大家分享, ...
- Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)
项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证 问题描述 因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...
- 【2】Vue项目引用Element UI(饿了么框架)菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
最新文章
- Google Test(GTest)使用方法和源码解析——概况
- 英特尔将进行重大业务重组
- mac OS Sierra支持破解程序
- 成功解决ImportError: Something is wrong with the numpy installation. While importing we detected an olde
- [转]Windows的批处理脚本
- PyCharm——导入模块时提示Unresolved Reference解决方案
- Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享
- Java Bean验证基础
- leetcode217. 存在重复元素(vip题)超简单
- 华为鸿蒙二代支持的手机,关于华为鸿蒙,国产厂商中只有2家表示支持
- 目的入口(dst_entry)
- “Max“ stands for big
- php in_array()函数
- Webservice 的安全
- EverWeb for Mac(网页设计软件)
- 从excel读取数据,利用情感词典进行文本分类
- 乐高mindstormsev3_乐高MINDSTORMSEV3软件程序模块开发
- 手把手教你使用si9000计算高速差分线的阻抗
- 电力系统微型计算机继电保护试题及答案,a全p国2010年7月高等教育自学考试电力系统微型计算机继电保护试题及答案.doc...
- stm32增量式编码器使用流程