Build a simple web project from scratch

1. Install mysql on Windows

Download URL: https://dev.mysql.com/downloads/mysql/
MySQL uninstall command mysqld --remove mysql
After decompression, open the cmd command window in the bin directory and do the following operations:
    a. Install the mysql service and execute the command mysqld -- install, Service successfully installed appears, indicating that the installation is successful
    b. Initialize mysql, execute mysqld --initialize --console, here will generate the initial random password of the root user
    c. If you want to set the initial password to be empty, you can execute the command mysqld --initialize - insecure (subsequent login command mysql -u root)
    d. Open the mysql service, execute the command net start mysql
    e. Login verification, enter the command mysql -u root -p, the password is the random password just generated
    f. Modify the password command (alter user 'root'@'localhost' identified by 'new password';), the password should be in quotation marks followed by a semicolon, then quit to log in again to verify

2. Create a web project

Create a new project, select Dynamic Web project
    (1) to create a 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);
			}

		}

This code has a thread safety problem, and the results returned by two threads accessing at the same time are 3 (the same computer needs different browsers to be 3 at the same time)
(2) Create a Servlet that queries database data (need to introduce a database-driven jar package)

		@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) Front-end requests to obtain json data from the database

Servlet code

		@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);
			}

		}

front-end html code

		<!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>

Screenshot of the page display:

 

Guess you like

Origin blog.csdn.net/Yang_RR/article/details/127674447