资讯专栏INFORMATION COLUMN

vue-admin和后端(flask)分离结合的例子

Richard_Gao / 1988人阅读

摘要:感觉界面很不错写了一个小看到好多问后端数据请求的就上传了自己最近的这个做下小小的分享汇总登录登录成功修改密码密码修改成功用户获取删除用户删除成功批量删除删除成功获取柱状图数据获取饼状图数据

感觉 vue-admin 界面很不错,写了一个小 Demo
看到issues好多问后端数据请求的
就上传了自己最近的这个vue-admin-flask-example,做下小小的分享
API汇总: 登录
var params = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };

export const requestLogin = params => {
    return axios({
        method: "POST",
        url: `${base}/login`,
        auth: params
    })
    .then(res => res.data);
};

return jsonify({"code": 200, "msg": "登录成功", "token": token.decode("ascii"), "name": g.admin.name})
修改密码
let params = Object.assign({}, this.setpwdForm);

export const setpwd = params => {
    return axios.post(`${base}/setpwd`, params);
};

return jsonify({"code": 200, "msg": "密码修改成功"})
用户获取
let params = { page: this.page, name: this.filters.name };

export const getUserListPage = params => {
    return axios.get(`${base}/users/listpage`, { params: params });
};

return jsonify({
        "code": 200,
        "total": total,
        "page_size": page_size,
        "infos": [u.to_dict() for u in Infos]
    })
删除用户
let params = { id: row.id };

export const removeUser = params => {
    return axios.get(`${base}/user/remove`, { params: params });
};

return jsonify({"code": 200, "msg": "删除成功"})
批量删除
let para = { ids: ids };

export const batchRemoveUser = params => {
    return axios.get(`${base}/user/bathremove`, { params: params });
};

return jsonify({"code": 200, "msg": "删除成功"})
获取柱状图数据
export const getdrawPieChart = () => {
    return axios.get(`${base}/getdrawPieChart`);
};

return jsonify({"code": 200, "profess_value": profess_value, "grade_value": grade_value, "grade_data": grade_data})
获取饼状图数据
export const getdrawLineChart = () => {
    return axios.get(`${base}/getdrawLineChart`);
};

return jsonify({"code": 200, "value": data_value, "total": total})


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/41420.html

相关文章

  • 应用服务器与WSGI协议以及flask后端框架总结(后端接收请求返回响应整个流程)

    摘要:上次遗留了两个问题先说一下自己的看法问题明明一个线程只能处理一个请求那么栈里的元素永远是在栈顶那为什么需要用栈这个结构用普通变量不行吗和都是线程隔离的那么为什么要分开我认为在的情况下是可以不需要栈这个结构的即使是单线程下也不需要原本我以为在 上次遗留了两个问题,先说一下自己的看法问题:1.明明一个线程只能处理一个请求,那么栈里的元素永远是在栈顶,那为什么需要用栈这个结构?用普通变量不行...

    tolerious 评论0 收藏0
  • 当spring boot 遇到 vue-admin, 搭建完美后台

    摘要:项目地址说明是一个基于打造的响应式的后台管理后端有版本整体效果演示账号密码涉及功能点结合和注解实现登录验证权限验证文章地址结合的工具类文章地址功能管理员登录登录修改密码角色管理权限管理错误页面动态面包屑动态侧边栏广告管理相关网址权限响 项目地址 https://github.com/lmxdawn/vu... 说明 vue-admin 是一个基于 vue + element-ui 打造...

    e10101 评论0 收藏0
  • Python学习笔记:Web后端开发一览

    摘要:试想,在多线程服务器中,多个线程同时处理不同客户端发送的不同请求时,每个线程看到的对象必然不同。多线程服务器会创建一个线程池,再从线程池中选择一个线程用于处理接收到的请求。 框架 Django flask flask是一个轻量的web开发应用示例开发一个小应用 from flask import Flask app = Flask(__name__) @app.route(/) d...

    DrizzleX 评论0 收藏0
  • pyecharts结合flask架构应用

      此篇文章通常是详细介绍了pyecharts结合flask架构,通常是详细介绍怎样在Flask架构使得用pyecharts,文中根据实例编码为大家介绍得非常详尽,需用的小伙伴可以参考一下  详细介绍  文中通常是详细介绍怎样在Flask架构使得用pyecharts,有关Flask架构应用这儿不去做详细详细说明~  Flask模版3D渲染  首先要建立一个flask项目,flask项目对目录结构要...

    89542767 评论0 收藏0
  • 使用 Vue.js 和 Flask 来构建一个单页App

    摘要:我们将创建一个简单的,它将从到返回一个随机数。我们来改变组件显示随机数在这个阶段,我们只是模仿客户端的随机数生成过程。 在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接。 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的。但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算...

    LiuZh 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<