Java25：前端工程

一.ES6 ：javascript的一次重大更新

1. let 和const 关键字

   let和 var的区别
   1）let 不能重复声明
   2）let 有块级作用域，非函数的话括号遇见let会有块级作用域，也就只能在花括号里访问了
   3）let不会预解析进行变量提升（先定义，后使用）
   4）let 定义的全局变量不会作为window的属性
   5）let在es6中推荐优先使用
   
    const 定义 常量 相当于java的final关键字
    

    2.解构表达式：

    es6的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用
    花括号{}表示对象，方括号[] 表示数组，通过解构赋值，函数更方便进行参数接受等
    
     arr =[11,22,33,44]
     //使用解构表达式获取数组的元素
     let [a,b,c,d,e=10]=arr
     console.log(a,b,c,d,e)

     let person ={
      name:"zhangsan",
      age:"20"

     }
     //使用解构表达式取出对象的属性
     let {age,name}=person
     console.log(age,name)

  3.  箭头函数

    语法类似java中的lambda表达式， =>
    
       let fun1=function(){}//普通函数定义
   let fun2=()=>{}//箭头函数定义
   let fun3=(x)=>{return x+1}//如果参数为空或者大于一个，小括号不能省略
   let fun4=x=> {return x+1} //如果参数为一个，小括号可以省略
   let fun5=x=> x+1 //如果函数体就一行代码，花括号和return也可以省略
   
   //this 关键字在箭头函数中表示外层的上一下文对象
   let person ={
      name:"zhangsan",
      age:"20",
      showname:function(){
         console.log(this)//person 对象
         console.log(this.name)
      }
      ,
      showname2:()=>{
         console.log(this)//windows对象
         console.log(this.name)
      }
   }
   person.showname()
   person.showname2() 

 4.  rest 和spread

   rest：相当于可变形参，spread是把可变数组的每个值作为实参分别传入
     //rest  ...arr1 ,表示可变形参
  let fun1=(a,b,c,...arr1)=>{
   console.log(a,b,c)
   console.log(arr1)
  }
  fun1(1,2,3,4,5,6)
  let arr1=[1,2,3]
  let fun2=(a,b,c)=>{
   console.log(a,b,c)

  }
  //把arr1都传给第一个参数，后面两个都为undefined
  fun2(arr1)
  //spread  ,把数组的元素分别传给每个对象
  fun2(...arr1)
    

  //合并数组
  let a1=[1,2,3]
  let a2=[4,5,6]
  let a3=[7,8,9]
  let a4=[...a1,...a2,...a3]
  console.log(a4)
  //合并对象
  let p1={  name:"zhangsan" }
  let p2={  age:"10" }
  let p3={  gender:"boy" }
  let p4={...p1,...p2,...p3}
  console.log(p4)

  5：类 ，对象，继承

    class Person{
    //属性
    name;
    age;
    //geter setter
    get name(){
        return this.name
    }
    set name(name){
        this.name=name

    }
    //实例方法
    eat(food){
        console.log(`${this.age}岁的${this.name}正在吃${food}`)
    }
    //静态方法
    static hello(){
    console.log("你是一个好人")
    }
    //构造器
    constructor(name,age){
        this.name=name
        this.age=age
    }

}

let per = new Person()
per.name="zhangsan"
per.age=10
per.eat("火锅")
Person.hello()

let per2 = new Person("xiaoming",15)
per2.eat("火锅")
//继承
class Student extends Person{
  
     score

     constructor(name,age,score){
        super(name,age)
        this.score=score
     }
    stduy(){
        console.log(`${this.age}岁的${this.name}好好学习，考了 ${this.score}分`)
    }
}
let stu =new Student("王二",10,99);
stu.stduy()

