vue-study

weixin_46460982

已于 2022-04-17 10:27:18 修改

阅读量478

点赞数

文章标签： vue.js 前端 javascript

于 2022-02-18 21:42:54 首次发布

本文链接：https://blog.csdn.net/weixin_46460982/article/details/122566249

版权

终止批处理操作快捷键：ctrl+c

在这里插入图片描述
如：

{{a}}
{{b}}

<h2> {{message }} </h2>
<p> {{name}} </p>

在这里插入图片描述

在这里插入图片描述
如：

{{item}}

在这里插入图片描述

在这里插入图片描述
vue的template模板设置file-settings-live-templates-添加写的模板
之后直接就可以生成骨架

2.v-once指令：

在命令行修改不改变值

在这里插入图片描述
3.v-html 返回一个网址

data:{ message:'hello', url:' 百度一下 ' }![在这里插入图片描述](https://img-blog.csdnimg.cn/c030b4a8abc04705a3d697d93c574c76.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ2NDYwOTgy,size_20,color_FFFFFF,t_70,g_se,x_16) 4.v-text 后面拼接字符串会被覆盖掉

v-textv-text
5.v-pre
把标签内容原封不动显示出来不解析

在这里插入图片描述
data里面写从后端服务器传来的url，再动态引入标签

孩子腋下体温两边相差0.5度正常吗

在这里插入图片描述

getClasses:function (){ //也可以用自定义类名 return { active:this.isactive,line:this.isline }

7.计算属性使用
（1）

//计算属性不用加（）
computed:{
fullname:function (){
return this.first+’ ‘+this.last;
}
（2） v-bind 绑定用方法需要加（）

methods:{
getfullname:function (){
return this.first+’ '+this.last;
}
}

8.计算属性 computed内默认有getter和setter方法
所以使用computed属性时已经默认调用getter方法不用加小括9.计算属性 computed与方法methods里定义方法区别
方法里做操作时如for循环加法methods调用n次
computed属性只调用一次
在这里插入图片描述

var,let都用于定义变量
变量
1.var 没有块级作用域
ES5中的var是没有块级作用域的
ES6中的let是由块级作用的(if/for)
ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题.
ES6中,加入了let,let它是有if和for的块级作用域

在这里插入图片描述
// 1.注意一:一旦给const修饰的标识符被赋值之后，不能修改 const name = 'why '; name = 'abc ';
//2.注意二;在使用const定义标识符,必须进行赋值//const name;
// 3.注意三:常量的含义是指向的对象不能修改，但是可以改变对象内部的属性．

const name = ‘hhh’;
const app = {
name: ‘lyyy’,
age: 22
}
console.log(app);
app.name = ‘qqq’;
app.age = 12
console.log(app);

在这里插入图片描述

})

const app=new Vue({
el:’#app’,
/父组件/
components: {
cpn2:cpnC2,
cpn1:cpnC1
}
})

//全局组件，语法糖不用extend 直接创建+注册
Vue.component(‘cpn1’,{
template:`

标题

内容

` })

const app=new Vue({
el:’#app’,
data:{
message:‘hello’
},
//注册局部组件的语法糖
components:{
‘cpn2’:{
template:`

标题2

内容2

在这里插入图片描述

标题

内容

2.template标签

内容

7.npm run build后dist下的index.html会自动加如一个app标签

在这里插入图片描述

在这里插入图片描述
1.安装js压缩插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2.在webpack-config.js中配置
const UglifyjsWebpackPlugin=require(‘uglifyjs-webpack-plugin’)
plugins中 new UglifyjsWebpackPlugin()
3.npm run build
dist的bundle.js中变成压缩过的文件
在这里插入图片描述

1.开发效率低每次都需要npm run build解决方法：搭建本地服务器
服务器会把每次改完的代码dist文件夹里面的文件放到内存，没有映射到硬盘，速度提高
（1）搭建：先安装：npm install webpack-dev-server@2.9.3

（2）配置：在webpack.config.js中添加devServer

在这里插入图片描述

(3)跑项目命令:1.因为webpackdev-server是局部安装，所以应该写相对路径
2.在package.json中配置
在这里插入图片描述
3.npm run dev 会默认先在本地找dev
4.默认搭建了一个服务器

在这里插入图片描述

5.点击地址在这里插入图片描述
6.改动main.js的内容不用重新打包，浏览器也不需要手动刷新直接更新改动的内容,测试不需要手动打包
7.最终部署到服务器再打包npm run build
**补充：**测试时需要手动点击链接此时可以在dev里加一个
–open,npm run dev后就会自动打开
在这里插入图片描述

webpack配置文件的分离
开发时依赖的文件和发布时依赖的文件分离
：创建一个build文件夹专门放配置文件：
1.base.config.js:公共工具
2.dev.config.js:开发时的工具
3.produ.config.js:生产时的工具
4.合并base和produ
npm install webpack-merge@4.1.5 --save-dev
在这里插入图片描述

同理：dev与base合并
在这里插入图片描述
5.npm run build 后找不到指定文件
处理：
package.json:
6.修改base.config.js的路径
path: path.resolve(__dirname, ‘…/dist’)
7.npm run build打包
8.npm run dev直接自动打包浏览器自动更新

在这里插入图片描述

在这里插入图片描述

node可以让js代码直接在终端运行，不用在浏览器上执行

ESLint规范：空格，分号有规定，想关闭
config下的index.js把useEslint改为false
在这里插入图片描述

一、runtime-compiler与runtime-only区别
1.runtime-compiler(v1) 代码量大
template -> aset -> render ->vdom ->dom
2.runtime-only(v2) 性能更高
render -> vdom -> UI

runtime-compiler：在这里插入图片描述

runtime-only：
在这里插入图片描述

（1）runtimecompiler也可以使用render函数
1.普通用法：createElement(‘标签’，{标签的属性}，[’ ‘])
main.js
render: function (createElement){
return createElement(‘h2’,
{class: ‘box’},
[‘hello world’ ,createElement(‘button’,’[按钮]’)])
2.传入组件对象
const cpn={
template:<div>{{message}}</div>,
data(){
return {
message:‘我是组件message’
}
}
}
return createElement(cpn)

}
index.html中的app会被render函数中的h2,button替换

（2）.runtimeonly不用解析template ，.vue中的template是由vue-template-compiler解析成render函数

简单总结

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compler

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

在这里插入图片描述

vuecli3：

1.与vuecli2相比少了许多配置文件夹build,config

2.运行起来需要执行package.json里的

serve,npm run serve
打包：用到build：npm run build

3.main.js中的

//产品构建时的提示信息
Vue.config.productionTip = false
/*
new Vue({
el:’#app’,
render: function (h){
return h(App)
}

})
挂载的el与mount等价
*/

new Vue({
store,
render: h => h(App)
}).$mount(’#app’)

在这里插入图片描述

执行命令：vue ui

看vue版本要去node_moudles/dist/vue/package.json或者
node_moudles/dist/vue/distvue.js

都是2.6.14

3.要修改配置文件

就在testvuecli3下创建一个vue.config.js文件(名字必须是这个)，add 相当于git add.然后执行git commit -m ‘添加配置文件’

4.修改后执行命令

git add.
git commit -m ‘修改配置文件’

1.箭头函数的使用

//箭头函数：也是一种定义函数的方式
//1.定义函数的方式：function
const aaa = function (){

}
//2.对象字面量中定义函数
const obj = {
    bbb(){

    }
}

//3.ES6中的箭头函数
const ccc=(参数列表) => {

2.箭头函数的返回值

//1.1参数问题
const sum = (num1,num2) => {
return num1 + num2
}
//1.2 放入一个参数（）可以省略
const power =num => {
return num * num
}
//2.函数中有多行代码时
const test = () => {
//1.打印Hello World
console.log(‘Hello World’);
//2.打印 Hello vuejs
console.log(‘Hello vuejs’);
}
test()

//2.2函数代码块只有一行代码
const mul = (num1,num2) => num1 * num2
console.log(mul(20, 30));
const demo = () => console.log(‘hello world’)
console.log(demo());

3.箭头函数的this（不太理解***）

问题:箭头函数中的this是如何查找的了?
答案:向外层作用域中，一层层查找this，直到有this的定义.

在这里插入图片描述

1.先运行learnvuerouter：npm run dev
在命令行执行下面命令网页不会自动刷新
(1)location.hash=’ aaa ‘**
(2).history.pushState(data,title,url)
history.pushState({},’’,‘me’)
(3).history.replaceState({},’’,‘about’) 这个不能用返回键返回
2.返回到上一个页面history.go(-1) <=>history.back()
前进页面history.forward() <=>history.go(1)

在这里插入图片描述
先在components里创建两个vue:Home.vue,About.vue

一、在index.js中配置路由相关信息

import VueRouter from “vue-router”;
import Vue from “vue”;
import Home from “…/components/Home”;
import About from “…/components/About”;
1.通过vue.use（插件），安装插件
Vue.use(VueRouter);
2.创建VueRouter对象
const routes = [
{
path:’/home’,
component:Home
},
{
path: ‘/about’,
component: About
}
]
3.配置路由和组件之间的映射关系
const router = new VueRouter({
routes
})
4.将router对象传入到Vue实例
export default router

二、在App.vue中使用路由

首页关于 *//router-view是定位router-link的位置，写在router-link的下面最终界面就在链接的下面*

![在这里插入图片描述](https://img-blog.csdnimg.cn/ff8c078ed4c14a88a9ff098168142e17.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ2NDYwOTgy,size_20,color_FFFFFF,t_70,g_se,x_16)![在这里插入图片描述](https://img-blog.csdnimg.cn/d53cd2627d96437da44c587dacdfb11e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ2NDYwOTgy,size_20,color_FFFFFF,t_70,g_se,x_16) **在index.js中添加打开网页后的默认路径**

{
path: ‘’,
redirect:’/home’
},

在这里插入图片描述
这个是用hash渲染的，要去掉#就在index.js 配置一个history模式

const router = new VueRouter({
//配置路由和组件之间的映射关系
routes,
mode:'history’
})

在这里插入图片描述

1.tag:可以把默认显示的链接改为buton，div,li…
2.replace：相当于history.replacestate 点完按钮后网页前进后退箭头不起作用
3.可以修改点击之后的按钮颜色，默认为.router-link-active
可以在index.js中用 linkActiveClass:'active’修改类名

在这里插入图片描述

3.不用router-link用代码实现跳转
在这里插入图片描述

在这里插入图片描述
1.动态获取一个用户：App.vue里添加一个data:userId，然后
动态绑定v-bind(😃
2.index.js中添加路由指定路径

在这里插入图片描述

1.认识路由的懒加载

在这里插入图片描述

把learnvuerouter打包：npm run build
在这里插入图片描述

1.路由懒加载，在index.js中修改

const Home=() => import (’…/components/Home’) ;
const About=() => import(’…/components/About’);
const User=() => import(’…/components/User’)

dist中多了3个打包后的文件在这里插入图片描述

2.嵌套路由

<1>先在components创建俩vue,HomeNews和HomeMessage
<2>在index.js中添加路由路径，注意：要想点开首页默认显示新闻就添加个redirect，最好在最前面添加
在这里插入图片描述

<3>因为是Home下面的组件所以在Home.vue下面注册链接
在这里插入图片描述

05-vue-router参数传递

URL:协议：//主机：端口/路径？查询
scheme://host:post/path?query#fragment
<1>在components创建一个Profile文件
<2>在App里面添加路由

在这里插入图片描述
<3>引入query内容

06-vue-router参数传递二

通过点击：

<1> App.vue:

<button @click=“userClick”>用户
<button @click=“profileClick”>档案

export default {
name: ‘App’,
data(){
return {
userId:‘lyy’
}
},
methods:{
userClick(){
this. $KaTeX parse error: Expected 'EOF', got '}' at position 39: \dotsis.userId) }̲, profileCl\dots$ router.push({
path:’/profile’,
query:{
name:‘kobe’,
age:22,
height:1.11
}
})

<2>Profile.vue

在这里插入图片描述

08 vue-router-全局导航守卫

在这里插入图片描述

<1> 网页头改为当前页面

User.vue:
1.created() {
console.log(‘created’);
document.title='用户’
} 在这里插入图片描述

About.vue:

2.created() {
console.log(‘created’);
document.title=‘关于’
}
在这里插入图片描述

<2> 用全局导航守卫

1.在index.js中加入：
前置守卫（guard）
router.beforeEach((to,from,next) =>{
//从from跳到to
document.title=to.matched[0].meta.title
next()
console.log(to);
})
2.上面的一个个路由加一个属性
{
path: ‘/home’,
component: Home,
meta: {
title: ‘首页’
},
{
path: ‘/about’,
component: About,
meta:{
title:‘关于’
},
} …
页面有嵌套的话（首页里面有新闻，信息等），matched[0] 数组保证每次都取到首页

<3> 全局导航守卫补充

//后置钩子（hook）

router.afterEach((to,from) =>{
console.log(’-----’);
})

组件内独享的守卫：
{
path: ‘/about’,
component: About,
meta:{
title:‘关于’
},
beforeEnter:(to,from,next) => {
console.log(‘about beforeenter’);
next()
}

10 vue-router-keep-alive及其他问题

//组件被创建后执行created函数
created() {
console.log(’ home created’);
//ocument.title=‘首页’
},
destroyed() {
console.log(‘home destoryed’);
}
每个组件刚开始被创建后，切换到其他组件会被销毁，再切换回来会重新创建组件如首页，点到首页里的信息后切换一下回来不会再显示信息界面而是新闻

解决：

1.去掉index.js中的news的children里的redirect默认显示值在这里插入图片描述
2.
/这两个函数activated,deactivated只有该组件被保持了状态使用了keep-alive时，才是有效的/
App.vue:

<keep-alive>

---- **此时destoryed无效的**

Home.vue:
data(){
return{
message:‘hello’,
path:’/home/news’ ----获取news路径
}
activated() {
console.log(‘activated’);
this.$router.push(this.path) 路由活跃时把path赋给它

},
deactivated() {
这个函数的path是跳转后的页面的地址：
console.log(this. $KaTeX parse error: Expected 'EOF', got '}' at position 48: \dotsactivated'); }̲,* 这个函数的path是跳\dots$ route.path);
this.path=this.$route.path;
跳转前的地址重新赋值给path
next()
}

11-keep-alive遇见vue-router

在这里插入图片描述
若是想让某个组件创建后重新被渲染：
App.vue: 加个exclude,多个组件间用，隔开，不要空格

12-tabber基本结构的搭建

01-tabbar-文件路径的引用问题

在这里插入图片描述

1.添加路径名，当改变文件夹时，有的文件的路径名不用改：**

alias: {
‘@’: resolve(‘src’),
‘assets’:resolve(’@/assets’),
‘compnents’:resolve(’@/components’),
‘views’:resolve(’@/views’)
}

2. 用别名替换掉MainTabBar.vue里的路径

注意：import的路径可以直接替换

在这里插入图片描述

import TabBar from “components/tabbar/TabBar”;
import TabBarItem from “components/tabbar/TabBarItem”;
在这里插入图片描述

但是引入的组件必须加一个~

修改前：
在这里插入图片描述
修改后：

1.什么情况下会用到Promise?
2.一般情况下是有异步操作时,使用Promise对这个异步操作进行封装// new ->构造函数(1.保存了一些状态信息2.执行传入的函数)
3.在执行传入的回调函数时，会传入两个参数，resolve,reject.本身又是函数
new Promise((resolve,reject)=>{
setTimeout(()=>{
成功的时候调用resolve
resolve(‘helo world’)

失败的时候调用reject
reject(‘err message’)
})
}).then((data)=>{
console.log(data);
console.log(data);
console.log(data);
console.log(data);
}).catch((err)=>{
console.log(err);
})

在这里插入图片描述

127-promise三种状态

1.sync ->同步
2.aync->异步
aysnc operation:异步操作
3.满足状态时调用resolve() -----then()
拒绝状态时调用reject（）------err()
new Promise((resolve,reject)=>{
setTimeout(()=>{
// resolve(‘hello lyy’)
reject('err message ')
},1000)
}).then(data => {
console.log(data);
}, err => {
console.log(err);
})

128-promise 的链式调用

问题：
1.网络请求： aaa ->自己处理（10h行）
2.处理：aaa 拼接上 111 ->自己处理（10h行）
3.处理：aaa111222 ->自己处理（10h行）

new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(‘aaa’)
},1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, ‘第一层10行处理代码’);
//对结果进行第一次处理
return new Promise((resolve,reject) => {
//resolve(res + ‘111’) ------- 正常处理
reject(‘errr message’) -----抛出异常信息
}).then(res => {
console.log(res, ‘第二层10行处理代码’);
return new Promise((resolve) => {
resolve(res + ‘222’)
})
}).then(res => {
console.log(res, ‘第三层10行处理代码’);
}).catch(err => {
console.log(err);
})
})

2.new Promise(resolve => (resolve结果)) 简写
return promise.resolve(’ ')

new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(‘aaa’)
},1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, ‘第一层10行处理代码’);
//2.对结果进行第一次处理
//return Promise.reject(‘error message’)
throw 'error message’
}).then(res => {
console.log(res, ‘第二层10行处理代码’);
return Promise.resolve(res + ‘222’)
}).then(res => {
console.log(res, ‘第三层10行处理代码’);
}).catch(err =>{
console.log(err);
})

3.省略promise.resolve

new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(‘aaa’)
},1000)
}).then(res => {
//1.自己处理10行代码
console.log(res, ‘第一层10行处理代码’);
//对结果进行第一次处理
return res + ‘111’
}).then(res => {
console.log(res, ‘第二层10行处理代码’);
return res + ‘222’
}).then(res => {
console.log(res, ‘第三层10行处理代码’);
})

129-promise 的all方法使用

如果有两个ajax请求
//请求1
let isResult1=false
let isResult2=false
$.ajax({
url:‘url1’,
success:function (){
console.log(‘结果1’);
isResult1=true
handleResult()
}
})
//请求2
$.ajax({
url:‘url2’,
success:function (){
console.log(‘结果2’);
isResult2=true
handleResult()
}
})
function handleResult(){
if(isResult1 && isResult2){

}
}

Promise.all([
new Promise((resolve,reject) =>{
$.ajax({
url:“url1”,
success:function (data){
resolve(data)
}
})
}),
new Promise((resolve,reject) => {
$.ajax({
url:‘url2’,
success:function (data){
resolve(data)
}
})
})

    ]).then(results =>{
        results[0]   //保存第一个请求的结果
        results[1]   //保存第二个请求的结果
    })

实例：

Promise.all([
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve({name:‘lyy’, age:19,height:168})
},2000)
}),
new Promise((resolve,reject) => {
setTimeout(() =>{
resolve({name:‘lyy2’, age:10,height:161})
},1000)
})
]).then(results =>{
console.log(results);
})
在这里插入图片描述

在这里插入图片描述

132-vuex-devtools

1.下载vuex-devtools 用谷歌浏览器需要登外网
在这里插入图片描述

在这里插入图片描述

134-vuex-getters的使用

index.js：

const store =new Vuex.Store({
state:{
counter:10,
students:[
{id:1,name:‘lyy’,age:29},
{id:2,name:‘zzl’,age:22},
{id:3,name:‘jeny’,age:20},
{id:4,name:‘tom’,age:10},
{id:5,name:‘kobe’,age:19}
]
},
mutations:{
increment(state){
state.counter++
},
decrement(state){
state.counter–
}
},
actions:{

//计算
getters:{
powerCounter(state){
return state.counter * state.counter
},
more20stu(state){
return state.students.filter(s => s.age>=20)
},
more20stuLength(state,getters){
return getters.more20stu.length
},
moreAgestu(state){
return function (age){
return state.students.filter(s =>s.age> age)
}
}
},
modules:{
}
})
在App.vue和HelloVuex.vue中引用：
在这里插入图片描述

在这里插入图片描述

135-vuex-mutations的携带参数

在这里插入图片描述

1.在index.js的mutations定义方法

参数：state,其他参数

mutations:{
increment(state){
state.counter++
},
decrement(state){
state.counter–
},
incrementCount(state,count){
state.counter+=count
},
increStudent(state,stu){
state.students.push(stu)
}
}
App.vue使用方法：
传入一个数：
addCount(count){
this.$store.commit(‘incrementCount’,count)
}
引用：

-------App:students年龄加count---------

<button @click=“addCount(10)”>+10
<button @click=“addCount(5)”>+5

传入一个对象：

addStudent(){
  const stu={id:7,name:'lili',age:11}
  this.$store.commit('increStudent',stu)
}  
    引用：
 <h2>----添加一个学生信息-----</h2>
<button @click="addStudent">添加学生</button>

136-vuex-mutations提交风格

在这里插入图片描述

index.js:
payload作为一个对象：
incrementCount(state,payload){
state.counter+=payload.count
},
App.vue:

  addCount(count){
  //this.$store.commit('incrementCount',count)
  this.$store.commit({
    type:"incrementCount",
    count
    
  })
}

137-vuex-数据的响应式原理

（1）改变info中的值

1.index.js中的state中加入info对象：
info:{
name:‘aaa’,
age:11,
height:168
}
2.App.vue中引用：

----App内容：info对象是否是响应式

----修改info的name-----

138-vuex-mutations的类型常量

1.在store文件夹新建一个mutations-tyope.js
导出常量
在这里插入图片描述 2.在App.vue中导入：
import {
INCREMENT
} from “./store/mutations-type”;
注意：只有export default …时，导入才可以直接
import INCREMENT from “./store/mutations-type”;
3.方法中更换commit的名字

4.index.js中也可以先导入

import Vuex from ‘vuex’
import {
INCREMENT
} from “./mutations-type”;
5. mutations 用 [ 起的名字 ]的方式引用
mutations: {
INCREMENT {
state.counter++
},

139-vuex-action的使用

在这里插入图片描述
如：

2.要通过actions=>dispatch=>mutations

在这里插入图片描述

方法2：

140-vuex-modules的使用

在这里插入图片描述

一、在index.js 创建模块A

2.创建对象
const moduleA ={
state:{
name:‘zhangsan’
},
mutations:{
updateName(state,payload){
state.name=payload
}
},
//异步操作
actions:{
aupdateName(context){
setTimeout(() =>{
context.commit(‘updateName’,‘wangwu’)
})
}
},
getters:{
fullname(state){
return state.name + ‘11111’
},
fullname2(state,getters){
return getters.fullname + ‘2222’
},
fullname3(state,getters,rootstate){
return getters.fullname2 + rootstate.counter
}
}
}
modules: {
a: moduleA
}

二、在App中调用

App内容：moduleA

methods:{
updateName(){
this. $KaTeX parse error: Expected 'EOF', got '}' at position 39: \dotse','lisi') }̲, asyncupda\dots$ store.dispatch(‘aupdateName’)
}
}

141-vuex-store文件夹模块抽离

142-网络请求模块的选择 -axios

在这里插入图片描述

在这里插入图片描述

1.创建新的项目 vue init webpack learnaxios
2.安装axios npm install axios --save
3.发送请求

144-axios发送并请求

2.axios发送并发请求
axios.all([axios({
url:‘http://123.207.32.32:8000/home/multidata’,

}),axios({
url:‘http://123.207.32.32:8000/home/data’,
params:{
type:‘sell’,
page:5
}

})]).then(res =>{
console.log(res); -----res是一个数组
console.log(res[0]);
console.log(res[1]);
})

axios.all([axios({
url:‘http://123.207.32.32:8000/home/multidata’,

}),axios({
url:‘http://123.207.32.32:8000/home/data’,
params:{
type:‘sell’,
page:5
}

})]).then(axios.spread((res1,res2) =>{
console.log(res1);
console.log(res2);
})) 在这里插入图片描述
数组的解构：
const obj ={
name:‘kobe’,
age:30
}
const names
= [ ‘why’,‘kobe’,‘james’]
const [names1,names2,names3] = names

145-axios的配置信息相关

在这里插入图片描述

//2.axios发送并发请求
axios.defaults.baseURL = ‘http://123.207.32.32:8000’
axios.defaults.timeout =5000
axios.all([axios({
url:’/home/multidata’,
}),axios({
url:’/home/data’,
params:{
type:‘sell’,
page:5
}

})]).then(res =>{
console.log(res);
console.log(res[0]);
console.log(res[1]);
})

146-axios的实例和模块封装

1.创建对应的axios实例
src中新创建一个文件夹request.js
main.js:
const instance1 = axios.create({
baseURL: ‘http://123.207.32.32:8000’,
timeout: 5000
})
instance1({
url: ‘/home/multidata’
}).then(res => {
console.log(res);
})
instance1({
url: ‘/home/data’,
params: {
type: “pop”,
page: 1
}
}).then(res => {
console.log(res);
})
方法一：封装一个request模块
main.js:
import {request} from “…/…/learnvuex/src/network/request”;
request({
url:’/home/multidata’
},res =>{
console.log(res);
},err =>{
console.log(err);
})
request.js:
方法一：
import axios from ‘axios’
export function request(config,success,failure){
1.创建axios实例
const instance = axios.create({
baseURL:“http://123.207.32.32:8000”,
timeout:5000
})
发送真正的网络请求
instance(config).then(res =>{
success(res)
}).catch(err=>{
failure(err)
})

}
方法二：
main.js:
request({
baseConfig:{

},
success:function (res){

},
failure:function (err){

}
})
request.js:
import axios from ‘axios’
export function request(config){
//1.创建axios实例
const instance = axios.create({
baseURL:“http://123.207.32.32:8000”,
timeout:5000
})
//发送真正的网络请求
instance(config.baseConfig).then(res =>{
//console.log(res);
config.success(res)
}).catch(err=>{
//console.log(err);
config.failure(err)
})

}

方法三：
main.js:
request({
url:’/home/multidata’
}).then(res =>{
console.log(res);
}).catch(err=>{
console.log(err);
})
request.js:
import axios from ‘axios’
export function request(config){
return new Promise((resolve ,reject) =>{
//1.创建axios实例
const instance = axios.create({
baseURL:“http://123.207.32.32:8000”,
timeout:5000
})
//发送真正的网络请求
**
return instance(config)--------------返回一个promise**等价于

/* instance(config).then(res =>{
resolve(res)
}).catch(err=>{
reject(err)
})*/
})
方法三简写
import axios from ‘axios’
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: “http://123.207.32.32:8000”,
timeout: 5000
})
//发送真正的网络请求
return instance(config) //返回一个promise
}

147-axios的拦截器的使用

request.js:

import axios from ‘axios’
export function request(config) {
1.创建axios实例
const instance = axios.create({
baseURL: “http://123.207.32.32:8000”,
timeout: 5000
})
2.axios的拦截器
2.1请求拦截器的作用
1.比如config中的一些信息不符合服务器的要求
2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
3.某些网络请求(比如登录(token))，必须携带一些特殊的信息
instance.interceptors.request.use(config =>{
console.log(config);
return config
},
err =>{
//console.log(err);
});
2.2响应拦截
instance.interceptors.response.use(res =>{
//console.log(res);
return res.data

},err =>{
console.log(err);
})
//发送真正的网络请求
return instance(config) //返回一个promise
}

148- 项目开发

1.在github上创建项目
在这里插入图片描述

在这里插入图片描述
2.把项目和github联系起来：
终端执行git clone https://github.com/github-lyy00/supermall.git

3.

4.supermal下的文件爆红：
在supermall 文件夹下：git status 在这里插入图片描述

补充：
1.设置本机绑定SSH公钥，实现免密码登录!（免密码登录，这一步挺重要的，码云是远程仓库，我们是平时工作在本地仓库! )
#进入C: \DEL .ssh目录在这里插入图片描述
在本目录下生成公钥
ssh-keygen -t rsa
-t rsa为加密

2…在gitee官网添加公钥

github验证失败用gitee
爆红：

解决：
方法一：
//<1>git clone 申请的仓库地址。
文件夹下出现一个相同的文件夹把里面东西：.git ,README等移出去
<2>git add . 把所有东西添加一下
<3>提交到本地：git commit -m ‘初始化项目’
<4>提交到服务器：
git push
<5>填写用户名密码
gitee：
13783435952
1054X
方法二：
1.在github创建一个新的testmallxm
2.在命令行执行：
git remote add origin https://github.com/study-lyy/testmall.git
git push -u origin master

1.用vue3创建项目：
vue create supermall
2.运行：npm run serve