网站建设的违约责任,dedecms小说网站模板下载,自助开通网站,阿里巴巴logo高清图一、各种技术概述
1.HTML
#x1f9e8;HTML中文称为超文本标记语言#xff0c;从语义上来说#xff0c;它只是一种是一种标识性的语言#xff0c;并不是一种编程语言。
p这是一段话/p通过这个标签可以表示文本的一个段落。而且其中还有还有图片标签、视…一、各种技术概述
1.HTML
HTML中文称为超文本标记语言从语义上来说它只是一种是一种标识性的语言并不是一种编程语言。
p这是一段话/p通过这个标签可以表示文本的一个段落。而且其中还有还有图片标签、视频标签、声音标签、表格标签等等标签通过将这些标签组织并且关联起来后从而将分散的网络资源整合在一起来展现在人们的面前。它是来设定网页的结构和内容的。
2.CSS
CSS是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
CSS英文全称Cascading Style Sheets中文称为层叠样式表或者级联样式表。它是一种负责页面样式的语言也就是来修饰HTML超文本标记语言的。简单的来说也就是设定网页是以什么样子来表现的。
HTML和它的区别在于HTML只是用来编写网页的结构和内容而它可以决定网页的表现样式。所以标签中的元素展示到页面中的效果应该由CSS来决定。
/*例如*/
p{/*p选择器*/color:red;/*color属性:red值*/font-size:30px;
}3.JS
⚽JS的全称Javascript
Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品最早取名为 LiveScript;为了吸引更多 java 程序员。更名为JavaScript。
JS 是弱类型Java 是强类型
特点 交互性它可以做的就是信息的动态交互 安全性不允许直接访问本地硬盘 跨平台性只要是可以解释 JS 的浏览器都可以执行和平台无关
4.jQuery
jQuery顾名思义也就是 JavaScript 和查询Query它就是辅助 JavaScript 开发的JS类库。
它的核心思想是 write less,do more(写得更少,做得更多)所以它实现了很多浏览器的兼容问题。
jQuery库封装了JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的使用需要导入导入jquery类库jquery-1.7.2.js。 通过文件类型可以看出来jquery本质上也是JS
$ 是 jQuery 的核心函数能完成 jQuery 的很多功能。$ ()就是调用$这个函数
通过$();使用jquery
$();5.Servlet
个人理解可以认为是SpringBoot的Controller的接口
什么是Servlet 1、Servlet 是 JavaEE 规范之一。规范就是接口 2、Servlet 就 JavaWeb 三大组件之一。三大组件分别是Servlet 程序、Filter 过滤器、Listener 监听器。 3、Servlet 是运行在服务器上的一个 java 小程序它可以接收客户端发送过来的请求并响应数据给客户端。
手动实现 Servlet 程序 1、编写一个类去实现 Servlet 接口 2、实现 service 方法处理请求并响应数据 3、到 web.xml 中去配置 servlet 程序的访问地址
6.Jsp
Jsp 的全称是 java server pages。Java 的服务器页面。
Jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据。 因为 Servlet 程序回传 html 页面数据是一件非常繁锁的事情。开发成本和维护成本都极高。
它允许使用特定的标签在 HTML 网页中插入 Java 代码实现动态页面处理所以 JSP 就是 HTML 与Java 代码的复合体。JSP 技术可以快速的实现一个页面的开发相比在 Servlet 中实现页面开发将变得更加容易。 总结 请求转发是一个静态页面而JSP和servlet response是实现动态页面的 普通的请求转发怎么把想要的信息发送给页面接收 比如用户登录如果密码出错需要回传给浏览器显示错误信息在登录界面请求转发怎么做到针对每一个情况写一个html页面吗 显然不可能 实际的应用场景 1.前端有个搜索按钮点击搜索请求Servlet程序 2.Servlet程序获取请求参数、发送sql语句查询信息、保存学生信息到request域中 3.Servlet不太适合回传显示信息、进行请求转发到jsp页面 5.创建jsp专门用来回传显示信息从request中得到数据
7.AJAX
Ajax 即“Asynchronous Javascript And XML”异步 JavaScript 和 XML是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。
ajax 是一种浏览器通过 JS 异步发起请求局部更新页面的技术。
Ajax 请求的局部更新浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容
Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。
Ajax 通过在后台与服务器进⾏少量数据交换Ajax 可以使⽹⻚实现异步更新。这意味着可以在不重新加载整个⽹⻚的情况下对⽹⻚的某部分进⾏更新。
传统的⽹⻚不使⽤ Ajax如果需要更新内容必须重载整个⽹⻚⻚⾯。
8.VUE
Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动。
官方网站https://cn.vuejs.org vue.js下载https://v2.cn.vuejs.org/v2/guide/installation.html
声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 这里的核心思想就是没有繁琐的DOM操作例如jQuery中我们需要先找到div节点获取到DOM对象然后进行一系列的节点操作
在JavaWeb阶段学过JSP、学过JSTL、学过EL表达式用这些比如用JavaScript能发送AJAX请求得到数据在页面中用JSTL然后forEach遍历然后用EL表达式取值最终数据可以显示要用到很多技术。 用vue技术之后这些技术都可以不用vue里面就包含了这些东西可以理解为之前的那些功能用vue都可以做到但vue的做法比之前更加方便更加简单。
9.axios
axios是独立于vue的一个项目基于promise用于浏览器和node.js的http客户端
在浏览器中可以帮助我们完成 ajax请求的发送 在node.js中可以向远程接口发送请求
10.element-ui
element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库方便程序员进行页面快速布局和构建。Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
说的简单点可以快速写页面的各种效果不需要写CSS样式
官网https://element.eleme.cn/#/zh-CN
11.nodejs
什么是Node.js 简单的说 Node.js 就是运行在服务端的 JavaScript。 是JavaScript的运行环境用于执行JavaScript代码环境 不需要浏览器直接使用node.js运行JavaScript代码 模拟服务器效果比如说tomcat
Node.js是一个事件驱动I/O服务端JavaScript环境基于Google的V8引擎V8引擎执行Javascript的速度非常快性能非常好。
Node.js有什么用 如果你是一个前端程序员你不懂得像PHP、Python或Ruby等动态编程语言然后你想创建自己的服务那么Node.js是一个非常好的选择。 Node.js 是运行在服务端的 JavaScript如果你熟悉Javascript那么你将会很容易的学会Node.js。
当然如果你是后端程序员想部署一些高性能的服务那么学习Node.js也是一个非常好的选择。
官网https://nodejs.org/en/ 中文网http://nodejs.cn/ LTS长期支持版本 Current最新版
12.EL表达式
EL 表达式的全称是Expression Language。是表达式语言。
EL 表达式的什么作用输出EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。因为 EL 表达式在输出数据的时候要比 jsp 的表达式脚本要简洁很多。
EL 表达式在输出 null 值的时候输出的是空串。jsp 表达式脚本输出 null 值的时候输出的是 null 字符串。
EL 表达式的格式是${表达式}
${表达式}NUXT
es6
Bootstrap
二、区别
1.JavaScript和jquery之间的联系和区别
1.概念及功能两者之间的联系 JavaScript是用于Web客户端开发的脚本语言 jQuery是js的框架基于js语言。功能集合Ajax技术开发出来的js库封装js和Ajax的功能提供函数接口简化js的操作。注在大多数的项目中jquery 用的比较多。
2.引用 js代码需要写在中 jQuery需要在head标签中引用jQuery库
script languagejavascript src/js/jquery.min.js/script(本地引用)2.JS、jQuery、Vue的联系和区别
JS 是一种脚本语言可以在网页上实现动态效果 jQuery 是一个 JS 库简化了 JS 的操作 Vue 是一个 JS 框架可以实现组件化开发和数据双向绑定。
区别在于 JS 是一种语言而 jQuery 和 Vue 是基于 JS 的库和框架它们都有自己的特点和用途。 jQuery 简化了 JS 的操作使得开发者可以更快速地实现一些常见的功能如 DOM 操作、事件处理等。 Vue 则更加注重组件化开发和数据双向绑定使得开发者可以更加方便地管理和维护代码。
三、使用方式
1.CSS和HTML结合使用
把 css 样式写成一个单独的 css 文件再通过 link 标签引入即可复用。
div{border: 1px solid yellow;
}
span{border: 1px solid red;
}!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--link 标签专门用来引入 css 样式代码--!-- link relstylesheet typetext/css href./styles.css / 标签--!--relstylesheet定义一个外部加载的样式表--link relstylesheet typetext/css href1.css/
/headbodydivdiv 标签 1/divdivdiv 标签 2/divspanspan 标签 1/spanspanspan 标签 2/span
/body
/html2.JS
HTML引入JS
使用 script 标签引入单独的 JavaScript 代码文件 script标签引入外部的js文件来执行 src 属性专门用来引入js文件路径可以是相对路径也可以是绝对路径
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--script标签可以用来定义js代码也可以用来引入js文件但是两个功能二选一使用。不能同时使用两个功能不能引入之后在里面再写代码--script typetext/javascript src1.js/scriptscript typetext/javascriptalert(国哥现在可以帅了);/script
/head
body/body
/html定义函数
//第一种可以使用 function 关键字来定义函数。
function 函数名(形参列表){ 函数体
}//第二种
var 函数名 function(形参列表) { 函数体
}事件
事件是电脑输入设备与页面进行交互的响应。 通过静态和动态注册事件与html的操作进行交互通过document获取html的数据
常用的事件 onload加载完成事件页面加载完成之后常用于做页面JS代码初始化操作 。 onclick单击事件常用于按钮的点击响应操作。 onblur失去焦点事件常用用于输入框失去焦点后验证其输入内容是否合法。 onchange内容发生改变事件常用于下拉列表和输入框内容发生改变后操作。 onsubmit表单提交事件常用于表单提交前验证所有表单项是否合法。
3.JSP使用
实际的应用场景 1.前端有个搜索按钮点击搜索请求Servlet程序 2.Servlet程序获取请求参数、发送sql语句查询信息、保存学生信息到request域中 3.Servlet不太适合回传显示信息、进行请求转发到jsp页面 5.创建jsp专门用来回传显示信息从request中得到数据 SearchStudentServlet程序
package com.atguigu.servlet;import com.atguigu.pojo.Student;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;public class SearchStudentServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 获取请求的参数// 发sql语句查询学生的信息// 使用for循环生成查询到的数据做模拟ListStudent studentList new ArrayListStudent();for (int i 0; i 10; i) {int t i 1;studentList.add(new Student(t,namet, 18t,phonet));}// 保存查询到的结果学生信息到request域中req.setAttribute(stuList, studentList);// 请求转发到showStudent.jsp页面req.getRequestDispatcher(/test/showStudent.jsp).forward(req,resp);}
}Jsp得到数据
%ListStudent studentList (ListStudent) request.getAttribute(stuList);
%完整页面
% page importjava.util.List %
% page importcom.atguigu.pojo.Student %
% page importjava.util.ArrayList %%--Created by IntelliJ IDEA.User: AdministratorTo change this template use File | Settings | File Templates.
--%% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleTitle/titlestyletable{border: 1px blue solid;width: 600px;border-collapse: collapse;}td,th{border: 1px blue solid;}/style
/head
body
%--练习二jsp输出一个表格里面有10个学生信息。--%%ListStudent studentList (ListStudent) request.getAttribute(stuList);%tabletrtd编号/tdtd姓名/tdtd年龄/tdtd电话/tdtd操作/td/tr% for (Student student : studentList) { %trtd%student.getId()%/tdtd%student.getName()%/tdtd%student.getAge()%/tdtd%student.getPhone()%/tdtd删除、修改/td/tr% } %/table/body
/html