6.浅拷贝与深拷贝

        //浅拷贝
    let arr1=[1,2,3,4]
    let arr2=arr1
       arr1[0]=100
       console.log(arr2)
    let per1={name:"zhangsan"}
    let per2=per1
    per1.name="zhangwu"
    console.log(per2.name)

    //深拷贝
    let arr11=[1,2,3,4]
    let arr22=[...arr11]
    arr11[0]=100
    console.log(arr22)
    let per11={name:"zhangsan"}
    //let per22={...per11}
    let per22 =JSON.parse(JSON.stringify(per11))
    per11.name="zhangwu"
    console.log(per22.name)

二：nodejs&npm

    
1.nodejs

  简介：nodejs 是一个基于chrome v8引擎的JavaScript运行时环境，可以使JavaScript运行在服务器端
  
  下载地址：https://nodejs.org/en
   运行js文件方法：在windows名字行中 输入 node  XX.js 
   查看nodejs版本：在windows名字行中 输入 node -v

2.npm

  简介:npm 全称 Node Package Manager，是Node.js包下载和管理工具，相当与后端的Maven
  npm的安装和配置：安装node，自动安装npm包管理工具
  
  查看 下载配置包的配置依赖
   在命令行输入： npm config get registry
   
     外国的源地址： https://registry.npmjs.org/
     阿里的源地址：https://registry.npmmirror.com
   配置 下载配置包的配置依赖
   npm config set registry  https://registry。npmmirror.com
   
   查看全局仓库地址
   在命令行输入：npm config get prefix
   设置全局仓库地址
    在命令行输入：npm config set prefix  D:\java\nodeglobalmodule
    
    下载或升级具体的工具包(-g 表示下载到全局仓库)
    npm 在命令行输入：npm install -g  vue3    

    
 3. npm常见命令：

  1.项目初始化：
  npm init
    执行命令后，npm会引导你在命令行回答一些问题，并最终生成一个package.json文件，package.json文件会包含基本信息，类似maven的pom.xml
  npm  init  -y
    执行命令后，默认生成一个package.json文件，不用挨个填写
    2.安装依赖（查看所有依赖：https:www.npmjs.com）
    安装指定包名和版本号
    npm install 包名@版本号 
    安装最新包名
    npm install 包名
    在中央仓库安装
    npm install -g 包名
    安装 package.json 中所有记录的依赖
    npm install  或者 npm i
    3.升级依赖
    npm  update  包名
    4.卸载依赖
    npm uninstall 包名
    5.查看依赖
    npm list

    
三 .vue框架

    1.简介

