Detailed explanation of the separation and combination of vue-admin and backend (flask)-JS Tutorial-php.cn

Detailed explanation of the separation and combination of vue-admin and backend (flask)

亚连

Release： 2018-06-06 10:01:27

Original

3266 people have browsed it

This article mainly introduces an example of the separation and combination of vue-admin and backend (flask). Now I will share it with you and give you a reference.

This article introduces an example of the separation and combination of vue-admin and backend (flask), and shares it with everyone. The details are as follows

I feel that the vue-admin interface is very good, so I wrote a small Demo

I saw a lot of issues asking about back-end data requests

, so I uploaded my latest vue-admin-flask-example to share a little

API summary:

var params = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };

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

return jsonify({&#39;code&#39;: 200, &#39;msg&#39;: "登录成功", &#39;token&#39;: token.decode(&#39;ascii&#39;), &#39;name&#39;: g.admin.name})

Copy after login

Change password

let params = Object.assign({}, this.setpwdForm);

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

return jsonify({&#39;code&#39;: 200, &#39;msg&#39;: "密码修改成功"})

Copy after login

User acquisition

let params = { page: this.page, name: this.filters.name };

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

return jsonify({
    &#39;code&#39;: 200,
    &#39;total&#39;: total,
    &#39;page_size&#39;: page_size,
    &#39;infos&#39;: [u.to_dict() for u in Infos]
  })

Copy after login

Delete user

let params = { id: row.id };

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

return jsonify({&#39;code&#39;: 200, &#39;msg&#39;: "删除成功"})

Copy after login

Batch deletion

let para = { ids: ids };

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

return jsonify({&#39;code&#39;: 200, &#39;msg&#39;: "删除成功"})

Copy after login

Get histogram data

export const getdrawPieChart = () => {
  return axios.get(`${base}/getdrawPieChart`);
};

return jsonify({&#39;code&#39;: 200, &#39;profess_value&#39;: profess_value, &#39;grade_value&#39;: grade_value, &#39;grade_data&#39;: grade_data})

Copy after login

Get pie chart data

export const getdrawLineChart = () => {
  return axios.get(`${base}/getdrawLineChart`);
};

return jsonify({&#39;code&#39;: 200, &#39;value&#39;: data_value, &#39;total&#39;: total})

Copy after login

##The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

How to deploy vue-router and express projects to the server

How to solve the static resource image after vue packaging Invalid problem

Set background image in Vue

The above is the detailed content of Detailed explanation of the separation and combination of vue-admin and backend (flask). For more information, please follow other related articles on the PHP Chinese website!