碼上歡樂
相關內容    簡體    繁體

使用ant-design-vue

本文轉載自   查看原文   2020-11-24 19:18   503    工單管理系統

官網 https://www.antdv.com/docs/vue/introduce-cn/

  1. 簡單使用

    1. src/components/layout

    2. <template>
  <div style="width: 200px">
    <a-menu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      :selected-keys="[current]"
      @click="handleClick"
    >


      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="mail" /><span>用戶模塊</span></span>
            <a-menu-item key="test">
              測試
            </a-menu-item>
            <a-menu-item key="usermanage">
              用戶管理
            </a-menu-item>
      </a-sub-menu>
    </a-menu>

  </div>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      current: '1',
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    handleClick(e) {
      this.current = e.key;
      this.$router.push({path:this.current});
    },
  },
};
</script>

    3. src/views/user-manage/UserManage

    4. <template>
  <div>
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout-header style="background: #F0F2F5">
          <Crumbs></Crumbs>
          <h4 class="h3">用戶管理</h4>
        </a-layout-header>

        <a-layout-content>
          <SearchComponent></SearchComponent>
          <ButtonComponent></ButtonComponent>
        </a-layout-content>
        <a-layout-footer>
          <TableComponent>

          </TableComponent>
        </a-layout-footer>
      </a-layout>

    </div>


  </div>
</template>

<script>
import Crumbs from "./componentes/Crumbs";
import SearchComponent from "./componentes/SearchComponent";
import ButtonComponent from "./componentes/ButtonComponent";
import TableComponent from "./componentes/TableComponent";
import {getUser} from "../../http/apis";

export default {
  components: {
    Crumbs,
    SearchComponent,
    ButtonComponent,
    TableComponent,
  },
  name: "UserManage",
  data() {
    return {
      visible: false,
    }
  },
  methods: {
  },


  //鈎子方法
  mounted() {
  },
  created() {

  },
  //監聽屬性
  watch: {},
  //計算屬性
  computed: {}
}
</script>

<style scoped>
.h3 {
  font-weight: 800;
  margin-left: -70px;
  margin-top: -20px;
}

</style>

    5. 組件嵌套使用 注意路徑

    6. 按鈕彈窗組件src/views/user-manage/componentes/ButtonComponentes.vue

      1. <template>

  <div>
    <a-button type="primary" @click="showModal">
      + 創建用戶
    </a-button>
    <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
      用戶名
      <a-input placeholder="" v-model="username"/>
      密碼
      <a-input placeholder="" v-model="password"/>
      手機號
      <a-input placeholder="" v-model="mobile"/>
      電子郵箱
      <a-input placeholder="" v-model="email"/>
    </a-modal>
  </div>

</template>

<script>
import {postRegister} from "../../../http/apis";

export default {
  name: "ButtonComponent",
  data() {
    return {
      visible: false,
      username: '',
      password: '',
      mobile: '',
      email: '',
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      let params = {
        username: this.username,
        password: this.password,
        mobile: this.mobile,
        email: this.email,
      }
      postRegister(params).then(res => {
        console.log(res)
        this.$router.go(0)
      })
      this.visible = false;

    },
  },


  //鈎子方法
  mounted() {
  },
  created() {

  },
  //監聽屬性
  watch: {},
  //計算屬性
  computed: {}
}
</script>

<style scoped>

</style>

    7. 面包屑src/views/user-manage/componentes/Crumbs.vue

      1. <template>
  <div>
    <a-breadcrumb separator="" class="a-breadcrumb">
      <a-breadcrumb-item>
        Home
      </a-breadcrumb-item>
      <a-breadcrumb-separator>:</a-breadcrumb-separator>
      <a-breadcrumb-item href="">
        用戶模塊
      </a-breadcrumb-item>
      <a-breadcrumb-separator/>
      <a-breadcrumb-item href="">
        用戶管理
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "Crumbs",
  data() {
    return {}
  },
  methods: {},


  //鈎子方法
  mounted() {
  },
  created() {

  },
  //監聽屬性
  watch: {},
  //計算屬性
  computed: {}
}
</script>

<style scoped>
.a-breadcrumb {
  /*background:red;*/
  color: #1890ff;
  margin-top: -15px;
  margin-left: -70px;
}
</style>

    8. 輸入框搜索src/views/user-manage/componentes/SearchComponentes.vue

      1. <template>
  <div>
    <div>
      <a-input-search class="a-input-search" placeholder="請輸入用戶名" enter-button @search="onSearch"/>
      <br/><br/>
      {{user_list}}
    </div>
  </div>