是一款用于构建用户界面的javaScript框架，它基于标准HTML,CSS,JavaScript构建，
    并提供了一套声明式的组件化的编程模型，帮助你高效的开发用户界面。

    2.Vite工具

     作用：构建标准的前端工程项目
     
      步骤：
        1.使用命令行创建工程
         npm create vite
         根据提示，依次输入工程名，选择vue，JavaScript
        2.安装项目所需的依赖
         cd 进入刚刚创建的项目目录
         npm install 命令安装基础依赖
         
        3.启动项目
        查看项目所属的package.json,查看scripts
        执行命令  npm  run dev
        出现网络地址后点击，出现vite+Vue的界面，表示工程创建成功

        
    3.模板语法

     1.插值表达式
      插值表达式：最基本的数据绑定形式是文本插值，语法双大括号{{}}     
      插值表达式是将数据渲染到元素的指定位置的手段之一
      插值表达式不绝对依赖标签，其位置相对自由
      插值表达式中支持javascript的运算表达式
      插值表达式中也支持函数的调用
      实例：
      //在script标签中定义变量,函数，数组
      <script setup>
     let v1="hello vue3"
    let v2 =()=>{
     return "nihao and vue3"
    }
    let v3="<font color='red'>nihao</font>"
    let v4={url:"http://www.atguigu.com",title:"猫咪"}
    let age=20
    let bee="蜜 蜂"
    let carts=[{name:"可乐",price:3,number:5},{name:"薯片",price:5,number:8}]
    function compute(){
    let count=0
   for(let  index in carts){
    count+= carts[index].price*carts[index].number
   }
   return count

  }
   let im="http://www.atguigu.com/images/index_new/logo.png"

    function f1(){
    alert("菜鸡！")
   }
   </script>
    //在<template>标签中使用插值表达式调用变量，函数，数组
    <template>
   
    <!--插值表达式的格式： {{变量/函数/对象/表达式}} -->
    <h1>{{v1}}</h1>
    <!--插值表达式的格式可以放到标签里，也可以单独使用 -->
    {{v2()}}
    {{age>18 ?"是":"否"}}<br>
    {{carts[0].price*carts[0].number+carts[1].price*carts[1].number}}
    {{compute()}}
    {{bee.split(" ").reverse().join("-")}}<br><br><br><br><br>
    </template>
    2.文本渲染
     使用v-text 和 v-html命令给文本赋值
     v-***这种写法的方式使用的是vue的命令
     v-*** 命令必须依赖元素，并且要写在元素的开始标签中
     v-*** 指令支持ES6中的字符串模板
     v-text可以将数据渲染成双标签中间的文本，但是不识别html元素结构的文本
     v-html 可以将数据渲染成双标签中间的文本，识别html元素结构的文本
     
    实例：
    <template>
    <buttion id ="b1" v-text="v1"></buttion><br>
    <buttion  id ="b2" v-text="v2()"></buttion><br>
    <buttion id ="b3"v-text="compute()"></buttion><br>
    <buttion id ="b4"v-text="age>18?'y':'n'"></buttion><br>
    <buttion id ="b5"v-text="v3"></buttion><br>
    <buttion id ="b6" v-html="v3"></buttion><br><br>
   </template>
    3.Attribute属性渲染
     想要渲染一个元素的attribute,应该使用v-bind指令
     由于插值表达式不能值接放在标签的属性中，所有要渲染的元素的属性就应该用v-bind指令
     v-bind可以用于渲染任何元素的属性，语法为 v-bind:属性名="数据名"，可以简写为： :属性名="数据名"
    实例：
    <template>
    <img v-bind:src="im"><br>
    <img :src="im"><br>
     </template>
     4.事件渲染命令
     使用 v-on 来监听DOM事件，并在事件触发时执行对应的Vue的js代码
     用法：v-on：click="handler"或简写为@click="handler"
     vue中的事件名=原生事件名去掉on前缀，如onClick-->click
     handler的值可以是方法事件处理器，也可以是内联事件处理器
     绑定事件时，可以通过一些绑定的修饰符，常见的事件修饰符如下
     .once :致触发一次事件
     .prevent :阻止默认事件
     实例：
     <template>
       <!-- 函数的事件绑定 -->
       <button v-on:click="fun1()">按钮1</button>
       <button v-on:click="fun2()">+</button><br>
       <button @click="fun2()">+</button><br>
       <!-- 函数的内联绑定 -->
       <button v-on:click="counter++">c+</button>
       <!-- 事件的修饰符 .once 只执行一次，.prevent 阻止组件的默认行为 -->
       <button v-on:click.once="fun2()">+</button>
       {{counter}}

        <a href="http://baidu.com" v-on:click="fun3()">百度</a><br>
        <a href="http://baidu.com" v-on:click.prevent="fun4()">百度2</a>

       </template>
   5.响应式数据的处理方式
    让一个普通的数据抓换为响应使数据的两种方式
    1.ref 函数   更适合单个变量
      在script标签中操作ref响应式数据要通过.value
      在template中操作ref响应式数据则无需通过.value
    2.reactive 函数 更适合对象
     在script template 操作reactive 响应式数据都直接使用对象名.属性名的方式即可
       实例：
       <script setup>
           import{ref,reactive}from 'vue'
           let counter=ref(1)
           function fun1(){
          counter.value++
        }
        let person=reactive({
          name:"tom",
          age:10
        })
        function fun2(){
          person.age++
        }
        </script>
            
        <template>
        <button @click="fun1()">+</button>
        {{counter}}
        <button @click="fun2()">r+</button>
        {{person.age}}
          
        </template>
    6.条件渲染
     v-if  条件渲染
      v-if="表达式" 只会在指令的表达式返回真值时才会被渲染
      也可以使用v-else 为v-if 添加一个 else区块
      一个 v-else 元素必须跟在一个v-if元素后面，否则它将不会被识别
      v-show条件渲染
      用法基本和v-if 一致，不同之处是 会在DOM渲染中保留该元素，v-show仅切换了该元素上名为display的css属性值
      举列：
      <script setup>
          import {ref} from 'vue'

          let  flag=ref(true)
        </script>
            
        <template>
        <h1 id="ha" v-if="flag" >vue if test!</h1>
        <h1 id="hb" v-else>oh ,no body</h1>
        <h1 id="hc" v-show="flag" >vue show test!</h1>
        <button @click="flag=!flag">toggle</button>
 
        </template>
        
    7. 列表渲染
     v-for 列表渲染
     v-for  指令的值需使用 item in items形式的特殊语法，其中items是迭代项的别名，
     在v-for 块中可以完整的访问父作用域的属性和变量，v-for 也支持使用可选的第二个参数
     表示当前项的位置索引
     
        <script setup>
        import {reactive} from 'vue'
        let foods=reactive(["烤肉","火锅","烧烤"])

        let carts=reactive([{
        name:"可乐",
        price:3,
        number:10
        },{
        name:"薯片",
        price:5,
        number:6
        },{
        name:"鸡翅",
        price:8,
        number:5
        }])

        // 计算 购物车的总金额
        function compute(){
          let counter=0;
          for(let index in carts){
            counter+=carts[index].price*carts[index].number
          }
          return counter
        }
        //删除指定元素
        function removeIndex(index){
          //从指定索引，删除几个元素
          carts.splice(index,1)
        }
        //一键删除
        function removeAll(){
            carts.splice(0,carts.length)

        }
        </script>
            
        <template>
        <ul>
        <li v-for=" item in foods" v-text="item"></li>
        </ul>
        <hr>
        <table border="1px">
        <thead>
        <tr>
        <td>序号</td>
        <td>商品</td>
        <td>价格</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(cart,index) in carts">
        <td v-text="index+1"></td>
        <td v-text="cart.name"></td>
        <td v-text="cart.price"></td>
        <td v-text="cart.number"></td>
        <td v-text="cart.number*cart.price"></td>
        <td><button @click="removeIndex(index)">删除</button></td>
        </tr>
        </tbody>
        </table>
        购物车总金额为{{compute()}}元
        <button @click="removeAll()">一键清空购物车</button>
        </template>
    8. 双向绑定
     单项绑定  v-bind  响应式数据发送变化时，更新dom树， 用户的操作如果造成页面内容的改变不会影响响应式数据
     双向绑定   v-model 页面上的数据由于用户的操作造成了改变，也会同步修改对应的响应式数据
           双向绑定一般都用于表单标签
        实例：
    <script setup>
        import {ref,reactive} from 'vue'
        let user=reactive({name:"",pwd:"",intro:"",pro:""})
        let hobies=ref([])
        function clearform(){
          user.name=""
          user.pwd=""
          user.intro=""
          user.pro=""
          hobies.value.splice(0,hobies.value.length)
        }
        </script>
        <template>
        
        用户名: <input type="text" v-model="user.name"><br>

        密码：  <input type="password" v-model="user.pwd"><br>

        爱好：<input type="checkbox"  v-model="hobies" value='1'> 唱
             <input type="checkbox"  v-model="hobies" value='2'> 跳
             <input type="checkbox"  v-model="hobies" value='3'> rap<br>
        简介:<textarea  v-model="user.intro"></textarea><br>
        籍贯：<select v-model="user.pro"><br>
             <option value='1'>京</option>
             <option value='2'>津</option>
             <option value='3'>冀</option>
        </select><br>
        {{user}}<br>
        {{hobies}}<br>
        <button @click="clearform()">一键清空</button>
              
        </template>

    4.路由的使用

    
    定义：路由就是根据不同的URl地址展示不同的内容或页面
    
    案例 步骤：
    1.创建项目和导入路由依赖
     npm create vite  创建项目
     npm install  安装项目依赖
     npm install vue-router 安装路由的依赖
    2.准备页面和组件
    在 components目录下创建子组件
    
    3.在src 路径下创建路由文件
     目录：src/routers/router.js
             
        //导入创建路由需要的函数
        import{createRouter,createWebHashHistory} from 'vue-router'
        //导入对应的组件
        import Home from '../components/Home.vue'
        import List from '../components/List.vue'
        import ShowDetail from '../components/ShowDetail.vue'
        import ShowDetail2 from '../components/ShowDetail2.vue'

        //创建路由对象
        const router=createRouter({
        history:createWebHashHistory(),
        //定义路径和组件的对应关系
        routes:[
            {
            path:"/home",
            component:Home
        },
            {
             path:"/list",
            component:List
        }

        ]

        })

        //暴漏路由对象
        export default router
        
    4.在main.js 引入路由
        import { createApp } from 'vue'
        import App from './App.vue'
        //在整个app 应用路由
        import router from './routers/router.js'
        const app=createApp(App)
        app.use(router)

        app.mount('#app')
        
    5.配置app.vue
    <script setup>
    import{useRouter} from 'vue-router'
    let router=useRouter()

    function getMyPath(){
    router.push("/list")
    }
    </script>
    <template>
      <div>
      app之前的内容<br>
      <!-- 声明式路由-->
      <router-link to="/list">list</router-link><br>
      <router-link to="/home">home</router-link><br>
      <router-link to="/showdetail">showdetail</router-link><br>
        <!-- 编程式路由-->
        <button @click="getMyPath()">按钮</button>
            <!-- 替换并展示组件内容-->
        <router-view></router-view>
     6.路由传参：
     分为路径参数和键值对参数
     
     案例：
    1. router.js 的配置
     
     {      //键值对路径配置
            path:"/showdetail2",
            component:ShowDetail2
        },
            {   //路径配置
                path:"/showdetail/:id/:language",
                component:ShowDetail
            }
     
     2.组件
     showDetail.vue  路径组件内容
         
    <script setup>
    import {ref} from 'vue'
    import {onUpdated} from 'vue'
    import{useRoute} from 'vue-router'
    const route=useRoute()
    let param_id=ref(0)
    let param_language=ref("")
    param_id.value=route.params.id
    param_language.value=route.params.language
    //切换更新界面值
    onUpdated(()=>{
      //route.params  获取路径参数值
      param_id.value=route.params.id
    param_language.value=route.params.language

    })

    </script>

    <template>
      <div>
        <h1>{{param_id}}{{param_language}} 是世界上最好的编程语言</h1>
      </div>

    </template>

    <style scoped>

    </style>
     showDetail2.vue  键值对组件内容
     <script setup>
    import {ref} from 'vue'
    import{useRoute} from 'vue-router'
    let route=useRoute()
    let param_id=ref(0)
    let param_language=ref("")
    //获取键值对参数值
    param_id.value=route.query.id
    param_language.value=route.query.language

    </script>

    <template>
      <div>
        <h1>{{param_id}}{{param_language}} 是世界上最好的编程语言</h1>
      </div>

    </template>

    <style scoped>

    </style>
    
    3.配置app.vue
    <script setup>
    import{useRouter} from 'vue-router'
    let router=useRouter()

    function showdetail(id,language){
      //router.push(`/showdetail/${id}/${language}`)
       router.push({path:`/showdetail/${id}/${language}`})
    }

    function showdetail2(id,language){
      //router.push(`/showdetail2?id=${id}&language=${language}`)
       router.push({path:`/showdetail/${id}/${language}`})
    }

    </script>

    <template>
      <div>
     
         <router-link to="/showdetail/1/java">声明式路径传参</router-link><br>
        <button @click="showdetail(2,'php')">编程式路径传参</button>
         <hr>
        <router-link to="/showdetail2?id=1&language=java">声明式键值对传参</router-link><br>
        <router-link v-bind:to="{path:'/showdetail2',query:{id:2,language:'php'}}">声明式键值对传参2</router-link><br>
        <button @click="showdetail2(3,'python')">编程式键值对传参</button>
        <router-view></router-view>
        
      </div>

    </template>

    <style scoped>

    </style>

