配置第一个网页_学习笔记

最新推荐文章于 2024-08-14 20:23:13 发布

sbc0519

最新推荐文章于 2024-08-14 20:23:13 发布

阅读量338

点赞数 1

分类专栏：网络文章标签：网络网页设计云服务器

本文链接：https://blog.csdn.net/sbc0519/article/details/105749902

版权

网络专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文结合亲身经历，来详细讲讲一个网页，从零到让其运作起来的过程。
备注：本文并不会教读者HTML、Java或任何编程语言，这些应该是读者自己摸索学习的。本文旨在把一个由Java(jsp)加tomcat的网站如何在云服务器上部署介绍给读者。

文章目录

服务器选择

我们要把服务器布置到哪里呢？是用自己的电脑，还是使用云服务器？这里我们选择云服务器。其有安全、便捷、稳定、快速等好处。有关云服务器的注册，请参考有关资料。
现在我们假定已经获得了云服务器的IP地址，以及root（管理员）密码。这里插一句，大多数云服务器都是Linux系统的，因此我们应当了解一些Linux指令。好了，我们该如何访问云服务器呢？有两种方法：

法一

这里介绍一个比较好的软件，PuTTY。从这里选择32位或64位版本的msi下载，完成后应该有以下工具：在这里插入图片描述
其中，putty.exe与pscp.exe是我们后面会用到的。
运行putty.exe，
点击Open，
输入用户名（管理员为root），

输入密码（注意此时你的输入不会显示出来），就成功进入Linux命令行了。

法二

在一些高级的Windows系统（呃我也不是很清楚要高级到什么程度，反正xp是不行的，win10家庭版的1809是可以的）中，自带ssh和scp指令。远程登陆使用ssh指令，ssh YourUserName@YourIpAddress即可，如：
ssh root@a.b.c.d（换成你的服务器的IP地址）。
在这里插入图片描述
输入密码，与PuTTY一样，你输入的不会显示出来。

然后就出现和PuTTY类似的操作界面。

有关Linux，可以参考其他博客，这里大致介绍一些：
目录（我也称文件夹）：“/”为根目录（不像Windows有C:、D:等分区），/下有usr、etc、bin等子目录
文件：Linux一般不以后缀名区分文件，比如同样是.out，可能是个可执行文件，可能只是某个程序输出的文本文件。
注意Linux的文件与目录名是区分大小写的。
常用指令：
cd为切换当前目录（与Windows相似）
ls列出当前目录下的所有文件与目录（类似于Windows的dir，但不是一个文件一行，而是用不同颜色区分文件与文件夹）
dir列出当前目录下的所有目录
mkdir新建目录（与Windows相似，但不能简写为md）
rmdir删除目录（与Windows相似，但不能简写为rd）
rm删除文件（类似于Windows的del）
echo回显字符串（与Windows相似）
Linux同样支持用">"/">>"重定向输出到文件，比如echo example>example.txt，这样example.txt内容就是example。
exit退出远程登陆
help显示帮助信息（Usually in English）

后端选择

现在的网页大多分前端和后端，而不仅仅是简单一个页面。随着动态页面概念的普及，以及对前端的数据的处理，仅仅靠JavaScript是不够的。因此，我们需要对后端选择一种运行环境和编程语言。这里我们选的是Java。其他语言行不行呢？其实，理论上所以语言都是可以的，但考虑到类库的支持与配置的方便与否，Java是一个较好的，也是较普遍的选择。

环境配置

我们得对服务器配置Java SDK（JDK）。去这里下载Java SE的Linux版本（后缀名为.tar.gz）。笔者建议下载高一点的版本，因为其通常有更高的性能与更多的功能。通常情况下Linux是纯命令行的，我们可以在Windows环境下先下载。
然后就要实现Windows和云服务器的文件传输。这里用到pscp.exe（PuTTY带的一个命令行程序）或scp命令（ssh）。它们的语法是相同的，如：
(p)scp C:\1.txt root@127.0.0.1:/usr/local/，其中C:\1.txt可以换成你要传到服务器上的文件，root@127.0.0.1不用我解释了吧，把127.0.0.1换成你的服务器，/usr/local/是你要把文件存到目标服务器的那个文件夹。
于是，我们下载好了JDK，理论上安装在服务器的哪里都是可以的，但最好要方便记忆的地方。这里我们安装到/usr/local/soft/，把这个.tar.gz文件传到那里，使用
tar -zxvf YourJdkFile.tar.gz来解压，其中YourJdkFile.tar.gz是你在Windows下载并传输到Linux的那个安装包，tar指令是对.tar（含.tar.gz）进行解压安装的指令。完成后，可以看到当前目录下出现一个jdkXXXXX的文件夹，XXXXX是版本号，位数也不一定是5位，比如jdk-14、jdk1.8.0_131等。接下来要做的一件事是配置环境变量。使用
vim /etc/profile来编辑/etc/profile文件，这里vim是一个可视化文本编辑指令。在这里插入图片描述
可以看到，文件包含了很多信息，而这些我们不能更改。在现在的环境下，输入i进入编辑模式（是的，之前我们是预览模式或者说命令行模式），可以看到左下角出现- -INSERT- -字样。通过键盘的上下左右箭头使文件到达底端。在后面插入：

