JavaScript

基础语法

变量

//使用常量(**const**)或者变量(**let**)
let 变量名
const 常量
var 可重复定义

警示框

//多个输出使用 +
alter('') 

文档输出

document.write('注入这个内容')

控制台打印输出

console.log('在控制台输出信息')

输入语句

prompt('提示输入的文本') 

数组Array

let arr(数组名)=[1,2,3,4,5,6,7,8,9,10] 

//末尾新增(新增在数组末尾并返回新的长度) 
	arr.push()

//开头新增(新增在数组开头并返回新的长度)
	arr.unshift()

//删除(删除最后一个元素) 
    arr.pop

//删除(删除第一个元素) 
	arr.shift

//删除(指定元素)  splice(起始位置，删除几个元素)
	arr.splice(0,10)

模板字符串

//使用反引号，值使用 ${}
`这个值为：${x}`

检测数据类型

//typeof +变量
let c=99
consle.log(typeof c)

类型转换

//隐式转换
    // + 号一边为字符型则输出为字符型
    // - * / 都转为数字类型number
    let number= + prompt('输入字符串转为数字')

//显示转换
    //转成数字
    number.Number()
	number.parse()

    //转成字符串：String
	number.toString()

保留整数

//只保留字符前面出现的整数
let c='123abc'
parseInt(c) ----->123

保留小数及整数

let c='123.123abc'
parseFloat(c) ------>123.123

函数

function 函数名(){
    函数体
    return 数值
    }

function chen(x,y){
    return x+y
}

匿名函数

let 名称=function(){ 
}

let chen=function(c,p){
    return c+p
}
    

立即函数

(fuction(){ })()

(function(x,y){
    return x+y
})(1,2)

对象

let 对象名 ={ }    
let 对象名 = new Object()

let chen={
    name:'peng',
    age:18,
    where:"广东"
}

// 查看
        console.log(chen.name)
        console.log(chen['name'])

//新增--修改
        chen.how='这是第一次出现则为新增，否则为修改'

// 删除
        delete chen.where

//遍历输出 -- for(let 变量 in 对象)
		for(let i in chen){
            console.log(chen[i]);
        }


//遍历输出--Object.keys(对象)
		console.log(Object.keys(chen))

		
//对象中使用方法
	let obj ={
            name:'chen',
            song:function(x,y){
            }
        }

---

Web-apis

①选择器

获取第一个匹配的元素

//querySelector
document.querySelector('css选择器')   
document.querySelector('ul(上层) li(本层)')   
const box=document.querySelector('div')

通过ID名选择

let idName=document.getElementById('id_name')
idName.style.color='green'
idName.style.fontSize='100px'

通过Class名选择

//通过Class名获取元素--返回的为数组
var className=document.getElementsByClassName("class_name")[0]
className.style.fontSize='100px'

获取所有匹配的元素

// querySelectorall --获取过来的为数组（**class******名**或**id**名**或元素名都可）
const nav=document.querySelectorAll('.nav li')

• （旧方法）

//通过id获取第一个元素
   document.getElementById('hhc')

//根据标签获取一类元素 获取页面所有的div
		document.getElementsByTagName('div')

 //根据类名class获取元素 
        document.getElementsByClassName('class')

修改属性

let image=document.querySelector('img')
image.src='../../html/images/2.jpg'

修改样式

//--调用.style
//（多组单词使用小驼峰命名法）css中:background-color
变量.style.backgroundColor='blue'

classlist类名操作

//(添加类名/删除类名)

//添加
元素.classList.add('第二个类名')

//删除
元素.classList.remove('类名')

---

axios

发送数据

无参：axios.get/post(url).then(成功).catch(错误).finally()

有参：axios.get(url,,{params:{}}).then(成功).catch(错误).finally()

then:一个函数，表示请求成功时执行的

resp 是形参，表示服务器返回的数据，这个数据是由axios封装好的

<script>
     	/* ******************************************************get****************************************************** */
		/* get请求没有参数 */
		function funGet(){
		
			let url = "http://localhost:9000/user/query"
			//箭头函数（省略定义函数，不用函数名）： 函数 （参数） {函数体}   ------>  (参数)=>{函数体}
			axios.get(url).then( resp =>{
				//then 是一个函数，表示请求成功时执行的
				//resp 是形参，表示服务器返回的数据，这个数据是由axios封装好的
				console.log("请求成功，返回服务器的数据："+resp);
			}).catch(err=>{
				console.log("请求错误");
			}).finally(()=>{
				//console.log("finally")
			})
		}
		
    		 /* get请求路径携带参数 */
		function Get(){
			let url = "http://localhost:9000/user/get?id=1002&name=彭呀";
			axios.get(url).then( resp =>{
				console.log("请求成功，返回服务器的数据："+resp);
			}).catch(err=>{
				console.log("请求错误");
			})
		}
		
     
    		/* get请求外置参数 */
		function Get2(){
			let url = "http://localhost:9000/user/get";
			axios.get(url,{
				params:{
					id:3000,
					name:'chen同学'
				}
			}).then(resp =>{
				console.log("请求成功，返回服务器的数据："+resp);
			})
			.catch(err=>{
				console.log("请求错误");
			})
		}
     
          /* ******************************************************post****************************************************** */
     	//post请求，传递参数格式  ：参数名=值&参数名=值
		function Post(){
			let url = "http://localhost:9000/user/add";
			//Post("url","参数名=值&参数名=值")
			axios.Post(url,"id=12345&name=彭呀")
			.then(resp =>{
				console.log("请求成功，返回服务器的数据："+resp);
			})
			.catch(err=>{
				console.log("请求错误");
			})
		}
     		
      	 
     	//post请求,传递的是对象数据，axios自动转为json  -- 后端 @RequestBody 映射
		function Post2(){
			let url = "http://localhost:9000/user/json";
			let data={
				id:999,
				name:"张三",
				sex:"女",
				age:20
				
			}
			axios.post(url,data)
			.then(resp =>{
				console.log("请求成功，返回服务器的数据："+resp);
			})
			.catch(err=>{
				console.log("请求错误");
			})
		}
     
     
     
     
</script>

• 配置项

//post请求,传递的是对象数据，axios自动转为json
function Post3(){
	let url = "http://localhost:9000/user/json";
	let param={
		id:999,
		name:"张辰",
		sex:"女",
		age:20
		
	}
         
	axios({
		url:url,
		method:"post",
		data:param
	}).then(resp=>{
		console.log("请求成功，返回服务器的数据："+resp);
	})
}

接收数据

响应结构是一个json

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

---

拦截器

• axios.interceptors.request.use(function(拦截){ 操作 return 拦截}）

请求拦截器

请求拦截器：在发起请求之前执行，可以对请求内容做修改，比如增加参数，设置请求头等等

• config

/* 请求拦截器 */
axios.interceptors.request.use(function(config){
	console.log("对请求config数据进行附加操作")
             
	console.log("url="+config.url);
	console.log("methods："+config.method);
	config.url = config.url+"?token=xxx"
	console.log("url="+config.url);
	
	/* 返回处理后的请求数据进行请求操作 */
	return config;
	
},function(err){
	console.log(err);
})

---

应答拦截器

应答拦截器：服务器返回结果，axios的then之前先执行。可以对应答内容对预先的处理。

• response

/* 应答拦截器 */
axios.interceptors.response.use(function(response){
	console.log("应答拦截器，接收服务器返回的数据结构");
	console.log(response);
	return response;
},function(err){
	console.log(err);
})