5.路由守卫

  1简介: 在vue3中，路由守卫是用于在路由切换间进行一些特定任务的回调函数
   路由守卫可以用于许多任务，例如验证用户是否已登录，在路由切换前提供
   确认提示，请求数据等
  2.分类
     全局前置守卫:在路由切换前被调用,可以用于验证用户是否已登录,中断导航/请求数据等 
     全局后置守卫:在路由切换之后被调用,可以用于处理数据,操作DOM,记录日志等
      守卫代码的位置:在router.js中
      
  3:举列:
  //路由前置守卫
router.beforeEach((to,from,next)=>{
 //to 是目标包装对象,.path属性可以获取地址
 // from 是来源地包装对象 .path属性可以获取地址
 //next 是方法,不调用默认拦截, next() 放行 ,直接到达目标组件
 //next('/地址')可以转发到其他地址,到达目标组件会再次经过前置路由守卫
    console.log("beforeEach")
    console.log(to.path)
    console.log(from.path)
    next()
})
//路由后置守卫
router.afterEach((to,from)=>{
 //to 是目标包装对象,.path属性可以获取地址
 // from 是来源地包装对象 .path属性可以获取地址
    console.log("afterEach")
    console.log(to.path)
    console.log(from.path)

}
)

6.promise

 前端中的异步编程技术，类似java中的多线程+线程结果回调
 
 promise 简单的来说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果
 从语法上说，promise是一个对象，从它可以获取异步操作的消息。promise提供统一的API，各种异步操作都可以用同样的方法进行处理
 
 promise对象有以下两个特点
 1.promise 对象代表一个异步操作，有三种状态，pending（进行中）,Resolved(已完成)和reject（已失败）
 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
 2.一旦状态改变，就不会在变，任何时候都可以得到这个结果，promise对象的状态改变只有两种可能，从pending
 变成Resovled 或者从pending 变成 reject。只有这两种情况发生，状态就凝固了。不会在变了，会一直保持这个结果。
 
 
 实例：新建promise.html,在浏览器执行
  <script >
    //resolve函数在回调函数中如果调用resolve方法，promise会由pending转换为resolved
    //reject 函数在回调函数中如果调用reject方法，promise 会由pending转换为reject
    let promise =new Promise(function(resolve,reject){
    console.log("function code")
    //resolve("haha")
   // reject("no way")
   throw new Error('error message')
    })  
    //promise 转换为resolved会执行的函数
    promise.then(function(values){
      console.log("sucess"+values)
      //promise 转换为rejecd会执行的函数
    }).catch(function(values){    console.log("fail"+values)})
    console.log("code1")
    console.log("code2")
    </script>
    