#Set Java Environment
export JAVA_HOME=YourJdkPath
export CLASSPATH=$JAVA_HOME/lib
export PATH=$PATH:$JAVA_HOME/bin

其中#Set Java Environment是注释。建议在这之前多空几行，增加可读性。完成后：在这里插入图片描述
可以看到，我用的jdk版本是jdk14。按Esc退出编辑，输入“:wq”保存并退出vim。然后使用
source /etc/profile使其立即生效。这时输入
java -version如果能正确显示Java版本，那么恭喜，安装完成了！
我们一般不会在Linux上用vim或echo来编辑源文件，并通过命令行的方式编译。因此，我们最好在Windows上也安装JDK，最好再安装一个IDE。安装JDK还是上面那个链接，如果嫌远就点击这里。建议用Installer方式可视化地安装（尽管你也可以下载zip直接解压）。与Linux一样，还是需要配置环境变量。不过这可以可视化地进行。右键“我的电脑”（或“计算机”或“此电脑”，不得不说Windows每个版本的Computer名字都不一样，着实令人讨厌），点击“属性”，在win7及以上的系统还要点击“高级系统设置”。在这里插入图片描述
出现

这在xp及以下的电脑也是一样的。选择“高级”选项卡，点击“环境变量”
在下面的“系统变量”中（切记不是用户变量！不是用户变量！不是用户变量！），新建

然后编辑Path（再说一遍，不是用户变量里的Path），在win10下在这里插入图片描述
新建，输入%JAVA_HOME%/bin即可。在win7及以下的系统中，编辑Path在其末尾追加;%JAVA_HOME%/bin（注意分号）。
好了，我们可以在命令行下输入java -version查看版本了。
对于Java的IDE，市面上有两种主流选择：Eclipse与IntelliJ IDEA。Eclipse是免费的，而IDEA的完整版是要收费的。因此，我们选择Eclipse，如果读者用IDEA当然也是可以的。
去这里下载Eclipse下载器（是的，下载一个下载器，当然你也可以直接下载），选择Eclipse for Java EE（ Eclipse IDE for Enterprise Java Developers）并下载。注意，尽管我们JDK下的是SE，但IDE要用EE，因为EE有网页设计部分而SE的IDE没有。等待安装。完成后打开（注意图标）：
在这里插入图片描述
先是logo，

出现欢迎页面

OK！
接下来我们还需要安装一个软件（要有耐心~），这是方便我们配置服务器的，叫做tomcat，很多小型甚至中型网站都是用它构建的。从这里下载tomcat（注意版本与jdk版本的对应），应下载的是core的.tar.gz和Windows zip（只是个人建议）。之所以还要下载Windows版本，是因为我们会在Windows上进行测试（当然如果是想直接在Linux上敲代码部署的可以直接在Linux上测试）。Windows的解压缩，目的文件夹不要有空格（Linux也一样）。然后配置环境变量，CATALINA_HOME为tomcat路径（如D:\apache-tomcat-9.0.34），Path添加;%CATALINA_HOME%\lib;%CATALINA_HOME%\bin。Linux不用配置环境变量。接下来需要在Eclipse中配置tomcat环境。Windows->Preference->Server->Runtime Environments->Add，在这里插入图片描述

点击Next，

点击Finish即可。好，现在我们又成功安装了一个工具。

开始第一个网页

在Windows的Eclipse页面中，选择File->New->Dynamic Web project 在这里插入图片描述
点Next，（其实后面都可以用默认设置）
Next，
Finish。查看左边的Project Explorer，出现

查看下方的Servers，

点击“No servers are available. Click this link to create a new server.”，
Next，

出现

