小白的vue学习之路03

最新推荐文章于 2024-02-02 16:44:55 发布
最新推荐文章于 2024-02-02 16:44:55 发布
阅读量236 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37770640/article/details/80733853
版权

#### 复习
* 路由操作的基本步骤
```javascript
引入对象
import VueRouter from 'vue-router';
安装插件
Vue.use(VueRouter);   挂载属性的行为
创建路由对象
let router = new VueRouter({
    routes:[
        { name:'xxx',path:'/xxx',组件  }
    ]
});
将路由对象放入到options中new Vue()
new Vue({
    router
})
```
* 套路
    - 1: 去哪里  <router-link :to="{name:'bj'}"></router-link>
    - 2: 导航(配置路由规则) `{name:'bj',path:'/beijing',组件A}`
    - 3: 去了干嘛(在组件A内干什么)
        + 在created事件函数中，获取路由参数
        + 发起请求，把数据挂载上去
* 参数
    - 查询字符串（#/beijing?id=1&age=2）
        + 1: 去哪里  <router-link :to="{name:'bj',query:{id:1,age:2}  }"></router-link>
        + 2: 导航(配置路由规则) `{name:'bj',path:'/beijing',组件A}`
        + 3: 去了干嘛(在组件A内干什么)
            * `this.$route.query.id||age`
    - path(#/beijing/1/2)
        + 1: 去哪里  <router-link :to="{name:'bj',params:{id:1,age:2}  }"></router-link>
        + 2: 导航(配置路由规则) `{name:'bj',path:'/beijing/:id/:age',组件A}`
        + 3: 去了干嘛(在组件A内干什么)
            * `this.$route.params.id||age`
* 编程导航
    - 一个获取信息的只读对象($route)
    - 一个具备功能函数的对象($router)
    - 根据浏览器历史记录前进和后台 `this.$router.go(1|-1);`
    - 跳转到指定路由  `this.$router.push({ name:'bj'  });`
* 嵌套路由
    - 让变化的视图(router-view)产生包含关系(router-view)
    - 让路由与router-view关联，并且也产生父子关系
* 多视图
    - 让视图更为灵活，以前一个一放，现在可以放多个，通过配置可以去修改


* axios:
    - 开始:
        + 跨域 + 默认的头是因为你的数据是对象，所以content-type:application/json
        + 有OPTIONS预检请求（浏览器自动发起）
    - 最终:
       + 当我们调整为字符串数据，引起content-type变为了www键值对
       + 没有那个OPTIONS预检请求

    - 总结： 跨域 + application/json 会引起OPTIONS预检请求，并且自定义一个头(提示服务器，这次的content-type较为特殊)，content-type的值

    - 服务器认为这个是一次请求，而没有允许content-type的头，
    - 浏览器就认为服务器不一定能处理掉这个特殊的头的数据
    - 抛出异常
    - 在node服务器 response.setHeader("Access-Control-Allow-Headers","content-type,多个");
    - formdata的样子:  key=value&key=value 
    
* axios属性关系
    - options: headers、baseURL、params
    - 默认全局设置(大家都是这么用)
        + Axios.defaults-> options对象
    - 针对个别请求来附加options
    - axios.get(url,options)
    - axios.post(url,data,options)


#### 今日重点
* axios
* watch
* 计算属性
* 项目


#### axios
* 合并请求
* axios.all([请求1,请求2])
* 分发响应  axios.spread(fn)
* fn:对应参数(res)和请求的顺序一致
* 应用场景:
    - 必须保证两次请求都成功，比如，分头获取省、市的数据

* 执行特点: 只要有一次失败就算失败，否则成功

main.js

//引入一堆
import Vue from 'vue';
//主体
import App from './components/app.vue';

//引入
import Axios from 'axios';

Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';


//给Vue原型挂载一个属性
Vue.prototype.$axios = Axios;


//new Vue 启动
new Vue({
    el: '#app',
    render: c => c(App),
})

app.vue

<template>
    <div>
        {{data}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                data:[]
            }
        },created(){
           
           //将两个请求一起发送，只要有一个失败，就算失败，成功只有是全体成功
           
           function getMsg(res1,res2){
             console.log('成功啦');
             console.log(res1);
             console.log(res2);
           } 
           // 获取省市数据的需求
           this.$axios.all([ 
            
            this.$axios.post('postcomment1/300','content=123'),
            this.$axios.get('getcomments/300?pageindex=1')
           ])
           //分发响应
           .then(this.$axios.spread(getMsg))
           .catch(err=>{
            console.log(err);
           })
          
          

        }
    }
