Java_Web

没有心肝，只有干

已于 2023-09-19 21:12:41 修改

阅读量182

点赞数

文章标签： java 前端开发语言

于 2023-09-16 19:40:00 首次发布

本文链接：https://blog.csdn.net/weixin_51717916/article/details/132865912

版权

html & css

html && css 文档

路径的书写方式

一、绝对路径：
1：绝对磁盘路径：F:\Java_Web\img\news_logo.png
2：绝对网咯路：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png

二、相对路径： ./ 表示当前目录（./可以省略）
…/ 表示上一级目录

JavaScript

引入脚本（.js文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部脚本  script可以出现在任意位置可以出现多次-->
    <!-- <script>
        alert("你好啊")
    </script> -->
    <!-- 外部脚本 -->
    <script src="day_01.js"></script>

</head>
<body>
    
</body>
</html>

三种输出语句

// 第一种写入警告框  window 是可以省略的
window.alert("hello javaScript")
// 第二种写入html中
document.write("周浩好帅") //文本写入
// 第三种写入浏览器的控制台
console.log("hello javaScript")

变量

/* 二、 变量的声明与使用
        1.作用域比较大 定义的是全局变量
        2.可以重复定义
*/
var tag=1
var tag="hello javascript"
{
var tag="周浩"
}
alert(tag)
// 通过let 声明的变量 不能重复声明 且只在作用域里面
let tag1=10;
alert(tag1)
// const 来定义常量不允许修改
const tag2="周浩";

五种数据类型

/* 
   三、 js 中的五种数据类型
        数字类型(小数整数都是数字类型) number 
        字符串（单双引皆可） string
        布尔 boolean
        对象为空 null (返回的是object)
        声明变量时候为指定初始值 undefined 
        使用 typeof()来获取数据类型

*/
    alert(typeof 4.5)  //Number
    alert(typeof null) //object


    /* 
        四、js中的运算符跟java中的基本一样

    只有 == 和 === 不一样 
        区别     ==  会进行数据转换
                ===  不会进行数据转换
    
    */
   var a ="10"
   alert(a==10) //true 
   alert(a===10) //false
   alert(a==="10") //true

类型转换

/*  
         五、类型的转换 

*/
//  将字符串转化为数字 如果字面不是数字则会转为NaN
    alert(parseInt("12")) //12
    alert(parseInt("12A45")) //12  转的时候当不是数字时候会停止
    alert(parseInt("A45"))//NaN
// 其他类型转为boolean 
    //  1.number: 0和NaN 为false 其余全部为true
    if(0){
        alert("false")
    }else if(NaN){
        alert("false")
    }else if(-1){
        alert("-1为true")
    }
    //  2.String: 空字符串为false 其余全部转为true
    //  3.Null和undefined 均为false
    if(""){
        alert("false")
    }else if(null){
        alert("false")
    }else if(undefined){
        alert("false")
    }

函数

    /* 
        六、函数
    */
// 函数的定义 方式1
function sum1(a,b){
    return a+b
}
// 方式二
var tag3=function(a,b){
    return a+b
}
alert(tag3(4,5))
// 函数的调用
alert(sum1(4,5))//9
alert(tag3(8,9))//17
alert(sum1)//不传入参数的话，会原封不动的输出代码格式

数组

/* 
    七、使用array创建数组
*/
// 数组的定义 方式一
var arr=new Array(1,45,82)
// 方式二
var arr1=[2,85,45]
// 修改
arr[0]="hello"
// 数组的长度是可变的
arr[10]=50 //数组中的下标10 修改成为了50
alert(arr[8])//未定义的会显示 undefined
// 访问 
alert(arr[0])
// arr.length 数组的长度 遍历数组的所有元素
for(let i=0;i<arr.length;i++){
    alert(arr[i])
}
// forEach 遍历数组中有值的元素
arr.forEach(function(e){alert(e)})
// 简化foreach =>
arr.forEach((e)=>{alert(e)})
//push 添加元素到数组的末尾
arr.push(7,8,5)
// //splice(n,m) 删除元素 n表示从哪里删 m表示删几个
arr.splice(3,1)
alert(arr)//直接输出数组

