一、IDEA具体代码的排版布局
注意！！！
https://gitee.com/ele-admin/EasyCaptcha
这里面其中的代码要从以上链接里去找到 以及如何更改多样式的验证码。
二、具体的代码内容（从框架自上而下的代码内容）从Book开始
package cn.lvb.bean;
public class Book {
private String id;
private String name;
private String author;
private float price;
private String description;
public Book() {
}
public Book(String id, String name, String author, float price, String description) {
this.id = id;
this.name = name;
this.author = author;
this.price = price;
this.description = description;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public float getPrice() {
return price;
}
public void setPrice(float price) {
this.price = price;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}
StuClass：
package cn.lvb.bean;
public class StuClass {
private String clsId;
private String clsName;
public StuClass(String clsId, String clsName) {
this.clsId = clsId;
this.clsName = clsName;
}
public StuClass() {
}
public String getClsId() {
return clsId;
}
public void setClsId(String clsId) {
this.clsId = clsId;
}
public String getClsName() {
return clsName;
}
public void setClsName(String clsName) {
this.clsName = clsName;
}
}
Student：
package cn.lvb.bean;
public class Student {
private String no;
private String name;
private Integer gender;
private String birthday;
private String clsId;
private String photoURL;
public String getPhotoURL() {
return photoURL;
}
public void setPhotoURL(String photoURL) {
this.photoURL = photoURL;
}
private StuClass stuClass;
public StuClass getStuClass() {
return stuClass;
}
public void setStuClass(StuClass stuClass) {
this.stuClass = stuClass;
}
public Student() {
}
public Student(String no, String name, Integer gender, String birthday, String clsId) {
this.no = no;
this.name = name;
this.gender = gender;
this.birthday = birthday;
this.clsId = clsId;
}
public String getNo() {
return no;
}
public void setNo(String no) {
this.no = no;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getClsId() {
return clsId;
}
public void setClsId(String clsId) {
this.clsId = clsId;
}
}
/stu/Add
package cn.lvb.controller.stu;
import cn.lvb.bean.StuClass;
import cn.lvb.bean.Student;
import cn.lvb.dao.StuClsDAO;
import cn.lvb.dao.StudentDAO;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/stu/Add")
public class Add extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<StuClass> clsList = StuClsDAO.getAllList();
request.setAttribute("clsList",clsList);
request.getRequestDispatcher("/WEB-INF/jsp/stu/add.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//doGet(request, response);
response.setContentType("application/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String no = request.getParameter("no");
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String birthday = request.getParameter("birthday");
String clsId = request.getParameter("clsId");
String photoURL = request.getParameter("photoURL");
Student studentTemp = StudentDAO.getOne(no);
if(studentTemp!=null)
{
String ret = "{\"code\":-1,\"msg\":\"学号已存在\"}";
out.write(ret);
return;
}
else
{
Student student =
new Student(no,name, Integer.parseInt(gender),birthday,clsId);
student.setPhotoURL(photoURL);
StudentDAO.add(student);
String ret = "{\"code\":1,\"msg\":\"成功\"}";
out.write(ret);
return;
}
}
}/stu/Delete
package cn.lvb.controller.stu;
import cn.lvb.dao.StudentDAO;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/stu/Delete")
public class Delete extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String no = request.getParameter("no");
StudentDAO.delete(no);
String ret = "{\"code\":1,\"msg\":\"成功\"}";
out.write(ret);
return;
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}/stu/Edit
package cn.lvb.controller.stu;
import cn.lvb.bean.Student;
import cn.lvb.dao.StudentDAO;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/stu/Edit")
public class Edit extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String no = request.getParameter("no");
Student student = StudentDAO.getOne(no);
request.setAttribute("student",student);
request.getRequestDispatcher("/WEB-INF/jsp/stu/edit.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String no = request.getParameter("no");
String name = request.getParameter("name");
String gender = request.getParameter("gender");
String birthday = request.getParameter("birthday");
String clsId = request.getParameter("clsId");
Student student =
new Student(no,name, Integer.parseInt(gender),birthday,clsId);
StudentDAO.edit(student);
String ret = "{\"code\":1,\"msg\":\"成功\"}";
out.write(ret);
return;
}
} 
不动
/Captcha2：
package cn.lvb.controller;
import com.wf.captcha.*;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
@WebServlet("/Captcha2")
public class Captcha2 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// SpecCaptcha captcha = new SpecCaptcha(130, 48);
// captcha.text(); // 获取验证码的字符
// captcha.textChar(); // 获取验证码的字符数组
// gif类型
// GifCaptcha captcha = new GifCaptcha(130, 48);
// 中文类型
// ChineseCaptcha captcha = new ChineseCaptcha(130, 48);
// 中文gif类型
ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);
// 算术类型
//ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
//captcha.setLen(3); // 几位数运算，默认是两位
// captcha.getArithmeticString(); // 获取运算的公式：3+2=?
// captcha.text(); // 获取运算的结果：5
captcha.out(response.getOutputStream()); // 输出验证码
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}/DoLogin
package cn.lvb.controller;
import com.wf.captcha.utils.CaptchaUtil;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/DoLogin")
public class DoLogin extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
String password = request.getParameter("password");
String verifyCode = request.getParameter("verifyCode");
HttpSession session = request.getSession();
if (!CaptchaUtil.ver(verifyCode, request)) {
CaptchaUtil.clear(request); // 清除session中的验证码
String ret = "{\"code\":-1,\"msg\":\"验证码错误\"}";
out.write(ret);
return;
}
// String code =(String) session.getAttribute("code");
// session.removeAttribute("code");
// if(!verifyCode.equals(code))
// {
// String ret = "{\"code\":-1,\"msg\":\"验证码错误\"}";
// out.write(ret);
// return;
// }
if(username.equals("tom") && password.equals("123456"))
{
session.setAttribute("user",username);
String ret = "{\"code\":1,\"msg\":\"登录成功\"}";
out.write(ret);
return;
}
else
{
String ret = "{\"code\":-1,\"msg\":\"用户名密码错误\"}";
out.write(ret);
return;
}
//username:username, password:password, verifyCode
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}/GetStuListJson
package cn.lvb.controller;
import cn.lvb.bean.Student;
import cn.lvb.dao.StudentDAO;
import org.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.stream.Collectors;
@WebServlet("/GetStuListJson")
public class GetStuListJson extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/json;charset=UTF-8");
request.setCharacterEncoding("utf-8");
String search = request.getParameter("search");
PrintWriter out = response.getWriter();
List<Student> list = StudentDAO.getAllList();
if(search!=null && search!="")
{
list = list.stream()
.filter(student -> student.getName().toLowerCase().contains(search.toLowerCase()))
.collect(Collectors.toList());
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("rows", list);
jsonObject.put("total", list.size());
String jsonstr =jsonObject.toString();
out.write(jsonstr);
return;
//
// Gson gson = new Gson();
//
// String json = gson.toJson(list);
// System.out.println(json);
// out.write(json);
// Gson gson = new GsonBuilder()
// .setDateFormat("yyyy-MM-dd") // 自定义日期格式
// .create();
//
构建包含数据的Map
// Map<String, Object> response = new HashMap<>();
// response.put("rows", StudentDAO.getAllList());
// response.put("total", StudentDAO.getAllList().size());
//
序列化为JSON字符串
// String jsonstr = gson.toJson(response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
/Index
package cn.lvb.controller;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
@WebServlet("/Index")
public class Index extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session = request.getSession();
String user = (String)session.getAttribute("user");
if(user==null)
{
response.sendRedirect("login.html");
return;
}
request.getRequestDispatcher("/WEB-INF/jsp/index.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
/StuList1
package cn.lvb.controller;
import cn.lvb.bean.Student;
import cn.lvb.dao.StudentDAO;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.io.IOException;
import java.util.List;
@WebServlet("/StuList1")
public class StuList1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Student> list = StudentDAO.getAllList();
request.setAttribute("list", list);
request.getRequestDispatcher("/WEB-INF/jsp/stu_list.jsp").forward(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}/upload
package cn.lvb.controller;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.Files;
import java.nio.file.StandardCopyOption;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
@WebServlet("/upload")
@MultipartConfig
public class UploadServlet extends HttpServlet {
private static final String UPLOAD_DIR = "uploads"; // 图片保存目录
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取上传的文件
Part filePart = request.getPart("file");
String fileName = extractFileName(filePart);
// 保存文件到服务器
String applicationPath = getServletContext().getRealPath("");
String uploadFilePath = applicationPath + File.separator + UPLOAD_DIR;
File uploadDir = new File(uploadFilePath);
if (!uploadDir.exists()) {
uploadDir.mkdirs();
}
try (InputStream fileContent = filePart.getInputStream()) {
Files.copy(fileContent, new File(uploadDir, fileName).toPath(), StandardCopyOption.REPLACE_EXISTING);
}
// 构造图片的访问URL
String fileUrl = request.getContextPath() + "/" + UPLOAD_DIR + "/" + fileName;
// 返回图片URL给前端
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write("{\"imageUrl\": \"" + fileUrl + "\"}");
}
// 提取文件名
private String extractFileName(Part part) {
// 获取原始文件名
String contentDisp = part.getHeader("content-disposition");
String[] items = contentDisp.split(";");
String originalFileName = "";
for (String s : items) {
if (s.trim().startsWith("filename")) {
originalFileName = s.substring(s.indexOf("=") + 2, s.length() - 1);
break;
}
}
// 如果没有文件名，直接返回空字符串
if (originalFileName.isEmpty()) {
return "";
}
// 提取文件扩展名
String fileExtension = "";
int lastDotIndex = originalFileName.lastIndexOf(".");
if (lastDotIndex > 0) {
fileExtension = originalFileName.substring(lastDotIndex); // 包含 "."
}
// 使用时间戳生成唯一文件名
long timestamp = System.currentTimeMillis();
String uniqueFileName = "img_" + timestamp + fileExtension;
return uniqueFileName;
}
}/VerifyCode
package cn.lvb.controller;
import javax.imageio.ImageIO;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/VerifyCode")
public class VerifyCode extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//通知浏览器不要缓存
response.setHeader("Expires", "-1");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");
int width = 120;
int height = 25;
//创建一副内存图像：BufferedImage
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//得到属于该图片的画笔：Graphics
Graphics g = image.getGraphics();
//画边框
g.setColor(Color.BLUE);
g.drawRect(0, 0, width, height);
//填充背景色
g.setColor(Color.YELLOW);
g.fillRect(1, 1, width-2, height-2);
//画干扰线
g.setColor(Color.GRAY);
Random r = new Random();
for(int i=0;i<10;i++)
g.drawLine(r.nextInt(width), r.nextInt(height), r.nextInt(width), r.nextInt(height));
//随机数字
g.setColor(Color.RED);
g.setFont(new Font("宋体", Font.BOLD|Font.ITALIC, 20));
int x = 23;
String code = "";
for(int i=0;i<4;i++){
int a = r.nextInt(10);
code+=a+"";
g.drawString(a+"", x, 20);
x+=20;
}
request.getSession().setAttribute("code",code);
//输出到浏览器的页面上:ImageIO
ImageIO.write(image, "jpg", response.getOutputStream());
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}StuClsDAO
package cn.lvb.dao;
import cn.lvb.bean.StuClass;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
public class StuClsDAO {
private static Map<String, StuClass> map = new LinkedHashMap<>();
static {
map.put("1",new StuClass("1","1班"));
map.put("2",new StuClass("2","2班"));
map.put("3",new StuClass("3","3班"));
map.put("4",new StuClass("4","4班"));
map.put("5",new StuClass("5","5班"));
}
public static Map<String, StuClass> getAllMap()
{
return map;
}
public static List<StuClass> getAllList()
{
List<StuClass> list = new ArrayList<>();
for (Map.Entry<String, StuClass> me : map.entrySet()) {
list.add(me.getValue());
}
return list;
}
public static StuClass getOne(String no)
{
return map.get(no);
}
public static void add(StuClass StuClass)
{
map.put(StuClass.getClsId(), StuClass);
return;
}
public static void edit(StuClass StuClass)
{
map.remove(StuClass.getClsId());
map.put(StuClass.getClsId(), StuClass);
return;
}
public static void delete(String no)
{
map.remove(no);
return;
}
}
StudentDAO
package cn.lvb.dao;
import cn.lvb.bean.StuClass;
import cn.lvb.bean.Student;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
public class StudentDAO {
private static Map<String, Student> map = new LinkedHashMap<>();
static {
map.put("111",new Student("111","张三",1,"2018-01-01","1"));
map.put("222",new Student("222","张1",1,"2018-01-01","2"));
map.put("333",new Student("333","张2",1,"2018-01-01","2"));
map.put("444",new Student("444","张3",2,"2018-01-01","3"));
map.put("555",new Student("555","张4",1,"2018-01-01","5"));
}
public static Map<String, Student> getAllMap()
{
return map;
}
public static List<Student> getAllList()
{
List<Student> list = new ArrayList<>();
for (Map.Entry<String, Student> me : map.entrySet()) {
Student stu = me.getValue();
StuClass stuClass = StuClsDAO.getOne(stu.getClsId());
stu.setStuClass(stuClass);
list.add(stu);
}
return list;
}
public static Student getOne(String no)
{
return map.get(no);
}
public static void add(Student student)
{
map.put(student.getNo(), student);
return;
}
public static void edit(Student student)
{
map.remove(student.getNo());
map.put(student.getNo(), student);
return;
}
public static void delete(String no)
{
map.remove(no);
return;
}
}
add.jsp
<%--
Created by IntelliJ IDEA.
User: lvb
Date: 2025/3/24
Time: 10:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>新增文档 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/materialdesignicons.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery-tags-input/jquery.tagsinput.min.css">
<link href="${pageContext.request.contextPath}/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
</head>
<body>
<div class="container-fluid p-t-15">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<form class="row">
<div class="form-group col-md-12">
<label for="no">学号</label>
<input type="text" class="form-control" id="no" name="no" value="" placeholder="请输入标题" />
</div>
<div class="form-group col-md-12">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" name="name" value="" placeholder="关键词" />
</div>
<div class="form-group col-md-12">
<label>性别</label>
<div class="clearfix">
<label class="lyear-radio radio-inline radio-primary">
<input type="radio" name="gender" value="1"><span>男</span>
</label>
<label class="lyear-radio radio-inline radio-primary">
<input type="radio" name="gender" value="2" checked><span>女</span>
</label>
</div>
</div>
<div class="form-group col-md-12">
<label for="birthday">生日</label>
<input class="form-control js-datepicker m-b-10" type="text"
id="birthday"
name="birthday"
placeholder="yyyy-mm-dd" value="" data-date-format="yyyy-mm-dd" />
</div>
<div class="form-group col-md-12">
<label for="clsId">班级</label>
<select name="clsId" class="form-control" id="clsId">
<c:forEach items="${clsList}" var="cls">
<option value="${cls.clsId}">${cls.clsName}</option>
</c:forEach>
</select>
</div>
<div class="form-group col-md-12">
<label>照片</label>
<div class="form-controls">
<ul class="list-inline clearfix lyear-uploads-pic">
<li class="col-xs-4 col-sm-3 col-md-2">
<figure>
<img id="imgPhoto" src="../images/touxinag.png" alt="图片一">
<figcaption>
<a class="btn btn-round btn-square btn-danger" href="#!"><i class="mdi mdi-delete"></i></a>
</figcaption>
</figure>
</li>
<li class="col-xs-4 col-sm-3 col-md-2">
<a class="pic-add" id="add-pic-btn" href="#!" title="点击上传"></a>
</li>
</ul>
<input type="file" id="fileInput" style="display: none;" accept="image/*">
<input type="hidden" id="photoURL" name="photoURL">
</div>
</div>
<div class="form-group col-md-12">
<button type="button" onclick="save()" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
<button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!--标签插件-->
<script src="${pageContext.request.contextPath}/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="${pageContext.request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
function save() {
var no = $('#no').val();
var name = $('#name').val();
var birthday = $('#birthday').val();
var clsId = $('#clsId').val();
var gender = $('input[name="gender"]:checked').val();
var photoURL = $('#photoURL').val();
if(!gender)
{
alert("请选择性别")
return;
}
$.ajax({
url:"Add",
type: "post",
data:{
no:no, name:name, gender:gender,birthday:birthday,clsId:clsId,photoURL:photoURL
},
dataType: "json",
success:function(res){
if(res.code==-1)
{
alert(res.msg);
}
else if(res.code==1)
{
alert("ok");
window.location.href = '../StuList1';
}
},
error:function (error)
{
console.log(error);
alert("failure");
}
});
}
$(document).ready(function () {
// 点击上传按钮时，触发文件选择
$('#add-pic-btn').on('click', function (e) {
e.preventDefault();
$('#fileInput').click(); // 触发隐藏的文件选择框
});
// 当文件被选择时，上传文件
$('#fileInput').on('change', function () {
const file = this.files[0];
if (file) {
uploadImage(file);
}
});
// 上传图片到服务器
function uploadImage(file) {
const formData = new FormData();
formData.append('file', file);
$.ajax({
url: '../upload', // 后端接收文件的Servlet路径
type: 'POST',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success: function (response) {
// 假设后端返回的是图片的URL
const imageUrl = response.imageUrl;
$('#imgPhoto').attr('src', imageUrl); // 更新图片显示
$('#photoURL').val(imageUrl);
},
error: function (xhr, status, error) {
alert('图片上传失败，请重试！');
}
});
}
});
</script>
</body>
</html>edit.jsp
<%--
Created by IntelliJ IDEA.
User: lvb
Date: 2025/3/24
Time: 10:16
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>新增文档 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/materialdesignicons.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery-tags-input/jquery.tagsinput.min.css">
<link href="${pageContext.request.contextPath}/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
</head>
<body>
<div class="container-fluid p-t-15">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<form class="row">
<div class="form-group col-md-12">
<label for="no">学号</label>
<input disabled type="text" class="form-control" id="no" name="no" value="${student.no}" placeholder="请输入标题" />
</div>
<div class="form-group col-md-12">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" name="name"value="${student.name}" placeholder="关键词" />
</div>
<div class="form-group col-md-12">
<label>性别</label>
<div class="clearfix">
<label class="lyear-radio radio-inline radio-primary">
<input type="radio" name="gender" value="1" ${student.gender == '1' ? 'checked' : ''}><span>男</span>
</label>
<label class="lyear-radio radio-inline radio-primary">
<input type="radio" name="gender" value="2" ${student.gender == '2' ? 'checked' : ''}><span>女</span>
</label>
</div>
</div>
<div class="form-group col-md-12">
<label for="birthday">生日</label>
<input class="form-control js-datepicker m-b-10" type="text"
id="birthday"
name="birthday"
value="${student.birthday}"
placeholder="yyyy-mm-dd" value="" data-date-format="yyyy-mm-dd" />
</div>
<div class="form-group col-md-12">
<label for="clsId">班级</label>
<select name="clsId" class="form-control" id="clsId">
<option value="1" ${student.clsId == '1' ? 'selected' : ''}>一班</option>
<option value="2" ${student.clsId == '2' ? 'selected' : ''}>二班</option>
</select>
</div>
<div class="form-group col-md-12">
<label>照片</label>
<div class="form-controls">
<ul class="list-inline clearfix lyear-uploads-pic">
<li class="col-xs-4 col-sm-3 col-md-2">
<figure>
<img id="imgPhoto" src="${student.photoURL}" alt="图片一">
<figcaption>
<a class="btn btn-round btn-square btn-danger" href="#!"><i class="mdi mdi-delete"></i></a>
</figcaption>
</figure>
</li>
<li class="col-xs-4 col-sm-3 col-md-2">
<a class="pic-add" id="add-pic-btn" href="#!" title="点击上传"></a>
</li>
</ul>
<input type="file" id="fileInput" style="display: none;" accept="image/*">
<input type="hidden" id="photoURL" name="photoURL">
</div>
</div>
<div class="form-group col-md-12">
<button type="button" onclick="save()" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
<button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!--标签插件-->
<script src="${pageContext.request.contextPath}/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="${pageContext.request.contextPath}/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
function save() {
var no = $('#no').val();
var name = $('#name').val();
var birthday = $('#birthday').val();
var clsId = $('#clsId').val();
var gender = $('input[name="gender"]:checked').val();
if(!gender)
{
alert("请选择性别")
return;
}
$.ajax({
url:"Edit",
type: "post",
data:{
no:no, name:name, gender:gender,birthday:birthday,clsId:clsId
},
dataType: "json",
success:function(res){
if(res.code==-1)
{
alert(res.msg);
}
else if(res.code==1)
{
alert("ok");
window.location.href = '../StuList1';
}
},
error:function (error)
{
console.log(error);
alert("failure");
}
});
}
</script>
</body>
</html>index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/bootstrap-multitabs/multitabs.min.css">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="lyear-layout-web">
<div class="lyear-layout-container">
<!--左侧导航-->
<aside class="lyear-layout-sidebar">
<!-- logo -->
<div id="logo" class="sidebar-header">
<a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
</div>
<div class="lyear-layout-sidebar-scroll">
<nav class="sidebar-main">
<ul class="nav nav-drawer">
<li class="nav-item active"> <a class="multitabs" href="lyear_main.html"><i class="mdi mdi-home"></i> <span>后台首页</span></a> </li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>学生信息</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="StuList1">学生列表1</a> </li>
<li> <a class="multitabs" href="stu_list.html">学生列表2</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>UI 元素</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_ui_buttons.html">按钮</a> </li>
<li> <a class="multitabs" href="lyear_ui_cards.html">卡片</a> </li>
<li> <a class="multitabs" href="lyear_ui_grid.html">格栅</a> </li>
<li> <a class="multitabs" href="lyear_ui_icons.html">图标</a> </li>
<li> <a class="multitabs" href="lyear_ui_tables.html">表格</a> </li>
<li> <a class="multitabs" href="lyear_ui_modals.html">模态框</a> </li>
<li> <a class="multitabs" href="lyear_ui_tooltips_popover.html">提示 / 弹出框</a> </li>
<li> <a class="multitabs" href="lyear_ui_alerts.html">警告框</a> </li>
<li> <a class="multitabs" href="lyear_ui_pagination.html">分页</a> </li>
<li> <a class="multitabs" href="lyear_ui_progress.html">进度条</a> </li>
<li> <a class="multitabs" href="lyear_ui_tabs.html">标签页</a> </li>
<li> <a class="multitabs" href="lyear_ui_typography.html">排版</a> </li>
<li> <a class="multitabs" href="lyear_ui_step.html">步骤</a> </li>
<li> <a class="multitabs" href="lyear_ui_other.html">其他</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> <span>表单</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_forms_elements.html">基本元素</a> </li>
<li> <a class="multitabs" href="lyear_forms_radio.html">单选框</a> </li>
<li> <a class="multitabs" href="lyear_forms_checkbox.html">复选框</a> </li>
<li> <a class="multitabs" href="lyear_forms_switch.html">开关</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> <span>示例页面</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_pages_doc.html">文档列表</a> </li>
<li> <a class="multitabs" href="lyear_pages_gallery.html">图库列表</a> </li>
<li> <a class="multitabs" href="lyear_pages_config.html">网站配置</a> </li>
<li> <a class="multitabs" href="lyear_pages_rabc.html">设置权限</a> </li>
<li> <a class="multitabs" href="lyear_pages_add_doc.html">新增文档</a> </li>
<li> <a class="multitabs" href="lyear_pages_guide.html">表单向导</a> </li>
<li> <a class="multitabs" href="lyear_pages_data_table.html">表格插件</a> </li>
<li> <a href="lyear_pages_login.html" target="_blank">登录页面</a> </li>
<li> <a href="lyear_pages_login_2.html" target="_blank">登录页面2</a> </li>
<li> <a href="lyear_pages_login_3.html" target="_blank">登录页面3</a> </li>
<li> <a href="lyear_pages_login_4.html" target="_blank">登录页面4</a> </li>
<li> <a href="lyear_pages_error.html" target="_blank">错误页面</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> <span>JS 插件</span></a>
<ul class="nav nav-subnav">
<li> <a class="multitabs" href="lyear_js_datepicker.html">日期选取器</a> </li>
<li> <a class="multitabs" href="lyear_js_sliders.html">滑块</a> </li>
<li> <a class="multitabs" href="lyear_js_colorpicker.html">选色器</a> </li>
<li> <a class="multitabs" href="lyear_js_chartjs.html">Chart.js</a> </li>
<li> <a class="multitabs" href="lyear_js_jconfirm.html">对话框</a> </li>
<li> <a class="multitabs" href="lyear_js_tags_input.html">标签插件</a> </li>
<li> <a class="multitabs" href="lyear_js_notify.html">通知消息</a> </li>
</ul>
</li>
<li class="nav-item nav-item-has-subnav">
<a href="javascript:void(0)"><i class="mdi mdi-menu"></i> <span>多级菜单</span></a>
<ul class="nav nav-subnav">
<li> <a href="#!">一级菜单</a> </li>
<li class="nav-item nav-item-has-subnav">
<a href="#!">一级菜单</a>
<ul class="nav nav-subnav">
<li> <a href="#!">二级菜单</a> </li>
<li class="nav-item nav-item-has-subnav">
<a href="#!">二级菜单</a>
<ul class="nav nav-subnav">
<li> <a href="#!">三级菜单</a> </li>
<li> <a href="#!">三级菜单</a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#!">一级菜单</a> </li>
</ul>
</li>
</ul>
</nav>
<div class="sidebar-footer">
<p class="copyright">Copyright © 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
</div>
</div>
</aside>
<!--End 左侧导航-->
<!--头部信息-->
<header class="lyear-layout-header">
<nav class="navbar navbar-default">
<div class="topbar">
<div class="topbar-left">
<div class="lyear-aside-toggler">
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
<span class="lyear-toggler-bar"></span>
</div>
</div>
<ul class="topbar-right">
<li class="dropdown dropdown-profile">
<a href="javascript:void(0)" data-toggle="dropdown">
<img class="img-avatar img-avatar-48 m-r-10" src="images/users/avatar.jpg" alt="笔下光年" />
<span>${user} <span class="caret"></span></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li> <a class="multitabs" data-url="lyear_pages_profile.html" href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a> </li>
<li> <a class="multitabs" data-url="lyear_pages_edit_pwd.html" href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
<li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
<li class="divider"></li>
<li> <a href="lyear_pages_login.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
</ul>
</li>
<!--切换主题配色-->
<li class="dropdown dropdown-skin">
<span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
<ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
<li class="drop-title"><p>LOGO</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
<label for="logo_bg_1"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
<label for="logo_bg_2"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
<label for="logo_bg_3"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
<label for="logo_bg_4"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
<label for="logo_bg_5"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
<label for="logo_bg_6"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
<label for="logo_bg_7"></label>
</span>
<span>
<input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
<label for="logo_bg_8"></label>
</span>
</li>
<li class="drop-title"><p>头部</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="header_bg" value="default" id="header_bg_1" checked>
<label for="header_bg_1"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_2" id="header_bg_2">
<label for="header_bg_2"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_3" id="header_bg_3">
<label for="header_bg_3"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_4" id="header_bg_4">
<label for="header_bg_4"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_5" id="header_bg_5">
<label for="header_bg_5"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_6" id="header_bg_6">
<label for="header_bg_6"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_7" id="header_bg_7">
<label for="header_bg_7"></label>
</span>
<span>
<input type="radio" name="header_bg" value="color_8" id="header_bg_8">
<label for="header_bg_8"></label>
</span>
</li>
<li class="drop-title"><p>侧边栏</p></li>
<li class="drop-skin-li clearfix">
<span class="inverse">
<input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1" checked>
<label for="sidebar_bg_1"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
<label for="sidebar_bg_2"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
<label for="sidebar_bg_3"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
<label for="sidebar_bg_4"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
<label for="sidebar_bg_5"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
<label for="sidebar_bg_6"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
<label for="sidebar_bg_7"></label>
</span>
<span>
<input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
<label for="sidebar_bg_8"></label>
</span>
</li>
</ul>
</li>
<!--切换主题配色-->
</ul>
</div>
</nav>
</header>
<!--End 头部信息-->
<!--页面主要内容-->
<main class="lyear-layout-content">
<div id="iframe-content"></div>
</main>
<!--End 页面主要内容-->
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multitabs/multitabs.js"></script>
<script type="text/javascript" src="js/index.min.js"></script>
</body>
</html>
stu_list.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文档列表 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
</head>
<body>
<div class="container-fluid p-t-15">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-toolbar clearfix">
<form class="pull-right search-bar" method="get" action="#!" role="form">
<div class="input-group">
<div class="input-group-btn">
<input type="hidden" name="search_field" id="search-field" value="title">
<button class="btn btn-default dropdown-toggle" id="search-btn" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
标题 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li> <a tabindex="-1" href="javascript:void(0)" data-field="title">标题</a> </li>
<li> <a tabindex="-1" href="javascript:void(0)" data-field="cat_name">栏目</a> </li>
</ul>
</div>
<input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
</div>
</form>
<div class="toolbar-btn-action">
<a class="btn btn-primary m-r-5" href="stu/Add"><i class="mdi mdi-plus"></i> 新增</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="stu" varStatus="vs">
<tr>
<td >${vs.index+1} </td>
<td>${stu.no}</td>
<td>${stu.name}</td>
<td>${stu.gender==1?"男":"女"}</td>
<td>${stu.birthday}</td>
<td>${stu.stuClass.clsName}</td>
<td>
<div class="btn-group">
<a class="btn btn-xs btn-default" href="stu/Edit?no=${stu.no}" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
<a class="btn btn-xs btn-default" onclick="delete2(${stu.no})" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script src="js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript">
$(function(){
$('.search-bar .dropdown-menu a').click(function() {
var field = $(this).data('field') || '';
$('#search-field').val(field);
$('#search-btn').html($(this).text() + ' <span class="caret"></span>');
});
});
function delete2(no){
$.alert({
title: '提示信息',
content: '您确定删除吗？',
buttons: {
confirm: {
text: '确认',
btnClass: 'btn-primary',
action: function(){
$.ajax({
url:"stu/Delete?no="+no,
type: "get",
dataType: "json",
success:function(res){
if(res.code==-1)
{
alert(res.msg);
}
else if(res.code==1)
{
alert("ok");
window.location.href = 'StuList1';
}
},
error:function (error)
{
console.log(error);
alert("failure");
}
});
}
},
cancel: {
text: '取消',
action: function () {
}
}
}
});
}
function delete2_bak(no){
const isConfirmed = confirm('你确定要删除这个项目吗？');
if (!isConfirmed)
return;
$.ajax({
url:"stu/Delete?no="+no,
type: "get",
dataType: "json",
success:function(res){
if(res.code==-1)
{
alert(res.msg);
}
else if(res.code==1)
{
alert("ok");
window.location.href = 'StuList1';
}
},
error:function (error)
{
console.log(error);
alert("failure");
}
});
}
</script>
</body>
</html>
login.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<style>
body {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: 100%;
}
.login-box {
display: table;
table-layout: fixed;
overflow: hidden;
max-width: 700px;
}
.login-left {
display: table-cell;
position: relative;
margin-bottom: 0;
border-width: 0;
padding: 45px;
}
.login-left .form-group:last-child {
margin-bottom: 0px;
}
.login-right {
display: table-cell;
position: relative;
margin-bottom: 0;
border-width: 0;
padding: 45px;
width: 50%;
max-width: 50%;
background: #67b26f!important;
background: -moz-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
background: -webkit-linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
background: linear-gradient(45deg,#67b26f 0,#4ca2cd 100%)!important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67b26f', endColorstr='#4ca2cd', GradientType=1 )!important;
}
.login-box .has-feedback.feedback-left .form-control {
padding-left: 38px;
padding-right: 12px;
}
.login-box .has-feedback.feedback-left .form-control-feedback {
left: 0;
right: auto;
width: 38px;
height: 38px;
line-height: 38px;
z-index: 4;
color: #dcdcdc;
}
.login-box .has-feedback.feedback-left.row .form-control-feedback {
left: 15px;
}
@media (max-width: 576px) {
.login-right {
display: none;
}
}
</style>
</head>
<body style="background-image: url(images/login-bg-2.jpg); background-size: cover;">
<div class="bg-translucent p-10">
<div class="login-box bg-white clearfix">
<div class="login-left">
<form>
<div class="form-group has-feedback feedback-left">
<input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback feedback-left">
<input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback feedback-left row">
<div class="col-xs-7">
<input type="text" name="captcha" id="captcha" class="form-control" placeholder="验证码">
<span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-xs-5">
<img src="captcha" class="pull-right" id="captchaImg" style="height: 40px" onclick="refreshCaptcha()" >
</div>
</div>
<div class="form-group">
<label class="lyear-checkbox checkbox-primary m-t-10">
<input type="checkbox"><span>5天内自动登录</span>
</label>
</div>
<div class="form-group">
<button class="btn btn-block btn-primary" type="button" onclick="mylogin()">立即登录</button>
</div>
</form>
</div>
<div class="login-right">
<p><img src="images/logo.png" class="m-b-md m-t-xs" alt="logo"></p>
<p class="text-white m-tb-15">Light Year Admin 是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。</p>
<p class="text-white">Copyright © 2020 <a href="http://lyear.itshubao.com">IT书包</a>. All right reserved</p>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
<script type="text/javascript">
function mylogin() {
var username = $('#username').val();
var password = $('#password').val();
var verifyCode = $('#captcha').val();
lightyear.loading('show');
$.ajax({
url:"DoLogin",
type: "post",
data:{
username:username, password:password, verifyCode:verifyCode
},
dataType: "json",
success:function(res){
lightyear.loading('hide');
if(res.code==-1)
{
lightyear.notify(res.msg, 'danger', 100);
//alert(res.msg);
refreshCaptcha();
$('#captcha').val('');
}
else if(res.code==1)
{
window.location.href = 'Index';
}
},
error:function (error)
{
lightyear.loading('hide');
console.log(error);
alert("failure");
}
});
}
function refreshCaptcha() {
// Get the current timestamp and append it to the captcha image URL
var captchaImg = document.getElementById('captchaImg');
// 更新图片的src属性，可以通过添加时间戳避免浏览器缓存旧的验证码图片
captchaImg.src = 'captcha?time=' + new Date().getTime();
}
</script>
</body>
</html>stu_list2.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid p-t-15">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header"><h4>bootstrap-table简单示例</h4></div>
<div class="card-body">
<div id="toolbar" class="toolbar-btn-action">
<button id="btn_add" type="button" class="btn btn-primary m-r-5">
<span class="mdi mdi-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-success m-r-5">
<span class="mdi mdi-check" aria-hidden="true"></span>启用
</button>
<button id="btn_delete" type="button" class="btn btn-danger">
<span class="mdi mdi-window-close" aria-hidden="true"></span>删除
</button>
</div>
<table id="tb_departments"></table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">
$('#tb_departments').bootstrapTable({
classes: 'table table-bordered table-hover table-striped',
contentType: 'application/x-www-form-urlencoded', // 明确指定内容类型
url: 'GetStuListJson',
method: 'post',
dataType : 'json', // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
uniqueId: 'no',
idField: 'no', // 每行的唯一标识字段
toolbar: '#toolbar', // 工具按钮容器
//clickToSelect: true, // 是否启用点击选中行
showColumns: true, // 是否显示所有的列
showRefresh: true, // 是否显示刷新按钮
search: true, // 是否显示表格搜索，此搜索是客户端搜索
queryParams: function(params) {
var temp = {
search: '' // 查询条件
};
return temp;
}, // 传递参数
columns: [{
field: 'no',
title: '学号',
sortable: true // 是否排序
}, {
field: 'name',
title: '姓名'
}, {
field: 'gender',
title: '性别',
formatter:function (value, row, index) {
if(value=="1")
return "男";
else return "女";
}
}, {
field: 'birthday',
title: '生日'
},{
field: 'stuClass.clsName',
title: '班级'
},
{
field: 'operate',
title: '操作',
formatter: btnGroup, // 自定义方法
events: {
'click .edit-btn': function (event, value, row, index) {
// editUser(row.no);
},
'click .del-btn': function (event, value, row, index) {
//delUser(row.no);
}
}
}],
onLoadSuccess: function(data){
$("[data-toggle='tooltip']").tooltip();
}
});
// 操作按钮
function btnGroup ()
{
let html =
'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
'<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
return html;
}
// 操作方法 - 编辑
function editUser()
{
alert('编辑信息跳转');
}
// 操作方法 - 删除
function delUser(no)
{
$.ajax({
url:"StudentDelete",
type: "post",
data:{
no:no
},
dataType: "json",
success:function(res){
if(res.code==-1)
{
alert(res.msg);
}
else if(res.code==1)
{
// 假设你的表格ID是 `#myTable`
$('#tb_departments').bootstrapTable('refresh');
}
},
error:function (error)
{
console.log(error);
alert("failure");
}
});
}
// 操作方法 - 查看
function showUser()
{
alert('查看详细');
}
//$('#tb_departments').bootstrapTable('refresh');
</script>
</body>
</html>web03.iml
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="FacetManager">
<facet type="web" name="Web">
<configuration>
<descriptors>
<deploymentDescriptor name="web.xml" url="file://$MODULE_DIR$/web/WEB-INF/web.xml" />
</descriptors>
<webroots>
<root url="file://$MODULE_DIR$/web" relative="/" />
</webroots>
</configuration>
</facet>
</component>
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" scope="PROVIDED" name="Tomcat 8.5.75" level="application_server_libraries" />
<orderEntry type="module-library">
<library>
<CLASSES>
<root url="file://$MODULE_DIR$/web/WEB-INF/lib" />
</CLASSES>
<JAVADOC />
<SOURCES />
<jarDirectory url="file://$MODULE_DIR$/web/WEB-INF/lib" recursive="false" />
</library>
</orderEntry>
<orderEntry type="module-library">
<library>
<CLASSES />
<JAVADOC />
<SOURCES>
<root url="file://$MODULE_DIR$/../../web03/src" />
</SOURCES>
</library>
</orderEntry>
</component>
</module>二、运行结果展示
不正确的时候的弹窗
之后跳到添加的页面可以进行删除 会弹出这样的图标来 比较常见的写法
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