</script>


#### 拦截器
* 过滤，在每一次请求与响应中、添油加醋
* axios.interceptors.request.use(fn)  在请求之前
* function(config){ config.headers = { xxx }}   config 相当于options对象
* 默认设置 defaults 范围广、权利小
* 单个请求的设置options get(url,options)  范围小、权利中

* 拦截器 范围广、权利大

main.js

//引入一堆
import Vue from 'vue';
//主体
import App from './components/app.vue';

//引入
import Axios from 'axios';

Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';

//默认设置
Axios.defaults.headers = {
    accept: 'defaults'
}

//拦截器
Axios.interceptors.request.use(function(config) {
    //console.log(config);
    //return false; //返回没有修改的设置,不return config 就是一个拦截
    //个性化的修改
    // config.headers.accept = 'interceptors';
    config.headers = {
        accept: 'interceptors'
    }

    return config;
})





//给Vue原型挂载一个属性
Vue.prototype.$axios = Axios;


//new Vue 启动
new Vue({
    el: '#app',
    render: c => c(App),
})

结果是拦截器那个

  accept: 'interceptors'

app.vue

<template>
    <div>
        {{data}}
    </div>
</template>
<script>
    export default {
        data(){
            return {
                data:[]
            }
        },created(){
           
           //拦截器对每一次请求都有效
          this.$axios.get('getcomments/300?pageindex=1',{
            headers:{
              accept:'get'
            }
          })
          .then(res=>{
            console.log(res);
          })
          .catch(err=>{
            console.log(err)
          })
          


          this.$axios.get('getcomments/300?pageindex=1')
          .then(res=>{
            console.log(res);
          })
          .catch(err=>{
            console.log(err)
          })
          

        }
    }
</script>

#### token(扩展)
* cookie 和session的机制，cookie自动带一个字符串
* cookie只在浏览器
* 移动端原生应用，也可以使用http协议，1:可以加自定义的头、原生应用没有cookie
* 对于三端来讲，token可以作为类似cookie的使用，并且可以通用
* 拦截器可以用在添加token上
#### 拦截器操作loadding
* 在请求发起前open，在响应回来后close
main.js 
//引入一堆
import Vue from 'vue';
//主体
import App from './components/app.vue';

//引入
import Axios from 'axios';

//引入mint-ui
import Mint from 'mint-ui'; //  export default 整个对象
// import { Indicator } from 'mint-ui'; //export 整个对象.Indicator -> {Indicator}
//引入css
import 'mint-ui/lib/style.css';
//安装插件，注册一堆全局组件
Vue.use(Mint);




Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/';

//默认设置
Axios.defaults.headers = {
    accept: 'defaults'
}

//拦截器
Axios.interceptors.request.use(function(config) {
    Mint.Indicator.open();
    //请求发起之前  显示loadding
    return config;
})

Axios.interceptors.response.use(function(config) {
    //在响应回来之后，隐藏loadding
    Mint.Indicator.close();
    // console.log(config);
    return config;
})



//给Vue原型挂载一个属性
Vue.prototype.$axios = Axios;


