中间很多步骤都没有一一记录,稍微总结一下。
服务器:阿里云服务器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="《围城》    钱钟书      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="《余秋雨散文》    余秋雨      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="《寻美记》    熊培云      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>    
<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自改的一个有意思的机器学习模型板块。)