axios
-
对axios 二次封装 在comment 建$http.js
import axios from 'axios' -
利用axios 对象的方法create, 去创建一个axios 实例
//$http 就是axios 只不过稍微配置了一下 const $http = axios.create({ //配置对象 //基础路径，发送请求的时候，路径当中会出现api 接口当中：路径都带有 /api baseURL:"/api", //代表请求超时的时间5s timeout:5000, }) //请求拦截器 在发送请求之前，请求拦截器可以检测到，可以在请求发送出去之前做一些事情 $http.interceptors.request.use(config => { //config:配置对象，对象里面有个很重要的 ，header请求头 return config; }, error => { return Promise.reject(error); if(token == ''){ this.$router.push('/login') } else if(token !== ''){ return config } }) //响应拦截 $http.interceptors.response.use(response => { //成功的回调函数，服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情 return response; }, error => { return Promise.reject(error); }) export default $http
3. http.js
1. ```javascript
import axious from 'axios'
const $http = axious.create({
BaseURL: '',
timeout: 3000
});
$http.all = (arr) => {
return axious.all(arr)
}
$http.interceptors.request.use(config => {
return config;
}, error => {
return Promise.reject(error);
})
$http.interceptors.response.use(response => {
return response;
}, error => {
return Promise.reject(error);
})
export default $http
-
//main.js import $http from './common/http' Vue.prototype.$http =$http -
//请求github mounted(){ this.$http('https://api.github.com/users/hk1255748479') .then( res=>{ console.log(res.data); } } -
//请求后端 import $http from "../common/http"; export default function(config){ return $http.get('/api/users) }
"axios": "^0.27.2",
请求头 后端给前端 前端要存起来
import axious from 'axios'
const $http = axious.create({
BaseURL ： ''//生产要加
timeout：3000
})；
$http.all=(arr)=>{
return axious.all(arr)
}
//请求拦截器
$http.interceptors.request.use(config=>{
//发送请求之前做
console.log(config);
letuserTocken = localStorage.getItem('user_token');
if(!userToken){
$http.get('/api/users/get/token')
.then(
res=>{
if(res&& res.data && res.data.code == 100){
localStorage.setItem('user_token',res.data.data)
}
}
)
}
config.headers['User-Token']='kfkfkkfkf'
return confing;
},error =>{
return Promise.reject(error);
})
//响应拦截
$http.interceptors.response.use(response =>{
return response;
},error =>{
return Promise.reject(error);
})
export default $http
main.js
import $http from './common/http'
Vue.propertype.$http = $http
import $http from '../common/http'
export default function(){
return $http.get('./api/users');
}
express
express 后端框架
npm install -g express-generator
express demo - e
cd demo
npm install
npm start
3000
users.js
请求方式GEt 请求路径 /user/get/token
router.get('/get/token',function(req,res,next){
res.send({
code:100,//给响应拦截用
data:'AAAtttttttt'//伪造
})
})
index.js
router.beforeEach((to,from,next)=>{
let userInfo = localStorage.getItem('user');
if(!)
})
### vue-router
#### 命名路由
##### 1、作用：可以简化路由跳转
1.简化跳转
~~~javascript
##简化后直接通过名字跳转
<router-link :to="{name:"hello"}">跳转<router-link>
## 简化写法配合传递参数
<router-link
:to="{
name:"hello",
query：{
id:666
}
}"
>跳转<router-link>
~~~
#### 路由的params参数
##### 1、配置路由，声明接收的params 参数 使用占位符声明接收的params 参数
##### 2、传递参数
~~~javascript
#跳转路由并携带params to 的字符串写法
<router-link to="/home/message/detail/666/你好">跳转<router-link>
#跳转路由并携带params to的对象写法
<router-link
:to="{
name:"hello",
query：{
id:666,
title:'你好'
}
}"
>跳转<router-link>
~~~
> 特别注意：路由携带params 参数时，若使用to的对象 写法，则不能使用path 配置项，必须使用name配置！
```JavaScript
### this.$route 路由 "参数对象" this.$router 路由 "导航对象"
### 在 hash 地址中， ？后面的参数项，叫做查询参数
this.$route.query
### 以/传参 在hash地址中 /后面参数项 叫做路径参数 使用以下来访问
this.$route.params
### 在this.$route 中？后面的参数项，叫做查询参数 path 只是部分路径 fullpath是完整路径
路由的props配置
在组件里用 props:[ ] 接收
1、值为对象
props:{a:1,b:2}
2、值为布尔值
props:true 该路由组件会把收到的所有 params 参数
3、值为函数
props:($router){ {query:{id,title}}
return {
id:$router.params.id,
title:$router.query.name
}
}
router-link的 replace 属性
1、作用：控制路由跳转时操作浏览器历史记录的模式
2、浏览器的历史记录有两种写入方式：分别为 push和replace，push 是追加历史记录，replace 是替换当前记录。路由跳转的的时候默认push
缓存路由组件
keep-alive属性 include 要缓存的组件名 可以多个
两个新的生命周期钩子
activated deactivated
路由守卫
1、作用：对路由进行权限控制
2、分类：全局守卫、独享守卫、组件内守卫
路由切换之前 路由切换之后
const routes = [
{
name:''
paht:''
meta:{} // 路由元
children:{},
beforeEnter:(to,form,next)=>{} // 独享路由 可以配合全局后置路由
}
]
const router = new VueRouter({
mode:"history",
base:'',
routes
})
//在暴露出去之前 前置路由守卫
router.beforeEach((to,from,next)=>{
if(to.meate.isAuth){
if(){
...
next()
}else{
}
}else{
next()
}
})
// 全局后置路由守卫 --- 初始化的时候被调用，每次路由切换之后被调用
router.afterEach((to,form)=>{
})
export default router
//创建路由实例
//全局
router.beforeEach(to,from,next){
next()表示放行的函数
}
next()
1.直接放行
2.强制跳转 next('/login')
3.强制停留 next(false)
//分析
1.要拿到用户将要访问的hash地址
2.判断hash 地址是否等于 /main
3.如果等于/main 证明需要登录之后，才能访问
4.如果不等于/main ,则不需要登录，直接放行next（）
5.如果访问的地址是/main .则需要读取localStorage 中的token
6.如果有token ，则放行
7.如果没有token，则强制跳转到/login登录页面
router.beforeEach(function (to, from, next) {
if (to.path == '/main') {
const token = localStorage.getItem('token')
console.log(token);
if (token) {
next()
} else {
next('./login')
}
} else {
next()
}
next()
})
组件内路由
# 进入守卫 ； 通过路由规则，进入该组件时被调用， 导入注册组件就不是通过路由规则
beforeRouteEnter(to,from,next){
}
# 离开守卫 ； 通过路由规则，离开该组件时被调用
beforeRouterLeave(to,from,next){}
beforeRouteLeave(to,from,next){
console.log('离开了')
next() // 要放行不然离不开
},
路由器两种工作模式
1、hash 模式：
1、地址中永远带着#号。
2、若以后将地址通过第三方手机App分享，若app效验严格，则地址会被标记为不合法。
3、#及其后面的内容就是hash值 、hash值不会包含在http 请求中，即：hash 值不会带给服务器。
兼容性好
2、history
1、地址干净、美观
2、兼容性和hash模式相比略差
3、应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
https://www.npmjs.com/ npm 包
###声明式导航
###编程式导航
router.push({
path:'/home?id'
})
router.replace({
path:'/goods/book'
})
this.$router.push('/home')
1.this.$router.push('hash地址')
2.this.$router.replace('hash 地址')
3.this.$router.go()
4.this.$router.back()
5.this.$router.forward()
mode:history :域名/path hash 当前文件路径#/path abstract 地址无变化
VUEX
npm i vuex
vue2 中 只能用vuex 的3版本
vue3 中 只能用vuex 的4版本
1、基本使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const action = {}
const mutations = {}
const state = {}
export default new Vuex.store({
actions,
mutations,
state,
})
2、组件中读取vuex的数据：$store.state.name
3. getters 的使用
-
概念：当state中的数据需要经过加工后再使用时，可以使用getter加工
-
组件中读取数据：
$store.getters.bigSum
2、四个map方法的使用
1.mapState方法：用于帮助我们映射state中的数据为计算属性
computed：{
// 借助mapState生成计算属性 （对象写法）
...mapState({sum:'sum'})
// 数组写法
...mapStates(['sum'])
}
正则匹配
\w 任意字母数字下划线 [A-z0-9_]
\W
购物车实现
-
状态管理器 vuex store index.js
import Vue from "vue"; import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({ state:{ carList:[] }, getters:{ }, actions:{ add({commit},itemObj){ commit('dealadd',itemObj) } }, mutations:{ dealadd(state,itemObj){ let storage = JSON.parse(localStorage.getItem('carList')); console.log(storage); let flag=-1; storage.forEach((item,index)=>{ if(item.gid==itemObj.gid){ flag = index } }) if(flag!=-1){ storage[flag].num++ state.carList = storage }else{ state.carList.push(itemObj) } localStorage.setItem("carList",JSON.stringify(state.carList)); } } }) export default store main.js import store from './store' -
点击添加购物车按钮 --> 获取id --> 过滤数组 --> 传入状态管理器 -->存入本地存储
eslint关闭检查
lintOnSave：false
rest client+
es6
-
#es6 模块化 按需导出 export let s1 = 'aa' 按需导入 import {s1} from '模块标识符 按需导入名称要和按需导出一致 写在花括号内的都是按需导入 as 关键字重命名 按需导入可以和默认导入一起使用 import info,{s1} from '模块标识符 直接导入并执行模块中代码 并不需要得到模块中向外共享的成员 ## promise 1.回调地狱 缺点： 代码耦合性太强，牵一发而动全身，难以维护。 大量冗余的代码相互嵌套，代码可读性变差 2.promise 的基本概念 **promise 是一个构造函数 · 我们可以创建promise 的实例 · new 出来的promise实例对象，代表一个异步操作 ** promise.peototype 上包含一个 .then()方法 ·都可以通过原型链方式访问到 .catch()可以提前 ，出错不会影响下面代码执行 ##在 async 方法中，第一个await之前的代码会同步执行，await之后代码会异步执行 ## EventLoop 1.同步任务（synchronous) js执行 线程 2.异步任务（asyncchronous）委托给宿主环境 执行完 通知主线程 执行异步任务回调函数。 #基本概念 javascript 主线程从"任务队列"中读取异步任务的回调函数放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制成为EventLoop(时间循环) ##异步任务（宏任务 微任务）
监听器
方法格式的监听
1.无法在刚进入页面时自动触发
2.如果监听是一个对象，对象属性发生改变不会触发监听器
如果要监听对象子属性的变化 ，则必须包裹一层单引号
对象格式：
1.可以通过deep选项，让监听器深度监听每个属性变化
watch:{
usernamr:{
handler(newVal,oldVal){
},
immediate:true ,//控制监听器是否自动触发
deep:true
}
}
如何在 Sublime 文本编辑器中使用终端？
https://blog.csdn.net/xixihahalelehehe/article/details/124117723
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
