• 准备用Extjs+ssh做一个小的web系统


    day1:

        本来做这个就是用来学习ExtJS的,所以大部分是现学来的 后端也来不及仔细的做,先上今天的代码

        登陆html:

            

    <html>
    <head>
    <title></title>
    <!--ExtJs start-->
    
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script src="adapter/ext/ext-base.js"></script>
    <script src="ext-all-debug.js"></script>
    <script src="ext-all.js"></script>
    <!--ExtJs end-->
    <!-- 覆盖原有CSS 修改文本框下侧红色波浪线样式如下 -->
    <style type="text/css">
    .x-form-invalid,textarea.x-form-invalid {
        background-color: #FFFFFF;
        background-image: none;
        border-color: #B5B8C8;
    }
    </style>
    <!-- 自定义背景样式CSS-->
    <style type="text/css">
    .loginicon {
        background-image: url(image/a.gif) !important;
    }
    </style>
    <!--ExtJs end-->
    <!--Text index CSS  -->
    <script type="text/javascript">
        Ext.onReady(function() {
        
            //传输编码方式
            Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
            //ExtJS组件自适应浏览器大小
            
            Ext.EventManager.onWindowResize(function() {
                Ext.ComponentManager.each(function(cmpId, cmp, length) {
                    if (cmp.hasOwnProperty("renderTo")) {
                        cmp.doLayout();
                    }
                });
            });
            //quickTips初始化
            //提示气泡使用必须先初始化该项
            Ext.QuickTips.init();
            //表单提示信息的显示格式
            Ext.form.Field.prototype.msgTarget = 'side';
            
            var username = new Ext.form.TextField({
                id:'username',
                width : 140,
                allowBlank : false,
                maxLength : 15,
                name : 'username',
                fieldLabel : '用户名',
                blankText : '请输入用户名',
                maxLengthText : '用户名不能超过15个字符'
    
            });
            
            var password=new Ext.form.TextField({
                id:'password',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                inputType:'password',
                name : 'password',
                fieldLabel : '密码',
                blankText : '请输入密码',
                maxLengthText : '密码不能超过20个字符'
            
            });
            
        
            //登陆提交验证控件
            var submitclick = function() {
                 Ext.Ajax.request({
                    url: 'http://localhost:8080/maybe/login.action?up='+
                    encodeURIComponent(Ext.getCmp("username").getValue())+','+Ext.getCmp("password").getValue(),
                    method: 'post',
                    params: { up: 1},
                    success: function (response, aa) {
                    var json = Ext.util.JSON.decode(response.responseText);
                         //alert(json.id);
                            //alert(json.mag);
                           // alert(response.responseText);
                            if(json.id==0){
                            alert('登陆成功');
                            window.location.href="basicInformation.html";
                            }
                    },
                    failure: function () {
                        alert('系统出错,请联系管理人员!');
                    }
                });
            };
            
            var resetclick = function() {
    //        form.getForm().submit({
    //        method:'post',
     //          url: "http://localhost:8080/maybe/login.action",
     //       success: function (form, action) {
     //       Ext.Msg.alert('Success', action.result.mag);
     //   }
    //});
                form.getForm().reset();
            };
            
            var btnsubmit = new Ext.Button({
                text : '提交',
                // 当用户点击时 执行btnsubmitclick方法
                handler : submitclick
            });
    
            var btnreset = new Ext.Button({
                text : '重置',
                handler : resetclick
            });
            
            
            var form = new Ext.form.FormPanel({
                url : '****',
                //http://localhost:8080/maybe/login.action
                id : "mlgb",
                labelAlign : 'right',
                labelWidth : 45,
                frame : true,
                cls : 'loginform',
                buttonAlign : 'center',
                bodyStyle : 'padding:6px 0px 0px 15px',
                items : [ username,password],
                buttons : [ btnsubmit, btnreset ],
                html : '<span>@左小侠 练习做</span>'
            });
            //创建窗体
            var win = new Ext.Window({
                title : '车辆管理系统',
                //追加背景样式
                iconCls : 'loginicon',
                id : 'window',
                width : 276,
                height : 144,
                //是否可拖拽变更窗口
                resizable : false,
                modal : true,
                closable : true,
                maximizable : true,
                minimizable : true,
                items : form
            });
            win.show();
        });
    </script>
    </head>
    </html>
    后端代码 用Sturts2很简单做的 无数据库交互 纯属模拟
        public String login() throws IOException {
            String up = new String(ServletActionContext.getRequest()
                    .getParameter("up").getBytes("UTF-8"), "GBK");
            String[] data = up.split(",");
            String username = data[0];
            String password = data[1];
            System.out.println(username);
            System.out.println(password);
            ServletActionContext.getResponse().setContentType(
                    "text/json;charset=UTF-8");
            outString("{id:0,mag:'登陆成功 '}");
            return null;
        }
    
    
    


    这是做好的界面
    功能不够详细,目前只是熟悉了一下数据的交互和页面布局
    也遇到了一些问题,希望有大神能看到帮我解决
    问题一:乱码问题 如果用户名提交的是中文 客户端会打印出乱码
      问题二:中文的 fieldLabel 如果太长会换行 怎么设置
        
    第二个页面:
    明天会进行修改 今天由于时间原因拿来练手 主要是练习 怎么将数据加载进form

    <html>
    <head>
    <title>汽车基本信息表</title>
    <!--ExtJs start-->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script src="adapter/ext/ext-base.js"></script>
    <script src="ext-all-debug.js"></script>
    <script src="ext-all.js"></script>
    <!--ExtJs end-->
    <!-- 覆盖原有CSS 修改文本框下侧红色波浪线样式如下 -->
    <style type="text/css">
    .x-form-invalid,textarea.x-form-invalid {
        background-color: #FFFFFF;
        background-image: none;
        border-color: #B5B8C8;
    }
    </style>
    <style type="text/css">
    .loginicon {
        background-image: url(image/a.gif) !important;
    }
    </style>
    <!-- 自定义背景样式CSS-->
    <script type="text/javascript">
            Ext.onReady(function() {
            //ExtJS组件自适应浏览器大小
            Ext.EventManager.onWindowResize(function() {
                Ext.ComponentManager.each(function(cmpId, cmp, length) {
                    if (cmp.hasOwnProperty("renderTo")) {
                        cmp.doLayout();
                    }
                });
            });
            //quickTips初始化
            //提示气泡使用必须先初始化该项
            Ext.QuickTips.init();
            //表单提示信息的显示格式
            Ext.form.Field.prototype.msgTarget = 'side';
            
            var carname = new Ext.form.TextField({
                id:'carname',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                name : 'carname',
                fieldLabel : '汽车型号',
                blankText : '请输入汽车型号',
            });
            
            var carnumber = new Ext.form.TextField({
                id:'carnumber',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                name : 'carnumber',
                fieldLabel : '汽车车牌号',
                blankText : '请输入汽车牌号',
            });
            
            var name = new Ext.form.TextField({
                id:'name',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                name : 'name',
                fieldLabel : '车主姓名',
                blankText : '请输入车主姓名',
            });
            
            var number = new Ext.form.TextField({
                id:'number',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                name : 'name',
                fieldLabel : '车主驾驶证号',
                blankText : '请输入车主驾驶证号',
            });
            
            var transgressnumber = new Ext.form.TextField({
                  //设置只读属性
                disabled :true,
                id:'transgressnumber',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                name : 'transgressnumber',
                fieldLabel : '违规次数',
            });
            
            var Attribution = new Ext.form.TextField({
                id:'Attribution',
                width : 140,
                allowBlank : false,
                maxLength : 20,
                name : 'Attribution',
                fieldLabel : '车辆归属地',
            });
            
            var submitclick = function() {
                 alert('修改成功');
            };
                
            var resetclick = function() {
                form.getForm().reset();
            };
            
            var btnsubmit = new Ext.Button({
                text : '提交',
                // 当用户点击时 执行btnsubmitclick方法
                handler : submitclick
            });
    
            var btnreset = new Ext.Button({
                text : '重置',
                handler : resetclick
            });
            
            var loadclick = function() {
                Ext.Ajax.request({
                    url: 'http://localhost:8080/maybe/getInformation.action',
                    method: 'post',
                    params: {},
                    success: function (response, recc) {
                    var json = Ext.util.JSON.decode(response.responseText);
                           Ext.getCmp("name").setValue(json.name);
                           Ext.getCmp("number").setValue(json.number);
                           Ext.getCmp("carname").setValue(json.carname);
                           Ext.getCmp("carnumber").setValue(json.carnumber);
                           Ext.getCmp("Attribution").setValue(json.Attribution);
                           Ext.getCmp("transgressnumber").setValue(json.transgressnumber);
                           alert('加载完成');
                    },
                    failure: function () {
                        alert('系统出错,请联系管理人员!');
                    }
                });
            };
            var btnload = new Ext.Button({
                text : '读取',
                handler : loadclick
            });
            
            var form = new Ext.form.FormPanel({
                url : '****',
                //http://localhost:8080/maybe/login.action
                id : "mlgb",
                //修改TextField 中的fieldLabel属性
                labelAlign : 'left',
                labelWidth : 80,
                frame : true,
                cls : 'loginform',
                buttonAlign : 'center',
                bodyStyle : 'padding:6px 0px 0px 15px',
                items : [ carname,carnumber,name,number,Attribution,transgressnumber],
                buttons : [ btnsubmit, btnreset,btnload],
                html : '<span>@左小侠 练习做</span>'
            });
            
            var win = new Ext.Window({
                title : '车辆信息',
                //追加背景样式
                iconCls : 'loginicon',
                id : 'window',
                width : 376,
                height : 254,
                //是否可拖拽变更窗口
                resizable : false,
                modal : true,
                closable : true,
                maximizable : true,
                minimizable : true,
                items : form
            });
            win.show();    
            });
    
    </script>
    </head>
    </html>

    后端代码:

    public String getInformation(){
            System.out.println("有人调用了我");
            ServletActionContext.getResponse().setContentType(
                    "text/json;charset=UTF-8");
            outString("{carname:'保时捷',carnumber:'贵LPK110',name:'覃发钠',number:'131494SB',Attribution:'贵州',transgressnumber:10}");
            return null;
        }
        
        // write
        public void outString(String a) {
            try {
                PrintWriter out = ServletActionContext.getResponse().getWriter();
                out.write(a);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

    界面:

    在这里也遇到了一些新的问题

      问题一:from的加载问题 找其他的大神的资料没有看懂  只能这样一个个的Set的方式读取

  • 相关阅读:
    tempfile 模块
    gc 模块
    hashlib 加密模块
    optparse模块
    ios网络相关问题-HTTPS与网络安全
    Charles抓包原理
    ios网络相关问题-HTTP特点
    ios网络相关问题-HTTP协议
    React-Native package.json、node_modules等文件说明
    Swift 4.0 中的 open,public,internal,fileprivate,private
  • 原文地址:https://www.cnblogs.com/zuoxiaoxia/p/4718748.html
Copyright © 2020-2023  润新知