//new Vue 启动
new Vue({
    el: '#app',
    render: c => c(App),
})
app.vue 
<template>
    <div>
        <button @click="send">发请求1</button>
        <button @click="send2">发请求2</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                data:[]
            }
        },created(){
        },
        methods:{
          send(){
             //拦截器对每一次请求都有效
            this.$axios.get('getcomments/300?pageindex=1',{
              headers:{
                accept:'get'
              }
            })
            .then(res=>{
              console.log(res);
            })
            .catch(err=>{
              console.log(err)
            })
          },
          send2(){
             //拦截器对每一次请求都有效
            this.$axios.get('getlunbo',{
              headers:{
                accept:'get'
              }
            })
            .then(res=>{
              console.log(res);
            })
            .catch(err=>{
              console.log(err)
            })
          }
        }
    }
</script>


#### 监视

* watch 可以对（单个）变量进行监视，也可以深度监视

app.vue

<template>
	<div>
        <button @click='change'></button>
	
	</div>
</template>
<script>

export default{
	data(){
        return{
        text:"",
        persons:[{name:"zxy"},{name:'yp'}]
    }},
    methods:{
        change(){
            this.text="abc"
            this.persons[0].name="bb"
        }

    },
    watch:{
        text:function(val,oldval){
            console.log("数值改变了,kk")
        },
        persons:{
            handler:function(val,oldval){
            console.log("开心")
            },
            deep:true
        }     
    }
  

  }

</script>

<style>

</style>

* 如果需求是对于10个变量进行监视？
* 计算属性computed 可以监视多个值，并且指定返回数据，并且可以显示在页面
* 都是options中的根属性
    - watch监视单个
    - computed可以监视多个this相关属性值的改变,如果和原值一样

    - 不会触发函数的调用，并且可以返回对象

app.vue

<template>
    <div>
        单价:<input type="text" name="" v-model="price"> * 
        件数:<input type="text" name="" v-model="num"> *
        折扣:<input type="text" name="" v-model="rate"> =
        {{sum.name}} {{sum.price}}
        
    </div>
</template>
<script>
    export default {
        data(){
            return {
              price:0,num:0,rate:0
            }
        },created(){},
        methods:{},
        computed:{
            sum(){
              console.log('触发了');
              //如果当函数内涉及到的this.相关属性发生改变以后触发，并返回一个值(可以是对象)
              return {
                name:'古龙水',
                price:this.price * this.num * (this.rate/100)
              }
            }
        }
    }
</script>




#### 相关命令


```javascript
npm i mint-ui vue-preview axios vue-router monent vue - S;

npm i webpack html - webpack - plugin css - loader style - loader less less - loader autoprefixer - loader babel - loader babel - core babel - preset - es2015 babel - plugin - transform - runtime url - loader file - loader vue - loader vue - template - compiler webpack-dev-server - D

```



