EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,提供了创建网页所需的一切,帮助您轻松建立站点。
jQuery EasyUI 下载:
您可以从 Download EasyUI Package - jQuery,Angular,React,Vue 上下载您需要的 jQuery EasyUI 版本。
2.1:导入库及相关文件:
文件:jquery-easyui-1.5.5.2
库:jquery-3.3.1.min.js
把以上文件库复制粘贴到项目里面的static文件的js文件里
2.2:在页面里引入相关文件:
可把引入的相关文件写入到一个公共的jsp页面里面,避免重复写;可在static文件夹里面创建一个common(共同)文件夹,把引入文件的相关代码写入common文件夹里面的head.jsp页面里面。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- base标签的href属性里面的内容会自动添加到 在head标签里面的引入的路径前面 -->
<base href="${pageContext.request.contextPath }/static/" />
<!-- jquery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- 引入EasyUI相关文件 -->
<!-- 图标库 -->
<link rel="js/jquery-easyui-1.5.5.2/themes/icon.css">
<!-- 样式文件 -->
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css">
<!-- js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
因此我们只需要在index.jsp页面里通过include指令引入head.jsp即可。
<!-- 通过incloud指令引入公共部分页面head.jsp -->
<%@ include file="static/common/head.jsp"%>
文件目录结构:
3.1:添加布局(Layout)
给页面添加一个布局,可在jQuery EasyUI 1.5API 中文版.exe文档里面“Layout(布局)”下的“Layout(布局)”复制一个到页面里面。
<body class="easyui-layout">
<div data-options="region:'north',title:'网上书城',split:true" style="height:200px;"></div>
<div data-options="region:'south',title:'版权©/链接',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'菜单管理 ',split:true" style="width:200px;"></div>
<div data-options="region:'center',title:'内容区域'" style="padding:5px;background:#eee;"></div>
</body>
3.2:添加手风琴(accordion)
在布局的菜单管理里添加一个手风琴来实现展示菜单效果
<!-- 手风琴:selected:true(默认展开) -->
<div id="aa" class="easyui-accordion" style="width: 300px; height: 200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It letsyou define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload'" style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
3.3:添加选项卡(tabs)
在布局的内容区域里面添加一个选项卡
<!-- 选项卡 -->
<div id="tt" class="easyui-tabs" style="width:100%;height:100%;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
用户在前端输入的密码保存到如果直接保存到数据库里面实则很不安全,容易密码泄露,因此我们需要MD5来加密,加密过后再保存到我们的数据库里面。
需用到的工具类:MD5.java
把MD5.java工具类复制粘贴到util包里面
在Test.jsp页面测试
package com.zking.test;
import com.zking.util.MD5;
public class Test {
public static void main(String[] args) {
String pwd = "123";
// 调用注册方法
// ud.register("admin","123");
// 先把pwd加密(也可2次加密,2次加密后的32位字符串不一样)
String str = new MD5().getMD5ofStr(pwd);
System.out.println(str);
// 202CB962AC59075B964B07152D234B70
// 如果直接拿密码和加密后的字符串对比肯定为false
System.out.println("123".equals("202CB962AC59075B964B07152D234B70"));
/**
* 密文密码:加密过后的 明文密码:没有加密的 登录的时候获取用户 输入的密码,然后通过MD5加密过后,和数据库里面的密文密码进行对比
* 把从前端获取的密码加密过后再和数据库里加密过后的密码比较,同一个字符串通过MD5加密过后产生的字符串是一样的
*/
System.out.println(new MD5().getMD5ofStr("123").equals("202CB962AC59075B964B07152D234B70"));
}
}
5.1:MySql简单使用
启动MySql服务:右击菜单栏——任务管理器——服务——找到“MySQL”右击开始即可
连接工具(Navicat Premium):仅连接工具而已,与数据库毫无关系,基本上可连接任何数据库,用它访问我们电脑上安装的数据库
MySQL端口号:3306
1> 使用连接工具连接MySQL步骤:
a.打开(Navicat Premium/Navicat for MySQL)
b.点击左上角“连接”后选择你要连接的数据库,这里我们选择"MySQL"
c.在“常规”选项卡下输入“连接名(随意取,推荐英文)”——添加到:随意取,相当于文件夹,里面还可继续创建,该处直接点“确定”即可——输入增加的连接密码——直接点“测试连接”
d.点击“确定”,如若没有弹出连接成功,可能是账号密码错误或MySQL服务未启动,确定后再点击“常规”选项卡下的确定即可
2> 在(Navicat Premium/Navicat for MySQL)下创建新数据库
>3 在(Navicat Premium/Navicat for MySQL)下创建新表,创建好后Ctrl+S保存该表(取一个表名)即可
4> 点击新建查询即可写代码
5> 切换连接及表
5.2:MySQL分页语法
MySQL注释:#
#每页展示5条数据
#第一页(从第0条开始,不包括第0条)
select * from 表 limit 0,5;
#第二页(从di5条开始,不包括第5条)
select * from 表 limit 5,10;
#页大小:int pageSize =5;
#当前页码:int start = (当前页码-1)*页大小;
#每页的开始条数:页大小和当前页码
子节点的pid就是父节点的id
父节点的id就是子节点的pid
PostMan即用来做接口测试的,写完一个接口可以测试下,会把每次测试的结果保存下来。