6.5.1 网页开发与服务配置(一)
浏览器是万维网的客户端程序,我们用它来访问Web服务器提供的网页,Web页面的设计与发布就是我们要探讨的内容。
- 熟悉网站开发的全过程:了解从前端网页到后台服务的整个网页开发全过程
- 了解Web页面的设计过程
- 了解数据库的创建过程和访问方法
- 了解前端页面和后台服务之间的交互
- 了解Web服务器的部署
一、开发过程
- 前端主页设计(index.jsp),在MyEclipse中创建一个Web工程后会自动生成一个jsp文件index.jsp,我们仅仅需要对这个文件进行修改就可以
- 后台数据库设计与创建
- 后台创建Servlet,编写对页面请求的响应代码:doGet/doPost
- 前端后台都设计好之后,为了使页面请求能够到达服务接口有时候还需要手工进行Web配置
- 最后将构建好的Web工程部署到Tomcat服务器
- 启动Tomcat服务器,这样其他的主机就可以利用服务器主机的IP地址访问设计的主页
二、开发步骤
-
前端网页设计,前端网页设计包括两个方面,
-
页面布局:一个是页面布局的设计包括页面上会出现哪些内容什么格式等等,所有页面要显示的内容和规定的格式都应该符合HTML的规范也就是说我们在HTML文件或者jsp文件中会看到的一个个标签。比如
<html></html>
这样的一组标签出现在最上端和最下端,其目的就相当于告诉浏览器说当前你要解析的一个HTML文件,这个文件中的一句话加两个按钮在页面中如何定义的
<lable>你同意延迟退休么?</lable><br><br> <button class="btn_vote" value="yes" vote id="1">同意</button> <button class="btn_vote" value="no" vote id="1"stvle="marain-left:10ox">反对</button> <br<br>
这里面我们用到了lable标签和button按钮,br相当于回车,要想编辑一个页面使用写字板或者记事本程序就可以胜任。但是标签很多,程序员往往很难记所有的标签和用途,再加上全部是手工录入HTML工作量就很大。所以一般情况下许多程序员往往喜欢使用第三方的软件来自动生成页面,比如Dreamweaver
-
编写脚本处理用户操作:另外一部分:编写脚本处理用户操作,仅仅有页面布局是不够的,既然是动态页面支持用的交互,需要有响应用户的代码,这就需要脚本的设计,脚本是通过script标签嵌入到页面文件中,不需要事先编译,而是浏览器来解释执行,我们使用JavaScript语言来编写脚本程序,对用户点击按钮的事件来提取信息,构造相应的页面请求,并且发送到后台的服务程序
<script type="text/javascript">...........</script>
-
页面请求处理
我们将采用Ajax(Asynchronous JavaScript and XML)技术来发送页面请求,Ajax表示异步JavaScript和XML
-
支持异步请求
异步的含义是向服务器发送请求后无需停下来等待结果,用户可以执行其他的操作,运行页面发送其他请求,这样可以提高页面的响应速度,改善用户体验。
-
支持页面局部更新
每次更新页面的时候,仅仅根据用户的实际操作去更新很少部分的内容,如此以来也能够提高用户访问的速度,同时还可以减少网络带宽。
-
发送请求到后台服务程序
-
-
-
MySQL数据库
使用MySQL作为后台数据库,对数据库的操作包括使用MySQL的客户端软件创建数据库、新建数据表、后台服务程序中连接数据库、通过SQL语句访问数据库对数据表的增删改。
-
使用Java语言编写Servlet
后台服务的开发采用Java语言来编写Servlet后台程序,负责对页面请求进行处理,如对于投票网站,接收来自前端页面的请求,根据用户的选择来更新数据表中相应的记录,同时返回处理结果,返回当前赞成票总数和反对票总数。
-
更新Web配置
将开发的Servlet信息登记到Web配置中(Web.xml)否则,Ajax发送的页面请求得不到处理。
-
部署和启动Web服务器
浏览器正是访问Web服务器来提取网页,设计的页面通过Web服务器对外发布的,Tomcat是免费开源的Web服务器