网站建设项目需求,官网steam,抖音代运营电话销售话术,如何用自己电脑做网站服务器前言
Java 程序员一提起前端知识#xff0c;心情那是五味杂陈#xff0c;百感交集。
说不学它吧#xff0c;说不定进公司以后#xff0c;就会被抓壮丁去时不时写点前端代码说学它吧#xff0c;HTML、CSS、JavaScript 哪个不得下大功夫才能精通#xff1f;学一点够不够用…前言
Java 程序员一提起前端知识心情那是五味杂陈百感交集。
说不学它吧说不定进公司以后就会被抓壮丁去时不时写点前端代码说学它吧HTML、CSS、JavaScript 哪个不得下大功夫才能精通学一点够不够用呢如果只学基础的 JavaScript 是不够用的前端都已经工程化了Vue、React 这些框架你去看吧光有点基础根本看不懂甚至连前端页面路径在哪儿配置如何跳转都不甚了解所以得学而且要学的还不少请把前端当作 web 不可或缺的一部分来学习。学习前端好处挺多我听说过这么一句挺有道理的话一个程序员至少应该掌握一门静态语言如 Java还应该掌握一门动态语言如 JavaScript。而且你不觉得学了前端就如打通了程序员的任督二脉可以独立接活了嘛
HTML / CSS 这部分对咱们来说不是重点但又不能不讲必学JavaScript 这部分是重点尤其是 ES6 以后的一些新语法不理解这些前端代码你根本看不懂必学Vue2Vue3React 这三章是三选一的关系根据你入职公司的使用的前端技术不同有针对地学习 后三章会涵盖 TypeScript、VueCli、Vuex、VueRouter、ElementUI、Vite、CreateReactApp、React、Redux、ReactRouter 等库和工具的使用 jquery 经过调研还有一些学员毕业后确实会用到所以也作为一个可选章节进行学习
HTML 与 CSS
HTML 是什么即 HyperText Markup language 超文本标记语言咱们熟知的网页就是用它编写的HTML 的作用是定义网页的内容和结构。
HyperText 是指用超链接的方式组织网页把网页联系起来Markup 是指用 标签 的方式赋予内容不同的功能和含义
CSS 是什么即 Cascading Style Sheets 级联层叠样式表它描述了网页的表现与展示效果
1. HTML 元素
HTML 由一系列元素 elements 组成例如
pHello, world!/p整体称之为元素 p 和 /p 分别称为起始和结束标签 标签包围起来的 Hello, world 称之为内容 p 是预先定义好的 html 标签作用是将内容作为一个单独的段落
元素还可以有属性如
p idp1Hello, world!/p属性一般是预先定义好的这里的 id 属性是给元素一个唯一的标识
元素之间可以嵌套如
pHTML 是一门非常b强大/b的语言/p错误嵌套写法
pHTML 是一门非常b强大的语言/p/b不包含内容的元素称之为空元素如
img src1.png
img src1.png/img 作用是用来展示图片src 属性用来指明图片路径
2. HTML 页面
前面介绍的只是单独的 HTML 元素它们可以充当一份完整的 HTML 页面的组成部分
!DOCTYPE html
htmlheadmeta charsetutf-8title测试页面/title/headbodyp idp1Hello, world!/pimg src1.png/body
/htmlhtml 元素囊括了页面中所有其它元素整个页面只需一个称为根元素head 元素包含的是那些不用于展现内容的元素如 titlelinkmeta 等body 元素包含了对用户展现内容的元素例如后面会学到的用于展示文本、图片、视频、音频的各种元素
3. 常见元素
1) 文本
Heading
h11号标题/h1
h22号标题/h2
h33号标题/h3
h44号标题/h4
h55号标题/h5
h66号标题/h6Paragraph
p段落/pList
无序列表 unordered list
ulli列表项1/lili列表项2/lili列表项3/li
/ul有序列表
olli列表项1/lili列表项2/lili列表项3/li
/ol多级列表
ulli北京市ulli海淀区/lili朝阳区/lili昌平区/li/ul/lili河北省ulli石家庄/lili保定/li/ul/li
/ulAnchor
锚超链接
a href网页地址超链接文本/a2) 多媒体
Image
img src文件路径src 格式有 3 种 文件地址 data URL格式如下 data:媒体类型;base64,数据object URL需要配合 javascript 使用
Video
video src文件路径/videoAudio
audio src文件路径/audio3) 表单
作用与语法
表单的作用收集用户填入的数据并将这些数据提交给服务器
表单的语法
form action服务器地址 method请求方式 enctype数据格式!-- 表单项 --input typesubmit value提交按钮
/formmethod 请求方式有 get 默认提交时数据跟在 URL 地址之后post 提交时数据在请求体内 enctype 在 post 请求时指定请求体的数据格式 application/x-www-form-urlencoded默认multipart/form-data 其中表单项提供多种收集数据的方式 有 name 属性的表单项数据才会被发送给服务器
常见的表单项
文本框
input typetext nameuesrname密码框
input typepassword namepassword隐藏框
input typehidden nameid日期框
input typedate namebirthday单选
input typeradio namesex value男 checked
input typeradio namesex value女多选
input typecheckbox namefav value唱歌
input typecheckbox namefav value逛街
input typecheckbox namefav value游戏文件上传
input typefile nameavatar4. HTTP 请求
1) 请求组成
请求由三部分组成
请求行请求头请求体
可以用 telnet 程序测试
2) 请求方式与数据格式
get 请求示例
GET /test2?name%E5%BC%A0age20 HTTP/1.1
Host: localhost%E5%BC%A0 是【张】经过 URL 编码后的结果
post 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21name%E5%BC%A0age18application/x-www-form-urlencoed 格式细节
参数分成名字和值中间用 分隔多个参数使用 进行分隔【张】等特殊字符需要用 encodeURIComponent() 编码为 【%E5%BC%A0】后才能发送
json 请求示例
POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25{name:zhang,age:18}json 对象格式
{属性名:属性值}其中属性值可以是
字符串 “”数字true, falsenull对象数组
json 数组格式
[元素1, 元素2, ...]multipart 请求示例
POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary123
Content-Length: 125--123
Content-Disposition: form-data; namenamelisi
--123
Content-Disposition: form-data; nameage30
--123--boundary123 用来定义分隔符起始分隔符是 --分隔符结束分隔符是 --分隔符--
数据格式小结
客户端发送
编码 application/x-www-form-urlencoded url 编码application/jsonutf-8 编码multipart/form-data每部分编码可以不同 表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据文件上传需要用 multipart/form-data 格式js 代码可以支持任意格式发送数据
服务端接收
对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据Spring 接收方式是统一的只需要用 java bean 的属性名对应请求参数名即可对于 applicaiton/json 格式的数据Spring 接收需要使用 RequestBody 注解 java bean 的方式
3) session 原理
Http 无状态有会话
无状态是指请求之间相互独立第一次请求的数据第二次请求不能重用有会话是指客户端和服务端都有相应的技术可以暂存数据让数据在请求间共享
服务端使用了 session 技术来暂存数据
存
GET /s1?namezhang HTTP/1.1
Host: localhost取
GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID560FA845D02AE09B176E1BC5D9816A5Dsession 技术实现身份验证 #mermaid-svg-Iw05etmFp5wQGMsZ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ .error-icon{fill:#552222;}#mermaid-svg-Iw05etmFp5wQGMsZ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Iw05etmFp5wQGMsZ .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Iw05etmFp5wQGMsZ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Iw05etmFp5wQGMsZ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Iw05etmFp5wQGMsZ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Iw05etmFp5wQGMsZ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Iw05etmFp5wQGMsZ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Iw05etmFp5wQGMsZ .marker.cross{stroke:#333333;}#mermaid-svg-Iw05etmFp5wQGMsZ svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Iw05etmFp5wQGMsZ .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Iw05etmFp5wQGMsZ text.actortspan{fill:black;stroke:none;}#mermaid-svg-Iw05etmFp5wQGMsZ .actor-line{stroke:grey;}#mermaid-svg-Iw05etmFp5wQGMsZ .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ .sequenceNumber{fill:white;}#mermaid-svg-Iw05etmFp5wQGMsZ #sequencenumber{fill:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ .messageText{fill:#333;stroke:#333;}#mermaid-svg-Iw05etmFp5wQGMsZ .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Iw05etmFp5wQGMsZ .labelText,#mermaid-svg-Iw05etmFp5wQGMsZ .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-Iw05etmFp5wQGMsZ .loopText,#mermaid-svg-Iw05etmFp5wQGMsZ .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-Iw05etmFp5wQGMsZ .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-Iw05etmFp5wQGMsZ .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-Iw05etmFp5wQGMsZ .noteText,#mermaid-svg-Iw05etmFp5wQGMsZ .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-Iw05etmFp5wQGMsZ .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Iw05etmFp5wQGMsZ .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Iw05etmFp5wQGMsZ .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-Iw05etmFp5wQGMsZ .actorPopupMenu{position:absolute;}#mermaid-svg-Iw05etmFp5wQGMsZ .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-Iw05etmFp5wQGMsZ .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-Iw05etmFp5wQGMsZ .actor-man circle,#mermaid-svg-Iw05etmFp5wQGMsZ line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-Iw05etmFp5wQGMsZ :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Client LoginController LoginInterceptor Session 登录请求 检查用户名密码验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在放行 Client LoginController LoginInterceptor Session 4) jwt 原理
jwt 技术实现身份验证 #mermaid-svg-1aNt4uzVQQjciBBB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1aNt4uzVQQjciBBB .error-icon{fill:#552222;}#mermaid-svg-1aNt4uzVQQjciBBB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1aNt4uzVQQjciBBB .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-1aNt4uzVQQjciBBB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1aNt4uzVQQjciBBB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1aNt4uzVQQjciBBB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1aNt4uzVQQjciBBB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1aNt4uzVQQjciBBB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1aNt4uzVQQjciBBB .marker.cross{stroke:#333333;}#mermaid-svg-1aNt4uzVQQjciBBB svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1aNt4uzVQQjciBBB .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1aNt4uzVQQjciBBB text.actortspan{fill:black;stroke:none;}#mermaid-svg-1aNt4uzVQQjciBBB .actor-line{stroke:grey;}#mermaid-svg-1aNt4uzVQQjciBBB .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-1aNt4uzVQQjciBBB .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-1aNt4uzVQQjciBBB #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-1aNt4uzVQQjciBBB .sequenceNumber{fill:white;}#mermaid-svg-1aNt4uzVQQjciBBB #sequencenumber{fill:#333;}#mermaid-svg-1aNt4uzVQQjciBBB #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-1aNt4uzVQQjciBBB .messageText{fill:#333;stroke:#333;}#mermaid-svg-1aNt4uzVQQjciBBB .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1aNt4uzVQQjciBBB .labelText,#mermaid-svg-1aNt4uzVQQjciBBB .labelTexttspan{fill:black;stroke:none;}#mermaid-svg-1aNt4uzVQQjciBBB .loopText,#mermaid-svg-1aNt4uzVQQjciBBB .loopTexttspan{fill:black;stroke:none;}#mermaid-svg-1aNt4uzVQQjciBBB .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-1aNt4uzVQQjciBBB .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-1aNt4uzVQQjciBBB .noteText,#mermaid-svg-1aNt4uzVQQjciBBB .noteTexttspan{fill:black;stroke:none;}#mermaid-svg-1aNt4uzVQQjciBBB .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1aNt4uzVQQjciBBB .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1aNt4uzVQQjciBBB .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-1aNt4uzVQQjciBBB .actorPopupMenu{position:absolute;}#mermaid-svg-1aNt4uzVQQjciBBB .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-1aNt4uzVQQjciBBB .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-1aNt4uzVQQjciBBB .actor-man circle,#mermaid-svg-1aNt4uzVQQjciBBB line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-1aNt4uzVQQjciBBB :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} Client LoginController LoginInterceptor 登录请求 检查用户名密码验证通过 登录成功返回token 其它请求携带token 校验token校验无误放行 Client LoginController LoginInterceptor 生成 token
GET /j1?namezhangpass123 HTTP/1.1
Host: localhost校验 token
GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX285. CSS
即 Cascading Style Sheets它描述了网页的表现与展示效果
1) 选择器 type 选择器 - 根据标签名进行匹配元素选择器 class 选择器 - 根据元素的 class 属性进行匹配 id 选择器 - 根据元素的 id 属性进行匹配
2) 属性和值
background-color : red;…display
3) 布局
与布局相关的 html 元素
divtemplate
