Skip to content

vue-admin和后端(flask)分离结合的超简单模板Demo

License

Notifications You must be signed in to change notification settings

bay1/vue-admin-flask-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0b11964 · Jun 27, 2018

History

7 Commits
Feb 10, 2018
Feb 10, 2018
Feb 10, 2018
Feb 10, 2018
Feb 10, 2018
Feb 10, 2018
Feb 10, 2018
Feb 11, 2018
Feb 10, 2018
Feb 11, 2018
Jun 27, 2018
Feb 10, 2018
Feb 11, 2018
Feb 10, 2018
Feb 10, 2018
Feb 11, 2018
Feb 10, 2018
Feb 10, 2018

Repository files navigation

vue-admin-flask-example

vue-admin和flask前后端分离的小例子

本地预览

Docker

本机安装docker的话直接在根目录运行

docker-compose up -d

再打开打包的目录dist下的index.html即可

源码

依此按照下面命令

D:\Github\vue-admin-flask-example
$ npm install
D:\Github\vue-admin-flask-example
$ virtualenv venv

//进入venv\Scripts目录
D:\Github\vue-admin-flask-example\venv\Scripts
$ activate
D:\Github\vue-admin-flask-example
(venv) $ pip install -r requirements.txt
D:\Github\vue-admin-flask-example
(venv) $ python manage.py

//开启另一个终端(或者像上一个方式直接打开/dist/index.html)
D:\Github\vue-admin-flask-example
$ npm run dev

等待浏览器打开 http://localhost:8080

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})

vue vue2

PS:(很多错误响应的api没处理,不影响正常操作)

About

vue-admin和后端(flask)分离结合的超简单模板Demo

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published