Vue(3)

目录

一、Vue Router？

安装

知识点

1. router-link

2.router-view

3. 路由表

 4.创建路由对象

5.编程式路由

 

6.路由守卫

 

使用

二、Axios异步通信

 1、特性

2、安装

3、案例

4、api

5.具体属性

6、响应结构

7、拦截器

8.api的封装

 9、跨域请求

---

一、Vue Router？

安装

npm install vue-router

知识点

1. router-link

相当于超链接  to=“”  向当与a标签中的href

"/login">跳转登录

2.router-view

声明路由最终渲染的位置

3. 路由表

path 定义了请求地址  path=“/”

name 定义了路由的名称 保证唯一

component 指定该请求需要对应的视图，放的是组件

children   内嵌路由

redirect   路由与路由之间的跳转

 {
            //转发
            path: '/test',
            name: 'test',
            redirect: '/login'
        }，
  {
            //请求路径  ==getMapping
            //path必须以/ 开头   ，如果是嵌套路由，子路由不允许
            path: "/login",
            //路由名称（唯一）
            name: "Login",
            //路由需要响应的组件
            component: () =>
                import ('../components/Login.vue'),
            children: [{
                    //嵌套不能有/开头
                    path: 'main1',
                    name: 'main1',
                    component: Main1
                },
                {
                    //嵌套不能有/开头
                    path: 'main2',
                    name: 'main2',
                    component: Main2
                }
            ]
        }

 4.创建路由对象

new VueRouter({
 
})

5.编程式路由

 

 console.info(this.$router)
      //不可以回退
      this.$router.replace("/login")
        //可以回退
      // this.$router.push("/login")

6.路由守卫

 

    //导航守卫   如果不写next（）是不会进行放行的
router.beforeEach((to, from, next) => {
        // console.info("..................当前导航即将离开" + from.path)
        // console.info("...................即将进入" + to.path + "这个请求")
        // if (to.path == "/login") {
        //     // 权限验证
        //     next()
        // } else {
        //     next("/login")
        // }
        next()
    })
    //   router.afterEach((to,from)=>{
    //       console.info("after.................."+to.path+";"+from.path)
    //   })

使用

1.创建router文件夹  创建index.js 

2.导入组件

 注意：组件必须要导入出去

3.创建路由表和路由对象

//导入 组件      ---前提组件要导出
import HelloWorld from '../components/HelloWorld.vue'
import Login from '../components/Login.vue'
import Main1 from '../components/Main1.vue'
import Main2 from '../components/Main2.vue'
//导入router
import VueRouter from 'vue-router';
 
//第一步创建路由表
var routes = [{
            //请求路径  ==getMapping
            //path必须以/ 开头   ，如果是嵌套路由，子路由不允许
            //  /代表默认选定
            path: "/",
            //路由名称（唯一）
            name: "a",
            //路由需要响应的组件
            component: HelloWorld
 
        },
        {
            //请求路径  ==getMapping
            //path必须以/ 开头   ，如果是嵌套路由，子路由不允许
            path: "/login",
            //路由名称（唯一）
            name: "Login",
            //路由需要响应的组件
            component: () =>
                import ('../components/Login.vue'),
            children: [{
                    //嵌套不能有/开头
                    path: 'main1',
                    name: 'main1',
                    component: Main1
                },
                {
                    //嵌套不能有/开头
                    path: 'main2',
                    name: 'main2',
                    component: Main2
                }
            ]
        },
        {
            path: '/a/:id',
            name: "Login2",
            component: HelloWorld
        }, {
            //转发
            path: '/test',
            name: 'test',
            redirect: '/login'
        }
    ]
    //第二步创建路由对象  
var router = new VueRouter({
        //属性名：值  
        //routes:routes   相当于routes  相同的话就可以缩写
        routes
    })
    //导航守卫   如果不写next（）是不会进行放行的
router.beforeEach((to, from, next) => {
        // console.info("..................当前导航即将离开" + from.path)
        // console.info("...................即将进入" + to.path + "这个请求")
        // if (to.path == "/login") {
        //     // 权限验证
        //     next()
        // } else {
        //     next("/login")
        // }
        next()
    })
    //   router.afterEach((to,from)=>{
    //       console.info("after.................."+to.path+";"+from.path)
    //   })
 
export default router

4、在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import VueRouter from 'vue-router';
Vue.config.productionTip = false
Vue.use(VueRouter)
 
 
 
    //第三步 在实例中绑定路由  