String

/* 
    八、String 运用
*/
// 两种创建方法
// 第一种
var str=new String("   周浩好帅   ")
// 第二种
// var str1="..."

// length 获取字符串长度
alert(str.length)
// charat() 返回指定位置的字符
alert(str.charAt(6))
//indexof 返回字符所在的位置下标
alert(str.indexOf("帅"))
// trim() 去除字符串两边的字符
var s=str.trim()
alert(s)
// substring(start，end) 提取字符串中两个指定的索引号之间的字符(字符串的截取)
alert(str.substring(4,7))

自定义对象

/* 
    九、自定义对象
*/
var user={
    name:"tom",
    age:20,
    gender:"male",
    // 自定义方法
    eat(a){
        alert("干饭"+a)
    }
}
// 调用
alert(user.name)
user.eat(88)

json定义

JSON 是轻量级的文本数据交换格式，由于各个语言都支持 JSON ，JSON 又支持各种数据类型，所以JSON常用于我们日常的 HTTP 交互、数据存储等。

/* 
    十、定义json
    是一对 "key":values 的键值对
    if      数字        直接写数字
            字符串      放双引号中
            逻辑值      直接写true or false
            数组        在方括号中[]
            对象        花括号中{}
            null        直接写
*/
var j='{"name":"周浩","age":20,"addr":["厦门","广东","杭州"]}'
// json字符串 转化 js对象
var obj =JSON.parse(j)
alert(obj.name)
// js对象  转化 json字符串
alert(JSON.stringify(obj))

BOM 对象

也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成
1、window 浏览器窗口对象

//  window中的方法:
// 1、带有消息和确认按钮的警告框
alert()
window.alert("hello bom")
// 2、confirm() 弹出一个对话框 会返回一个boolean值
var flag=confirm("您确定删除吗")
alert(flag)
///3、setinterval(n,m) 定时器，周期性的执行某一个函数 (n:函数,m表示时间)
var i=0
setInterval(function(){
    i++;
    alert(i+"次")
},2000)    // 表示没两秒执行这个函数一次

// 4、settimeout(n,m) 延迟时间执行一次 (n:表示函数,m:表示延迟多少秒执行)
setTimeout(function(){
    alert("周浩")
},3000)   //表示延迟三秒执行这个函数

二、location: 地址栏对象
属性的引用：href

// location: 地址栏对象
// location.href 返回完成的url地址
alert(location.href)  //返回当前的url地址的完成信息
location.href="https://www.csdn.net/?spm=1003.2018.3001.4476"//如果给href设置值
// 的话，他会自动跳转到这个地址

DOM 操作

1、将标记语言的各个部分封装为对应的对象
2、javaScript通过DOM 就能够改变 HTML中的内容、样式、对事件作出反应、以及添加和删除HTML元素
一、获取dom对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_DOM</title>
    <!-- 将js文件引入html中 -->
    <!-- <script src="./DOM_01.js"></script> -->
</head>
<body>
    <img id='h1' src="../img/off.png" width="150"> <br><br>

    <div class="cls">周浩很帅啦 </div> <br>
    <div class="cls">是真的很酷啦 </div> <br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
</body>
<script>
/* 
    十一、DOM 文档对象模型 将标记语言的各个部分封装成对应的对象
        1、Document     将整个文档封装成对象
        2、Element      将标签封(<h1></h1>)         封装成元素对象
        3、Attribute    将标签中的属性(color:"red") 封装成属性对象
        4、Text         将标签中的文本              封装成文本对象
        5、Comment      将标记语言中的注释          封装成注释对象
    javaScript通过DOM 就能够改变 HTML中的内容、样式、对事件作出反应、以及添加和删除HTML元素
        
    */
// 1、根据id 获取html中的元素  封装成对象
   var img=document.getElementById('h1') //会返回一个值
   alert(img)
// 2、根据标签来获取元素
var div1=document.getElementsByTagName("div")  //会返回一个数组 
for (let i = 0; i < div1.length; i++) {
    alert(div1[i])
}
// 3、根据name属性来获取元素
    var hobby=document.getElementsByName("hobby")//会返回一个数组
    alert(hobby)
