小白的前端总结

最新推荐文章于 2023-07-24 14:02:19 发布

穿着红色卫衣的程序猿

最新推荐文章于 2023-07-24 14:02:19 发布

阅读量223

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/guozhe888/article/details/116166952

版权

笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

1.首先是html，用来写前端页面的内容

2.其次用bootstrap来直接渲染页面或者饿了么element-ui；也就是开发好的一整套css

<link rel="stylesheet" href="css/bootstrap.min.css" />

3.js语言是要简单学习的，因为js衍生出了ajax进行前后端的交互，它负责把页面请求发送给后端java；因为js衍生json，替代了xml（极大的萎缩），json是字符串的形式。方便获取；因为js中衍生出了DOM树，根据扫描（从上到下遍历html文件）形成dom，可以更快的获取html中的元素属性。

js出品了一套访问标准，api  
1）tagName		document.getElementsByTagName  
2）className		document.getElementsByClassName  
3）name			document.getElementsByName  
4）id					document.getElementById

在js中万物var，对象Object，和java一样，它也是面向对象语言
es6是js高版本，block scoping 块域，变量更加作用域小，释放越快，代码精度越高
let替代var，const常量（不允许修改）
箭头函数 arrow function写法不同，this会有新的定义，不能乱用
箭头函数只是简化js函数，不能完全实现所有函数写法
this 在普通函数中代表当前对象
this 在箭头函数中代表window对象，不能使用！！！！

4.json

交换数据：两台计算机通讯，计算机+网络 TCP/IP，不能传递java对象
txt（1000,2000,3000）没有层次结构
xml（1000）自定义标签，比txt强，知道是什么数据，标签量非常大，远超数据
造成网络传输数据量增加，性能低
json（也有标签，[]数组、{}一条记录、“key”,“value”，属性和值）。它既能表示字段是谁，有能有数据

放京东商城，获取某个商品的价格（链接来自京东公开地址（说明书），爬虫，自己分析网站页面）
https://p.3.cn/prices/mgets?skuIds=J_100008348542

JSON字符串，返回是一个数组（[]）数组中只有一条记录{}"
"p"代表商品价格，"id"代表商品编号：100008348542

[
	{
		"p":"4879.00",
		"op":"5299.00",
		"cbf":"0",
		"id":"J_100008348542",
		"m":"6000.00"
	}
]

ajax

提交请求：https://p.3.cn/prices/mgets?skuIds=J_100005185603
请求京东网站，通过ajax技术发出请求（程序，相当于浏览器发起请求），京东服务器进行响应
在内部进行查询，查询这个商品信息，把信息转换json字符串返回给请求（响应）
ajax请求的返回值最终就是json字符串

5.jQuery是在js的基础上进行的封装，改变js日常写法，提供新机制，使代码更加简洁

<script src="jquery.js"></script>
jquery.ajax() 常用有7个参数

type: GET/POST，链接形式差异
url: 京东链接
data: 参数对象
contentType：发送请求格式：application/json;charset=utf-8;
dataType: 返回数据格式：json/jsonp 跨域（后期京淘项目）
success: 访问成功（data），data就是返回json对象
error(e)：访问出错，网站返回错误信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>商品编号：<span id="itemId"></span></div>
		<div>商品价格：<span id="itemPrice"></span></div>
	</body>
	<script>
		//jquery提供ajax，参数是一个js对象{}
		//"https://p.3.cn/prices/mgets?skuIds=J_100005185603"
		$.ajax({
			type: "POST",
			url: "https://p.3.cn/prices/mgets",
			data: {
				"skuIds" : "J_100005185603"
			},
			contentType:"application/json;charset=utf-8;",
			dataType: "jsonp", 		//Access-Control-Allow-Origin 跨域
			success: function(data){
				console.log("访问成功")
				console.log(data)
				
				//解析id和price
				var item = data[0];	//获取到这条记录
				
				var itemId = item.id;
				var itemPrice = item.p;
				console.log(itemId);
				console.log(itemPrice);
				
				var  id = $("#itemId");
				id.text(itemId);
				id.css("color", "blue");
				
				var price = $("#itemPrice");
				price.text( itemPrice);
				price.css("color", "red");
			},
			error: function( e ){
				console.log("访问失败")
			}
		})
	</script>
</html>

6.vue框架，小型页面，第一导入vue，第二创建vue对象，第三在div用{{ }}插值表达式展示

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<h3>
			开发vue页面步骤：<br>
			1、单独导入vue.js<br>
			2、按vue的语法结构去写代码，少量api new Vue()<br>
			3、body中加一个div，所有内容要写在这个div中，习惯id="app"<br>
			两个大括号括起来值必须在data中进行定义，就可以访问，这个写法插值表达式<br>
		</h3>
		
		<div id="app">
			{{msg}}<br>
			{{msg}}
		</div>
	</body>
	<script>
		//准备数据
		var data = {
			msg: "hello vue js "
		}
		//创建一个js对象，这个参数结构是Vue定死
		var p = {
			el: "#app",		//固定写死，el是element，挂载点，和页面id=app相对应
			data: data		//vue管理数据，固定写死 data，后面data js对象
		}
		var vm = new Vue(p); //这里参数是一个js对象
	</script>
</html>

在这里插入图片描述
js、jquery、vue分别获取修改数据

穿着红色卫衣的程序猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
小白的前端总结

1.首先是html，用来写前端页面的内容2.其次用bootstrap来直接渲染页面或者饿了么element-ui；也就是开发好的一整套css<link rel="stylesheet" href="css/bootstrap.min.css" />3.js语言是要简单学习的，因为js衍生出了ajax进行前后端的交互，它负责把页面请求发送给后端java；因为js衍生json，替代了xml（极大的萎缩），json是字符串的形式。方便获取；因为js中衍生出了DOM树，根据扫描（从上到下遍历htm
复制链接

扫一扫

专栏目录