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

2021-12-17 23:07:04 阅读：156 来源： 互联网

标签：ps CGB2110 age request 案列 pwd user 第二阶段 response

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+"\"}");

    }





    }

标签：ps,CGB2110,age,request,案列,pwd,user,第二阶段,response
来源： https://blog.csdn.net/m0_63635826/article/details/122006368

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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