// 4、根据class属性获取元素
var cls=document.getElementsByClassName("cls") //会返回一个数组
alert(cls)

// 5、通过获取的的元素对象 对html的代码进行修改
var divs=document.getElementsByTagName("div")  //获取对象 返回数组

var div1=divs[0]
div1.innerHTML="ZhouHao666"
</script>

</html>

二、获取dom对象然后进行操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js_DOM</title>
    <!-- 将js文件引入html中 -->
    <!-- <script src="./DOM_01.js"></script> -->
</head>
<body>
    <img id='h1' src="../img/off.png" width="150"> <br><br>

    <div class="cls">周浩很帅啦 </div> <br>
    <div class="cls">是真的很酷啦 </div> <br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
</body>
<script>

// 练习题：

// 1.点亮灯泡  就是改变src的值
var img2=document.getElementById("h1")
img2.src="../img/on.png"

// 2.将div标签的内容后面加上very goog红色字体
var divs=document.getElementsByTagName("div")
divs[0].innerHTML+="<font color='red'>ever good</font>"
divs[1].innerHTML+="<font color='red'>ever good</font>"

// 3.使所有的复选框呈现选中的状态
var hoobys=document.getElementsByName("hobby")
for (let i = 0; i < hoobys.length; i++) {
    hoobys[i].checked=true
    
}
</script>

</html>

js的事件监听

一、事件监听的两种绑定方法
1.通过html中的事件属性进行绑定
2.通过dom元素获取html中的标签元素然后再进行绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一、在html标签中通过 onclick 这个属性来绑定 点击后会调用后面on()这个函数 -->
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn1" value="事件绑定2" >
</body>
<script>
    function on(){
        alert("事件一被点击了")
    }
    // 二、同DOM来获取元素对象 再来绑定这个点击事件
    var inputs=document.getElementsByTagName("input")
    inputs[1].onclick=function(){
        alert("事件二被点击了")
    }
</script>
</html>

二、8个常见的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    <form action="" style="text-align: center;">
        <input type="text" name="username" onfocus="zh3()" onkeydown="zh6()">
        <input type="submit"  id="b1" value="提交">
        <input type="button" id="b1" value="单击事件" onclick="zh1()">
    </form>
    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="zh7()" onmouseout="zh8()" >
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>分数</th>
                <th>评估</th>
            </tr>
            <tr align="center">
                <td>001</td>
                <td>张三</td>
                <td>90</td>
                <td>很优秀</td>
            </tr>
            <tr align="center">
                <td>002</td>
                <td>李四</td>
                <td>92</td>
                <td>优秀</td>
            </tr>
    </table>
</body>

<script>
    /* 
        一、常见的事件
    */
//1.      onclick     鼠标单击事件
    // 因为在html元素中添加了 onclick 所有只写一个函数就好了
    function zh1(){
        alert("zh1——表单被点击了...")
    }
//2.      onblur      元素失去焦点
    //根据name获得元素的对象 通过对象来实现事件 或则也可以同上
    var zh2=document.getElementsByName("username")[0];
    zh2.onblur=function(){
        console.log("zh2——元素失去焦点..") //console.log 是输出在控制台上
    }

//3.      onfocus     元素获得焦点
    function zh3(){
        console.log("zh3——元素获得焦点..")
    }
//4.      onload      某个页面或图像被完成加载
     var zh4 = document.getElementsByTagName("body");
        zh4[0].onload=function(){
            alert("zh4——加载了")
        }

//5.      onsubmit    当表单提交时触发改事件
        var zh5=document.getElementsByTagName("form")[0]
        zh5.onsubmit=function(){
            alert("zh5——表单提交了...")
        }
//6.      onkeydown   某个键盘的健被按下
        function zh6(){
            console.log("zh6——某个键盘被按下了")
        }
//7.      onmouseover 鼠标被移动到某个元素之上
        function zh7(){
            console.log("zh7——鼠标被移动到这个元素上面了")
        }
//8.      onmouseout  鼠标从某个元素移开
        function zh8(){
            console.log("zh8——鼠标移除了这个元素...")
        }
</script>
</html>

Vue

一、什么是vue?