weixin_37770640
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue Markdonwn学习笔记
11-17
自己一点一点总结的笔记，概括全面，不要觉得贵，我真的总结的很全面，相当适合小白等初学者
Vue项目中前端请求后端数据的两种方式
Kisushotto的博客
02-27 1万+
1、JS方式，使用fetch函数，较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&username=" + this.username + "&email=" + this.email + "&address=" + this.address).then(res => re
使用 Vue 路由 GET 和 POST 的参数注意要点
Muxiu
05-16 207
必须区分 和 参数，请勿弄混了 和 的参数（ —> ） （ —> ）前端vue api接口 get方法模板演示： POST 方法参数： 前端vue api接口 post方法模板演示：
vue文件下载，get/post
sweet__queen的博客
03-31 1225
get/post下载
vue调接口 - get / post
jianyi599的博客
05-03 414
先引入 》 import request from "./request";其中的get请求可以更换为post请求。
初学vue--axios的接口API和请求地址的封装以及get请求（学习笔记--保姆级）
weixin_53000350的博客
01-15 1544
axios的get请求以及request和API的封装
前端Vue学习技术大纲以及学习文章
02-26
适合人群：想要学习前端Vue的小白，梳理复习知识的学习者 能学到什么：通过Vue CLI（命令行界面）工具可以快速创建和管理Vue.js项目。使用Vue CLI可以自动配置开发环境，并提供了许多实用的命令和工具，方便开发者...
小白初入前端之Vue.js的学习之路-vue学习第三弹.docx
12-27
小白初入前端之Vue.js的学习之路-vue学习第三弹.docx
web前端--vue2技术+涵盖多个知识点+适合刚学习vue的小白使用，促进学习
07-14
使用人群：适合刚学习vue学习的小白，可以作为一个引领学习的文档，针对vue中常用的知识点进行学习和常用的注意点学习,在学习中就可以针对性的学习，使学习变得更高效一些。 使用场景及目标：在学习vue2的过程中，...
Vue2学习笔记-前端开发
最新发布
03-03
Vue2学习笔记-前端开发
Vue发送Get 和 Post 请求以及获取数据
qq_59833893的博客
02-02 1384
注意以下代码是请求处理request.js。
vue中get post不同请求方式，传参的区别
qq_39695210的博客
05-12 874
1.post请求 method: "post", data: params, export function getAttendanceRate(params) { return request({ url: prefix + "/dashboard/attendance_rate", method: "post", data: params, }); } 2. get请求 method: "get"，params: params, export func.........
vue-request发起网络数据请求
wtyzky的博客
12-27 1万+
首先要引入vue-request.js,且顺序在vue.js后面，vue-request.js依赖与vue.js //get方式发起网络数据请求 getInfo(){ this.$http.get('URL').then(function(result){ console.log(result.body) }) } //post方式发起网络数据请求 //post需要设置第三个参数 postI...
Vue中的request请求
weixin_50675778的博客
09-19 1385
接口使用，request请求获取结果,GET/POST
vue中get和post请求
热门推荐
zhangjing1019的博客
09-12 4万+
vue中和后台交互，首先要引用vue-resource.js vue-resource.js是专门和后台进行交互 vue中ｇｅｔ请求 function getRequest(url, params) { return new Promise((resolve, reject) => { Vue.$http.get( url, {
VUE常用的四种请求方式(get,post,put,delete)
zhanglide0526的博客
07-31 2万+
1.1axios的get请求 1.2 axios的post的请求 1.3 axios的put的请求 1.4 axios的delete请求
VUE前端发送post请求，后台通过request.getparamter无法获取属性值
奋斗者潘的博客
06-17 1992
vue 前端js代码片段，如下： 前端发送post请求 Springboot后台无法从request中获取属性值 二、使用Post工具进行测试，如下： 通过调试后台，是可以获取得属性值的. 通过分析，最后发现是：vue前端和post工具传输入数据格式不一致 1.vue前端post请求采用的是json数据格式 2.而用post测试工具采用的是form表单方式 所以，最后问题是定位出来了。 总结，还是粗心并且没有把数据传输格式想明白。 通过以下代码片段...
Vue是如何发送ajax？vue如何获取get、post请求
Vue是如何发送ajax？vue如何获取get、post请求？
08-11 375
1.1 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 axios的github:https://github.com/axios/axios 1.2 引入axios 可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 1 2 引入axios-0.18.0.js 1.3 案例 1.3.1 get请求 // 为给定
vue get请求怎样传数组参数
a576837179的博客
06-08 3905
场景: vue中在与后端进行数据交互时，使用axios发送请求，不做配置直接使用get请求传递数组类型参数的时候，后端是无法接收数据的，需要对axios一些简单的配置才能让后端完美的接收数组 let params = ['2021715','20210415'] list(data){ return request({ url: '/getList', method: 'get', params: data, }) } 上述代码在不做配置的时候请求信息为：/list?season[]=
小白vue3学习路线
08-12
如果你是一个小白，对Vue3还不太熟悉，我可以给你一个简单的学习路线。首先，你可以从Vue的基础开始学习，了解Vue的核心概念，包括组件、指令、响应式数据等。你可以通过阅读官方文档或者一些入门教程来学习这些基础...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值