Ant-design-vue 專案實戰筆記 (後繼將繼續補充)

wsAdmin發表於2019-09-17

安裝

1.直接下載 / CDN
    https://unpkg.com/vue-router/dist/vue-router.js
    你也可以像https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 這樣指定 版本號 或者 Tag。

    在 Vue 後面載入 vue-router，它會自動安裝的：

    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>
2. NPM
    npm install vue-router
    如果在一個模組化工程中使用它，必須要透過 Vue.use() 明確地安裝路由功能：

    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter)
    如果使用全域性的 script 標籤，則無須如此 (手動安裝)。

定義路由

1.每個路由應該對映一個元件。 其中"component" 可以是透過 Vue.extend() 建立的元件構造器，或者，只是一個元件配置物件。
    const routes = new VueRouter({
        routes:[
          { path: '/foo', component: Foo },
          { path: '/bar', component: Bar }
        ]
    })
2.巢狀路由
    實際生活中的應用介面，通常由多層巢狀的元件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應巢狀的各層元件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

藉助 vue-router，使用巢狀路由配置，就可以很簡單地表達這種關係。

<div id="app">
  <router-view></router-view>
</div>
const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

這裡的 <router-view> 是最頂層的出口，渲染最高階路由匹配到的元件。同樣地，一個被渲染元件同樣可以包含自己的巢狀 <router-view>。例如，在 User 元件的模板新增一個 <router-view>：

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

要在巢狀的出口中渲染元件，需要在 VueRouter 的引數中使用 children 配置：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

==注意，以 / 開頭的巢狀路徑會被當作根路徑。這讓你充分的使用巢狀元件而無須設定巢狀的路徑。==
你會發現，children配置就是像routes配置一樣的路由配置陣列，所以呢，你可以巢狀多層路由。
此時，基於上面的配置，當你訪問/user/foo時，User的出口是不會渲染任何東西，這是因為沒有匹配到合適的子路由。如果你想要渲染點什麼，可以提供一個 空的 子路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 當 /user/:id 匹配成功，
        // UserHome 會被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

命名檢視

