<script setup>
/*css样式引用的方式
1.在.vue文件中的style标签中
2.将css样式保存在独立的css文件中，哪个vue文件需要，就在那里导入
   在script中导入
    import'./style/test.css'
   在style中导入
   @import'./style/test.css'
3.如果某个样式要在所有vue中显示
   可以在main中导入
    import './style/test.css'
*/

import'./style/test.css'
</script>


<template>
  <div>
   <span class="s1">你好</span>
  </div>
 
 
</template>

<style scoped>
@import'./style/test.css'
</style>

<script setup>
import {ref} from 'vue'
    //定义一些要展示到页面上的数据  变量/对象 
    let counter =ref(2)
    //自增的方法
    function counterIncr(){
     counter.value++
    }

    //自减的方法
    function counterDecr(){
    counter.value--
    }

/*
  响应式数据：在数据变化时，vue会将变量最新的值更新到dom树中，页面上的数据就是最新的
  非响应式数据：在数据变化时，vue不会更新
  vue3中要经过ref/reactive函数处理才变成最新的
*/

</script>

<template>
  <div>
    <button @click="counterIncr()">+</button>
  <span v-text="counter"></span>
  <button @click="counterDecr()">-</button>
  </div>
  
</template>

<style scoped>

</style>

<script setup>

/*
插值表达式
{{数据名字/函数}}
*/
//定义常见类型的数据
let msg ="hello liyang"
let getMsg=()=>{
  return "hello vue3"
}
let age=11
let bee="蜜 蜂"
let carts=[{name:"可乐",price:3,number:5},{name:"雪碧",price:4,number:5},{name:"辣条",price:0.5,number:5}]
//定义一个获取购物车总金额的方法
function computer(){
  let count=0
  for(let index in carts){
    count+=carts[index].price* carts[index].number

  }
  return count
}
</script>

<template>
 <div>
<!-- 将数据绑定到下面的元素 -->
 <h1>{{ msg }}</h1>
 msg的值为{{ msg }}
 msg的方法值为{{ getMsg() }}<br>
 <!-- 插值表达式支持一些常见的运算符 -->
  年龄：{{ age }},是否成年{{ age>18?'是':'否' }}<br>

  <!-- 插值表达式中支持对象调用api -->
   {{ bee.split(' ').reverse().join('') }} <br>
   {{ computer() }}
 </div>
</template>

<style scoped>

</style>

<script setup>
/*
属性渲染命令
v-bind 将数据绑定在元素属性上
*/
//let imgURL="https://img.lwxpz.me/file/1739857121688_屏幕截图 2024-12-17 112612.png"
const data={
    logo:"https://img.lwxpz.me/file/1739857121688_屏幕截图 2024-12-17 112612.png",
    name:"liyang",
    url:"http://ly.baskly.us.kg"
}
</script>

<template>
 <div>
<!-- <img v-bind:src="imgURL"> -->
 <a v-bind:href="data.url">
<img v-bind:src="data.logo" v-bind:title="data.name">
</a>
 </div>
</template>

<style scoped>

</style>

<script setup>
import { ref } from 'vue';

/*
v-on:事件名称="函数名()"
可以简写为@事件名称
*/

function fun1() {
    alert("hi");
}

let counter = ref(1);

function fun3(event) {
    if (confirm("确定要访问目标链接吗")) {
        // 通过返回值控制是否阻止默认行为
        event.preventDefault();
    }
}

function fun4() {
    alert("被点击");
}
</script>

<template>
 <div>
    <!-- 事件的绑定函数 -->
    <button @click="fun1()">hello</button>
    <!-- 内联事件处理器 -->
    <button @click="counter++">+</button>
    <!-- 事件的修饰符 .once 事件只绑定一次 prevent修饰符阻止组件默认行为-->
    <button @click.once="counter++">Click Once</button>
    <a href="http://ly.baskly.us.kg" @click="fun3($event)">yang</a>
    <a href="http://ly.baskly.us.kg" @click.prevent="fun4()">yu</a>
    {{ counter }}
 </div>
</template>

<style scoped>
</style>

