记录|建立网站web学习（2）

已于 2022-05-13 12:40:57 修改
阅读量1k 收藏 2
点赞数
分类专栏： Web 文章标签： 学习 服务器 html javascript
于 2022-04-29 00:16:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/withbyfan/article/details/124486159
版权

中间很多步骤都没有一一记录，稍微总结一下。

服务器：阿里云服务器ECS

域名：Godaddy和阿里云的域名租借服务

开发环境：vscode和eclipse

用到的库和依赖：若干 后面提到

一.服务器和域名的选择

选阿里云是因为那个学生免费试用2个多月，具体可以直接在官网搜到文档。下面列出踩过的一些坑...

1.过程繁琐。

需要先实名，认证学生身份，申请，试用，然后做题，然后再申请。这里需要写一篇几百字的使用体验，随便写写就好。再审核，通过之后可以再申请两个月。

2.主机在国内网站上线需要域名备案。

这个备案及其之繁琐复杂...我搭好了服务器环境之后才知道，有着诸如主机需要租用3个月以上，并且网管审核一道（要求奇高），很多天之后还需要公安备案（填无数的表），才能合法上线。

不然域名一解析过去，5min就寄。

3.试用的服务器性能一般（也有部分原因是我弱智选了win...想着好搬迁自己的项目，追悔莫及）

4.综上，能用国外的就用国外的，折磨了我大半月...

二.开发过程

跟着课学了很多东西，几个实验做下来发现跑起来比其他脚本程序好debug得多，可能这就是前端吧...

目前在做一个登录页面的购物中心网站（十分落入俗套），之前用随机做了抽卡，美中不足在于没有做账号抽卡也是白搭，这次结合一下。

copy了很多css模板，感谢诸位开源的大佬们，但看到我做出来的垃圾这些精美的泛用代码想必会后悔出生吧。

Part.1 用户系统

登录/注册页面：

注册页面大差不差，css是copy一个忘记名字的带佬的，抱歉叻

数据库用了mysql（sql server我用下来感觉就是很难使用，并且内容功能太臃肿了，虽然我们数据库学习的是sql server）

下面是简单的判断登录是否成功的jsp代码，一个简单的select函数

<%@ page language="java" import="java.util.*,java.sql.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆页面</title>
	<link rel="stylesheet" type="text/css" href="6.1.css.css" />
	
