码迷,mamicode.com
首页 > 其他好文 > 详细

jeecg /ant-design-vuepro 前端使用

时间:2020-02-27 20:43:05      阅读:569      评论:0      收藏:0      [点我收藏+]

标签:gen   exp   show   idt   The   type   des   stat   sys   

1、原生axios使用

<script>
  import Vue from 'vue';
  import axios from 'axios';
  axios.defaults.baseURL = 'http://127.0.0.1:3000/jeecg-boot/sys/annountCement';
  // Vue.prototype.$http = axios;
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  axios.interceptors.request.use(config =>{
    console.log("enter into axios.interceptors");
    const token = Vue.ls.get(ACCESS_TOKEN);
    // this.headers = { authorization: 'authorization-text',"X-Access-Token":token }
    // config.headers.Authorization = window.sessionStorage.getItem('X-Access-Token');
    config.headers['X-Access-Token'] = token;
   return config;
  })


  const columns = [
    { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
    { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
    { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
    { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
    { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
    { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
    { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
    { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
    { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
    { title: 'Column 8', dataIndex: 'address', key: '8' },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 100,
      scopedSlots: { customRender: 'action' },
    },
  ];

  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }

  export default {
    name: 'antdesignvue',
    data() {
      return {
        data,
        columns,
        visible: false,

        headers: { },
        token:{ }
      }
    },
    methods: {
      showModal() {
        this.visible = true
      },
      handleOk(e) {
        console.log(e);
        this.visible = false
      },

      async getlist() {
        //const result = await axios.get('list?_t=1582775652&column=createTime&order=desc&field=id,,,titile,msgCategory,sender,priority,msgType,sendStatus,sendTime,cancelTime,action&pageNo=1&pageSize=10');
        const result = await axios.get('list');

        console.log(result);
        console.log(result.data);
        console.log(result.data.result.records);
      },

    },
    created(){
      console.log("created!");
      this.getlist();
    }

  }

2、getAction封装get请求

api/manage.js

//get
export function getAction(url,parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter
  })
}

......

import { getAction } from '@/api/manage';

......

created(){
      console.log("created!");
      //this.getlist();
      getAction('http://127.0.0.1:3000/jeecg-boot/sys/annountCement/list').then((res) => {console.log(res)});
    }

3、httpAction封装post请求

api/manage.js

//post method= {post | put}
export function httpAction(url,parameter,method) {
  return axios({
    url: url,
    method:method ,
    data: parameter
  })
}

jeecg /ant-design-vuepro 前端使用

标签:gen   exp   show   idt   The   type   des   stat   sys   

原文地址:https://www.cnblogs.com/xidianzxm/p/12374014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!