表白墙程序

表白墙程序

{}外面这里的称为"选择器"

*通配符选择器,能够选中所有的元素.

h1/p/div 这个又叫做标签选择器,作用是选中指定名字标签的所有元素

.开头的(.container/.row)类选择器.对应到html元素的class属性

#开头:id选择器,对应到html的ID属性

复合选择器(把上面几个选择器组合起来)

....

CSS中选择器很多,这里不一一赘述.

{}里面则是CSS具体的属性.使用键值对表示.其中键和值都是标准规定的.CSS里面样式非常多,专业的前端也无法全部都记住.

比如说我想知道这个是什么意思

加上mdn前缀就能够准确的查阅到了

mdn是前端中一份文档.

Java当中定义变量需要显示指定类型,但是JS不需要.JS变量不是没有类型,而是在初始化的时候确定的.

let n = 0;let n = 'hello'

JS的变量,在程序执行的过程中,是类型可变的.

let n =0;n='hello'n=true

这种可以改变类型的,叫做"动态类型"

而C语言哪种不可以改变的,叫做"静态类型"

另外,JS中的变量是比较容易触发隐式类型转换的.

let n =0;if(n == "0")

在JS当中结果是true.

像这种不同的类型之间,差异/边界没那么大语言,我们称为"弱类型",对于类型检查比较严格,不同类型之间差异比较大的语言,我们称为"强类型"

JS就是一个动态弱类型语言.

Java就是一个静态强类型语言.

使用 querySelector(浏览器提供的API),能够获取到页面中的元素.

写JS的目的就是为了操作页面.要想操作页面内容,就需要先按照上述方式选中元素

这就是让用户点击按钮的时候,能够执行一个函数.此处的函数也相当于一个"回调函数",不是立即调用的,而是用户点击了按钮的时候,才会执行到.

上述前端代码不需要从0写出来,但是需要能够大概知道前端的代码都在干什么.

准备编写后端代码

创建项目,引入依赖,并且把刚才这个静态页面也放到项目中.

静态页面(html,css...)需要放到webapp目录下(不是WEB-INF)

配置好SmartTomcat之后开始运行,在浏览器中正确输入.就可以得到如下结果.

当前,这个表白墙的页面已经可以输入内容,点击提交之后也可以显示内容.咱们此处后端代码要做的工作,主要就是两个工作:

1.用户点击提交的时候,把刚才输入的内容通过网络传输给服务器,有服务器保存这个数据.(存档)

2.后续有页面加载的时候,此时就通过网络,从服务器获取到之前保存好的内容.(读档)

需要进行前后端交互接口的约定.约定好,前端会给后端发一个什么样子的http请求.后端又会返回一个什么样的http响应.

存档

针对存档来说

前段发起一个HTTP请求.

POST/MessageWall/message

对于content path来说已经固定了,但是对于servlet path来说,这里怎么定都行,但是务必要保证前后端一致.

而对于body而言,我们此处约定使用JSON格式,把数据传输到后端.

{from:"黑猫",to:"白猫",message:"喵"
}

服务器返回一个HTTP响应

HTTP/1.1 200 OK

读档

前端页面加载的时候,需要从服务器拿到之前已经提交的数据.

请求:

GET/MessageWall/message

响应:

HTTP/1.1 200 OK

响应中的JSON就应该是一个数组(JSON的数据,使用[]表示)了.因为返回的数据应该会有多条.