</head>
<body>

 <%  
 String lid=request.getParameter("id"); //从表单获得   
 String lpw=request.getParameter("pw"); //从表单获得  
        try {  
            Class.forName("com.mysql.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/webexp"; //数据库名
            String username = "root";  //数据库用户名
            String password = "whatthehell";  //数据库用户密码
            Connection conn = DriverManager.getConnection(url, username, password);  //连接状态

            if(conn != null){  
                out.print("数据库连接成功！");  
                out.print("<br />");            
                Statement stmt = null;  
                ResultSet rs = null;  
                String sql = "SELECT *FROM log where id = '" + lid + "';";  //查询语句
                stmt = conn.createStatement();  
                rs = stmt.executeQuery(sql);  
                while (rs.next()) {  
                 out.println(rs.getString("pw"));
                 if(lpw.equals(rs.getString("pw"))){
                     session.setAttribute("log", "success");
                 	%> 
                 	<div id="bigBox">
                 			<h1>SUCCESS!</h1>
                 			<div class="inputBox">
                 			<br />
                 			<a href = "store.jsp">Welcome! Click here to jump</a> 
                 			<br /><br />
                 			<div class="ss">
                 			<span>Nice to meet you,</span><span id="demo"></span><span>.</span>
                 			<br />
                 			<span>Please remember your id and password.</span>
                 			</div>
                 			</div>
                 		</div>


                 <script>
                 document.getElementById("demo").innerHTML = '<%=lid%>';
                 </script>
                 <%
                         }
                 else{          	
                 	%>
                 	        <div id="bigBox">
                 			<h1>登陆失败!</h1>
                 			<div class="inputBox">
                 			<br />
                 			<a href = "https://tympanus.net/Development/RainEffect/index3.html">Welcome! Click here to jump</a> 
                 			<br /><br />
                 			<div class="ss">
                 			<span>请输入正确的账号密码或进行注册。</span><span>.</span>
                 			<br />
                 			<span>Please remember your id and password.</span>
                 			</div>
                 			</div>
                 		</div>
                 			
                 	<%
             }
            }  
            }
            else{  
                out.print("连接失败！");  
            }  
        }catch (Exception e) {        
            out.print("数据库连接异常！");  
        }  

%>		

</body>
</html>

有几个要点：

1.jsp和html穿插使用需要注重细节，循环和判断都是一样的。任何代码块中都能用<%=x%>来取jsp得参数值，反之很复杂。

2.对数据库得查询语句结果执行的操作，必须放在while (rs.next()）中，因为查询语句得结果是分行输出的（即使只有一行），和其他语句区别很大。

3.暂时没做cookie，有空再看吧，并不是硬性需求。

insert的注册页面相较没什么技术含量，懒得po了。

Part.2 商店页面

先po的是一个学习作业的内容，没什么特别的，有session页面间传值的运用，批量删除购物车内容，以下是代码。

<%@ page language="java" import="java.util.ArrayList" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>商品页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="goods.css">
	-->
<style type ="text/css">
input{
bacjground:pink;
border:0px solid #c00;
}
</style>
  </head>
  
  <body>
     <div align ="center">
    <h2 align="center">欢迎光临新华书店</h2>
    <p>*****书籍列表*****</p>
    <form action=""method="post">
    <input type="text" name="book" value="《围城》&nbsp&nbsp&nbsp&nbsp钱钟书 &nbsp&nbsp&nbsp&nbsp 55.1元" size="40" maxlength="200" readonly>
    <input type="submit"name="add" value ="加入购物车" height="2">
    </form>
    <form action=""method="post">
    <input type="text" name="book" value="《余秋雨散文》&nbsp&nbsp&nbsp&nbsp余秋雨 &nbsp&nbsp&nbsp&nbsp 125元" size="40" maxlength="200" readonly>
    <input type="submit"name="add" value ="加入购物车" height="2">
    </form>
    <form action=""method="post">
    <input type="text" name="book" value="《寻美记》&nbsp&nbsp&nbsp&nbsp熊培云 &nbsp&nbsp&nbsp&nbsp 67.8元" size="40" maxlength="200" readonly>
    <input type="submit"name="add" value ="加入购物车" height="2">
    </form>
    <%
    request.setCharacterEncoding("utf-8");
   		String[]book=request.getParameterValues("book");
   		ArrayList books=(ArrayList)session.getAttribute("books");
   		if(books==null){
   			books=new ArrayList();
   			session.setAttribute("books", books);
   			}
   		if(book!=null){
   			out.println("<script type='text/javascript'>alert('加入购物车成功！');</script>");
   			for(int i=0;i<book.length;i++){
   				books.add(book[i]);}	
   			}
   		out.print(session.getAttribute("log"));
    %>
    <br>
    <input type ="button" value="查看我的购物车"onClick="location.href='list.jsp'"><br>
    </div>
  </body>
</html>

购物车页面

<%@ page language="java" import="java.util.ArrayList"  pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>购物车</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <div align ="center">
    <h2 align="center">欢迎光临新华书店</h2>
    <a href ="g1.jsp">文学类图书</a>&nbsp&nbsp&nbsp&nbsp
    <a href ="g2.jsp">学习类图书</a><br>
    <p>我的购物车</p><br>
	<form action="" method="post">
<%
	@SuppressWarnings("unchecked")
	ArrayList<String> l = (ArrayList<String>)session.getAttribute("books");
	if(l!=null){
		for(int i = 0 ; i < l.size() ; i++){
%>
			<input type="checkbox" name="<%=l.get(i)%>">选中 
<%
			out.print("商品"+(i+1)+":"+l.get(i)+"<br>");
		}
	}
	
%>
		<input type="submit" value="删除">
	</form>
<%
	@SuppressWarnings("unchecked")
	ArrayList<String> m = (ArrayList<String>)session.getAttribute("books");
	if(m!=null){
		for(int i = 0 ; i < m.size() ; i++){
			request.setCharacterEncoding("utf-8");
			String dl = request.getParameter(m.get(i));//分别拿到多选返回值
			if(dl!=null&&dl.equals("on")){
				%>
				<h3 align="center">
				您刚才删除了商品<span>
				<%out.print(m.get(i));%>
				</span>,请问,你还想做什么?<br>
			</h3><%
				m.remove(i);
				i = i-1;
			}
		}
		session.setAttribute("books", m);
	}

		out.print(session.getAttribute("log"));
%>
    </div>
  </body>
</html>

Part.3 过滤器（摧毁了我的精神）

我写这篇博客的最初动力，骂一下它。

 

查到的方法

1.注释掉这句response.setContentType("text/html;charset=UTF-8");

查了下控制台，css之类的都是调用失败的，但是我在下面确实写了判断后缀是css和其他若干文件的时候 直接放行的语句。

		if (uri.contains("index.jsp") || uri.contains("store.jsp")|| uri.contains("6.1.log.jsp")|| uri.contains("check.jsp")
				|| uri.contains("css.jsp")) {
			chain.doFilter(request, response);

然而没有用。

再查控制台文件头，发现是上面那句发病把css文件都改成了text/html（也不是发病，就是这么做的）

注释了，ok，好使了，过滤器直接失效了

2.很多时候真的行了说实话，调试运行十分瑟克塞斯的

第二天打开直接寄。搞得我现在也不知道哪里出了问题。

package Filter;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class Logfilter implements Filter{

	@Override
	public void destroy() {

	}

	@Override
	public void doFilter(ServletRequest request, ServletResponse response,
		FilterChain chain) throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse resp = (HttpServletResponse) response;
		HttpSession session = req.getSession(true);
		req.setCharacterEncoding("utf-8");
		//response.setContentType("text/html;charset=UTF-8");
		resp.setCharacterEncoding("utf-8");
		PrintWriter out = resp.getWriter();
		String request_uri = req.getRequestURI();
		String ctxPath = req.getContextPath();
		String uri = request_uri.substring(ctxPath.length());
		if (uri.contains("index.jsp") || uri.contains("store.jsp")|| uri.contains("6.1.log.jsp")|| uri.contains("check.jsp")
				|| uri.contains("css.jsp")|| uri.contains("html.jsp")) {
			chain.doFilter(request, response);
			}
		else{
			
			if (session.getAttribute("log") != null) {
				chain.doFilter(request, response);
			} 
			else {
				out.println("您没有登录，请先登录！5秒后回到登录页面。");
				resp.setHeader("refresh", "5;url=6.1.log.jsp");
				return;
			}
		}
		System.out.println("这是session"+session.getAttribute("log"));	
	}
	@Override
	public void init(FilterConfig arg0) throws ServletException {
		// TODO Auto-generated method stub
		System.out.println("过滤器的init    "+arg0.getInitParameter("site"));		
	}
}

已经与它奋战一周有余，此情此景正如中概股之触底，又如tes春季赛之东征，希望能迎来光明未来。

如果一直不行，我愿每个页面写个session也不用这沙贝filter...空耗我的莱芙....

5.13记录 很早之前把问题解决了。记录一下。一个是tomcat10以上的版本，import的包前缀名需要改。第二个是上述改文件头的问题，多调试了几次，也不知道是哪一步弄好了，反正每一步都试过了。 

累了先到这吧，下个记录准备写：

Part.4 用户中心 Part.5 各类小功能（和运用tensorflow.js自改的一个有意思的机器学习模型板块。）

withbyfan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值