1、Vue是一套用于构建用户界面的渐进式框架
2、Vue是一套前段的框架，免除了JavaScript中DOM操作，简化了书写
3、Vue基于MVVM(Model-View-ViewModel)的前端开发思想，实现了数据的双向绑定，将编程的关注点放在了数据上

二、vue的快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue框架_数据的双向绑定</title>
    <!-- 1.引入Vue.js文件 Vue的导入   这里是通过网络地址引入的 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model 是进行数据绑定的，会在html中展示出来 -->
        <input type="text" v-model="message">
        <br><br>
        {{message}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",  //表示要接管的区域
        data:{
           message:"周浩好帅啊...."  //定义数据模型
        },
        method:{
        //定义方法和函数的地方
        }
    })
</script>
</html>

vue 常见的指令

v-bind 动态的给html属性绑定一个数据模型
v-model 在表单元素上创建一个双向数据绑定模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的指令|</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        1.v-bind 为html 标签动态绑定属性值，如设置href，css样式等
        2.v-model 在表单元素上创建双向数据绑定
     -->
    <div id="app">
        <!-- 动态的绑定一个地址 -->
       <a v-bind:href="zh1">链接1</a>
       <!-- v-bind可以省略 -->
       <a :href="zh1">链接2</a>
       <!-- 在表单元素中动态的绑定  随时可以修改 -->
       <input type="text" v-model="zh1">
    </div>
</body>
    <script>
        // 定义Vue 对象
        new Vue({
            el:"#app",
            data:{
            // 可以不用固定死，可以动态的修改
              zh1: "https://www.baidu.com"
            },
            method{
            }
        })
    </script>
</html>

v-on 或者 @事件为html 绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- vue 中通过 v-on:事件 或者 @事件 为其绑定事件 -->
    <!-- 1. v-on 为Html标签绑定事件 -->
<input  type="button" value="按钮1" v-on:click="zh1()">
    <!-- 第二种书写的方式 -->
    <input type="button" value="按钮2" @click ="zh2()                                                                                                                                            ">
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{

            },
            // 定义一个函数的话要放在 methods 这个属性中
            methods:{
                zh1:function(){
                    alert("我被点击了...")
                },
                zh2:function(){
                    alert("我被点击了...")
                }
            },

        })
    </script>
</html>

v-if:进行条件的渲染当为true渲染否则不渲染
v-show:通过v-show 来渲染都会渲染,不符合条件的会在设置一个display:none 来隐藏这个标签不展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 
        1. v-if、v-else-if、v-else ：进行条件的渲染 当为true渲染 否则不渲染
        2. v-show ： 根据条件展示某元素，区别在于切换的是display(展示) 属性的值
     -->
     <div id="app">
        <!-- v-model 来进行数据的绑定 -->
        年龄 <input type="text" v-model="age">经判定，为：
        <!-- 使用 v-if等来判定要渲染的东西 -->
        <span v-if="age <=35">年轻人（35及以下）</span>
        <span v-else-if="age>35&& age<60">中年人————（35-60）</span>
        <span v-else="age>=60">老年人（60及以上）</span>
        <br><br>

        <!-- 通过v-show 来渲染 都会渲染 但是不合符条件的会隐藏 
            会在elements元素中不符合条件的会在设置一个display:none 来隐藏这个标签不展示
        -->
        年龄 <input type="text" v-model="age">经判定，为：
        <span v-show="age <=35">年轻人（35及以下）</span>
        <span v-show="age>35&& age<60">中年人————（35-60）</span>
        <span v-show="age>=60">老年人（60及以上）</span>
        <br><br>
     </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:20
        },
        methods:{

        }
    })
</script>
</html>

v-for :列表渲染，遍历容器元素或则对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</v-for></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
       <!-- v-for 列表的渲染，遍历容器的元素或对象的属性 -->
       <div id="app">
            <!-- 不要下标    values 通过插值表达式数据的双向绑定 -->
            <div v-for="value in array1">{{value}}</div><hr>

            <!-- 遍历元素并且获取他的下标值 -->
            <div v-for="(value,index) in array1">{{index+1}}:{{value}}</div>
       </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            array1:["北京","上海","武汉","长沙","天津"]
        },
        methods: {
            
        },
    })
