CGB2110第二阶段最后一天综合案列

2024-01-02 11:36:28

CGB2110 Day18实现前后端交互

前端代码用户注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="http://localhost:8080/Servlet01" method="post">
			<table border="1" cellspacing="" cellpadding="">
				
				<tr><td>用户名：</td><td><input type="text" name="user" /></td></tr>
				<tr><td>密码：</td><td><input type="password" name="pwd" /></td></tr>
				<tr><td>年龄：</td><td><input type="text" name="age" /></td></tr>
				<tr><td><button type="submit">提交</button></td></tr>
			</table>
			
			
			
			
			
			
			
		</form>
	</body>
</html>

前端代码从后端读取数据展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试前后端交互</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./axios.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="aa">
			<h1>用户名：{{user}}</h1>
			<h1>年龄：{{age}}</h1>
			<h1>密码：{{pwd}}</h1>
			<button @click="get()">点击</button>

		</div>
		<script type="text/javascript">
			new Vue({
				el:"#aa",
				data(){
					return{
						user:"",
						age:"",
						pwd:"",
					}
				},
				methods:{
					get(){
						axios.get("http://localhost:8080/Servlet01?age=110&user=张三&pwd=709394").then(res=>{
							console.log(res)
							this.user=res.data.user
							this.age=res.data.age
							this.pwd=res.data.pwd
						})
					}
				}
			
			})
		</script>		
	</body>
</html>

后端代码读取前端数据并用JDBC把数据存入MySQL数据库

package cn.tedu.cgb2110.cgb2110servlet01.request;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@WebServlet("/Servlet01")
public class Servlet01 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        request
        String user = request.getParameter("user");
        String age = request.getParameter("age");
        String pwd = request.getParameter("pwd");
//        JDBC
        Connection c =null;
        PreparedStatement ps =null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String url="jdbc:mysql://localhost:3306/cgb211001?characterEncoding=utf8";
            c = DriverManager.getConnection(url,"root","root");
            String sql="insert into user values(null,?,?,?)";
            ps = c.prepareStatement(sql);
            ps.setObject(1,user);
            ps.setObject(2,age);
            ps.setObject(3,pwd);
            ps.executeUpdate();
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }finally {
                ps=null;
            }
            try {
                c.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }finally {
                c=null;
            }
        }
//        response
        response.setContentType("text/html;charset=utf8");
        response.getWriter().println("用户名是"+user);
        response.getWriter().println("年龄是"+age);
        response.getWriter().println("密码是"+pwd);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin","*");
        //        request
        String user = request.getParameter("user");
        String age = request.getParameter("age");
        String pwd = request.getParameter("pwd");
//        JDBC
        Connection c =null;
        PreparedStatement ps =null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String url="jdbc:mysql://localhost:3306/cgb211001?characterEncoding=utf8";
            c = DriverManager.getConnection(url,"root","root");
            String sql="insert into user values(null,?,?,?)";
            ps = c.prepareStatement(sql);
            ps.setObject(1,user);
            ps.setObject(2,age);
            ps.setObject(3,pwd);
            ps.executeUpdate();
        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                ps.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }finally {
                ps=null;
            }
            try {
                c.close();
            } catch (SQLException throwables) {
                throwables.printStackTrace();
            }finally {
                c=null;
            }
        }
//        response
        response.setContentType("text/html;charset=utf8");
        response.getWriter().println("{\"user\":\""+user+"\",\"age\":\""+age+"\",\"pwd\":\""+pwd+"\"}");

    }





    }

码农公寓

相关文章