前端学习（1）：Tomcat，MySQL，eclipse——制作简易留言板_基于eclipse和mysql设计讨论区和点赞功能-优快云博客

本文链接：https://blog.youkuaiyun.com/champlo0/article/details/82926516

本文档详细介绍了使用Brackets编辑HTML，Eclipse编写JSP并配置Tomcat，以及使用MySQL和Navicat进行数据库操作的方法。涵盖了JSP指令与动作标记、动态响应、重定向、时间格式化、session管理、Application对象应用，以及HTML和CSS的基本选择器和样式权重等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础设置

1.下载brackets，用于编辑html文本
2.使用eclipse编辑jsp文件作为网页后台脚本
3.下载tomcat，在eclipse下配置tomcat
4.下载MySQL和可视化和可视化处理软件Navicat，作为数据库

遇到的问题

1.之前下载的eclipse版本中无server选项，导入安装包后解决
2.使用eclipse写jsp时，运行时提示local host端口已被占用，用如下方法解决

1.查看端口被哪个程序占用
sudo lsof -i tcp:port
如： sudo lsof -i tcp:8080
2.看到进程的PID，可以将进程杀死。
sudo kill -9 PID
如：sudo kill -9

3.使用终端对数据库操作

sudo /usr/local/mysql/support-files/mysql.server start
sudo /usr/local/mysql/support-files/mysql.server stop
sudo /usr/local/mysql/support-files/mysql.server restart

学习JSP的一些记录

1.include

<%@ include file="Date.jsp" %><!-- 指令标记，合并为一个类 -->
<jsp:include page="Date.jsp"></jsp:include><!-- 动作标记,生成两个类 -->

2.动态响应(将当前页面保存为word文档)

<form action="" method="post">
<input type="submit" value="yes" name="submit">
</form>
<% String s = request.getParameter("submit");
if(s==null)s="";
if(s.equals("yes"))response.setContentType("application/msword;charset=utf-8");
%>

3.重定向

<body>
<% String name = request.getParameter("name");
if(name==null || name.length()==0) {
	response.sendRedirect("RequestTest.jsp");
}%>
<h1>欢迎<%=name %>,你好！</h1> 
</body>

4.格式化获取到的时间(java.text.*)

 <% SimpleDateFormat sdf = new SimpleDateFormat("YYYY年MM月dd日 HH:mm:ss");
Date d = new Date(session.getCreationTime());%>
Session创建时间：<%=sdf.format(d)%><br/>

5.session:相当于唯一ID 用于判断在不同网页之间切换是否为同一个用户

/* session消失的三个方法：1。关闭服务器 2。调用invalidate（）方法 3。达到了设置最长的发呆时间 */
session.setMaxInactiveInterval(5);%>
Session创建时间：<%=sdf.format(d)%><br/>
Session中获取的用户名：<%=session.getAttribute("username") %><br/>
Session的ID编号:<%=session.getId() %><br/>

6.Application内置对象

<!-- 自定义属性： -->
<% application.setAttribute("username", "hunzz");
application.setAttribute("password", "123");
application.setAttribute("gender", "man");
%>
<!-- 打印自定义属性 -->
用户名：<%=application.getAttribute("username") %>
密码：<%=application.getAttribute("password") %>
性别：<%=application.getAttribute("gender") %><br/>
打印application中的属性:
<%
Enumeration att=application.getAttributeNames();
while (att.hasMoreElements()){
out.println(att.nextElement()+"<br/>");
}%>

（持续更新）

学习html，css的一些记录

1.通用选择器，子选择器，包含后代选择器

* {color:red;}使任意标签的字体颜色改为红色
.food>li{border:1px solid:red;}改变的是元素的第一代后代
food li{border:1px solid:red;}改变的是元素的所有后代

2.css 样式的权重 : 标签为1，类选择符为10，ID选择符为100

p{color:red;} 权重为1
p span{color:green;}权重为1+1=2
.warning{color:white;}权重为10
p span.warning{color:blue;}权重为10+1+1=12
#footer .note p{color:yellow;}权重为100+10+1=111
最高权重：！important p{color:red!important;}放在分号之前

3.css样式的优先级

权重相同时，就近原则。
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中)

4.长度值

1.像素

像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2.em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

还要注意一个特殊情况：
当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。
（持续更新）