new Vue({
    render: h => h(App),
    router
}).$mount('#app')

5.在App.vue中使用

二、Axios异步通信

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。他跟jquery的ajax差不多

官网：起步 | Axios 中文文档 | Axios 中文网

 1、特性

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应:既可以拦截请求也可以拦截响应

• 转换请求数据和响应数据：（请求参数类型以及响应结果类型）

• 取消请求

• 自动转换 JSON 数据（json类型）

• 客户端支持防御 XSRF

2、安装

$ npm install axios

3、案例

// 为给定 ID 的 user 创建请求
// axios对象
// 发送get请求并处理响应结果 
axios.get('/user?ID=12345')
  // 请求成功执行的方法回调
  .then(function (response) {
    console.log(response);
  })
// 抛出异常时执行的方法
  .catch(function (error) {
    console.log(error);
  });
 
// 上面的请求也可以这样做
axios.get('/user', {
    //简单参数
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4、api

config

• method

请求方式

• url

请求地址

• data

请求参数

• params

请求参数get

axios.request(config)

自定义异步请求，可以通过config.method来设置请求类型 ==$.ajax

axios.get(url,config)

发送get异步请求 ==$.get

axios.delete(url,config)

发送delete类型的请求 == request config.method='delete'

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

了解即可  ，一般我们后期使用的都是封装的

5.具体属性

{
   // `url` 是用于请求的服务器 URL
  url: '/user',
 
  // `method` 是创建请求时使用的方法
  method: 'get', // default
 
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
 
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],
 
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],
 
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
 
   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
 
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
 
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
 
   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default
 
  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },
 
 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
 
  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default
 
   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
 
  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
 
   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
 
  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
 
   // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
 
  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
 
  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default
 
  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default
 
  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
 
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
 
  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

6、响应结构

{
  // `data` 由服务器提供的响应
  data: {},
 
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
 
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
 
  // `headers` 服务器响应的头
  headers: {},
 
   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

7、拦截器

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    return response.data;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

8.api的封装

import axios from 'axios';
import qs from 'qs';
 
 
// var baseURL = "http://localhost"
// var baseURL = ""
export const get = function(url) {
 
    return axios({
        method: 'get',
        url,
        params: {
            "name": 'ada'
        }
        // baseURL
 
    })
 
}
 
 
export const post = function(url, data) {
 
    return axios({
        method: 'get',
        url,
        //qs.stringify(data) 是序列化进行
        data: qs.stringify(data)
    })
}
 
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    return response.data;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

• 将封装的方法通过js prototype原型封装到VUE

• 这样在app.vue中就可以直接使用this.了

 

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import VueRouter from 'vue-router';
import store from "./store/index.js"
Vue.config.productionTip = false
    // import ElementUI from 'element-ui';
    // import 'element-ui/lib/theme-chalk/index.css';
Vue.use(VueRouter)
    // Vue.use(ElementUI);
import {get } from "./api/index.js"
 
//设置
Vue.prototype.get = get
    //第三步 在实例中绑定路由  
new Vue({
    render: h => h(App),
    router,
    store
}).$mount('#app')

像这样

 9、跨域请求

因为我们再8080为端口的项目中去访问另外一个端口为80的项目来获取数据，默认我们的请求是不允许被别的请求直接访问。

• 后端请求中允许跨域

1. @CrossOrigin

允许请求跨域访问

2.设置配置类

package com.sofwin.configer;
 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
/**
 * @packageName: com.sofwin.configer
 * @author: 温涛
 */
@Configuration
public class CrosConfiger {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

3.nodejs中代理访问后端服务

这样的话url就不需要写太多了

名字一定要叫vue.config.js 

const { defineConfig } = require('@vue/cli-service')
let proxyObj = {}
proxyObj['/'] = {
    ws: false,
    target: 'http://localhost:80',
    // 将前段项目映射到target
    changeOrgin: true,
    pathRewrite: {
        '^/': '/'
    }
}
 
module.exports = defineConfig({
    transpileDependencies: true,
    //关闭语法检查
    lintOnSave: false,
    devServer: {
        host: 'localhost',
        port: '8080',
        https: false,
        proxy: {
            "/": {
                target: 'http://localhost:80/',
                ws: false,
                changeOrgin: true,
                pathRewrite: {
                    '^/': '/'
                }
 
            }
        }
    }
})

整个项目的代码在gitee上