★ FEATURED ARTICLE 简介面向前端入门者与 Java Web 初学者的 EasyUI 简单登录界面示例包可用于课程练习、登录页原型搭建、组件入门参考或小型项目界面草稿。压缩包共 332 个文件整体约 482KB以 gif、png 图片和 js 脚本、css 样式、html 页面为主另含少量 json、xml 配置、已编译 Servlet 类及 Eclipse 工程文件便于直接解压后查看页面组织、静态资源引用与工程目录结构。已有 899 人学习下载作为轻量级入门示例具备一定参考价值。读者可从中了解 EasyUI 登录表单的页面布局、输入框与按钮样式、脚本引入顺序、图片素材管理并对照工程配置理解一个简单 Java Web 登录界面的基本组成。资源体量小、结构直观适合快速浏览、课堂演示和二次修改也可作为课堂作业、个人练习和原型搭建的参考底稿。1. 先别急着敲代码EasyUI 简单登录界面到底是个什么东西很多人第一次听到「EasyUI 简单登录界面」这几个字脑子里浮现的画面是密密麻麻的 div、一堆看不懂的 class还有 css、js、themes 三个不知道先动哪个的文件夹。其实换个生活化的角度就好理解了它更像去家具城买的一套成品衣柜板材、螺丝、图纸都配齐了你要做的是按图纸拼起来、摆到合适的位置而不是从砍树开始。EasyUI 是一套基于 jQuery 的前端界面组件库它把输入框、按钮、面板、表格这些常用零件提前做好了你写几个 class 名、配几个参数就能调用而这份资源里的简单登录界面就是把用户名框、密码框、登录按钮这三样东西按后台管理系统最常见的样式拼成一页。它适合完全没有前端框架经验、却要交课程设计或者做内部管理页面的人。2. 为什么新手的第一页适合从这里起步三个实在的理由2.1 纯手写一个登录框劝退点比想象中多如果只允许用原生 HTML 和 CSS 做一个登录框你会依次撞上这些事先要写一个居中的容器flex 布局写了三行发现没生效因为父元素没有高度然后要给 input 去掉默认的边框和聚焦时那圈蓝色描边写了一大串 outline、border、box-shadow 才勉强像样接着是 placeholder 的颜色各浏览器不一致得挨个加伪元素选择器最后还要做一个「用户名不能为空」的红色提示这意味着你要在 HTML 里预留一个 span在 JS 里写判断、切 class、控制显示隐藏。这一整套下来代码量不算离谱但对新手最难受的地方在于「看不见进度条」。你花了两个小时页面上只是从一个丑输入框变成了一个稍微好看点的输入框很难获得正反馈。而用 EasyUI 做同一件事一个带边框、带提示文字、带必填星号、聚焦有高亮效果的输入框只要一行带 class 的 input 标签剩下的交给组件自己渲染。这种「一行代码换一个完整零件」的落差是新手能不能坚持下去的关键。我第一次带人做页面的时候让 A 同学先手写一版登录框他写完以后说了句「原来做个框这么费劲」。第二天换成组件库他半小时就把整页拼出来了那天他是真的愿意继续学下去。2.2 组件化到底是什么意思一个 div 就是一个零件「组件化」这个词被讲得太玄了入门阶段可以粗暴地理解成一句话你在 HTML 里写一个约定好的标记脚本会自动把它变成一个功能完整的控件。比如你写input classeasyui-textbox stylewidth:200px浏览器打开的瞬间这段普通的 input 会被 EasyUI 的脚本接管外面包一层 div加上边框、圆角、内边距聚焦时边框变色还顺带支持了清空按钮、禁用状态、只读状态这些你根本没写过的能力。再往上抽象一层EasyUI 里的「面板」也是这样。你写一个div给它加上easyui-panel这个 class再配一个title参数它就会渲染成带标题栏、带边框、可以折叠可以关闭的卡片。你写的不是样式你写的是「我要一个什么样的零件」样式的事由主题文件统一负责。这个思路一旦建立起来后面学表格、学弹窗、学树形菜单都是同一套逻辑只是换个 class 名、换几个参数。这里有个新手常犯的误解以为 class 是随便起的样式名。在组件库体系里easyui-textbox这种 class 是有特殊含义的开关写错一个字母脚本就不认页面就退化成原始 input。所以后面写代码时class 名建议直接复制不要手打。2.3 一个登录页能带出后台页面的通用套路登录页看着简单但它把后台系统里最常出现的几件事全占了一个居中的容器、一个带标题的面板、一组带标签的输入控件、一次必填校验、一次提交与跳转。你把这一页吃透后面做「新增用户」的弹窗无非是把面板换成对话框、把两个输入框换成五个做「用户列表」是把面板里塞进一个表格组件做「编辑资料」是把提交地址换个路径。套路是同一套变的只是零件组合方式。所以入门阶段不要贪多不要一上来就研究源码怎么实现、事件怎么冒泡。先用组件把页面拼出来、拼得像那么回事建立手感剩下的理解会随着你改参数、改样式自然长出来。这也是我建议新手从登录页起步而不是从表格起步的原因——登录页的元素少出错时能一眼定位到是哪个零件的问题。3. 动手前先把场地铺好目录结构与第一个能跑的页面3.1 解压之后先看目录别急着改文件资源包解压出来你大概会看到这么一组东西名字可能略有差异但结构基本一致login-demo/ ├── index.html 页面入口 ├── jquery.min.js jQuery 核心库必须先加载 ├── jquery.easyui.min.js EasyUI 的组件脚本 ├── themes/ │ ├── default/ │ │ ├── easyui.css 主样式决定控件长什么样 │ │ └── images/ 图标、箭头等小图 │ └── icon.css 图标字体样式 └── demo/ 示例页面看目录的时候重点关注两件事样式和脚本是不是分开放的以及themes 文件夹有没有被完整复制。很多人只复制了 easyui.css把旁边的 images 漏了结果页面能显示但下拉箭头、日历图标全是空白方块然后开始怀疑人生。我自己的习惯是解压后先把整个文件夹复制一份作为「干净备份」所有改动都在副本上做。前端这东西改崩了很难回滚有个原始版本在出问题直接对拷比一点点删代码快得多。这就是我说的后悔药新手尤其要备一颗。3.2 引入文件的顺序是这个库最硬的一条规矩一个能跑起来的最小页面长这样!DOCTYPE html html head meta charsetutf-8 title登录/title !-- 1. 先引入样式两个都要缺一个图标就会丢 -- link relstylesheet hrefthemes/default/easyui.css link relstylesheet hrefthemes/icon.css !-- 2. 再引入脚本jQuery 必须在 EasyUI 前面 -- script srcjquery.min.js/script script srcjquery.easyui.min.js/script /head body !-- 3. 页面内容写在这里 -- /body /html这段代码里唯一需要死记的规则是jQuery 一定在 EasyUI 之前加载。原因是 EasyUI 的脚本一执行就要去用 jQuery 提供的那个全局对象如果 jQuery 还没到脚本第一行就报错了后面的组件注册全部不会发生你看到的页面就会是「有样式但控件都不工作」的样子。按照上面四行引入顺序写基本不会出问题。参数和路径说明一下hrefthemes/default/easyui.css里的default是主题名想换配色就换这个文件夹名但前提是 themes 下确实有那个主题。srcjquery.min.js用的是相对路径意思是和 index.html 同目录。如果你的文件放在js/子目录里这里就要写成js/jquery.min.js路径错了浏览器控制台会报 404页面直接废掉。charsetutf-8这行别省中文乱码十有八九是它的问题或者文件本身存的不是 utf-8 编码。3.3 第一个验证让它先显示一个能打字的框不要一上来就写完整登录页。先用最小的代码验证「组件库确实在工作」这件事body stylepadding:40px input classeasyui-textbox stylewidth:240px prompt随便打几个字试试 /body保存双击 index.html 用浏览器打开。判断成功的标准很简单输入框比普通 input 更宽、有内边距、鼠标点进去边框颜色会变、里面有一行灰色的提示文字。如果四条都满足说明引入没问题可以往下走了。如果看到的是一个又细又长的原始输入框别改业务代码回去查三件事class 是不是打成了easyui-textBox大小写敏感、jquery.easyui.min.js路径对不对、jQuery 是不是放在它前面。提示这个阶段用双击打开本地文件完全够用。等你后面要发请求给后台再考虑起一个本地静态服务因为直接以文件方式打开的页面在发请求时容易被浏览器拦下来。4. 第一版登录界面从空白页到能输入的用户名密码框4.1 先把卡片摆到屏幕中间登录页的视觉核心是「一个居中的小卡片」。用 flex 是最省事的写法/* 放在 head 里的 style 标签中 */ html, body { height: 100%; /* 关键不写这行垂直居中一定失效 */ margin: 0; } body { display: flex; /* 开启弹性布局 */ align-items: center; /* 交叉轴上居中 垂直居中 */ justify-content: center;/* 主轴居中 水平居中 */ background: #eef2f7; /* 浅灰蓝背景让白卡片浮起来 */ }这段样式里html, body { height: 100% }是新手最容易漏的一行。flex 的居中是以父容器有明确高度为前提的body 默认高度由内容撑开内容只有一个卡片那么高居中就等于没居中看起来贴在顶部。补上高度之后align-items才有意义。background那行是纯视觉考虑。白色卡片放在纯白背景上会看不出边界加一层浅色底卡片的轮廓自然就出来了后面调边框、调阴影时也更容易判断效果。4.2 面板加表单把卡片的骨架搭出来骨架部分用「面板」这个组件最合适它自带标题栏和边框div classeasyui-panel title系统登录 stylewidth:360px;padding:28px 32px; form idloginForm methodpost !-- 输入控件放在这里下一步填 -- /form /diveasyui-panel这一行做了三件事把 div 渲染成一个带边框的卡片、把title的值渲染成顶部标题栏、把padding应用在内容区而标题栏不受影响。width:360px是卡片宽度改成 420 会明显变宽但别超过 500登录框太宽反而不像登录框。里面套一个form是必要的不是为了好看而是因为后面要用它做两件事一是校验二是提交。表单是 EasyUI 里提交和校验的载体你把输入框散着放后面想用form(validate)就会找不到对象。idloginForm这个名字随便起但要记住后面的脚本全靠它定位。4.3 三个核心控件用户名、密码、按钮把控件填进表单这一版就能看了div stylemargin-bottom:18px input classeasyui-textbox nameusername label用户名: prompt请输入用户名 >function doLogin() { // 取出两个输入框当前的值 var username $(#loginForm input[nameusername]).val(); var password $(#loginForm input[namepassword]).val(); // 先用弹窗确认能拿到值这一步只是自测 $.messager.alert(提示, 你输入的用户名是 username 密码长度 password.length); }$.messager.alert是组件库自带的弹窗比浏览器原生的 alert 好看也不会阻塞后续操作。这段代码的重点不是弹窗而是$(#loginForm input[nameusername]).val()这一句。它说明两件事EasyUI 的组件最终仍然是 DOM 元素可以用 jQuery 选择器取到[name...]这种属性选择器比依赖 id 更稳因为你不可能给每个输入框都起一个独一无二的 id。如果点按钮没反应先看浏览器控制台有没有红色报错。最常见的是doLogin is not defined意思是函数没定义成功多半是script写在了函数定义之前或者被别的报错打断了。控制台是排错的第一现场养成按 F12 的习惯比到处猜快十倍。5. 踩坑现场新手做这个登录页最容易翻车的五个点5.1 页面白得像没加载样式现象打开页面输入框是浏览器最原始的样子没有任何边框、圆角、内边距像极了没联网的网页。原因九成是路径问题。要么 css 文件的路径写错了要么 themes 文件夹整体没复制过来只复制了一个 css 文件导致里面的url(images/...)全部 404。浏览器不会因为样式加载失败就把页面变成白屏它会安静地用默认样式兜底所以看起来「页面能开就是丑」。解决按 F12 打开开发者工具切到 Network 面板刷新一次看有没有红色的 404 记录路径一目了然。确认无误的话检查 themes 目录结构是否完整特别是themes/default/images/这个文件夹在不在。不要试图手写样式去「补」这个缺失治标不治本。5.2 输入框变成了又细又长的原始样子现象样式文件明明加载成功了按钮也好看唯独输入框没被渲染成组件的模样。原因class 名拼错或者jquery.easyui.min.js没有被正确加载。前者最常见easyui-textbox写成easyui-textBox、easyui_textbox、easyui-text-box都不会报错只是静默失效。后者的话通常伴随按钮也没图标。解决先看控制台有没有$ is not defined或jQuery is not defined有就是脚本没加载回去查路径和引入顺序。没有报错就比对 class 名一个字母一个字母对。不要凭记忆手打从示例文件里复制最保险。5.3 点登录按钮页面刷新一下就没了现象点按钮页面闪一下输入的内容清空像什么都没发生。原因按钮写成了button或者input typesubmit而它在 form 内部浏览器默认行为就是提交表单并刷新页面。组件库的按钮如果用a标签写就不会触发这个问题但换成button就中招。解决最简单的办法是把按钮换成a hrefjavascript:void(0)的写法javascript:void(0)的意思是「点了别跳转」。如果确实要用 button就在函数末尾加一行return false;或者event.preventDefault()明确阻止默认提交。5.4 中文全变成了问号或者方块现象页面里所有中文标签、提示文字、弹窗内容都显示成乱码。原因两个地方可能出问题。一是 HTML 里没写meta charsetutf-8浏览器按默认编码解析二是文件本身保存的编码不是 utf-8常见于从别处复制代码后直接保存的情况。解决先确认 meta 标签在 head 最前面几行并且是 utf-8。再确认编辑器右下角的文件编码显示为 UTF-8不是 GBK 或者 ANSI。两边都对齐了乱码必消。这个坑不分新手老手改完记得刷新前清一次缓存。5.5 卡片死活不居中总贴着页面顶部现象flex 三行代码全写了卡片还是顶在最上面。原因html, body { height: 100% }漏了或者被别的地方覆盖。body 没有高度flex 的垂直居中就失去了参照系align-items: center相当于对着一个和内容一样高的容器做居中看起来就是没动。解决打开开发者工具选中 body看它的高度是不是等于窗口高度。如果只有一百多像素就是高度没撑开。补上 height 100% 即可。如果页面里还有外层容器那个容器也要有高度问题会一层层往上追。6. 界面能跑之后校验、提交和下一步该学什么6.1 让空用户名交不出去一行参数就够前面写>function doLogin() { // validate() 会检查表单里所有带 required 等规则的控件 // 全部通过返回 true有一条不通过返回 false if (!$(#loginForm).form(validate)) { return; // 校验没过直接中断不往下走 } var username $(#loginForm input[nameusername]).val(); var password $(#loginForm input[namepassword]).val(); $.messager.alert(提示, 校验通过可以提交了 username); }form(validate)这个写法是「在表单对象上调用 validate 方法」前面的!取反意思是「校验没通过就退出」。这是组件库的标准调用风格组件名加方法名放在括号里后面学表格的datagrid(reload)、对话框的dialog(open)都是同一个套路。要加更多规则在>$(#loginForm).form(submit, { url: login, // 后台接口地址没有就随便填一个 onSubmit: function () { return $(this).form(validate); // 提交前先校验返回 false 会中断 }, success: function (data) { // 这里拿到的是后台返回的内容通常是 JSON 字符串 $.messager.alert(结果, 服务端返回 data); } });三个回调的分工要记清onSubmit在发请求之前执行返回 false 就取消提交校验放这里success在请求成功返回后执行处理结果放这里中间还有error网络挂了才会走。这个「提交前 / 成功后 / 出错时」的三段式是所有前端交互的通用骨架不只是登录。如果没有后台这行代码会报请求失败那很正常属于预期内的翻车。此时你可以只保留onSubmit里的校验把提交动作换成弹窗提示先把前端这半边跑通等有接口了再补 url。6.3 从这一页往后走一条能自学的顺序登录页做完接下来按这个顺序往下推每一步都在复用你已经会的东西顺序要学的东西复用到的已有知识1表格组件做用户列表面板、布局、数据获取2对话框组件做新增用户弹窗表单、校验、提交3布局容器做左边菜单右边内容面板、flex 思路4树形菜单做左侧导航组件参数、事件绑定5主题替换统一配色css 引入、文件夹结构我建议的顺序是这样的先把表格啃下来。它是后台系统出现频率最高的控件而且和登录页共享同一套「组件 数据 事件」的心智模型学完表格你会明显感觉到自己从「会拼页面」跨到了「会做功能」。再往后是对话框本质上是把登录页的表单塞进一个弹层里校验和提交的写法完全一样。等你把表格和对话框都过一遍回头看登录页会觉得它简单得不像话这时候再去研究组件源码、去看事件是怎么绑的、去看主题文件怎么改配色才会有真正的收获。最后说一个我自己踩过的坑。我刚开始学的时候特别喜欢「先把所有组件文档通读一遍再动手」结果读完啥也没记住因为每个组件看起来都差不多没有场景就记不住。后来我改成「要用哪个查哪个用完立刻改两遍参数」效率反而高得多。从那以后我每次学新组件都强制走一遍「抄示例 → 改参数 → 故意改崩 → 修回来」这个循环改崩那一步最值钱因为排错的过程才是真的在学。希望这份入门路径能帮到你别怕改崩先把第一个框跑起来。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