<script setup>
import {ref,reactive} from 'vue'
/*
让一个普通数据转换为响应式数据的两种方式
1 ref函数 更适合单个变量
  在script标签中操作ref响应式数据需要.value
   在template标签中不需要.values
2 reactive函数 更适合对象
  
*/
let counter =ref(10)

let person=reactive({
  name:"李阳",
  age:8
})
function incr(){
    counter.value++
}

function incrAge(){
  person.age++
}
</script>

<template>
 <div>
<button @click="incr()">+</button>
<button @click="counter++">+</button>
{{ counter }}
<hr>
<button @click="incrAge()">+</button>
{{ person.age }}
 </div>
</template>

<style scoped>

</style>

<script setup>
import{ref} from 'vue'
/*
v-if="表达式/数据" 数据为true 则当前元素会渲染进入dom树
v-else 自动和前一个v-if取反
v-show ="" 数据为true则展示到页面上 否则不展示


v-if 如果数据为false则元素不再dom树中了
v-show 
*/

let flag=ref(true)
</script>

<template>
 <div>
   <h1 v-if="flag">vue is awesome!</h1>
   <h1 id="bb" v-else>ononon</h1>
   <h1 v-show="flag">hhh</h1>
   <button @click="flag=!flag">toggle</button>
 </div>
</template>

<style scoped>

</style>

<script setup>
import {ref, reactive } from "vue";

let pro =ref("产品")

