分享个普通的实现登陆的简陋例子

费曼

①拉两个输入框进行密码和账号的输入



两个输入框分别绑定data1的两个关系

②在数据库test下建表（自己爱到哪里建到哪里建）


因为没有注册界面，也没写注册代码，就自己在数据库加条数据

③建一个web项目 建一个自己的servlet类（继承HttpServlet的类）再进行配置web.xml文件
我这里就不说怎么建web项目了 嫌麻烦 直接用baas的吧

导入baas项目 建一个Myservlet类




配置web.xml文件（/baas/WEB-INF/web.xml）

1. <servlet>
   
2.                 <servlet-name>login</servlet-name>
   
3.                 <servlet-class>com.servlet.MyServlet</servlet-class>
   
4.         </servlet>
   
5.         <servlet-mapping>
   
6.                 <servlet-name>login</servlet-name>
   
7.                 <url-pattern>/login</url-pattern>
   
8.         </servlet-mapping>

复制代码

④覆盖public void service(ServletRequest arg0, ServletResponse arg1) 方法 实现登陆的功能
这里注意的是需要从前端获取参数params的json格式的参数，具体看⑤的做法

1. public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {
   
2.                 Connection conn =null;
   
3.                 PreparedStatement ps = null;
   
4.                 ResultSet rs = null;
   
5.                
   
6.                 // 参数序列化 这个是FastJson 。jar包的json解析工具 自己百度一下
   
7.                 JSONObject params = (JSONObject) JSONObject.parse(request.getParameter("params"));
   
8.                
   
9.                 try {
   
10.                         //JDBC的东西 自己到网上百度JDBC
    
11.                         Class.forName("com.mysql.jdbc.Driver");
    
12.                         conn=DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test", "root","x5");
    
13.                         conn.setAutoCommit(false);
    
14.                         ps = conn.prepareStatement("select * from user where username=? and password = ?");
    
15.                         //设置参数
    
16.                         ps.setString(1, params.getString("username"));
    
17.                         ps.setString(2, params.getString("password"));
    
18.                         rs = ps.executeQuery();
    
19.                         String str = null;//返回信息
    
20.                         if(rs.next()){
    
21.                                 //成功登录
    
22.                                 str = "{state:true,message:'登陆成功！'}";
    
23.                         }else{
    
24.                                 str = "{state:false,message:'账号或密码错误！'}";
    
25.                         }
    
26.                         
    
27.                         //向前端返回信息
    
28.                         response.setContentType("text/html;charset=utf-8");
    
29.                         response.getWriter().write(str);
    
30.                         
    
31.                 } catch (SQLException | ClassNotFoundException e) {
    
32.                         e.printStackTrace();
    
33.                 }finally{
    
34.                         //关闭资源
    
35.                         try {
    
36.                                 if(rs!=null){
    
37.                                         rs.close();
    
38.                                 }
    
39.                                 if(ps!=null){
    
40.                                         ps.close();
    
41.                                 }
    
42.                                 if(conn!=null){
    
43.                                         conn.close();
    
44.                                 }
    
45.                                 
    
46.                         } catch (SQLException e) {
    
47.                                 e.printStackTrace();
    
48.                         }
    
49.                 }
    
50. 
    
51.         }

复制代码

⑤前端使用ajax发送请求

1.         Model.prototype.button4Click = function(event){
   
2.                 var data = this.comp("data1");
   
3.                
   
4.                 //JSON对象封装参数                        
   
5.                 var options = {
   
6.                         "username":data.getValue("username"),
   
7.                         "password":data.getValue("password"),
   
8.                 };
   
9.                
   
10.                 //登陆
    
11.                 $.ajax({
    
12.              type: "GET",
    
13.              //url的写法是/项目名/请求 参考servlet的知识
    
14.              url: "/baas/login",
    
15.              //把json对象转成字符串 相当于在url后增加        url？params={username：XXXX,password:XXXXX}
    
16.              data:"params="+JSON.stringify(options),
    
17.              success: function(result){
    
18.                      //rusult为后端传回来的数据 response.getWriter().write(str); 下面语句为转换成json对象
    
19.                      result = eval("("+result+")");
    
20.                      if(result.state){
    
21.                              //{state:true,message:'登陆成功！'}
    
22.                              alert(result.message);
    
23.                      }else{
    
24.                              //{state:false,message:'账号或密码错误！'}
    
25.                              alert(result.message);
    
26.                      }
    
27.              },
    
28.              error:function(result){
    
29.                      alert("登陆错误");
    
30.              }
    
31.          });
    
32.         };

复制代码

效果图

sxl

很好，顶！

sxl

建议楼主把这篇帖子写到博客里去（文档中心就是博客）。

gzcyp2000

的确有点简陋，不过迈出了第一步，可喜！

sheng888s

13.             //url的写法是/项目名/请求 参考servlet的知识

14.             url: "/baas/login",
URL也是这样的写的
是不是我的URL写的不对 能详细说下吗
完全重建本贴环境 报错
Unexpected end of input
隐藏详细
SyntaxError: Unexpected end of input at Object.Model.button22Click.$.ajax.success (http://localhost:8080/x5/$v795884633a7e4a1187859f49952b95cc$lzh_CN$sdesktop$d/UI2/hello/mainActivity.js:354:46) at h.Callbacks.f (http://localhost:8080/x5/$v43a457bfadd549ed8785726d6616ebd6$lzh_CN$sdesktop$d/UI2/system/core.min.js:36:57318) at Object.h.Callbacks.l.fireWith [as resolveWith] (http://localhost:8080/x5/$v43a457bfadd549ed8785726d6616ebd6$lzh_CN$sdesktop$d/UI2/system/core.min.js:36:58130) at x (http://localhost:8080/x5/$v43a457bfadd549ed8785726d6616ebd6$lzh_CN$sdesktop$d/UI2/system/core.min.js:36:103570) at XMLHttpRequest.h.ajaxTransport.e.send.t (http://localhost:8080/x5/$v43a457bfadd549ed8785726d6616ebd6$lzh_CN$sdesktop$d/UI2/system/core.min.js:36:109840)

fluting

你好。我想问下，，在bex5也可以按照这些步骤开发么

1697380236

您好，我现在也在弄，我因此第一次写，所有有很多疑问，首先，我的后端是java，tomcat，eclipse，mysql，这些内容是我自己建立的，我现在问题是，servlet，我建在我自己的后端，问题，是xml配置文件，我放在哪里呢？我现在最大的问题是，我独立我用自己的也可以写代码，就是长得比较丑，我用WEX5也能实现，但是我要是仅仅wex5加上我的后端我就实现不了。比如这里的web工程，我们在自己后端需要建立web工程吗？不需要吧，应该是直接建立servlet和配置xml，但是我搞不清楚配置在哪里了？O(∩_∩)O谢谢！

xiaoniqiu2015

感觉不错~~~~~~~

郭德成

对servlet一窍不通