从零搭建一个简易的web项目

1.Windows安装mysql

下载网址:https://dev.mysql.com/downloads/mysql/
MySQL卸载指令  mysqld --remove mysql
解压后在bin目录下打开cmd命令窗口作如下操作:
    a.安装mysql服务,执行命令 mysqld --install ,出现Service successfully installed 表示安装成功
    b.初始化mysql, 执行 mysqld --initialize --console,这里会产生root用户的初始随机密码
    c.若想设置初始密码为空,可执行命令 mysqld --initialize -insecure(后续登录命令mysql -u root)
    d.开启mysql服务,执行指令 net start mysql
    e.登录验证,输入命令 mysql -u root -p,密码是刚才产生的随机密码
    f.修改密码指令 (alter user 'root'@'localhost' identified by '新密码';),密码要用引号且后面带分号,然后quit重新登录验证

2.创建web项目

新建项目,选择 Dynamic Web project
    (1)创建一个Servlet

		@WebServlet("/HelloServlet")
		public class HelloServlet extends HttpServlet {
			private static final long serialVersionUID = 1L;
			
			int i = 1;

		    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
				i++;
				try{
					Thread.sleep(1000*4);
				}catch(Exception e){
					e.printStackTrace();
				}
				response.getWriter().write(i+"");
			}
			
			protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
				doGet(request, response);
			}

		}

该代码存在线程安全问题,两个线程同时访问返回结果都是3(同一电脑需要不同浏览器才能同时为3)
(2)创建一个查询数据库数据的Servlet(需要引入数据库驱动的jar包)

		@WebServlet("/jdbcServlet")
		public class JdbcServlet extends HttpServlet {
			private static final long serialVersionUID = 1L;
			
		    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		    	
		    	response.setContentType("text/html;charset=UTF-8");
		    	response.setCharacterEncoding("UTF-8");
		    	try{
					Class.forName("com.mysql.cj.jdbc.Driver");
					Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/yrrdb", "root", "123456");
					PreparedStatement pre = conn.prepareStatement("select * from usertest  where id = ?");
					pre.setString(1, "1");
					ResultSet res = pre.executeQuery();
					while(res.next()){
						response.getWriter().write("姓名:" + res.getString("name") + ",age:" + res.getInt("age"));
					}
				}catch(Exception e){
					e.printStackTrace();
				}
			}
			
			protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
				doGet(request, response);
			}

		}

(3)前端请求获取来源于数据库的json数据

Servlet代码

		@WebServlet("/jsonServlet")
		public class JsonServlet extends HttpServlet {
			private static final long serialVersionUID = 1L;
			
		    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		    	
		    	response.setContentType("application/json;charset=UTF-8");
		    	response.setCharacterEncoding("UTF-8");
		    	try{
					Class.forName("com.mysql.cj.jdbc.Driver");
					Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/yrrdb", "root", "123456");
					PreparedStatement pre = conn.prepareStatement("select * from usertest  where id = ?");
					pre.setString(1, "1");
					ResultSet res = pre.executeQuery();
					while(res.next()){
						response.getWriter().write("姓名:" + res.getString("name") + ",age:" + res.getInt("age"));
					}
				}catch(Exception e){
					e.printStackTrace();
				}
			}
			
			protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
				doGet(request, response);
			}

		}

前端html代码

		<!DOCTYPE html>
		<html>
		<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			function func(){
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange=function(){
					if(xhr.readyState == 4){
						if(xhr.status == 200){
							alert(xhr.responseText)//获取服务器返回数据
						}else{
							alert("请求失败!")
						}
					}
				}
				xhr.open("GET","/myfirstweb/jsonServlet");
				//xhr.setRequsetHeader("header","value");
				/*xhr.send(content) content可省略,post请求时则此内容为请求体*/
				xhr.send();
			}
		</script>
		</head>
		<body>
			<h1 onclick="func()">Hello tomcat!</h1>
		</body>
		</html>

页面展示截图:

猜你喜欢

转载自blog.csdn.net/Yang_RR/article/details/127674447