let items = reactive([
    { id: "item1", message: "薯片" },
    { id: "item2", message: "面包" },
    { id: "item3", message: "烤鸡" }
]);
</script>

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
       {{ pro }} {{ item.message }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
</style>

<script setup>
import { ref, reactive } from "vue";

let pro = ref("产品");

let items = reactive([
    { id: "item1", message: "薯片" },
    { id: "item2", message: "面包" },
    { id: "item3", message: "烤鸡" }
]);

let carts = reactive([
    { name: "可乐", price: 3, number: 10 },
    { name: "雪碧", price: 3, number: 1 },
    { name: "薯片", price: 5, number: 20 },
    { name: "辣条", price: 2, number: 5 }
]);

function removeItem(index) {
  const confirmDelete = confirm("确定要删除该商品吗？");
  if (confirmDelete) {
    carts.splice(index, 1);  // 删除指定索引的商品
  }
}

//计算总金额的函数
function compute(){
    let total=0
    for(let index in carts){
       total+= carts[index].price*carts[index].number
    }
   return total
}
</script>

<template>
  <div>
    <h1>您的购物车如下</h1>
    <table border="1px" class="cart-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(cart, index) in carts" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ cart.name }}</td>
          <td>{{ cart.price.toFixed(2) }}</td> <!-- 格式化价格 -->
          <td>{{ cart.number }}</td>
          <td>{{ (cart.price * cart.number).toFixed(2) }}</td> <!-- 格式化小计 -->
          <td>
            <button @click="removeItem(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
 购物车总金额:{{ compute() }}元
    <hr>

    <ul>
      <li v-for="item in items" :key="item.id">
        {{ pro }} {{ item.message }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th, .cart-table td {
  padding: 8px;
  text-align: center;
}

button {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

button:hover {
  background-color: darkred;
}

hr {
  margin: 20px 0;
}
</style>

<script setup>
import {ref} from 'vue'
/*
单项绑定 响应式数据发生变化时，更新dom树 用户的操作如果造成页面内容的改变不会影响响应式数据

*/
let message =ref("zhangsan")

</script>

<template>
 <div>
    <input type="text" v-bind:value="message"><br>
    {{ message }} 

 </div>
</template>

<style scoped>

</style>

<script setup>
import { ref, reactive } from 'vue'
/*
单项绑定 v-bind 响应式数据发生变化时，更新dom树 用户的操作如果造成页面内容的改变不会影响响应式数据
双向绑定 v-model 页面数据由于用户的操作造成改变，也会同步修改响应式数据
         双向绑定一边都用于表单标签
         v-model:value="数据"
*/
let user = reactive({
    username: "",
    userPwd: "",
    intro:"",
    pro:""
})
let hbs=ref([])

function cleanForm(){
    user.username=""
    user.userPwd=""
    user.intro=""
    user.pro=""
    hbs.value.splice(0,hbs.value.length)
}
</script>

<template>
  <div>
    <input type="text" v-model="user.username"><br>
    <input type="password" v-model="user.userPwd"><br>
    爱好：
    唱<input type="checkbox" v-model="hbs" value="sing">
    跳<input type="checkbox" v-model="hbs" value="dance">
    rap<input type="checkbox" v-model="hbs" value="rap">
    篮球<input type="checkbox" v-model="hbs" value="basketball">
    简介:<textarea v-model="user.intro"></textarea>
   <br>
   籍贯:
   <select v-model="user.pro">
    <option value="1">北京</option>
    <option value="2">河南</option>
    <option value="3">湖北</option>
   </select>
   <button @click="cleanForm">清空</button>

    <p>{{ user }}</p> 
    {{ hbs }}
  </div>
</template>

<style scoped>

</style>

<script setup>
import { reactive,computed } from 'vue';
/*
计算属性:其能不间断的执行这个箭头函数 让其数据保持最新，而原身的做不到
*/
const author=reactive({
    name:"李阳",
    books:["java从入门到精通"]
})

//通过方法返回数据 每使用一次，执行一次
function hasBook(){
    return author.books.length>0?"是":"否"
}
//通过计算属性获取数据 每次使用如果和上次使用的数据未发生变化，则使用上次数据
let bookMessage = computed(()=>{
    return author.books.length>0?"是":"否"
})
</script>

<template>
 <div>
   <p>作者:{{ author.name }}</p>
   是否出版过图书:{{ hasBook() }}<br>
   是否出版过图书:{{ bookMessage }}
 </div>
</template>

<style scoped>

</style>

<script setup>
import { ref } from 'vue'

let funame = ref('')
let finame = ref('')
</script>

<template>
  <div>
    姓氏: <input type="text" v-model="funame"><br>
    名字: <input type="text" v-model="finame"><br>
    全名: {{ funame }} {{ finame }}
  </div>
</template>

<style scoped>

</style>

<script setup>
import { ref, reactive, watch,watchEffect } from 'vue'

let funame = ref('')
let finame = ref('')
let lastname = reactive({
  name: ""
})


//任何的响应式数据 ，如果是想监听，直接监听即可，无需将要监听的响应式数据作为参数
//
watchEffect(()=>{
  funame.value=finame.value+lastname.value
})

// watch 函数监听 一个ref响应式数据
// 当 finame 发生变化时执行后面的函数
watch(finame, (newValue, oldValue) => {
  console.log(`${oldValue} 变为 ${newValue}`)
  // 更新 funame 为姓氏 + 名字
  funame.value = newValue + lastname.name
})

// watch 函数监听一个reactive响应式数据 专门监听reactive响应式数据中的一个属性
watch(() => lastname.name, (newValue, oldValue) => {
  console.log(`${oldValue} 变为 ${newValue}`)
  funame.value=finame.value+newValue
})

//watch 函数监听一个reactive响应式数据 专门监听reactive响应式数据中的所有属性
watch(() => lastname, (newValue, oldValue) => {

  //此时new和old都一样，都是last
  funame.value=finame.value+lastname.name
},{deep:true,immediate:true})//是否要深度监听(监听所有属性),是否要先监听一次


</script>

<template>
  <div>
    姓氏: <input type="text" v-model="funame"><br>
    名字: <input type="text" v-model="finame"><br>
    <br>
    <input type="text" v-model="lastname.name" placeholder="请输入姓氏"><br>
    全名: {{ funame }}
  </div>
</template>

<style scoped>

</style>

<script setup>

</script>

<template>
  <div>
    <h5>欢迎：xxx的光临<a href="#">退出登录</a> </h5>
  </div>
  
</template>

<style scoped>

</style>

<script setup>
//向父组件发送参数
import {defineEmits} from 'vue'
//定义一个向父组件提交数据的事件 事件名称自定义

const emits= defineEmits(["sendMenu"])

//提交数据的方法
function send(data) {
  emits("sendMenu",data)
}
</script>

<template>
  <div>
    <ul>
      <li @click="send('学员管理')">学员管理</li>
      <li @click="send('图书管理')">图书管理</li>
      <li @click="send('请假管理')">请假管理</li>
      <li @click="send('班级管理')">班级管理</li>
      <li @click="send('教师管理')">教师管理</li>
      <li @click="send('考试管理')">考试管理</li>
    </ul>
  </div>
  
</template>

<style scoped>

</style>

<script setup>
//接收父组件的参数 
import {defineProps} from 'vue'

defineProps({
  message:String
})
</script>

<template>
  <div>
    这里是展示区
    {{ message }}
  </div>
  
</template>

<style scoped>

</style>

<script setup>
import {ref} from 'vue'
 //引用3个组件
 import Header from './components/Header.vue'
 import Navigator from './components/Navigator.vue';
import Content from './components/Content.vue';
let menu =ref("")
function receiver(data){
  menu.value=data
}

</script>

<template>
  <div>
   
    <Header class="header"></Header>
    <Navigator @sendMenu="receiver" class="navigator"></Navigator>
    <Content class="content" :message="menu"></Content>
  </div>
  
</template>

<style scoped>
.header{
  height: 80px;
  border: 1px solid red;
}

.navigator{
  width:20% ;
  height: 500px;
  border: 1px solid green;
  float: left;
}

.content{
  width:  79%;
  height: 500px;
  border: 1px solid blue;
  float:right;
}
</style>

<script setup>


</script>

<template>
  <div>
   <h1>add </h1>
  </div>

</template>

<style scoped>

</style>

<script setup>


</script>

<template>
  <div>
   <h1>home</h1>
  </div>

</template>

<style scoped>

</style>

<script setup>


</script>

<template>
  <div>
   <h1>list </h1>
  </div>

</template>

<style scoped>

</style>

<script setup>


</script>

<template>
  <div>
   <h1>Update </h1>
  </div>

</template>

<style scoped>

</style>

<script setup>


</script>

<template>
  <div>
    hello 李阳
    <br>
  <hr>
  <router-link to="/home">home</router-link><br>
  <router-link to="/list">list</router-link><br>
  <router-link to="/add">add</router-link><br>
  <router-link to="/update">update</router-link><br>

    <!-- 该标签会被替换成具体的.vue -->
  <router-view></router-view>
  <hr>
  goodby 李阳
  </div>

</template>

<style scoped>

</style>

<script setup>
import{useRouter} from 'vue-router'
import{ref} from 'vue'
const router =useRouter()
let mypath=ref("")
function showList(){
  //编程式路由实现页面跳转
  router.push("/list")

  //传对象
  router.push({path:"list"})
}

function goMyPage(){
  router.push(mypath.value)
}
</script>

<template>
  <div>
    hello 李阳
    <br>
  <hr>
  <!-- 声明式路由 -->
  <router-link to="/home">home</router-link><br>
  <router-link to="/list">list</router-link><br>
  <router-link to="/add">add</router-link><br>
  <router-link to="/update">update</router-link><br>

  <!-- 编程式路由 -->
   <button @click="goMyPage()">go</button><input type="text" v-model="mypath">

    <!-- 该标签会被替换成具体的.vue -->
     <hr>
  <router-view></router-view>
  <hr>
  goodby 李阳
  </div>

</template>

<style scoped>

</style>

<script setup>
// 接收传递过来的路径参数
import { useRoute } from 'vue-router';
import { ref ,onUpdated} from 'vue';

let languageId =ref(0)
let languageName=ref("")

let route=useRoute()
languageId.value=route.params.id  
languageName.value=route.params.language

onUpdated(()=>{
  languageId.value=route.params.id  
languageName.value=route.params.language

})

</script>

<template>
  <div>
   <h1>ShowDetail接收路径参数 </h1>
   <h3>{{ languageId }}{{ languageName }}</h3>
  </div>

</template>

<style scoped>

</style>

<script setup>
import{useRouter} from 'vue-router'
import{ref} from 'vue'
import ShowDetail from './components/ShowDetail.vue';
const router=useRouter()

function showDetail(id,language){
 //方式一
 // router.push(`/showDetail/${id}/${language}`)

 //方式二
 router.push({path:`/showDetail/${id}/${language}`})
}

</script>

<template>
  <div>
   <router-link to="/showDetail/1/java">声明式路由路径传参数</router-link>
   <button @click="showDetail(2,'PHP')">  编程式路由路径传参</button> 
   
   <hr>

    <router-view></router-view>
  </div>

</template>

<style scoped>

</style>

<script setup>
// 接收传递过来的路径参数
//query 键值对cans
import { useRoute } from 'vue-router';
import { ref ,onUpdated} from 'vue';

let languageId =ref(0)
let languageName=ref("")

let route=useRoute()
languageId.value=route.query.id  
languageName.value=route.query.language

onUpdated(()=>{
  languageId.value=route.query.id  
languageName.value=route.query.language

})

</script>

<template>
  <div>
   <h1>ShowDetail键值对参数 </h1>
   <h3>{{ languageId }}{{ languageName }}</h3>
  </div>

</template>

<style scoped>

</style>

<script setup>
import{useRouter} from 'vue-router'
import{ref} from 'vue'
import ShowDetail from './components/ShowDetail.vue';
const 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}`)
}

</script>

<template>
  <div>
    <router-link to="/showDetail/1/java">声明式路由路径传参数</router-link>
    <button @click="showDetail(2,'PHP')">  编程式路由路径传参</button> 
   
   <hr>

   <router-link to="/showDetail2/?id=1&language=java">声明式路由键值对</router-link>
   <button @click="showDetail2(3,'C')">  编程式路由键值对传参</button> 
   
   <hr>
   <router-view></router-view>
  </div>

</template>

<style scoped>

</style>

<script setup>
import{ref} from 'vue'
import { useRouter } from 'vue-router';
let username=window.sessionStorage.getItem('username')
const router=useRouter()
function logout(){
//清除用户登录的信息
window.sessionStorage.removeItem("username")
//跳转到login
router.push("/login")

}


</script>

<template>
  <div>
   <h1>home页面</h1>
   <h3> 欢迎{{ username }}登录</h3>
   <button @click="logout()">退出登录</button>
  </div>
  
</template>

<style scoped>

</style>

<script setup>
import {ref}from 'vue'
import { useRouter } from 'vue-router'
let username =ref('')
let password=ref('')
let router=useRouter()

function login(){
   //获取用户名密码
   //root 123456
   //登陆成功自动跳转到/home，失败不跳转，给出提示

   if(username.value=='root' && password.value=='123456'){
    

    //将用户名保存在浏览器中 
    window.sessionStorage.setItem("username",username.value)

    //路由跳转 /home
    router.push("/home")

   }else{
    alert("用户名密码有误")
   }

}

</script>

<template>
  <div>
   账号：<input type="text" v-model="username"><br>
   密码: <input type="password" v-model="password"><br>
   <button @click="login()">登录</button>
  </div>
  
</template>

<style scoped>

</style>

<script setup>

</script>

<template>
  <div>
   <router-view></router-view>
  </div>
  
</template>

<style scoped>

</style>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const message = ref('');

async function getLoveMessage() {
  try {
    const response = await axios({
      method: 'get',
      url: '/api/api/rand.qinghua?format=json',
      data: {}
    });
    console.log(response.data);
    if (response.data.code === 1) {
      message.value = response.data.content;
    }
  } catch (error) {
    console.error('请求出错:', error.message);
  }
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getLoveMessage()">换一个~</button>
  </div>
</template>

<style scoped>

</style>    

package com.sgg.servlet;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileOutputStream;
import java.io.IOException;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: 李阳
 * @Date: 2024/12/29/11:01
 * @Description:往upload里面写入文件信息-io流
 */

@WebServlet("/servlet3")
public class servlet3 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ServletContext servletContext = getServletContext();

        //从域中读取数据
        String ka = (String) servletContext.getAttribute("keya");
        System.out.println(ka);
    }
}

servletContext.setAttribute("keya", "va");
servletContext.setAttribute("keya", "keyB");