</template>

<script>
import {postSearch} from "../../../http/apis";

export default {
  name: "SearchComponent",
  data() {
    return {
      user_list:[],
    }
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    onSearch(value) {
      console.log(value);
      postSearch({search_name: value}).then(res => {
        console.log(res)
        this.user_list = res
      })
    },
  },


  //鈎子方法
  mounted() {
  },
  created() {

  },
  //監聽屬性
  watch: {},
  //計算屬性
  computed: {}
}
</script>

<style scoped>
.a-input-search {
  width: 400px;
  margin-left: 40%;

}

.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 30px 30px 0;
}
</style>

    9. 表格展示src/views/user-manage/componentes/TableComponentes.vue

      1. <template>

  <div>
    <a-table :columns="columns" :data-source="data" :rowKey="record => record.id">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> 名字</span>
      <span slot="tags" slot-scope="tags">

    </span>
      <span slot="action" slot-scope="text, record">
            <a-button type="primary">修改</a-button>
           <a-button type="danger" @click="delUser(text.id)">刪除</a-button>
    </span>
    </a-table>
  </div>

</template>
<script>
import {delUser, getUser} from "../../../http/apis";

const columns = [
  {
    dataIndex: 'username',
    // key: 'username',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '手機號',
    dataIndex: 'mobile',
    // key: 'mobile',
  },
  {
    title: '電子郵箱',
    dataIndex: 'email',
    // key: 'email',
  },
  {
    title: '最后一次登錄',
    // key: 'last_login',
    dataIndex: 'last_login',
    // scopedSlots: {customRender: 'tags'},
  },
  {
    title: '操作',
    // key: 'last_login',
    scopedSlots: {customRender: 'action'},
  },
];

// const data = [
//   {
//     key: '1',
//     username: '戰三',
//     mobile: 18548789043,
//     email: '515@qq.com',
//     is_superuser: '0',
//     last_login:'2020-12-09'
//   },
// ];

export default {
  name: "TableComponent",
  data() {
    return {
      data: [],
      columns,
    }
  },
  methods: {
    showUser() {
      getUser().then(res => {
        console.log(res)
        this.data = res.results
      })
    },
    delUser(text) {
      console.log(text)
      delUser({id:text}).then(res => {
        console.log(res)
        this.$router.go(0)
      }).catch(err => {
        this.$router.go(0)

      })
    },
  },


  //鈎子方法
  mounted() {
  },
  created() {
    this.showUser()
  },
  //監聽屬性
  watch: {},
  //計算屬性
  computed: {}
}
</script>
<style scoped>
</style>

    10. 路由src/router/index.js

      1. import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/layout/Home";

Vue.use(Router)
const page = name => () => import('@/views/' + name)


export default new Router({
  mode: 'history',
  routes: [
    {path: '/login', component: page('Login'), name: '登錄'},
    {
      path: '/', name: 'Home', component: Home,
      children: [
        {path: '/test', component: page('test/Test'), name: '測試頁面'},
        {path: '/usermanage', component: page('user-manage/UserManage'), name: '測試頁面'},
      ]
    },
  ]
})

#避免路由循環冗余
import VueRouter from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

    11. 登錄src/views/Login.vue

      1. <template>
  <div width=300>

    <center><h1>登錄</h1></center>

    <a-form-item label="用戶名" v-bind="formlayout">

      <a-input v-model="username"/>

    </a-form-item>
    <a-form-item label="密碼" v-bind="formlayout">
      <a-input-password v-model="password" placeholder="input password" />
    </a-form-item>

    <a-form-item v-bind="buttonlayout">

      <a-button type="primary"  @click="submit">登錄</a-button>

    </a-form-item>

  </div>
</template>

<script type="text/javascript">
import { postLogin } from '../http/apis';

export default{

  data(){
    return{
      username:"",
      password:'',
      //表單樣式
      formlayout:{
        //標簽
        labelCol:{
          xs:{span:24},
          sm:{span:8}
        },
        //文本框
        wrapperCol:{
          xs:{span:14},
          sm:{span:6}
        }
      },
      //按鈕樣式
      buttonlayout:{
        //按鈕
        wrapperCol:{
          xs:{
            span:24,
            offset:0
          },
          sm:{span:16,offset:8}
        }
      }
    }

  },
  //自定義方法
  methods:{
    submit:function(){
      var data={'username':this.username,'password':this.password}
      postLogin(data).then(resp => {
        console.log(resp)
        if(resp.token){
          localStorage.setItem('token',resp.token)
          localStorage.setItem('username',resp.username)
          localStorage.setItem('uid',resp.id)
          this.$router.push('/')
        }
      }).catch(err=>{
        console.log(err)
        alert('登錄失敗')
      })

    }
  }
};