</script>
</html>

vue 的练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <!-- 使用for 来遍历 users 中对象 -->
            <tr v-for="(value,index) in users" align="center">
                <!-- {{}} 表示叫插值表达式 -->
                <td>{{index+1}}</td>
                <td>{{value.name}}</td>
                <td>{{value.age}}</td>
                <td>
                    <!-- v-if 来判断要渲染的标签 -->
                    <span v-if="value.gender==1">男</span>
                    <span v-else-if="value.gender==2">女</span>
                </td>
                <td>{{value.score}}</td>
                <td>
                    <span v-if="value.score>=85">优秀</span>
                    <span v-else-if="value.score>=60">及格</span>
                    <span v-else style="color:red;">不及格</span></span>
                </td>
            </tr>
    </div>
    </table>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "TOM",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "ROSE",
                age: 18,
                gender: 2,
                score: 85
            }, {
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            }, {
                name: "Tony",
                age: 30,
                gender: 2,
                score: 52
            }]
        },
        methods: {

        },


    })
</script>

</html>

vue 的生命周期

1、生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子方法）
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成（加载完成）
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue生命周期 一共8个</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

</body>
<script>
    /* 
        1、生命周期的八个阶段：每触发一个生命周期事件，
            会自动执行一个生命周期方法（钩子方法）
        beforeCreate     创建前
        created          创建后
        beforeMount      载入前
        mounted          挂载完成（加载完成）
        beforeUpdate     更新前
        updated          更新后
        beforeDestroy    销毁前
        destroyed        销毁后
    
    */
    new Vue({
        el:"#app",
        data:{

        },
        methods:{

        },
        //创建前会触发的指令
        beforeCreate(){
            alert("vue 正在创建..")
        },
        //加载完成的时候 
        mounted(){
            alert("vue挂载完成 发送消息到服务端...")
        },
    })
</script>
</html>

Ajax

Ajax 是干什么的

1、与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
2、异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术
同步请求：当客户端给服务端发送请求的时候，服务端未响应，客户端是不允许进行其他操作

这种形式是比较繁琐的我们一般用分装好的 Axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <!-- 
        ajax：实现 数据交换 and 异步交换
        数据交换    1、通过Ajax可以给服务器发送请求，并获取服务器响应的数据
        异步交换    2、可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术
                       当客户端给服务端发送请求的时候，服务端未响应，客户端是允许进行其他操作

        同步请求    3、当客户端给服务端发送请求的时候，服务端未响应，客户端是不允许进行其他操作
     -->
     <input type="button" value="获取数据" onclick="zh1()">
     <div id="div1"></div>
</body>
<script>
        function zh1() {
            // 1、创建xmlHttpRequest 对象
         var xhttp = new XMLHttpRequest();
        //  2、发送异步请求
         xhttp.open("GET", "https://cdn.jsdelivr.net/npm/vue/dist/vue.js", true);
         xhttp.send();//发送请求
        //  3、获取服务器响应数据
         xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("div1").innerHTML = this.responseText;
         }
  };
      
} 
</script>
</html>

Ajax — Axios

Axios是对原生的AJAX进行封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 就是对Ajax进行的封装</title>
    <!-- 1.在线引入 axios中js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- axios 就是对Ajax进行的封装 简化书写 快速开发 -->
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
</body>
    <script>
        function get(){
            // 通过axios发送异步请求 --get
            // axios({
            //     method:"get",
            //     url:"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
            // }).then(result=function(){  //then可以接收到服务端返回的数据，封装在了result中
            //         console.log(result.data);
            // })


            // 2.通过别名的方式发起get请求     项目中推荐的方式  通过=>箭头函数 来获取服务器中的数据 result.data拿到result中data的属性
            axios.get("https://cdn.jsdelivr.net/npm/vue/dist/vue.js").then(result=function(){  //then可以接收到服务端返回的数据，封装在了result中
                    console.log(result.data);
            }
        )}

        function post(){
            // 通过axios发送异步请求 --post
            // axios({
            //     method:"post",
            //     url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            //     data:"id=1"
            // }).then(result=function(){  //then可以接收到服务端返回的数据，封装在了result中
            //         console.log(result.data);
            // })

            // 3.通过别名的方式发起post请求   通过=>箭头函数 来获取服务器中的数据 result.data拿到result中data的属性
            axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",id=1).then(result=>{
                console.log(result.data)
            })
        }
        
        

    </script>