[{from: "黑猫",to: "白猫",message: "喵},{from: "白猫",to: "黑猫",message: "喵"}
]

针对List/数组 这种Jackson会把数据自动整理成JSON数组.里面的每个元素,又会被Jackson转换成JSON对象.JSON对象属性名字也是要和Message类的成员名字对应的

这个代码很关键,这个是告诉浏览器,返回的响应是body是一个JSON格式(utf8编码)

通过这个代码我们就实现好了后端的逻辑.就需要进一步编写前端代码,把HTTP请求发出来,并且处理http响应.

1.首先需要让JS代码发起"存档"请求

需要前端和后端通过http交互,就需要先使用Ajax.

搜索jQuery cdn

这个代码是构造js对象,JS对应也是{}构成的键值对(JSON就是出自于这里),对于JS对象而言,key都是字符串类型.value则可以是各种类型(属性,字符串,其他的对象,数组....)

由于key必须是字符串,所以key这里的""可以省略.

这三个变量里是三个输入框的内容.

这个写法很常见,而且和上述写法等价.甚至这个写法还能进一步简化.

这种写法就意味着键的名字与值的名字相等.

这两写法是一样的,上面这种写法是绝对路径(/开头),下面的写法是相对路径(不带/开头),在这里,相对路径的基准路径就是当前html所在的路径

这就是当前html所在的路径.

一般都会优先写作相对路径的方式,这样如果后续需要修改context path就比较方便,对于代码的影响就比较小了.

JS里,对象虽然在格式上与JSON非常相似,但仍然是两个不同的东西.

JS标准库

提供了JSON.stringify方法,把JS对象转成JSON字符串.还提供了JSON.parse方法,把JSON字符串转成JS对象.

编写servlet程序的时候,每次修改代码,都需要记得重新启动服务器.(修改Java代码,必须要重启,因为需要重新编译)(修改前端代码,建议也要重启,这些静态页面可能会被Tomcat给提前加载并缓存到内存中,此时修改代码,不一定会同步到内存里)

此时我们重启服务器,并且刷新html页面

发送了这样的信息

但是在服务器这里并没有看到这条应该被打印出来的日志,为什么???

如果web程序出错了,该怎么办

具体的原因可能有很多种,这类问题,起手式就是:使用fiddler抓包!.通过抓包就能把问题确定出是前端的问题,还是后端的问题.

如果抓包发现,Ajax的http请求没有发出来,大概率是前端的问题.如果发现Ajax的http请求发了,并且内容符合要求,大概率是后端的问题.

1.我们重新发了一条数据,发现fiddle这里并没有抓到相应的包.也就是前端没有发送相应的请求,所以是前端的问题.

2.关注前端代码.

此时更需要关注的是,浏览器里面的情况,JS代码都是被下载到浏览器中执行的.

这就是我们的前端的源代码.

说明应该是这里执行出错了

出错原因:访问了没有被定义的变量,代码就出错了.

我们发现前面我们使用的是message的缩写msg来定义的

JS代码在执行的过程中,首先不像Java有个先编译的过程,直接就去执行了.语法错误,得运行过程中才能发现.另一方面,一旦执行过程中出错(出现语法错误/出现异常),此时后续的代码就无法继续执行了.

也就是说,从这里以下的代码,都没有被执行到.

更改之后,重启服务器,刷新网页,输入内容点击提交

就可以收到这样的数据了.

页面中没有显示ok的原因是,这个操作是把收到的数据显示到浏览器的控制台而不是页面上

注意:只要body有内容,无论是请求还是响应,都需要指定类型 Content-Type

这里之所以没有,是因为这是"读档"的内容,我们还没使用到(还没有写到读档),那么在没指定的时候,默认会有一个Content-Type:text/plain

success(result,status,xhr)

success这是一个回调函数,其实是有3个参数的.对于JS的函数来说,参数如果不用,可以不写.

红色的内容是写到了点击事件里面,只有点击了提交按钮才会触发,而绿色的内容是直接写到

<script>标签下的,也就是说,页面一加载,就会执行到这里的内容.

这个body,已经是JS对象数组了,已经不是JSON字符串了,而这步操作是jQuery自动帮我们完成的.是因为服务器返回相应的时候,加了一个Content-Type:application/json

这是一个经典的for循环,我们在这里定义的变量是let而不是int,注意JS中就没有int类型,js表示的数字是number类型,包含了int 和 double.

说个题外话:

写JS代码的时候,代码补全好像不太好使,其实不进行代码补全的提示,才是正常的.对于绝大部分的编程语言来说,进行一个准确的代码补全和语法的错误分析,是一个极其难的事情,相比之下,IDEA能够把Java这里的补全和错误分析,做到100分(这属于"独一档"的存在).如果换了开发工具/语言,能做个80分就已经很不错了.如果是针对JS这样的动态弱类型语言,能做到60分就不错了.

对于刚才的

VsCode是不知道body是一个数组类型的.无法给你提示出数组的属性.归根结底是因为IDEA太强了以及JS是动态弱类型语言两方面的原因.

html中的每个元素,同时都可以映射到JS中的一个对象.

通过对象的属性,就能够获取到页面的内容.

修改对象的属性,也就能够更新页面的内容

这就是:文档-对象 模型 (DOM)

文档指的是:html中的元素

对象指的是:JS中的对象

相当于:<div class = "row"></div>

而在前面的CSS当中有这样的一个逻辑

此时说明咱们新创建的 div 要按照 .row 描述的方式来展示.

此时执行到这里就变成了

黑猫 对 白猫 说: 喵

innerHTML就是在标签里面写入一段内容.

创建出的 div 还需要加入到页面中才能显示出来.

先找到要显示到哪里,在完成显示的操作.

上述逻辑中,重点理解前后端交互的过程.对于前段代码的细节,大概看懂即可.

此时逻辑是对的,但是如果这样直接运行的话,没有显示,为什么???

注意!!!!

这里message拼错了!!!改过来就好了.

此时我们就已经完成了最基本的网站的编写了.

小瑕疵:由于当前数据在服务器中的内存当中存储的,重启就没了.要想让这里更科学,应该使用数据库来存储数据.

在刚才的代码基础上,引入数据库.

我们之前在学习 jdbc 的时候是从中央仓库中下载jar包,同样我们也可以使用Maven,把数据库驱动包搞下来,并进行管理.

maven加载依赖报错的解决方法_during a previous attempt. this failure was cached-CSDN博客

这里参考其他博主的博客,感谢大佬开源分享!

这里的SSL就是HTTPS中的加密方案!!!

上述这样写是有问题的!

这里会导致数据库连接错误

改成这样就好了,此时我们就成功的将数据存到了数据库当中了.