</script>

<style type="text/css">


</style>

    12. axios請求接口src/http/apis.js

      1. //將我們http.js中封裝好的  get,post.put,delete  導過來
import {axios_get, axios_post, axios_delete, axios_put} from './index.js'


// 書籍管理接口
// export const getBookList = (params, headers) => axios_get("/books/book/", params, headers)

//用戶
//獲取用戶信息
export const getUser = (params, headers) => axios_get("/user/user/", params, headers)
//登錄接口
export const postLogin = (params, headers) => axios_post("/user/login/", params, headers)
//注冊接口
export const postRegister = (params, headers) => axios_post("/user/register/", params, headers)
//搜索
export const postSearch = (params, headers) => axios_post("/user/search/", params, headers)
//刪除
export const delUser = (params, headers) => axios_delete("/user/user/" + params.id + '/', headers)

      2. 封裝axios index.js

      3. import axios from 'axios'

// 第一步：設置axios
axios.defaults.baseURL = "http://192.168.56.100:8888/"

//全局設置網絡超時
axios.defaults.timeout = 10000;

//設置請求頭信息
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';


// 第二：設置攔截器
/**
 * 請求攔截器(當前端發送請求給后端前進行攔截)
 * 例1：請求攔截器獲取token設置到axios請求頭中，所有請求接口都具有這個功能
 * 例2：到用戶訪問某一個頁面，但是用戶沒有登錄，前端頁面自動跳轉 /login/ 頁面
 */
axios.interceptors.request.use(
    config => {
        // 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
        const token = localStorage.getItem("token")
            // console.log(token)
        if (token) {
            config.headers.Authorization = 'JWT ' + token
        }
        return config;
    },
    error => {
        return Promise.error(error);
    })

axios.interceptors.response.use(
    // 請求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
    // 請求失敗
    error => {
        if (error.response) {
            // 判斷一下返回結果的status == 401？  ==401跳轉登錄頁面。  ！=401passs
            // console.log(error.response)
            if (error.response.status === 401) {
                // 跳轉不可以使用this.$router.push方法、
                // this.$router.push({path:'/login'})
                window.location.href = "http://127.0.0.1:8888/"
            } else {
                // errorHandle(response.status, response.data.message);
                return Promise.reject(error.response);
            }
            // 請求已發出，但是不在2xx的范圍
        } else {
            // 處理斷網的情況
            // eg:請求超時或斷網時，更新state的network狀態
            // network狀態在app.vue中控制着一個全局的斷網提示組件的顯示隱藏
            // 關於斷網組件中的刷新重新獲取數據，會在斷網組件中說明
            // store.commit('changeNetwork', false);
            return Promise.reject(error.response);
        }
    });


// 第三：封裝axios請求
// 3.1 封裝get請求
export function axios_get(url, params) {
    return new Promise(
        (resolve, reject) => {
            axios.get(url, {params:params})
                .then(res => {
                    // console.log("封裝信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

// 3.2 封裝post請求
export function axios_post(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.post(url, JSON.stringify(data))
                .then(res => {
                    // console.log("封裝信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

// 3.3 封裝put請求
export function axios_put(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.put(url, JSON.stringify(data))
                .then(res => {
                    // console.log("封裝信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}

// 3.4 封裝delete請求
export function axios_delete(url, data) {
    return new Promise(
        (resolve, reject) => {
            // console.log(data)
            axios.delete(url, { params: data })
                .then(res => {
                    // console.log("封裝信息的的res", res)
                    resolve(res.data)
                }).catch(err => {
                    reject(err.data)
                })
        }
    )
}


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ant-design-vue 之form表單使用 Ant-Design-Vue中關於Table組件的使用 ant-design-vue 之upload 文件上傳 Ant-Design-Vue遞歸菜單的問題 ant-design-vue 上傳圖片組件 ant-design-vue彈窗可拖動 vue 自定義icon、ant-design-vue自定義使用阿里iconfont圖標 electron-builder使用ant-design-vue創建electron項目[2021/10/29更新] ant-design-vue 之form表單中label-col和wrapper-col使用 關於使用 ant-design-vue a-table 超出部分 隱藏並顯示省略號，
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM