JavaWeb——前端
登录

JavaWeb——前端

zy123
zy123
2025-03-21 /  0 评论 /  0 点赞 /  0 阅读 /  6635 字
最近更新于 03-22
温馨提示：
本文最后更新于2025年03月22日，已超过38天没有更新，若内容或图片失效，请留言反馈。

JavaWeb

JavaWeb学习路线

image-20240227162313041

前后端分离开发

image-20240229125233265

image-20240229125254635

  1. 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
  2. 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
  3. 前后台并行开发：各自按照接口文档进行开发，实现需求
  4. 测试：前后台开发完了，各自按照接口文档进行测试
  5. 前后段联调测试：前段工程请求后端工程，测试功能

Html/CSS

标签速记：

不闭合标签:

空格占位符：

正文格式：line-height:设置行高；text-indent:设置首行缩进；text-align:规定文本的水平对齐方式

CSS引入方式

名称 语法描述 示例
行内样式 在标签内使用style属性，属性值是css属性键值对 <h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式 定义<style>标签，在标签内部定义css样式 <style> h1 {...} </style>
外联样式 定义<link>标签，通过href属性引入外部css文件 <link rel="stylesheet" href="css/news.css">

CSS选择器

1.元素（标签）选择器：

  • 选择器的名字必须是标签的名字
  • 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
    css样式名:css样式值；
}

例子如下：

 div{
     color: red;
 }

2.id选择器:

  • 选择器的名字前面需要加上#
  • 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
#id属性值 {
    css样式名:css样式值；
}

例子如下：

#did {
    color: blue;
}

3.类选择器：

  • 选择器的名字前面需要加上 .
  • 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
.class属性值 {
    css样式名:css样式值；
}

例子如下：

.cls{
     color: green;
 }

这里使用了第二种CSS引入方式，内嵌样式，<style>包裹，里面用了三种CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        /* 元素选择器 */
        /* span {
            color: red;
        } */

        /* 类选择器 */
        /* .cls {
            color: green;
        } */
        
        /* ID选择器 */
        #time {
            color: #968D92;
            font-size: 13px; /* 设置字体大小 */
        }

    </style>
</head>
<body>

    <img src="img/news_logo.png"> 新浪政务 > 正文

    <h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>

    <hr>
    <span class="cls" id="time">2023年03月02日 21:50</span>  <span class="cls">央视网</span>
    <hr>

</body>
</html>

页面布局

盒子模型，盒子部分指的是border及以内的部分，不包括margin

image-20240228095942357

image-20240228100247314

  • 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

  • 标签：

  • 特点：

    • div标签：

      • 一行只显示一个（独占一行）

      • 宽度默认是父元素的宽度，高度默认由内容撑开

      • 可以设置宽高（width、height）

    • span标签：

      • 一行可以显示多个

      • 宽度和高度默认由内容撑开

      • 不可以设置宽高（width、height）

box-sizing: border-box，此时指定width height为盒子的高宽，而不是content的高宽

表格标签

  • table> : 用于定义整个表格, 可以包裹多个 <tr>， 常用属性如下：

    • border：规定表格边框的宽度
    • width：规定表格的宽度
    • cellspacing: 规定单元之间的空间

  • <tr> : 表格的行，可以包裹多个 <td>

  • <td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th> ,th具有加粗居中展示的效果

表单标签

  • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。

  • 表单标签: <form>

  • 表单属性:

    • action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
    • method: 规定用于发送表单数据的方式，常见为： GET、POST。
      • GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
      • POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。

  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。

    • input: 定义表单项，通过type属性控制输入形式
    type取值 描述
    text 默认值，定义单行的输入字段
    password 定义密码字段
    radio 定义单选按钮
    checkbox 定义复选框
    file 定义文件上传按钮
    date/time/datetime-local 定义日期/时间/日期时间
    number 定义数字输入框
    email 定义邮件输入框
    hidden 定义隐藏域
    submit / reset / button 定义提交按钮 / 重置按钮 / 可点击按钮
    • select: 定义下拉列表
    • textarea: 定义文本域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">
	 	
     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>
  • name="gender"：这个属性定义了单选按钮组的名称，它们被分为同一个组，因此只能选择其中的一个按钮。在这种情况下，所有具有相同 name 属性值的单选按钮都被视为同一组。
  • value="1" 和 value="2"：这些是单选按钮的值。当用户选择某个单选按钮时，该单选按钮的值将被提交到服务器。在这种情况下，value="1" 表示选择男性，而 value="2" 表示选择女性。
  • 用户在浏览器中看到的文本内容是 "男" 和 "女"。

这里的label意味着用户不仅可以点击单选按钮本身来选择选项，当用户单击 "女" 这个标签文本时，与之关联的单选按钮也会被选中。

JavaScript

JS引入方式

**第一种方式：**内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>
    alert("Hello JavaScript")
</script>

**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含<script>标签
  • 引入外部js的<script>标签，必须是双标签

例子：

<script src="js/demo.js"></script>

注意：demo.js中只有js代码，没有<script>标签

JS基础语法

书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 大括号表示代码块

  • 注释：

    • 单行注释：// 注释内容

    • 多行注释：/* 注释内容 */

输出的三种形式：

api 描述
window.alert() 警告框
document.write() 在HTML 输出内容
console.log() 写入浏览器控制台

变量

关键字 解释
var 早期ECMAScript5中用于变量声明的关键字
let ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效（大括号）
const 声明常量的，常量一旦声明，不能修改

var:作用域比较大，全局的；可以重复定义，后面的覆盖前面的

let：局部变量(代码块内生效{})，不可重复定义。

const: const pi=3.14

数据类型和运算符

数据类型 描述
number 数字（整数、小数、NaN(Not a Number)）
string 字符串，单双引皆可
boolean 布尔。true，false
null 对象为空
undefined 当声明的变量未初始化时，该变量的默认值是 undefined
运算规则 运算符
算术运算符 + , - , * , / , % , ++ , --
赋值运算符 = , += , -= , *= , /= , %=
比较运算符 > , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符 && , || , !
三元运算符 条件表达式 ? true_value: false_value

image-20240228122315690

parseint() ,将其他类型转化为数字

函数

第一种：

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
  • 返回值也不需要声明类型，直接return即可

如下示例：

function add(a, b){
    return a + b;
}

var result=add(10,20)可以接收返回值

第二种可以通过var去定义函数的名字，具体格式如下：

var functionName = function (参数1,参数2..){   
	//要执行的代码
}

如下示例：

var add = function(a,b){
        return  a + b;
    }

var result = add(10,20); 函数的调用不变

JS对象

Array对象

方式1：

var 变量名 = new Array(元素列表);

例如：

var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

方式2：

var 变量名 = [ 元素列表 ];

例如：

var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

长度可变=》可以直接arr[10]=100，不会报错

类型可变=》arr[1]="hello"，可以既存数字又存字符串

属性：

属性 描述
length 设置或返回数组中元素的数量。

方法：

方法方法 描述
forEach() 遍历数组中的每个有值的元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素

普通for循环：会遍历每个数组元素，无论是否有值

var arr = [1,2,3,4];
arr[10] = 50;
	for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

foreach：

arr.forEach(function(e){
     console.log(e);
})

在ES6中，引入箭头函数的写法，语法类似java中lambda表达式，修改上述代码如下：

arr.forEach((e) => {
     console.log(e);
})

push: arr.push(7,8,9) 可以一次添加多个元素

splice: arr.splice（start，cnt），从start开始，删cnt个元素

String字符串

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

属性 描述
length 字符串的长度。

方法：

方法 描述
charAt() 返回在指定位置的字符。
indexOf() 检索字符串。
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符。

  • length属性：

    length属性可以用于返回字符串的长度，添加如下代码：

    //length
console.log(str.length);

  • charAt()函数：

    charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：

    console.log(str.charAt(4));

  • indexOf()函数

    indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：

    console.log(str.indexOf("lo"));

  • trim()函数

    trim()函数用于去除字符串两边的空格的。添加如下代码：

    var s = str.trim();
console.log(s.length);

  • substring()函数

    substring()函数用于截取字符串的，函数有2个参数。

    参数1：表示从那个索引位置开始截取。包含

    参数2：表示到那个索引位置结束。不包含

    console.log(s.substring(0,5));

JSON对象

自定义对象
var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()
json对象

JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

JSON字符串示例：

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);

注意外层的单引号不要忘记！

JSON字符串=》JS对象

var obj = JSON.parse(jsonstr);

对象.属性 就可以获得key对应的值

JS对象=》JS字符串

var jsonstr=JSON.stringify(obj)
JSON格式数据

{"name":"666"} 是一个 JSON 对象，[{"name":"666"},{"name":"li"}] 是一个 JSON 数组，它们都是 JSON 格式的数据。

BOM对象

重点学习的是Window对象、Location（地址栏）对象

window对象

常用方法：通过可简写，window.alert()->alert()

函数 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

fn:函数，需要周期性执行的功能代码

毫秒值：间隔时间

//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);

setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致

注释掉之前的代码，添加代码如下：

//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
	alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

设置后会自动跳转到该地址。

DOM对象

DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

1668796698067

那么我们学习DOM技术有什么用呢？主要作用如下：

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

从而达到动态改变页面效果目的。

DOM获取
函数 描述
document.getElementById() 根据id属性值获取，返回单个Element对象
document.getElementsByTagName() 根据标签名称获取，返回Element对象数组
document.getElementsByName() 根据name属性值获取，返回Element对象数组
document.getElementsByClassName() 根据class属性值获取，返回Element对象数组

示例代码：

<body>
    <img id="h1" src="img/off.gif">  <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>
  • document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。
<script>
//1. 获取Element元素

//1.1 获取元素-根据ID获取
 var img = document.getElementById('h1');
 alert(img);
</script>
  • document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。重点！
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
     alert(divs[i]);
}
DOM修改

同上面的例子：

你想要如何操作获取到的DOM元素，你需要查阅手册，看它支持的属性

image-20240228185708363

var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "传智教育666";

JS事件

JavaScript对于事件的绑定提供了2种方式：

  • 方式1：通过html标签中的事件属性进行绑定
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>
  • 方式2：通过DOM中Element元素的事件属性进行绑定
<input type="button" id="btn2" value="事件绑定2">
<script>  
document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}
</script>

常见事件：

事件属性名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开

VUE

VUE简介

我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？

MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：

  • Model: 数据模型，特指前端中通过请求从后台获取的数据
  • View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
  • ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

image-20240228194959643

基于上述的MVVM思想，其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分，我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。

VUE快速上手

第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目录，将资料/vue.js文件目录下得vue.js拷贝到js目录

第二步：然后编写<script>标签来引入vue.js文件，代码如下：

<script src="js/vue.js"></script>

第三步：在js代码区域定义vue对象,代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>

在创建vue对象时，有几个常用的属性：

  • el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
  • data: 用来定义数据模型
  • methods: 用来定义函数。这个我们在后面就会用到

第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>

Vue指令

**指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

V-bind和v-model

  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。单向绑定！

  • v-model： 在表单元素上创建双向数据绑定。什么是双向？

    • vue对象的data属性中的数据变化，视图展示会一起变化

    • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。

<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>

v-on

v-on: 用来给html标签绑定事件的

<input type="button" value="点我一下" v-on:click="handle()">

简写：

<input type="button" value="点我一下" @click="handle()">

script：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>

v-if和v-show

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>

年龄<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>

v-show和v-if的作用效果是一样的，只是原理不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

vue-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

 <div id="app">
     <div v-for="addr in addrs">{{addr}}</div>
     <hr>
     <div v-for="(addr,index) in addrs">{{index}} : {{addr}}</div>
</div>

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>

index从0开始

Vue生命周期

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

其中我们需要重点关注的是**mounted,**其他的我们了解即可。

与methods平级

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

Ajax-Axios

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

  • 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

现在Ajax已经淘汰，用Axios了，是对Ajax的封装

Axios快速上手

Axios的使用比较简单，主要分为2步：

  • 引入Axios文件

    <script src="js/axios-0.18.0.js"></script>

  • 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

    • 发送 get 请求

      axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

    • 发送 post 请求

      axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

推荐以下方法！

方法 描述
axios.get(url [, config]) 发送get请求
axios.delete(url [, config]) 发送delete请求
axios.post(url [, data[, config]]) 发送post请求
axios.put(url [, data[, config]]) 发送put请求 
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

axios使用步骤：

步骤：

  1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
  2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
  3. 拿到数据，数据需要绑定给vue的data属性
  4. 在<tr>标签上通过v-for指令遍历数据，展示数据，这里同Vue中的步骤。
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>

Vue中先定义emps空数组，再axios将数据取到里面 this.emps=xxxx

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
自学
喜欢就支持一下吧
点赞 0 分享 收藏
版权属于：zy123
本文链接：https://blog.bitday.top/archives/53.html
作品采用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
评论 抢沙发
取消