Web开发学习之路--Eclipse＋Tomcat＋mysql之初体验

深藏阁楼爱情的钟 2022-05-24 22:59 260阅读 0赞

学习了一段时间android，正好要用到android和服务器之间的交互，既然要学习android，那么就涉猎下服务器端的开发了，以前学过php，用thinkphp很快可以搭建起来，但是android是java的，web用java来写不是更好，主要实现聊天的话得需要socket长连接，用php不好整。既然要学习Web开发，那最开始的搭建服务器最最根本了，这里用了eclipse＋tomcat＋mysql来实现之。

首先下载eclipse了，这里我用的4.4.1的版本，tomcat7.0，至于这个eclipse＋tomcat的环境的话相信网上的资料已经非常的多了，这里就不介绍了。关于mysql可以参考这里：[http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html][http_www.cnblogs.com_macro-cheng_archive_2011_10_25_mysql-001.html]。特别注意的是，下载安装好了之后会有弹出来临时的密码，这个需要记住的。

这里假设已经安装搭建好了环境了。启动eclipse，然后新建一个tomcat的server：

![Center][]

接着next

![Center 1][]

这里选择了tomcat7.0，然后按照要求来，因为我已经建立了一个dynamic的web，所以添加到server中就好了。

![Center 2][]

好了，这样server就建立好了，接着我们创建一个工程：

![Center 3][]

按照步骤一步一步来

![Center 4][]

已经创建了hello，所以这里创建hello1，接着下一步：

![Center 5][]

自动添加web.xml用来配置。接着把hello1添加到server中去，通过Add and Remove，如下：

![Center 6][]

接着new一个index.jsp文件：

![Center 7][]

然后添加代码：

\[java\]  [view plain][]   [copy][view plain]

1.  <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.      pageEncoding="UTF-8"%>  
3.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4.  <html>  
5.  <head>  
6.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7.  <title>hello</title>  
8.  </head>  
9.  <body>  
10.     这是我们第2个web项目，哈哈  
11. </body>  
12. </html>

运行看下效果：

![Center 8][]

好了，基本上环境都搭建好了。

先在mysql 数据库里面新建下表：一般mysql安装在/usr/local/mysql/bin下，cd 到该目录下，执行命令：

./mysql -u root -p

进入到mysql中，执行show databases;查看当前的database，新建test数据库：

，![Center 9][]

接着我们新建一个表Student：

![Center 10][]

然后查看下表建立的没有，执行show tables;

![Center 11][]

可以发现里面有了student表。 接着插入两个student的信息；

![Center 12][]

再查看下表中的信息：

![Center 13][]

可以发现已经有了两个student的信息了。

然后参考了网上的代码，简单实现下信息的增删改查，并解决了中文乱码的问题：

首先新建Student类：

\[java\]  [view plain][]   [copy][view plain]

1.  **package** com.example;  
2.    
3.  **public** **class** Student \{  
4.      **private** String sid;    
5.      **private** String name;    
6.      **private** String age;    
7.      
8.      **public** String getSid() \{    
9.          **return** sid;    
10.     \}    
11.     
12.     **public** **void** setSid(String sid) \{    
13.         **this**.sid = sid;    
14.     \}    
15.     
16.     **public** String getName() \{    
17.         **return** name;    
18.     \}    
19.     
20.     **public** **void** setName(String name) \{    
21.         **this**.name = name;    
22.     \}    
23.     
24.     **public** String getAge() \{    
25.         **return** age;    
26.     \}    
27.     
28.     **public** **void** setAge(String age) \{    
29.         **this**.age = age;    
30.     \}    
31.   
32. \}

最简单的设置和获取id，name和age的方法。

接着是连接数据库，更新信息，查询信息的方法：

\[java\]  [view plain][]   [copy][view plain]

1.  **package** com.example;  
2.  **import** java.sql.Connection;    
3.  **import** java.sql.DriverManager;    
4.  **import** java.sql.ResultSet;    
5.  **import** java.sql.SQLException;    
6.  **import** java.sql.Statement;    
7.  **import** java.util.ArrayList;  
8.    
9.  **import** com.example.Student;  
10.   
11. **public** **class** ConnectDB \{  
12.     **private** **static** Connection conn = **null**;  
13.     **private** **static** Statement stmt = **null**;  
14.     **private** **static** ResultSet rs = **null**;  
15.       
16.     **public** **static** **void** startConnect() \{  
17.         **try** \{  
18.             Class.forName("com.mysql.jdbc.Driver");  
19.             **try** \{  
20.                 conn = DriverManager.getConnection(  
21.                         "jdbc:MySQL://127.0.0.1:3306/test", "root", "你的密码");   
22.             \} **catch** (SQLException e) \{  
23.                 // TODO: handle exception  
24.                 e.printStackTrace();  
25.             \}  
26.         \} **catch** (ClassNotFoundException e) \{  
27.             // TODO: handle exception  
28.             e.printStackTrace();  
29.         \}  
30.     \}  
31.       
32.     **public** **static** **void** endConnect() **throws** SQLException \{     
33.         //关闭连接    
34.         **if** (rs != **null**) \{    
35.             rs.close();    
36.             rs = **null**;    
37.         \}    
38.         **if** (stmt != **null**) \{    
39.             stmt.close();    
40.             stmt = **null**;    
41.         \}    
42.         **if** (conn != **null**) \{    
43.             conn.close();    
44.             conn = **null**;    
45.         \}    
46.     \}    
47.     
48.     **public** **static** **void** update(String sql) **throws** SQLException \{     
49.     
50.         //数据库更新    
51.         startConnect();   
52.         stmt = conn.createStatement();    
53.         stmt.executeUpdate(sql);    
54.         endConnect();    
55.     \}    
56.     
57.     **public** **static** ArrayList getList1(String sql) **throws** SQLException \{    
58.     
59.         //数据库查询    
60.         ArrayList list = **new** ArrayList();    
61.         startConnect();   
62.         stmt = conn.createStatement();    
63.         rs = stmt.executeQuery(sql);    
64.         **while** (rs.next()) \{    
65.             Student st = **new** Student();    
66.             st.setSid(rs.getString("sid"));    
67.             st.setName(rs.getString("sname"));  
68.             st.setAge(rs.getString("sage"));    
69.             list.add(st);    
70.         \}    
71.         endConnect();    
72.         **return** list;    
73.     \}    
74.     
75. \}

