Web:全球局域网,也成为万维网,能够通过浏览器访问的网站。
HTML:负责网页的结构(页面元素和内容)
CSS:负责网页的表现(页面元素大的外观、位置等页面样式,如:颜色、大小等)
JavaScript:负责网页的行为(交互效果)
HTML
超文本标记语言
CSS
层叠样式表,用于控制页面的样式(表现)。
<h1>...<h6>
(h1 -> h6 重要程度依次降低)<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集为UTF-8 -->
<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>
</head>
<body>
<!--
img标签:
src:图片资源路径
width:宽度(px:像素;%:相对于父元素的百分比)(占整个body标签的百分比)
height:高度(px:像素;%:相对于父元素的百分比)
一般都指定一个,此时图片会等比例缩放
相对路径:
./:当前目录,可以省略
../:上一级目录,不可以省略
-->
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务>正文
<h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
颜色表示方法
表示方式 | 表示含义 | 取值 |
---|---|---|
关键字 | 预定义的颜色名 | red、blue、green…… |
rgb 表示法 | 红绿蓝三原色,每项取值范围:0~255 | rgb(0,0,0)、rgb(255,255,255) |
十六进制表示法 | #开头,将数字转换成十六进制表示 | #000000、#ff0000 |
代码实现:
<!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: red;
}
span{
color: black;
}
</style>
</head>
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务>正文
<!-- 行内样式 -->
<!-- <h1 style="color: brown;">焦点访谈:中国底气 新思想夯实大国粮仓</h1> -->
<!-- <h1>焦点访谈:中国底气 新思想夯实大国粮仓</h1> -->
<!-- 外联样式 -->
<h1 link rel="stylesheet" href="CSS/news.css">焦点访谈:中国底气 新思想夯实大国粮仓</h1>
<hr>
<span>2023年03月02日 21:50 央视网</span>
<hr>
</body>
</html>
<!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: #968D92; 优先级最低
} */
/* 类选择器 */
/* .cls{
color: #968D92;
} */
/* id选择器 */
#time{
color: #968D92; /* 优先级最高 */
font-size: 13px; /* 设置字体大小 */
}
</style>
</head>
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务>正文
<!-- 外联样式 -->
<h1 link rel="stylesheet" href="CSS/news.css">焦点访谈:中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span>
<span>央视网</span>
<hr>
</body>
</html>
<!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;
}
#time{
color: #968D92; /* 优先级最高 */
font-size: 13px; /* 设置字体大小 */
}
a{
color: black;
text-decoration: none;
}
</style>
</head>
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
<!-- 外联样式 -->
<h1 link rel="stylesheet" href="CSS/news.css">焦点访谈:中国底气 新思想夯实大国粮仓</h1>
<hr>
<span id="time">2023年03月02日 21:50</span> <span><a href="https://www.cctv.com/" target="_blank">央视网</a></span>
<hr>
</body>
</html>
<video>
<audio>
<p>
<b>
/ <strong>
代码实现
<!-- 视频 -->
<video src="video/1.mp4" controls width="950px"></video>
<!-- 音频 -->
<!-- <audio src="audio/1.mp3"></audio> -->
<!-- 文本 -->
<p>
<b>央视网消息</b>(焦点访谈):党的十八大以来,以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事,重农抓粮一系列政策举措有力有效,我国粮食产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中,为保障经济社会发展提供了坚实支撑,为应对各种风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢?
</p>
<p>
人勤春来早,春耕农事忙。立春之后,由南到北,我国春耕春管工作陆续展开,春天的田野处处生机盎然。
</p>
<img src="img/1.jpg">
<p>
今年,我国启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。2015年以来,我国粮食产量连续8年稳定在1.3万亿斤以上,人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。
</p>
<img src="img/2.jpg">
<p>
中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展,意味着我们要立足国内,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮食安全是一个永恒的课题,任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下,亿万中国人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这一“国之大者”,把中国人的饭碗牢牢端在自己手中,夯实中国式现代化基础。
</p>
<p id="plast">
责任编辑:王树森 SN242
</p>
<div> <span>
#center{
width: 65%;
/* margin: 0% 0% 17.5% 17.5%; */
margin: 0 auto;
}
标签 | 描述 | 属性 / 备注 |
---|---|---|
<table> | 定义表格整体,可以包裹多个<tr> | border:规定表格边框的高度 width:规定表格的宽度 cellspacing:规定单元格之间的空间 |
<tr> | 表格的行,可以包裹多个<td> | 一个 tr 是一个行 |
<td> | 表格单元格(普通),可以包裹内容 | 如果是表头单元格,可以替换为 <th> |
代码演示:
<!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>
table{
text-align: center; /* 将表中数据居中 */
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>品牌</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td><img src="img/huawei.jpg" width="100px"></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td><img src="img/alibaba.jpg" width="100px"></td>
<td>阿里</td>
<td>阿里巴巴集团股份有限公司</td>
</tr>
</table>
</body>
</html>
<form>
<input>
:定义表单项,通过 type 属性控制输入格式type取值 | 描述 |
---|---|
text | 默认值,定义单行的输入字段 |
password | 定义密码字段 |
radio | 定义单选按钮 |
checkbox | 定义复选框 |
file | 定义文件上传按钮 |
date / time / datetime-local | 定义日期 / 时间 / 日期时间 |
number | 定义数字输入框 |
定义邮件输入框 | |
hidden | 定义隐藏域 |
submit / reset / button | 定义提交按钮 / 重置按钮 / 可点击按钮 |
代码实现:
<body>
<!--
form表单属性:
action:表单提交的url,往何处提交数据,如果不指定,默认提交到当前页面
method:表单的提交方式
get: (默认值)在url后面拼接表单数据,比如:?username=Tom&age==12,url长度有限制
post: 在消息体(请求体)中传递的,参数大小无限制
-->
<form action="" method="get">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<!-- type="text"为文本输入框 -->
<input type="submit" name="提交">
</form>
</body>
JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页可交互。
JavaScript和Java是完全不同的语言,不论是概念还是设计。但是基础语法类似。
JavaScript在1995年由Brendan Eich发明,并于1997年成为ECMA标准。
ECMAScript 6 (ES6)是最新的JavaScript版本(发布于2015年)。
ECMA: ECMA国际(前身为欧洲计算机制造商协会),制定了标准化的脚本程序设计语言ECMAScript,这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的。
<script></script>
标签之间<script>
<body>
元素的底部,可改善显示速度<script>
标签<script>
标签不能自闭和代码实现:
<script>
//方式一:弹出警告框
window.alert("Hello JS");
//方式二:写入html页面中
document.write("Hello JS");
//方式三:控制台输出
console.log("Hello JS");
</script>
代码实现:
<script>
//var定义变量
var a = 10;
a = "张三";
alert(a);
/* 特点:作用域比较大,属于全局变量
特点:可以重复定义 */
// {
// var x = a;
// var x = "A";
// }
// alert(x);
//let:局部变量,不能重复定义
{
let x = 1;
}
alert(x);
//const:常量,不能被改变的
const pi = 3.14;
pi = 3.15;
alert(pi);
</script>
数据类型:
JavaScript 中分为:原始类型 和 引用类型。
代码演示:
var age = 20;
var _age = "20";
var $age = 20;
alert(age == _age); //true
alert(age === _age); //false
alert(age === $age); //true
流程控制语句:与Java 相同
代码演示:
function add(a, b){
return a + b;
}
var result = add(10, 20);
alert(result);
定义方式二:
var functionName = function(参数1, 参数2...){
//要执行的代码
}
代码演示:
var add = function(a, b){
return a + b;
}
代码实现:
<script>
//定义函数 - 1
function add(a, b){
return a + b;
}
//定义函数 - 2
var add = function(a, b){
return a + b;
}
//函数调用
var result = add(10, 20);
alert(result);
</script>
注意:js 中,函数调用可以传递任意个数的参数
代码实现:
<script>
//定义数组 - 1
// var arr = new Array(1, 2, 3, 4);
//定义数组 - 2
var arr = [1, 2, 3, 4];
console.log(arr[0]);
/* 特点:长度可变,类型可变 */
arr[10] = 50;
console.log(arr[10]);
console.log(arr[8]); //undefined
arr[9] = "A";
console.log(arr[9]);
</script>
注意:JavaScript中的数组相当于 Java 中的集合,数组的长度是可变的,而JavaScript是弱类型,所以可以存储任意类型的数据。
属性:
length:设置或返回数组中元素的数量
代码实现:
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
方法:
方法 | 描述 |
---|---|
forEach() | 遍历数组中的每个有值的元素,并调用一次传入的函数 |
push() | 将新元素添加到数组的末尾,并返回新的长度 |
splice() | 从数组中删除元素 |
代码实现:
//forEach:遍历数组中有值的元素
arr.forEach(function(e){
console.log(e);
})
//ES6 箭头函数:(...)=>{...} ----简化函数定义
arr.forEach((e) => {
console.log(e);
})
//添加元素到数组的末尾
arr.push(7, 8, 9);
console.log(arr);
//splice删除元素
arr.splice(2, 2);
console.log(arr);
箭头函数(ES6):用来简化函数定义语法的。具体格式为:( ... )=>{ ... },如果需要给箭头函数起名字:
var xxx = ( ... ) => { ... }
属性:length --------------->字符串长度
方法:
方法 | 描述 |
---|---|
charAt() | 返回在指定位置的字符 |
indexOf() | 检索字符串 |
trim() | 去除字符串两边的空格 |
substring() | 提取字符串中两个指定的索引号之间的长度 |
JavaScript 自定义对象:
代码实现:
<script>
//自定义对象
var user = {
name: "Tom",
age: 10,
gender: "male",
//编写方法:
/* eat: function(){
alert("吃饭~")
} */
eat (){
alert("吃饭~")
}
}
alert(user.name);
user.eat();
</script>
JSON - 介绍
{
"name": "Tom",
"age" : 20,
"gender": "male",
};
基础语法:
代码实现:
// 定义json
var jsonStr = '{"name": "Tom","age": 18, "addr": ["北京", "上海", "西安"]}';
alert(jsonStr.name);
//json形式的字符串转换为js对象
var obj = JSON.parse(jsonStr);
alert(obj.name);
//js对象转换为json字符串
alert(JSON.stringify(obj));
Window
Location
代码实现:
<script>
//获取
window.alert("Hello BOM");
alert("Hello BOM Window");
//方法
//confirm - 对话框 -- 确认:true,取消:false
var flag = confirm("您确认删除该记录吗?");
alert(flag);
//定时器 = setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function() {
i ++;
console.log("定时器在执行了" + i + "次");
},2000); //毫秒值
//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000); //毫秒
//location
alert(location.href); //获取当前地址链接
location.href = "https://www.beihua.edu.cn"; //跳转到指定的地址
</script>
概念:Document Object Model,文档对象模型
<html>
标签被封装为文档对象<h1>
标签中的文本)<img>
<input type='button'>
HTML 中的 Element对象可以通过 Document 对象获取,而 Document 对象是通过 window 对象获取的
代码实现:
<script>
//1.获取Element元素
//1.1 获取元素 - 根据ID获取
var img = document.getElementById('h1');
alert(img);
//1.2 获取元素 - 根据标签获取
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
//1.3 获取元素 - 根据 name 属性获取
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);
}
//1.4 获取元素 - 根据class属性获取
var classes = document.getElementsByClassName('cls');
for (let i = 0; i < classes.length; i++) {
alert(classes[i]);
}
//2. 查询参考手册,属性、方法
var classes = document.getElementsByClassName('cls');
var div1 = classes[0];
div1.innerHTML = "666"; //改变第一个元素的内容
</script>
<input type = "button" onclick = "on()" value = "按钮1">
<script>
function on(){
alert('我被点击了');
}
</script>
通过 DOM 元素属性绑定
<input type = "button" id = "btn" value = "按钮2">
<script>
document.getElmentById('btn').onclick = function(){
alert('我被点击了');
}
</script>
代码实现:
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("按钮1被点击了");
}
document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了");
}
</script>
事件名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onkeydown | 某个键盘的键被按下 |
onmouseover | 鼠标被移到某个元素之上 |
onmouseout | 鼠标从某元素移开 |
代码实现:
<body onload="load()"><!-- body部分加载完成之后会自动触发该事件 -->
<form action="" style="text-align: center;" onsubmit="subfn()">
<!-- 在一个输入框中,点击进去获得焦点(此时写数据触发onkeydown键盘按下);点到外面,失去焦点 -->
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<!-- 定义button按钮绑定onclick事件 -->
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<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>
//onload : 页面/元素加载完成后触发
function load(){
console.log("页面加载完成...")
}
//onclick: 鼠标点击事件
function fn1(){
console.log("我被点击了...");
}
//onblur: 失去焦点事件
function bfn(){
console.log("失去焦点...");
}
//onfocus: 元素获得焦点
function ffn(){
console.log("获得焦点...");
}
//onkeydown: 某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}
//onmouseover: 鼠标移动到元素之上
function over(){
console.log("鼠标移入了...")
}
//onmouseout: 鼠标移出某元素
function out(){
console.log("鼠标移出了...")
}
//onsubmit: 提交表单事件
function subfn(){
alert("表单被提交了...");
}
</script>
框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。
<script>
new Vue({
el: "#app",
data: {
message: "Hello Vue"
}
})
</script>
<div id = "app">
<input type = "text" v-model = "message"> {{message}}
</div>
插值表达式
{{ 表达式 }}
生命周期:指一个对象从创建到销毁的整个过程
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
mounted:挂载完成,Vue初始化成功,HTML 页面渲染成功(发送请求到服务端,加载数据)
介绍:Axios 对原生的 Ajax 进行了封装,简化书写,快速开发
axios({
method:"get",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/list" })
.then((result)=>{
console.log(result.data);
});
axios({
method:"post",
url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteByld",
data:"id=1" })
.then((result)=>{ console.log(result.data);
})
<!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>Ajax-Axios-案例</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/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>
<th>最后操作时间</th>
</tr>
<tr align="center" v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image" width="70px" height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
emps:[]
},
mounted () {
//发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
this.emps = result.data.data;
})
}
});
</script>
</html>
介绍
当前最为主流的开发模式:前后端分离
前端开发人员和后端开发人员在开发过程中都要遵循接口文档
YAPI --- 接口文档管理平台
是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
基于 Vue 脚手架创建出来的工程,有标准的目录结构
src目录下
目录 | 含义 |
---|---|
assets | 静态资源 |
components | 可重用的组件 |
router | 路由配置 |
views | 视图组件(页面) |
App.vue | 入口页面(根组件) |
main.js | 入口 js 文件 |
Vue 的组件以 .vue结尾,每个组件由三个部分组成:<template>、<script>、<style>
Table表格
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。
pagination分页展示
当数据量过多时,使用分页分解数据
<template>
<div>
<!-- button按钮 -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<br />
<!-- Table 表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
<!-- Pagination 分页 -->
<el-pagination background layout="total,sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="1000"></el-pagination>
<br><br>
<!-- Dialog对话框 -->
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<!-- Dialog对话框-Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: ''
},
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
methods: {
handleSizeChange:function(val){
alert("每页记录数变化" + val)
},
handleCurrentChange:function(val){
alert("页码发生变化" + val)
},
onSubmit:function(){
alert(JSON.stringify(this.form));
}
}
};
</script>
<style>
</style>
Java项目的构建方案
Maven 是 apache 旗下的一个开源项目,是一款用于管理和构建Java项目的工具
Apache Maven 是一个项目管理和构建工具,它基于项目对象模型(POM)的概念,通过一小段描述信息管理项目的构建
<groupId>org.example</groupId>
<artifactId>untitled</artifactId>
<version>1.0-SNAPSHOT</version>
<groupId>org.example</groupId>
<artifactId>untitled</artifactId>
<version>1.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.4.7</version>
</dependency>
</dependencies>
依赖具有传递性
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.4.7</version>
<exclusions>
<groupld>junit</groupld>
<artifactld>junit</artifactld>
</exclusions>
</dependency>
依赖的 jar 包,默认情况下,可以在任何地方使用。可以通过<scope>...</scope>设置其作用范围。
scope值 | 主程序 | 测试程序 | 打包(运行) | 范例 |
---|---|---|---|---|
compile(默认) | Y | Y | Y | log4j |
test | - | Y | - | junit |
provided | Y | Y | - | servlet-api |
runtime | - | Y | Y | jdbc驱动 |
Maven的生命周期就是为了对所有的maven项目构建过程进行抽象和统一
Spring
Spring 发展到今天已经形成了一种开发生态圈,Spring 提供了若干个子项目,每个项目用于完成特定的功能
SpringBoot
SpringBoot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。
启动程序:创建项目时自己生成
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/*启动类----启动springboot工程*/
@SpringBootApplication
public class SpringbootQuickstartApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootQuickstartApplication.class, args);
}
}
代码实现:
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
//请求处理类
@RestController
public class HelloController {
@RequestMapping("/hello")//浏览器将来请求 /hello 这个地址就会调用这个方法
public String hello(){
System.out.printf("Hello World~");
return "Hello World~";
}
}
实现时,浏览器输入localhost:8080/hello即可实现
概述
Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器与服务器之间数据传输的规则。
状态码 | 英文描述 | 解释 |
---|---|---|
200 | OK | 客户端请求成功,即处理成功,这是我们最想看到的状态码 |
302 | Found | 指示所请求的资源已移动到由Location响应头给定的 URL,浏览器会自动重新访问到这个页面 |
304 | Not Modified | 告诉客户端,你请求的资源至上次取得后,服务端并未更改,你直接用你本地缓存吧。隐式重定向 |
400 | Bad Request | 客户端请求有语法错误,不能被服务器所理解 |
403 | Forbidden | 服务器收到请求,但是拒绝提供服务,比如:没有权限访问相关资源 |
404 | Not Found | 请求资源不存在,一般是URL输入有误,或者网站资源被删除了 |
405 | Method Not Allowed | 请求方式有误,比如应该用GET请求方式的资源,用了POST |
428 | Precondition Required | 服务器要求有条件的请求,告诉客户端要想访问该资源,必须携带特定的请求头 |
429 | Too Many Requests | 指示用户在给定时间内发送了太多请求(“限速”),配合 Retry-After(多长时间后可以请求)响应头一起使用 |
431 | Request Header Fields Too Large | 请求头太大,服务器不愿意处理请求,因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。 |
500 | Internal Server Error | 服务器发生不可预期的错误。服务器出异常了,赶紧看日志去吧 |
503 | Service Unavailable | 服务器尚未准备好处理请求,服务器刚刚启动,还未初始化好 |
状态码大全:https://cloud.tencent.com/developer/chapter/13553
Web服务器是一个软件程序,对HTTP协议的操作进行封装,使得程序员不必直接对协议进行操作,让Web开发更加便捷。主要功能是 “ 提供网上信息阅览服务 ”。
起步依赖:
Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件
作用:常用于进行接口测试
简单实体对象:请求参数名与形参对象属性名相同,定义POJO接收即可
public class User {
private String name;
private Integer age;
}
@RequestMapping("/simplePojo")
public String simplePojo(User user){
System.out.println(user);
return "OK";
}
@RequestMapping("/arrayParam")
public String arrayParam(String[] hobby){ //数组名和前端请求参数名一致
System.out.println(Arrays.toString(hobby));
return "OK";
}
@RequestMapping("/listParam")
public String listParam(@RequestParam list<String> hobby){
System.out.println(hobby);
return "OK";
}
@RequestMapping("/dateParam")
public String dateParam(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime updateTime){
System.out.println(updateTime);
return "OK";
}
{ "name":"ITCAST", "age":166, "address":{ "province":"北京", "city":"北京" } }
先创建一个实体对象
public class User{
private String name;
private Integer age;
private Address address;
}
public class Address{
private String province;
private String city;
}
JSON格式数据
{
"name":"Tom",
"age":10,
"address":{
"province":"beijing",
"city":"beijing"
}
}
再将请求数据封装到实体对象中
@RequessMapping("/jsonParam")
public String jsonParam(@RequestBody User user){
System.out.println(user);
return "OK";
}
@RequestMapping("/listAddr")
public List<Address> listAddr(){
List<Address> list = new ArrayList<>();
Address addr = new Address();
addr.setProvince("广东");
addr.setCity("深圳");
list.add(addr);
return list;
}
一个路径
@RequestMapping("/path/{id}")
public String pathParam(@PathVriable Integer id){
System.out.println(id);
return "OK";
}
多个路径
@RequestMapping("/path/{id}/{name}")
public String pathParam(@PathVriable Integer id, @PathVriable String name){
System.out.println(id + ":" + name);
return "OK";
}
统一响应结果
package com.itheima.pojo;
/**
* 统一响应结果封装类
*/
public class Result {
private Integer code ;//1 成功 , 0 失败
private String msg; //提示信息
private Object data; //保存查询数据 data
public Result() {
}
public Result(Integer code, String msg, Object data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public static Result success(Object data){
return new Result(1, "success", data);
}
public static Result success(){
return new Result(1, "success", null);
}
public static Result error(String msg){
return new Result(0, msg, null);
}
@Override
public String toString() {
return "Result{" +
"code=" + code +
", msg='" + msg + '\'' +
", data=" + data +
'}';
}
}
获取员工数据,返回统一响应结果,在页面渲染展示
<!--解析XML-->
<dependency>
<groupId>org.dom4j</groupId>
<artifactId>dom4j</artifactId>
<version>2.1.3</version>
</dependency>
Springboot 项目的静态资源(html,css,js 等前端资源)默认存放目录为:classpath :/ static、classpath :/ public、classpath :/ reesources
package com.example.controller;
import com.example.pojo.Emp;
import com.example.utils.XmlParserUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.example.pojo.Result;
import java.util.List;
@RestController
public class EmpController {
@RequestMapping("/listEmp")
public Result list(){
/*加载并解析emp.xml*/
String file = "src\\main\\resources\\emp.xml";
System.out.println(file);
List<Emp> empList = XmlParserUtils.parse(file, Emp.class);
/*对数据进行转换 -gender, job*/
empList.stream().forEach(emp -> {
//处理 gender 1:男,2:女
String gender = emp.getGender();
if ("1".equals(gender)){
emp.setGender("男");
}else if ("2".equals(gender)){
emp.setGender("女");
}
//处理job - 1:讲师,2:班主任,3:就业指导
String job = emp.getJob();
if ("1".equals(job)){
emp.setJob("讲师");
} else if ("2".equals(job)) {
emp.setJob("班主任");
} else if ("3".equals(job)){
emp.setJob("就业指导");
}
});
/*响应数据*/
return Result.success(empList);
}
}
Controller层:
@RestController
public class EmpController {
private EmpService empService = new EmpServiceA();
@RequestMapping("/listEmp")
public Result list(){
/*调用service,获取数据*/
List<Emp> empList = empService.listEmp();
/*响应数据*/
return Result.success(empList);
}
}
Service 层:
public class EmpServiceA implements EmpService {
private EmpDao empDao = new EmpDaoA();
@Override
public List<Emp> listEmp() {
/*调用 dao,获取数据*/
List<Emp> empList = empDao.listEmp();
/*对数据进行转换处理*/
empList.stream().forEach(emp -> {
//处理 gender 1:男,2:女
String gender = emp.getGender();
if ("1".equals(gender)){
emp.setGender("男");
}else if ("2".equals(gender)){
emp.setGender("女");
}
//处理job - 1:讲师,2:班主任,3:就业指导
String job = emp.getJob();
if ("1".equals(job)){
emp.setJob("讲师");
} else if ("2".equals(job)) {
emp.setJob("班主任");
} else if ("3".equals(job)){
emp.setJob("就业指导");
}
});
return empList;
}
}
dao 层:
public class EmpDaoA implements EmpDao {
@Override
public List<Emp> listEmp() {
String file = "src\\main\\resources\\emp.xml";
System.out.println(file);
List<Emp> empList = XmlParserUtils.parse(file, Emp.class); //封装到导入进来的 emp 对象中
return empList;
}
}
控制反转:Inversion Of Control,简称 IOC 。对象的创建控制权由程序自身转移到外部(容器)
依赖注入:Dependency Injection,简称 DI。容器为应用程序提供运行时所依赖的资源
Bean对象:IOC 容器中创建、管理的对象
IOC对象又称 Bean 对象,Bean 的声明:要把某个对象交给 IOC 容器管理,需要在对应的类上加上如下注解之一
注解 | 说明 | 位置 |
---|---|---|
@Componet | 声明 bean 的基础注解 | 不属于一下三类时,用此注解 |
@Controller | @Componet 的衍生注解 | 标注在控制器类上 |
@Service | @Componet 的衍生注解 | 标注在业务类上 |
@Repository | @Componet 的衍生注解 | 标注在数据访问类上(由于与 mybatis 整合,用的少) |
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。