Vue+iview-admin+axios+webpack+vue-router

Vue+iview-admin+axios+webpack+vue-router

一、环境搭建

安装基础配置

npm i -g vue-cli    # 全局安装vue脚手架
vue init webpack vue-demo    # 初始化安装项目模板
cd vue-demo
npm i --save axios    # 数据请求插件

配置入口文件

import Vue from 'vue'
import iView from 'iview'

import App from './App'
import router from './router'
import 'iview/dist/styles/iview.css'

Vue.config.productionTip = false;

Vue.use(iView)

new Vue({
    el: '#app',
    router,
    compontents: { App },
    template: '<App/>'
})

路由配置

import Vue from 'vue'
import Router from 'vue-router'

import Index from '@/commponents/page/index/index'
import Login from '@/commponents/page/login/login'
import Home from '@/commponents/page/home/home'
import Router1 from '@/commponents/page/product/router/router1'
import Router2 from '@/commponents/page/product/router/router2'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routers: [
        {
            path: '/',
            name: 'index',
            component: Index
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '/product',
            name: 'product',
            component: Product,
            children: [
                { path: '/router1', name: 'router1', component: Router1 },
                { path: '/router2', name: 'router2', component: Router2 }
            ]
        }
    ]
})

二、axios设置请求头

get请求设置请求头：

import axsios from 'axios'

axios.get('/api', {
    headers: {
        'Authorization': 'Bearer ' + token,
        'Cookie': 'sessionId' + sessionId + '; recId=' + recId
    },
    params: {
        name: 'zhangsan',
        password: 123456
    }
}).then(function (res) {
    console.log(res);
}).catch(function (err) {
    console.log(err)
})

post请求设置请求头：

import axios from 'axios'

axios.post('/api',{
    name: 'zhangsan',
    password: 123456
}, {
    headers: {
        'Authorization': 'Bearer ' + token,
        'Cookie': 'sessionId' + sessionId + '; recId=' + recId
    }
}).then(function (res) {
    console.log(res)
}).catch(function (err) {
    console.log(err)
})

配置axios，index.js

// 引入axios插件
import axios from 'axios'

// 配置请求头
const config = {
    headers: {
        'Authorization': 'Bearer ' + token,
        'Cookie': 'sessionId' + sessionId + '; recId=' + recId
    }
}

// 设置全局的axios
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 自定义请求实例
const ajax = axios.create({
    url: '/api',
    baseURL: 'https://some-domain.com/api/',
    method: 'get',
    data: {},
    params: {},
    header: {},
    timeout: 1000,
    responseType: 'json'
})

//自定义函数
function main(msg) {
    console.log(msg)
}

// 导出配置信息
export {
    config,
    ajax,
    main
}

导入index.js

<template>
    <div id="app">
    
    </div>
</template>

<script>
import {config, ajax, main} from './index.js'

console.log(config);
console.log(ajax);
console.log(main);

</script>

<style lang="" scoped>

</style>

三、配置路由

路由传参

<template>
    <div id="home">
        <router-link :to="{ name: 'index', query: {title: '欢迎登录'} }">
    </div>
</template>

<script>
    export default {
        name: 'home',
        data () {
            return {}
        }
    }
</script>

<style lang="">

</script>

路由参数接收

<template>
    <div id="app">
        <h1> {{ title }} </h1>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data () {
            return {
                message: 'Hello World !'
            }
        },
        computed: {
            title () {
                return this.$route.query.title ? this.$route.query.title : this.message;
            }
        }
    }
</script>

<style lang="" scoped>

</style>