7 关键字 async 和 await

 async   帮助我们使用简洁的语法获得一个prmoise对象
   let promise =new Promise(function(){})
    async function aaa(){}
    1.async 用于标识函数的，async 函数返回的结果就是一个 promise
    2.方法如果正常return 结果，promise的状态就是resolved，return 后的结果就是成功状态的返回值
    3.方法中出现了异常，则返回的promise 就是一个失败的状态
    4.async 函数返回的结果如果是一个promise ，则状态内部的promise 决定
    
  await  await 帮助我们获取promise成功状态的返回值的关键字
       1.await右边如果是一个普通值，则直接返回该值，如果右面是promise，返回promise成功状态的结果
              let res = await "张三"
              let res= await Promise.resolve（"张三"）
              res="张三"
              2.await 右边如果是一个失败状态的promise 那么 await会直接抛异常
              3.await 关键字必须在async 修饰的函数中使用，async函数中可以没有await
              4.await  后面的代码会等待await 执行完毕继续运行
  

  8.axios

     Axios 是一个基于promise 网络请求库，作用于node.js和浏览器中。在服务端它使用原生node.js http 模块
     而在客户端则使用XMLHttpRequests,有如下特性
        从浏览器创建XMLhttpRequests
        从 node.js创建http请求
         支持PRmoise api
         拦截请求和响应
         转换请求和响应数据
         取消请求
         自动转换JSON数据
         客户端支持防御XSRF         
     案例：请求后台获取随机土味情话
        <script setup>
        import  axios from 'axios'
        import {ref ,reactive} from 'vue'
        let code=ref('')
        let content=ref('')
        let message=reactive({id:'',text:''})
        function getLoveMessage(){
        //axios({})请求三要素 ：1.请求的url 2请求的方式 3.请求的参数
        let promise=axios({method:'post',
        //url:'https://api.uomg.com/api/rand.qinghua?fomat=json',
        url:'https://api.uomg.com/api/rand.qinghua',
        data:{

        //如果请求方式是get，则需要通过params 进行发送
        //如果请求方式post，并使用data 数据会以json形式放入请求体

        }
        ,params:{
        // 都是以键值对方式将数据放入url后
         format:'json',
         username:'zhangsan'
        }

        })
        promise.then(function(response){
          //response 响应结果对象
          //data 响应结果数据
          //status响应状态码
          console.log(response)
         code.value= response.data.code
         content.value=response.data.content
         message.id=response.data.code
         message.text=response.data.content
         Object.as

        }).catch(function(Error){
        console.log(Error)
        })

        }
        </script>

        <template>
          <div>
          <h1 v-text="content"></h1>
          <h2 v-text="message.text"></h2>
          <button @click="getLoveMessage()">变</button>
           
          </div>
          
        </template>

        <style scoped>

        </style>
        
     axios的get和post方法：
     
     axios.get(url)
     axios.get(url,{请求的其他信息})
     axios.get(url,{params:{键值对信息}，header:{设置一些特殊的请求头}})
     axios.post(url,{放入请求体的json串},{params:{键值对信息}})
     案例：请求后台获取随机土味情话改进版
             <script setup>
        import  axios from 'axios'
        import {reactive} from 'vue'
        let message=reactive({mid:'',mcontent:''})

        function getWord(){
         //return  axios.get("https://api.uomg.com/api/rand.qinghua?fomat=json")
         //return  axios.get("https://api.uomg.com/api/rand.qinghua",{params:{fomat:"json"}})
        return  axios.post("https://api.uomg.com/api/rand.qinghua",{username:"zhangsan",password:"123456"},{params:{fomat:"json"}})
        }
        async function getLoveMessage(){
        let result=await getWord()
         console.log(result)
          console.log(result.data)
          //Object.assgin(result.data,message)
          message.mid=result.data.code
          message.mcontent=result.data.content

        }

        </script>

        <template>
          <div>
          
          <h2 v-text="message.mcontent"></h2>
          <button @click="getLoveMessage()">变</button>
           
          </div>
          
        </template>

        <style scoped>

        </style>

    anxios拦截器
    
     如果想在axios 发送请求之前，或者是响应回来在执行then方法之前做一些额外的工作，可以通过拦截器完成
     
     案例：拦截器的使用
     1）在src目录下新建axios.js 文件
    import axios from 'axios'

    const instance=axios.create({})

    // 请求拦截器
    instance.interceptors.request.use(function(config){
    console.log("请求前拦截器")
    config.headers.Accept="application/json"
    return config

    },function(error){

        console.log("请求拦截器异常方法")
        return Promise.reject("something goes wrong")
    })

    //响应拦截器
    instance.interceptors.response.use(function(response){
        //返回状态码为200，执行的方法
        console.log("response sucess")
        console.log(response)
        // 一定要返回response
        return response
    },function(error){
        console.log("response fail")
        console.log(error)
            // 一定要返回promise
        return Promise.reject("somehting goes wrong")

    })
    
    export default instance
    
    2）app.vue 文件
    <script setup>
    import  instance from './axios.js'
    import {reactive} from 'vue'
    let message=reactive({mid:'',mcontent:''})

    function getWord(){

    return  instance.post("https://api.uomg.com/api11/rand.qinghua",{username:"zhangsan",password:"123456"},{params:{fomat:"json"}})
    }
    async function getLoveMessage(){
    let result=await getWord()
      console.log(result)
      console.log(result.data)
      //Object.assgin(result.data,message)
      message.mid=result.data.code
      message.mcontent=result.data.content

    }

    </script>

    <template>
      <div>
      
      <h2 v-text="message.mcontent"></h2>
      <button @click="getLoveMessage()">变</button>
       
      </div>
      
    </template>

    <style scoped>

    </style>
      

 