Finish即可。右键MyJavaWeb->New->JSP File，在这里插入图片描述
命名为index.jsp（即网页的入口点）

Finish，出现

好了，这就是我们的主界面了，试着在<body>与</body>之间插入新的元素，如
（有关html的知识也不再本文范围内，读者可从W3SCHOOL、菜鸟教程等网站学习）
试着运行：在Servers页中，右键->Start 在这里插入图片描述
在控制台中出现

或类似的信息，那么启动成功！随便打开个浏览器，在地址栏输入
localhost:8080/MyJavaWeb，出现
发现标题为“Insert Title Here”，内容为加粗的“Hello JavaWeb”，小功告成！
可是还有问题。如果我们试图写入中文，会提示在这里插入图片描述
这是因为Eclipse的jsp的默认字符集是ISO-8859-1，这只能显示西方字符。一般我们用UTF-8来解决这个问题。UTF-8不仅是全球通用的字符集，而且在不断更新中，是Unicode（万国符）的一种编码方式。我们把contentType和pageEncoding以及meta中的charset均改成UTF-8，然后在body中写一些中文。在这里插入图片描述
无需重启服务器，直接刷新localhost:8080/MyJavaWeb，

成功！
到现在为止，我们只是编辑了前端的网页，还没有和后端互动，也还没有生成动态网页。为此我们新建一个Servlet（Servlet其实是Server Applet的缩写，字面意义是服务器端的小程序，可以用来对GET和POST方法进行处理）。在这里插入图片描述

然后可以直接Finish，出现：

这就是货真价实的Java源文件了。有关Java的基础学习以及jsp的学习，参考菜鸟教程、廖雪峰的教程。从一个jsp页面访问后台有GET和POST两种方法，对应Servlet中的doGet和doPost方法。Servlet会新建一个页面，这个页面的内容由开发者决定，一般会根据传进去的参数决定。
我们这里给出一个示例。
修改MyServlet的doGet方法为

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");
		response.getWriter().println("text内容是"+request.getParameter("text1"));//getParameter获取参数
	}

修改index.jsp的内容为

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<form action="MyServlet" method="GET">
输入text内容：
<input type="text" name="text1" /><!--对应Servlet的参数text1-->
<input type="submit" /> 
</form>
</body>
</html>

效果：
在这里插入图片描述

小提示：doGet或doPost的response也是html格式的，因此可以往其中写html语句段。
当然，我们可以做更高级的网页，这里只是一个示例。

接下来我们需要将项目部署到服务器上。

部署到服务器

在Eclipse中，点击File->Export，
在这里插入图片描述

这里我们导出到D:\MyJavaWeb.war，可以根据需求更改。
然后把这个war文件传输到服务器（用pscp或scp），根据在Linux上按照tomcat的路径决定传输到tomcat安装路径下的webapps文件夹，比如安装在/usr/local/tomcat-xxx/，那么就传输到/usr/local/tomcat-xxx/webapps/。然后启动服务器，在Linux命令行下，工作路径为webapps输入：../bin/startup.sh，即我们启动tomcat-xxx/bin/startup.sh，sh文件是Linux下的批处理文件（我们还可以在此目录下看到bat文件，惊不惊喜），但和Windows不同的是，在bin目录下输入sh文件名是不能执行的，一定要输入./xxx.sh才行。好，startup.sh是启动tomcat的批处理文件，shutdown.sh是关闭的批处理文件。
现在我们就可以在任意浏览器中输入a.b.c.d:8080/MyJavaWeb，来浏览我们的网页了，其中a.b.c.d是服务器的ip地址，8080是端口号（tomcat默认是8080），可以在tomcat的配置文件中更改。在tomcat安装路径/conf/server.xml中找到

<Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />

将8080改为需要的端口（通常是80，http默认端口）即可。而且，如果是80，那么url就不用输入:80，可以直接a.b.c.d/MyJavaWeb来访问。
效果：
在这里插入图片描述

完成！

后记：本文是笔者的第一篇博文，内容是我的一篇学习笔记，写下来既供自己温习，又可以给有这方面需求的小伙伴参考。学习任何一件新事物，仅仅靠前人的经验是远远不够的，自己的探索实践才是进步之路。

文字来源：100%手打。
图片来源：大部分是截屏（xp和win10样式），两张来自百度（win7样式的）。

sbc0519

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
配置第一个网页_学习笔记

本文结合亲身经历，来详细讲讲一个网页，从零到让其运作起来的过程。
复制链接

扫一扫

专栏目录