然后实现几个简单的jsp代码，首先是list.jsp：

\[java\]  [view plain][]   [copy][view plain]

1.  <%@page **import**="com.example.Student"%>  
2.  <%@page **import**="com.example.ConnectDB"%>  
3.  <%@ page language="java" **import**="com.example.ConnectDB,com.example.Student,java.util.\*"    
4.      pageEncoding="gbk"%>     
5.      <%--jsp头文件，包括引入的包和支持语言，gbk为支持中文--%>    
6.  <%    
7.      ArrayList list = ConnectDB.getList1("select sid,sname,sage from student"); //获得test表中所有数据并以列表形式返回    
8.  %>    
9.      
10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
11. <html>    
12.     <head>    
13.         <title>My JSP 'list.jsp' starting page</title>    
14.     </head>    
15.     <body>    
16.         <input type="button" name="bottom" value="添加新学生"    
17.             οnclick="javascript:window.location.href='add.jsp'">    
18.         <br>    
19.         <br>    
20.         <table border="1">    
21.             <tr>    
22.                 <td>    
23.                     编号    
24.                 </td>    
25.                 <td>    
26.                     姓名    
27.                 </td>    
28.                 <td>    
29.                     年龄    
30.                 </td>    
31.                 <td>    
32.                     操作    
33.                 </td>    
34.             </tr>    
35.             <%    
36.                     \{    
37.                     **for** (Iterator it = list.iterator(); it.hasNext();) \{    
38.                         Student s = (Student) it.next();    
39.             %>    
40.             <tr>    
41.                 <td><%=s.getSid()%></td>    
42.                 <td><%=s.getName()%></td>    
43.                 <td><%=s.getAge()%></td>    
44.                 <td>    
45.                     <a href="update.jsp?sid=<%=s.getSid()%>">修改</a>    
46.                     <a href="delete.jsp?sid=<%=s.getSid()%>"    
47.                         οnclick="return confirm('确定删除?');">删除</a>    
48.                 </td>    
49.             </tr>    
50.             <%    
51.                 \}    
52.                 \}    
53.             %>    
54.         </table>    
55.     </body>    
56. </html>

这里通过调用了ConnectDB的getlist1方法来显示目前数据库test的student表中的数据信息。接着是添加的jsp：

\[java\]  [view plain][]   [copy][view plain]

1.  <%@ page language="java" pageEncoding="utf-8"%>    
2.  <%  
3.      request.setCharacterEncoding("UTF-8");   
4.      response.setCharacterEncoding("UTF-8");   
5.      response.setContentType("text/html; charset=utf-8");   
6.  %>    
7.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
8.  <html>    
9.      <head>    
10.         <title>add</title>    
11.     </head>    
12.     <body>    
13.         <form action="addInfo.jsp" method="post">    
14.             提交到addinfo.jsp    
15.             <p>    
16.                 添加学生：    
17.             </p>    
18.             SID：    
19.             <input type="text" name="sid">    
20.             <br>    
21.             <br>    
22.             姓名：    
23.             <input type="text" name="sname">    
24.             <br>    
25.             <br>    
26.             年龄：    
27.             <input type="text" name="sage">    
28.             <br>    
29.             <br>    
30.             <input type="submit" name="submit" value="提交">    
31.         </form>    
32.     </body>    
33. </html>

这里把数据提交到addinfo.jsp：

\[java\]  [view plain][]   [copy][view plain]

