Ant-design-vue 项目实战笔记 (后继将继续补充)

Vue路由知识点

安装

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

Axios封装

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>
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!