有時候想同時 (同級) 展示多個檢視，而不是巢狀展示，例如建立一個佈局，有 sidebar (側導航) 和 main (主內容)兩個檢視，這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視，而不是隻有一個單獨的出口。如果router-view沒有設定名字，那麼預設為 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一個檢視使用一個元件渲染，因此對於同個路由，多個檢視就需要多個元件。確保正確使用 components 配置 (帶上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

路由傳參方式

一、

to裡的值可以是一個字串路徑，或者一個描述地址的物件。例如：

// 字串
<router-link to="apple"> to apple</router-link>
// 物件
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由帶查詢引數query，位址列變成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由帶查詢引數query，位址列變成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由帶路由引數params，params 不生效，如果提供了 path，params 會被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由帶路由引數params，位址列是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

二、router.push(...)方法

場景:<button @click="gotoTargetView">點選跳轉到目標路由user頁面</button>

1.透過呼叫$router物件的push()方法，向push()方法傳遞一個路由配置物件，透過params來傳遞引數
==注意:使用params必須和name屬性一起使用，否則要跳轉的目標路由頁面無法透過params獲取到傳遞過來的引數。==

//路由配置
{
    path: '/user',
    name: 'user',
    component: User
}
//方法
gotoTargetView(){
    this.$router.push({name:"user", params:{userName:"lhb"}});//注意name不能換成path:"/user"
}
//目標元件user
this.$route.params.userName;//User.vue元件中就可以透過$route的params獲取到引數

2.透過呼叫$router物件的push()方法，向push()方法傳遞一個路由配置物件，需要透過query來傳遞引數
==注意:使用query的時候，可以透過path屬性也可以透過name屬性來指定目標路由。這種情況下，query傳遞的引數會顯示在url後面?userName=?&，如:http://localhost:8082/about?userName=lhb==

//路由配置
{
    path: '/user',
    name: 'user',
    component: User
}
//方法
gotoTargetView(){
    this.$router.push({name:"user",query:{"userName":"lhb"}});
    this.$router.push({path:"/user",query:{"userName":"lhb"}});
}
//目標元件user
this.$route.query.userName;//User.vue元件中就可以透過$route的query獲取到引數

3.透過路由配置，配置動態路由引數:
上面的路由配置都是嚴格匹配的，只有要訪問的路徑與路由配置中的path一模一樣，才能跳轉到相應的元件上.但有時現實卻不是這樣的，當我們去訪問網站並登入成功後，它會顯示歡迎你，+你的名字。不同的使用者登入，只是顯示"你的名字"部分不同，其它部分是一樣的。這就表示，它是一個元件，假設是user元件。不同的使用者（就是使用者的id不同），它都會導航到同一個user元件中。這樣我們在配置路由的時候，就不能寫死,就是路由中的path屬性，不能寫死，那要怎麼設定?導航到user元件，路徑中肯定有user,id不同，那就給路徑一個動態部分來匹配不同的id.在vue-router中，動態部分以:開頭，那麼路徑就變成了/user/:id,這條路由就可以這麼寫：{ path:"/user/:id", component: user }.

//路由配置
{
    path: '/user/:userName',
    name: 'user',
    component: User
}
//方法
gotoTargetView() {
    this.$router.push({path:`/user/${userName}`});
}
//目標元件user
this.$route.params.userName;//User.vue元件中就可以透過$route的params獲取到引數

4.在元件中配置請求

//配置路由
{
    path:"/Menu/edit",
    components:{
        menu_edit:MenuEdit,
    },
    meta: { requiresAuth: true }
}
//配置請求
<router-link :to="{path:'/Menu/edit',query:{id:record.id}}">Edit</router-link>
//獲取引數
this.$route.query.id,

三、注意：

1、關於帶引數的路由總結如下：

無論是直接路由“path" 還是命名路由“name”，帶查詢引數query，位址列會變成“/url?查詢引數名：查詢引數值“;
直接路由“path" 帶路由引數params params 不生效;
命名路由“name" 帶路由引數params 位址列保持是“/url/路由引數值”;

2、設定路由map裡的path值：

帶路由引數params時，路由map裡的path應該寫成:  path:'/apple/:color' ;
帶查詢引數query時，路由map裡的path應該寫成: path:'/apple' ；

3、獲取引數方法：

在元件中：{{$route.params.color}}
在js裡： this.$route.params.color/this.$route.query.color

Form表單

1.form: this.$form.createForm(this)  註冊form表單
2.v-decorator="[id, options]" 註冊form表單中的標籤
    id  必填輸入控制元件唯一標誌。支援巢狀式的寫法
    options.initialValue    子節點的初始值，型別、可選值均由子節點決定
    options.rules   校驗規則
    options.valuePropName   子節點的值的屬性，如 Switch 的是 'checked'
3.resetFields()  重置表單方法,如果使用initialValue設定了初始值,則重置為初始值
4.validateFields()校驗並獲取一組輸入域的值與Error，若fieldNames引數為空，則校驗全部元件

moment使用

1.在vue-cli3中已將moment擴充套件下載並放在node-modules檔案中,使用時只需在元件中 import moment from "moment" 就可以
2.引入moment

//require 方式
var moment=require('moment');
//import 方式
import moment from 'moment';

2.設定moment區域為中國

//require 方式
require('moment/locale/zh-cn')
moment.locale('zh-cn'); 
//import 方式
import 'moment/locale/zh-cn'
moment.locale('zh-cn');

3.格式化時間型別

1.取當天時間，以YYYY年MM月DD日形式顯示
var now=moment().format("YYYY年MM月DD日");

2.任意時間戳格式化，以YYYY-MM-DD HH:mm:ss形式顯示
注意:時間戳需要13位,PHP時間戳一般是10位
var t1=moment(1411641720000).format('YYYY-MM-DD HH:mm:ss');

獲取前一天日期，格式以YYYY-MM-DD形式顯示
var t11=moment().day(0).format('YYYY-MM-DD');

獲取本週五日期，格式以YYYY-MM-DD形式顯示
var t12=moment().weekday(5).format('YYYY-MM-DD');

獲取上週五日期，格式以YYYY-MM-DD形式顯示
var t13=moment().weekday(-3).format('YYYY-MM-DD');

4.獲取當前年份、月份、日期

var t14=moment().year()
var t15=moment().month()//此處月份從0開始，當前月要+1
var t16=moment().date();

注意這個地方，日期不是.day()/days()

結合t14，t15，t16就可以輸出你想要的任何和當前日期、月份相關的日期
例如：我想獲取去年今天的完整日期，如：今天是2018-7-23，我要輸出的是2017-7-23

console.log(`${t14-1}-${t15+1}-${t16}`);

當然這不是獲取去年今天日期最好的辦法，但你可以拼出很多你想要的組合，下面會介紹更好的獲取去年今日的方法。

獲取上個月今天的日期，格式以YYYY-MM-DD顯示
var t18=moment().subtract(1, 'months').format('YYYY-MM-DD');

獲取上個月日期，格式以YYYY-MM顯示
var t19=moment().subtract(1, 'months').format('YYYY-MM')

獲取前一天日期，格式以YYYY-MM-DD顯示
var t20 = moment().subtract(1, 'days').format('YYYY-MM-DD');

獲取去年今天的日期，格式以YYYY-MM-DD顯示，即簡便的獲取去年今天日期的方法
var t21= moment().subtract(1, 'year').format('YYYY-MM-DD');

獲取兩個小時之後的時間
var t22=moment().add(2,'hours').format('YYYY-MM-DD HH:mm:ss');

這個的應用是獲取時間戳過期時間
比較也很簡單，只要獲取當前時間，一樣的format用><=號比較就可以了

獲取五天前的日期
例如:今天2018-7-23，獲取到的時間是2018-7-18

var t23=moment().subtract(5, 'days').format('YYYY-MM-DD');

注意

1.在ant-desgin-vue元件中,例如:樹形控制元件元件,引數:defaultSelectedKeys 與 引數 selectedKeys 的區別,以default開頭的引數,其值必須是固定的,如若設定成變動的你將看不到效果

vue-cookie的使用

1.安裝vue-cookie(其實vue-cli3中的node_modules資料夾中已經有vue-cookie,無需再安裝)

npm install vue-cookie --save

2.在 mian.js 引入和透過 Vue.use() 明確地安裝

//在 main.js 中引入
import Vue from 'Vue'
import VueCookie from 'vue-cookie'
// 全域性掛載
Vue.use(VueCookie)

3.元件中使用Cookie

// 設定cookie
this.$cookie.set('test', 'Hello world!', 1);

// 獲取方式
this.$cookie.get('test');

// 刪除 cookie
this.$cookie.delete('test');

注意:$cookie關鍵名稱不能設定為['expires'，'max-age'，'path'，'domain'，'secure']

4.vue-router + vue-cookies實現登入超時退出

4.1、在main.js中引入vue-cookie

import VueCookie from "vue-cookie";
Vue.use(VueCookie);

4.2、在登入的時候將使用者資訊/登入狀態存入cookie中

this.$cookie.set('user_token',[使用者資訊]);

4.3、在路由檔案中（route.js）註冊全域性前置守衛

//路由守衛
router.beforeEach((to, from, next) => {
    document.title = to.matched[0].meta.title;
    //在vue-router中獲取使用者token
    var user_token =  router.app.$cookie.get('user_token');
    //判斷如果不是進入登入頁面
    if (to.fullPath != '/login'){
        //根據獲取的使用者token資訊,判斷是否登入
        if (user_token) {
            //執行下一步
            next()
        } else {
            //未登入則進入下Login登入頁
            next({
                path: '/login'
            });
        }
    }else{
        next();
    }
});

1、首先，在vue-cli專案的src路徑下新建一個axios資料夾，在axios資料夾裡新建api.js和request.js，api.js用於寫介面，對axios的封裝寫在request.js裡，專案機構如圖：
Ant-design-vue 專案實戰筆記 (後繼將繼續補充)
2、開始封裝Axios,
2.1、安裝 axios

$ npm install axios

2.2、在request.js檔案中

import axios from 'axios';

const service = axios.create({
    baseURL: "http://www.vueadmin.io", // api的base_url
    timeout: 5000, //請求超時時間
    headers: {},
    withCredentials: false, // `withCredentials` 表示跨域請求時是否需要使用憑證,預設 false
    responseType: 'json', // `responseType` 表示伺服器響應的資料型別，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',預設 json
});

// 請求攔截器
service.interceptors.request.use(function (config) {
    // 在傳送請求之前做些什麼
    return config;
}, function (error) {
    // 對請求錯誤做些什麼
    return Promise.reject(error);
});

// 響應攔截器
service.interceptors.response.use(function (response) {
    // 對響應資料做點什麼
    return response
}, function (error) {
    // 對響應錯誤做點什麼
    return Promise.reject(error);
});

export default service;

3、Axios介面的呼叫方式
3.1、在api.js檔案中(我們把介面統一寫在api.js檔案裡。當然，如果你的業務非常複雜的話，建議把不同業務的api分開放到不同的檔案裡，這樣方便以後維護)

// 載入request.js檔案
import service from './request';

//登入介面
export const Login = data => {
    return service({
        url: "/index.php/admin/Login/login",
        method: 'post',
        data
    })
};
//獲取選單
export const GetMenu = data => {
    return service({
        url: "/index.php/admin/Menu/getMenu",
  method: 'get',
  params: data,
  })
};
    //注意,get與post請求時的傳參方式不一樣

4、在元件中使用

<template>
        <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
            <h2 id="title">{{systemName}}</h2>
            <a-form-item>
                <a-input v-decorator="['username',{ rules: [{ required: true, message: 'Please input your username!' }] }]" placeholder="Username">
                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input v-decorator="['password',{ rules: [{ required: true, message: 'Please input your Password!' }] }]" type="password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-checkbox v-decorator="['remember',{valuePropName: 'checked',initialValue: true,}]">
                    Remember me
                </a-checkbox>
                <a class="login-form-forgot" href="">
                    Forgot password
                </a>
                <a-button type="primary" html-type="submit" class="login-form-button">
                    Log in
                </a-button>
                Or <router-link to="/register">
                register now!
            </router-link>
            </a-form-item>
        </a-form>
</template>

<script>
    import {Login} from '../../axios/api';
    export default {
        name: "Login",
        created() {
            const params = {
                username:values.username,
                password:values.password,
                remember:values.remember
             };
            //使用登入介面
             Login(params).then((response)=>{
                if (response.data.code === 1){
                    //在這裡處理返回資料
                }
             });
        },
    };
</script>

<style scoped>
</style>

本作品採用《CC 協議》，轉載必須註明作者和本文連結

2020 年勒索軟體將繼續流行
2019-12-02
redis筆記補充
2022-04-05
Redis筆記
JS繼續學習記錄（一）
2018-08-29
JS
Trace系列文章筆記目錄，陸續補充中...
2018-07-13
筆記
繼Pebble之後，Fitbit繼續收購第二家智慧手錶公司
2018-03-14
《從零構建前後分離的web專案》實戰 - 慾善其事必先利其器繼續打磨前端架構
2018-10-23
Web前端架構
網易，繼續奮戰遊戲賽道
2021-09-26
遊戲
mysql語句大全-工作中常用整理（歡迎大家在評論區繼續補充）
2024-07-02
MySql
Java核心技術筆記繼承
2019-01-19
Java筆記繼承
不忘初心，繼續前行
2020-11-23
client-go實戰之六:時隔兩年，重新整理版本繼續實戰
2023-10-09
clientGo
很高興蜘蛛俠在漫威的旅程將繼續
2019-09-28
4.21：三大題材將繼續開啟新行情
2019-04-21
Hub ER：廣告支援的電視將“繼續存在”
2022-12-28
MDN繼承和原型鏈章筆記
2019-03-22
繼承原型筆記
關於js繼承的想法筆記
2019-02-19
JS繼承筆記
JAVA GUI學習繼續
2018-10-06
JavaGUI
繼續完成驗證碼
2024-06-18
物件導向 -- 三大特性之繼承補充抽象類介面類
2019-03-28
物件繼承抽象
這場持續3年的“吃雞”，終將繼續進行（上）
2019-10-08
這場持續3年的“吃雞”，終將繼續進行（下）
2019-10-09
lambda（持續補充）
2024-03-06
為擴充PS5獨佔遊戲陣容索尼將繼續收購開發商
2019-05-24
遊戲
Solidity語言學習筆記————34、繼承
2018-07-03
Solid筆記繼承
C++學習筆記——C++ 繼承
2020-11-19
C++筆記繼承
繼續聊聊MVVM和元件化
2019-01-05
MVVM元件化
利用XSLT繼續擊垮XML
2020-08-19
XML
繼續吐槽一下
2022-10-09
Hernandez：2020年前端趨勢預測 JavaScript將繼續盛行
2019-12-29
NaN前端JavaScript
Python學習筆記——爬蟲之Scrapy專案實戰
2018-09-03
Python筆記爬蟲
繼續付出真誠，持續提供價值
2018-12-10
【廖雪峰python進階筆記】類的繼承
2018-07-10
Python筆記繼承
JavaScript 型別、原型與繼承學習筆記
2021-02-01
JavaScript型別原型繼承筆記
odoo 繼承（owl繼承、web繼承、view繼承）
2024-03-29
Odoo繼承WebView
Spring中JPA在異常後三種方法繼續事務
2024-04-13
Spring
php返回資料後如何讓程式繼續執行其它操作
2024-06-14
PHP
動態解析521響應Cookie失效後，爬蟲如何繼續？
2020-12-16
Cookie爬蟲
Postman 支援 gRPC 了！繼續領先 ~
2022-01-31
PostmanRPC