1.  <%@page **import**="com.example.ConnectDB"%>  
2.  <%@ page language="java" **import**="com.example.ConnectDB" pageEncoding="UTF-8"%>    
3.  <%    
4.      request.setCharacterEncoding("UTF-8");   
5.      response.setCharacterEncoding("UTF-8");   
6.      response.setContentType("text/html; charset=utf-8");   
7.    
8.      String sid=**new** String(request.getParameter("sid").getBytes("UTF-8"));     
9.      String name = **new** String(request.getParameter("sname").getBytes("UTF-8"));    
10.     String age = **new** String(request.getParameter("sage").getBytes("UTF-8"));    
11.     ConnectDB.update("insert into student (sid,sname,sage) values ('"\+sid+"','"\+name+"','"\+age+"')");    
12.     response.sendRedirect("list.jsp");  
13. %>    
14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
15. <html>    
16.     <head>    
17.         <title>My JSP 'addinfo.jsp' starting page</title>    
18.     </head>    
19.     <body>    
20.         添加成功!<br>    
21.     </body>    
22. </html>

接着是delete.jsp

\[java\]  [view plain][]   [copy][view plain]

1.  <%@ page language="java" **import**="com.example.ConnectDB" pageEncoding="gbk"%>    
2.  <%    
3.      ConnectDB.update("delete from student where sid ="\+request.getParameter("sid")); //获得要删除人的sid并删除    
4.      response.sendRedirect("list.jsp");  //转到list.jsp页面    
5.  %>    
6.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
7.  <html>    
8.      <head>    
9.          <title>My JSP 'delete.jsp' starting page</title>    
10.     </head>    
11.     <body>    
12.         This is my JSP page.<br>    
13.     </body>    
14. </html>

基本上就这些了，更新的jsp就不写了。运行结果如下：

![Center 14][]

通过这个例子基本上关于web的简单工程创建啊，修改数据库之类的都基本上可以去玩了，那么之后就可以搭建web和前段时间研究的仿微信的android app可以交互了。

这里补充上修改的代码

再建一个updata.jsp

<%@ page language="java" pageEncoding="utf-8"%>    
        <%  
            request.setCharacterEncoding("UTF-8");   
            response.setCharacterEncoding("UTF-8");   
            response.setContentType("text/html; charset=utf-8");   
        %>    
        <% 
        	String line_id=request.getParameter("sid"); 
        %>
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
        <html>    
            <head>    
                <title>updata</title>    
            </head>    
            <body>    
                <form action="updatainfo.jsp" method="post">    
                    <p>    
                        修改学生：    
                    </p>    
                    SID：    
                    <input type="text" name="sid">    
                    <br>    
                    <br>    
                    姓名：    
                    <input type="text" name="sname">    
                    <br>    
                    <br>    
                    年龄：    
                    <input type="text" name="sage">    
                    <br>    
                    <br>    
                    <input type="submit" name="submit" value="提交">    
                </form>    
            </body>    
        </html>

然后是updatainfo.jsp

<%@page import="com.example.ConnectDB"%>  
        <%@ page language="java" import="com.example.ConnectDB,java.*" pageEncoding="UTF-8"%>    
        <%    
            request.setCharacterEncoding("UTF-8");   
            response.setCharacterEncoding("UTF-8");   
            response.setContentType("text/html; charset=utf-8");   
          
           
            String line_id=request.getParameter("id");     
            String id=request.getParameter("sid");     
            String name = request.getParameter("sname");    
            String age = request.getParameter("sage");    
              //System.out.println(line_id);
            ConnectDB.update("UPDATE student SET sid='"+id+"',sname='"+name+"',sage='"+age+"' WHERE sid='"+line_id+"'");    
            response.sendRedirect("list.jsp");
        %>   
        
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
        <html>    
            <head>    
                <title>My JSP 'addinfo.jsp' starting page</title>    
            </head>    
            <body>    
                添加成功!<br>    
            </body>    
        </html>

[http_www.cnblogs.com_macro-cheng_archive_2011_10_25_mysql-001.html]: http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html
[Center]: /images/20220525/c11af564edf444bfae9fd4b695799724.png
[Center 1]: /images/20220525/d01d61051c304e05995d6417b373f824.png
[Center 2]: /images/20220525/897abf1d0cd4465b9682c21e9433168b.png
[Center 3]: /images/20220525/3a3efe3e01c648319bfc8b0722306f0e.png
[Center 4]: /images/20220525/574d1fc606254ec2b369f384b0c773e7.png
[Center 5]: /images/20220525/269488c0e5de4e95b24ad4d674443a6f.png
[Center 6]: /images/20220525/9c7e202042264f9da7e1ff9f21fa8bd3.png
[Center 7]: /images/20220525/051fe20b93cf47f4b7537ce01cf8bcce.png
[view plain]: https://blog.csdn.net/eastmoon502136/article/details/50783334#
[Center 8]: /images/20220525/e3a2a430b51d436292c2a4bda5cae5c1.png
[Center 9]: /images/20220525/04f672aed4cd41799c9506622aa56cb4.png
[Center 10]: /images/20220525/65b4cead7df84dbf9e878dee26194978.png
[Center 11]: /images/20220525/8c53433daf4d4a56a79aeeea5ea10de4.png
[Center 12]: /images/20220525/faab7328884d44eaba5dab18029a971d.png
[Center 13]: /images/20220525/48dedfbf73f04d3aa4a4f6d24e701418.png
[Center 14]: /images/20220525/6589ab6298d944d894da8721d5a2800a.png