9.pinia

   通过pinia状态管理定义共享数据
    当我们有多个组件共享一个共同的状态（数据源）时，多个视图可能都依赖于同一份状态。
    来自不同视图的交互也可能需要更改同一份状态
    pinia 就是实现了上述需求的状态管理库，由vue核心团队维护
    
    实例：实现数据在两个组件共享 
    
    1)新建store.js
        import {defineStore} from 'pinia'

    export  const piniaPerson=defineStore({
         id:'pinia',
         state:()=>{
            return {
                username:'zhangsan',
                age:10,
                hobbies:['唱歌','跳舞','打篮球']
            }
         },
         getters:{
            getAge(){
                return this.age
            },
            getHobbiesCount(){
                return this.hobbies.length
            }
         },
         actions:{
            doubleAge(){
                return this.age=this.age*2
            }
         }

     })
     2)两个组件
     Operate 组件
         <script setup>
    import {piniaPerson} from '../store/store.js'

    let person=piniaPerson()

    </script>

    <template>
        <div>
        <h1>operate</h1>
       用户名： <input type="text" v-model="person.username"><br>
       年龄： <input type="text" v-model="person.age"><br>
       爱好：
       吃饭<input type="checkbox" value="吃饭" v-model="person.hobbies">
       睡觉<input type="checkbox" value="睡觉" v-model="person.hobbies">
       打篮球<input type="checkbox" value="打篮球" v-model="person.hobbies">
       唱歌<input type="checkbox" value="唱歌" v-model="person.hobbies">
       跳舞<input type="checkbox" value="跳舞" v-model="person.hobbies"><br>
       <button @click="person.$reset()">重置</button>
       <button @click="person.doubleAge()">年龄加倍</button>
       <button @click="person.$patch({username:'奥特曼',age:5000,hobbies:['打怪兽','放大招']})">变身</button>
        <hr>
    {{person  }}
    </div>
    </template>

    <style scoped>

    </style>
    list组件
        <script setup>
    import {piniaPerson} from '../store/store.js'
    let person =piniaPerson()

    </script>

    <template>
    <div>
    用户名：{{person.username }}<br>
    年龄：{{person.age }}<br>
    爱好：<ul>
    <li v-for='(hobby,index) in person.hobbies' :key="index"v-text="hobby"></li>

    </ul>

    </div>
    </template>

    <style scoped>

    </style>
    3）路由配置：
    router.js
    import{createRouter,createWebHashHistory} from 'vue-router'
    import Operate from '../components/Operate.vue'
    import List from '../components/List.vue'

    const router =createRouter({
        history:createWebHashHistory(),
        routes:[
            { path:"/operate",
            components:
            {default:Operate,
              list:List
            }
          },
              { path:"/list",
                component:List},
               
                { path:"/",
                component:Operate}
                 ]
    })

    export default router
    
    4)main.js 使用pinia对象
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router/router.js'
    import { createPinia } from 'pinia'
    let pinia=createPinia()
    let app =createApp(App)
    app.use(router)
    app.use(pinia)
    app.mount('#app')