</html>

Yapi：接口管理平台

yapi：可以让前后端同时开发详细看 p36

Vue-cli(脚手架)

Vue-cli:官方提供的一个脚手架，用于快速生成一个Vue的项目模板
1、统一的目录结构
2、本地调试
3、热部署
4、单元测试
5、集成打包上线
6、依赖的环境是 NodeJs

nodejs 的安装

NodeJs官网
1、node -v 来验证环境变量是否安装成功

在这里插入图片描述
2、配置nodejs中包的npm的全局路径，以管理员身份运行cmd

在这里插入图片描述
然后在执行这条语句：

npm config set prefix 安装路径

验证是否安装成功：

在执行这条语句安装 npm的淘宝镜像

安装vue-cli

在cmd 管理身份运行窗口执行这条语句
在这里插入图片描述
验证是否执行成功

vue项目的创建

1、项目的创建
在cmd中执行下面两种语句都能创建推荐第二个
在这里插入图片描述
2、项目目录的结构信息

3、src 源文件目录信息

4、在 vue.config.js 文件中更改端口号

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 更改端口号
  devServer:{
    port:7000
  }
})

App.vue 根组件组成部分

一、根组件下的组成部分

template:模版部分，用来生成html代码
script:用来控制模版部分的数据来源和行为的
style:用来定义css代码的

<!-- 一、模版部分,由他生成html代码 -->
<template>
  <div>
   <!-- <h1>{{message}}</h1> -->
   <!-- element 组件的引入 -->
   <!-- <element-view></element-view> -->
    <emp-view></emp-view>
  </div>
</template>

 <!--  二、控制模版的数据来源和他的行为 -->
<script>
import EmpView from './views/tlias/EmpView.vue'
// 将子文件的element 引入进来
// import ElementView from './views/element/ElementView.vue'
// 
export default {
  
  components: {EmpView /* ElementView */ },

  // 定义数据模型
  data() {
    return {
      message:"Hello Vue"
    }
  },
  // 定义函数方法
  methods: {
    
  },
}
</script>

 <!--  三、css样式部分 -->
<style>
</style>

二、我们一般很少操作app.vue这个根组件，所以是引入他的子文件来进行操作的
在这里插入图片描述

Element组件库的学习

element是饿了么团队研发的，一套为开发者基于vue2.0的桌面组件库
组件：是组成网页的部分，eg：超链接，按钮，图片，表格，表单等…
Element官网

element快速入门

1、在集成终端上安装element
在这里插入图片描述

2、在集成终端中输入这条语句
在这里插入图片描述
3、在node-modules中查看是否有element-ui这个组件安装成功

4.在element组件库中复制代码就可以了，就不在演示了

vue 中使用axios

1、安装axios 在集成中端中输入： upm install axios
element-ui这个组件查看是否安装成功
在这里插入图片描述
2、通过inport来导入这个组件

3、在钩子方法mounted 中通过axios来加载数据

Vue路由

一、介绍

前端路由：就是URL中的hash（#号）与组件之间的对应关系

在这里插入图片描述
Vue Router 是Vue的官方路由下面是它的组成部分

VueRouter:路由器类，根据路由器请求在路由视图中动态渲染选中的组件
:请求链接组件，浏览器会解析成《a》标签
:动态视图组件，用来渲染展示与路由路径对应的组件

二、router 路由的快速入门
1、安装路由：在集成终端中输入：npm install vue-router@3.5.1
2、在router文件的index.js中定义路由表
在这里插入图片描述

3、通过这个标签，当点击时会自动寻找对应的路由
在这里插入图片描述
4、在app.vue中添加来动态的展示要展示的页面

5、配置一份跟路径就是默认的页面 index.html
在这里插入图片描述

打包部署

1、打包
在这里插入图片描述
2、需要把这个dist文件部署在nginx服务器上面，下载nginx服务器的稳定版本
nginx 目录文件的介绍，当启动时候会默认的占用80端口号

3、把dist目录的文件粘贴到nginx下的html中

4、更换nginx的端口号
查看谁占用了80 端口号
在这里插入图片描述

5、在nginx.conf这个文件下将端口号改为90
在这里插入图片描述

在这里插入图片描述

maven

一、maven的作用：管理和构建java的项目工具

1、依赖管理：方便快捷的管理项目依赖的资源包（jar），避免版本冲突问题
就是在pom.xml文件中描述相关的信息，maven就会自动的联网下载相关的依赖
2、统一的项目管理：提供标准，统一的项目结构
用maven可以在不同的开发工具中提供统计的项目结构
3、项目构建：标准跨平台的自动化项目构建方式
就是提供一系列的编译、打包、部署流程，在其他系统中都是支持的（跨平台）

maven的安装

1、maven是绿色软件，解压好了便是安装好了
2、配置maven的本地仓库（下载的jar包存放的地方），在conf/settings.xml文件中配置
在这里插入图片描述

3、配置maven的私服（提高jar包的下载速度）在conf/settings.xml中配置私服
在这里插入图片描述

4、环境变量的配置（可以在任意的目录下执行maven的指令）
在这里插入图片描述

五、在cmd中确认是否安装成功

二、idea中配置maven（全局配置）

在这里插入图片描述

1、修改配置文件，使用本地仓库
在这里插入图片描述
2、确定jre的版本

3、确认字节码的版本

添加依赖

1、添加相关依赖在pom.xml中配置就好了
在这里插入图片描述
2、配置完需要右键刷新加载下依赖才会生效

3、当需要在中央仓库中下载依赖时，这个网址是maven坐标maven依赖官网

依赖的传递

1、A中没有依赖C项目中的依赖，但C中的依赖会传递到A项目中
在这里插入图片描述
2、排除依赖：指主动断开依赖的资源，被排除的的资源无需指定版本

依赖的范围

一、依赖的jar包默认情况下，任何地方都是有效的，可以通过标签来控制依赖的范围的
1、的取值
在这里插入图片描述

maven生命周期

生命周期的执行都是由maven中的插件执行的
一、主要关注红色的阶段就好了，在同一套生命周期中，运行后面的阶段，前面的也会运行
在这里插入图片描述

clean:移除上一次构建的文件
compile：编译项目的源代码
test：使用合适的单元测试框架运行测试（junit）
package:编译后的文件打包，如jar、war等
install：安装项目到本地仓库

二、1、要运行的话直接通过idea控制面板运行就好了
在这里插入图片描述 2、在cmd中运行要执行的生命周期

SpringBoot 的入门

一、springbootweb快速入门
1、创建springboot工程，并且勾选web相关的依赖
在这里插入图片描述

2、定义类添加方法，添加注释运行就好了
在这里插入图片描述

http协议的概述

http：超文本传输协议，规定了浏览器和服务器之间数据的传输规则
基于tcp协议传输的：面向连接，每次都需要进行三次握手，不容易丢数据包，安全
基于请求-响应模式的：一次请求对应一次响应，没有请求就没有响应
http协议是无状态的，对事务处理能力是没有记忆能力的，每次请求都是独立的，后一次请求是不会记录前一次的请求

http中的请求协议的格式

http中的响应的格式

tomcat

一、tomcat的中文乱码问题
在这里插入图片描述

二、修改tomcat的默认的8080端口号
在这里插入图片描述

没有心肝，只有干

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java_Web

Java_Webhtml & css路径的书写方式JavaScript引入脚本（.js文件）三种输出语句变量五种数据类型类型转换函数数组String自定义对象json定义BOM 对象DOM 操作js的事件监听Vuevue 常见的指令vue 的生命周期AjaxAjax 是干什么的Ajax --- AxiosYapi：接口管理平台Vue-cli(脚手架)nodejs 的安装安装vue-clivue项目的创建App.vue 根组件组成部分Element组件库的学习element快速入门vue 中使用axi
复制链接

扫一扫