EasyUI——后台管理系统manager.jsp（自动获取后台写上来的数据，并塞进页面的指定位置，模块化编程，MVC）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43918130/article/details/103266675

文章目录

最终的图

在这里插入图片描述

数据库创建一个表

在这里插入图片描述
根据上面的表，我们可以写一个简单的easyUI的界面，下面是EasyUI界面的简单的实现

前台代码的实现

首先，我引入了这些，为我下面的页面的搭建做准备

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>

看我搭建的页面，代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<title>管理员管理</title>
</head>
<body style="margin: 5px;">
	<table id="dg" title="管理员信息管理" class="easyui-datagrid" fitColumns="true" pagination="true"
	pagination="true" rownumbers="true" fit="true" url="managerList">
		<thead>
			<tr>
				<th field="cb" checkbox="true"></th>
				<th field="id" width="8%">编号</th>
				<th field="userName" width="20%">管理员姓名</th>
				<th field="password" width="72%">管理员密码</th>
			</tr>
		</thead>											
	</table>
</body>
</html>

效果图

在这里插入图片描述
值得注意的是，我们的数据库中的表明要和前端界面的id名一致，下面的所有有关这三个元素的都这样命名，就不多累赘的讲了，一定一定要注意一致性，养出好习惯

后台搭建model层的user实体

看图

在这里插入图片描述

代码如下

package model;

/**
 * 用户实体，主要是用于登录的用户实体
 * 为后台管理员登录用的
 * @author 我是一个点
 *
 */
public class User {
   
	
	private int id; // 编号
	private String userName; // 用户名
	private String password; // 密码
	
	
	
	public User() {
   //生成构造方法
		super();//继承父类的
	}
	
	
	public User(String userName, String password) {
   
		this.userName = userName;
		this.password = password;
	}


	public int getId() {
   
		return id;
	}
	public void setId(int id) {
   
		this.id = id;
	}
	public String getUserName() {
   
		<