做网站为什么需要服务器,学校网站首页设计图片,搜一搜搜索,手工做皮具国外的网站学生管理系统VueAjax版本
使用Vue和Ajax对原有学生管理系统进行优化
1.准备工作
创建AjaxResult类#xff0c;对Ajax回传的信息封装在对象中
package com.grg.Result;/*** Author Grg* Date 2023/8/30 8:51* PackageName:com.grg.Result* ClassName: AjaxResult* Descript…学生管理系统VueAjax版本
使用Vue和Ajax对原有学生管理系统进行优化
1.准备工作
创建AjaxResult类对Ajax回传的信息封装在对象中
package com.grg.Result;/*** Author Grg* Date 2023/8/30 8:51* PackageName:com.grg.Result* ClassName: AjaxResult* Description: 又是码代码的一天* Version plus max 宇宙无敌终极版本*/
public class AjaxResult {private Integer code;private String msg;private Object data;public static AjaxResult success() {return new AjaxResult(1, 成功, null);}public static AjaxResult success(Object data) {return new AjaxResult(1, 成功, data);}public static AjaxResult error() {return new AjaxResult(2, 失败, null);}public AjaxResult() {}public AjaxResult(Integer code, String msg, Object data) {this.code code;this.msg msg;this.data data;}Overridepublic String toString() {return AjaxResult{ code code , msg msg \ , data data };}public Integer getCode() {return code;}public void setCode(Integer code) {this.code code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg msg;}public Object getData() {return data;}public void setData(Object data) {this.data data;}
}
JDBC工具类DAOUtil
package com.grg.util;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** Author Grg* Date 2023/8/26 14:35* PackageName:com.grg.util* ClassName: DAOUtil* Description: 又是码代码的一天* Version plus max 宇宙无敌终极版本*/
public class DAOUtil {//消除魔法值private static final String CLASSNAME com.mysql.cj.jdbc.Driver;private static final String URL jdbc:mysql:///jdbctest;private static final String USERNAME root;private static final String PASSWORDS 123456;//加载驱动static {try {Class.forName(CLASSNAME);} catch (ClassNotFoundException e) {throw new RuntimeException(e);}}//建立连接public static Connection getConnection() throws Exception {return DriverManager.getConnection(URL, USERNAME, PASSWORDS);}//增删改public static int executeUpdate(String sql, Object... data) {Connection conn null;try {conn DAOUtil.getConnection();PreparedStatement ps conn.prepareStatement(sql);for (int i 0; i data.length; i) {ps.setObject(i 1, data[i]);}return ps.executeUpdate();} catch (Exception e) {e.printStackTrace();} finally {try {if (conn ! null) {conn.close();}} catch (Exception e) {e.printStackTrace();}}return 0;}//查public static ListMapString, Object executeQuery(String sql, Object... arr) {ListMapString, Object data new ArrayList();Connection conn null;try {conn DAOUtil.getConnection();PreparedStatement ps conn.prepareStatement(sql);for (int i 0; i arr.length; i) {ps.setObject(i 1, arr[i]);}ResultSet set ps.executeQuery();int columnCount set.getMetaData().getColumnCount();while (set.next()) {HashMapString, Object map new HashMap();for (int i 0; i columnCount; i) {map.put(set.getMetaData().getColumnLabel(i 1), set.getObject(i 1));}data.add(map);}} catch (Exception e) {e.printStackTrace();} finally {try {if (conn ! null) {conn.close();}} catch (Exception e) {e.printStackTrace();}}return data;}
}
pom文件
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsdmodelVersion4.0.0/modelVersiongroupIdorg.example/groupIdartifactIdStudentVue/artifactIdpackagingwar/packagingversion1.0-SNAPSHOT/versionnameStudentVue Maven Webapp/nameurlhttp://maven.apache.org/urldependenciesdependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdversion8.0.33/version/dependencydependencygroupIdjavax.servlet/groupIdartifactIdjavax.servlet-api/artifactIdversion4.0.1/version/dependencydependencygroupIdjavax.servlet/groupIdartifactIdjstl/artifactIdversion1.2/version/dependencydependencygroupIdtaglibs/groupIdartifactIdstandard/artifactIdversion1.1.2/version/dependencydependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion2.0.2/version/dependency/dependenciesbuildfinalNameStudentVue/finalName/build
/project
2.登录模块
登录页面(默认页面)index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/scriptscript srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/scriptstylefieldset {margin: 100px auto;width: 500px;}/style/head
body
div idappfieldsetlegend登录/legendspan classlabel label-danger{{msg}}/spandiv classform-grouplabelUserName/labelinput classform-control placeholder请输入账号 v-modelinfo.username/divdiv classform-grouplabelPassword/labelinput typepassword classform-control placeholder请输入密码 v-modelinfo.password/divbutton typesubmit classbtn btn-danger btn-block clicklogin()登录/button/fieldset
/divscriptvar haha new Vue({el: #app,data: {info: {},msg: ,},methods: {login: function () {//数据校验//发送请求$.post(/day/emp/login, haha.info, function (backData) {if (backData.code 1) {//跳转主界面window.location.href /day/main.html} else {//显示失败信息haha.msg 对不起账号或密码错误}})}}})
/script
/body
/html对/day/emp/login发送post请求查询数据并且回传
EmpServlet类 拦截到/emp/*的请求并进行处理
创建dao层 EmpDAO类和EmpDAOImpl实现类 实现对数据库中数据进行账号密码验证
EmpDAO接口
public interface EmpDAO {ListMapString,Object login(String username, String password);
}EmpDAO实现类
public class EmpDAOImpl implements EmpDAO {Overridepublic ListMapString, Object login(String username, String password) {String sql select * from login where username ? and password ? ;return DAOUtil.executeQuery(sql, username, password);}
}EmpServlet类
package com.grg.servlet;import com.alibaba.fastjson.JSON;
import com.grg.Result.AjaxResult;
import com.grg.dao.EmpDAO;
import com.grg.dao.impl.EmpDAOImpl;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.Map;/*** Author Grg* Date 2023/8/30 8:49* PackageName:com.grg.servlet* ClassName: EmpServlet* Description: 又是码代码的一天* Version plus max 宇宙无敌终极版本*/
WebServlet(/emp/*)
public class EmpServlet extends HttpServlet {private EmpDAO empDAO new EmpDAOImpl();Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//路径分发String uri req.getRequestURI();String[] arr uri.split(/);String s arr[arr.length - 1];resp.setContentType(text/json;charsetUTF-8);PrintWriter out resp.getWriter();AjaxResult ajaxResult null;if (login.equals(s)) {ajaxResult login(req, resp);}String s1 JSON.toJSONString(ajaxResult);out.write(s1);}protected AjaxResult login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.接收请求参数String username req.getParameter(username);String password req.getParameter(password);//2.校验账号密码ListMapString, Object data empDAO.login(username, password);if (data.size() 0) {return AjaxResult.success();}return AjaxResult.error();}
}当账号密码错误时响应 {“code”:2,“msg”:“失败”}
当账号密码正确时进入main.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title信息管理系统/titlelink relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/scriptscript srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/scriptstylebody {background: url(./img/reg_bg_min.jpg) no-repeat;background-size: 100% 100%;}a {text-decoration: none;color: white;}body {font-family: Arial, sans-serif;margin: 0;padding: 0;}#header {background-color: #000000;/*color: #ffffff;*/padding: 10px;display: flex;justify-content: space-between;}#header h1, #header p {margin: 0;}#sidebar {/*background-color: #e1e1e1;*/width: 200px;height: 100vh;float: left;}#content {padding: 20px;margin-left: 200px;}#footer {/*background-color: #f5f5f5;*/padding: 10px;clear: both;}.menu-item {padding: 10px;margin-top: 10px;}.menu-item:hover {background-color: #d1d1d1;}#iframe-container {width: calc(100% - 20px);height: calc(100vh - 20px);}#iframe-content {width: 100%;height: 100%;border: none;}/style
/head
body
div idheader!-- 学生管理系统的Logo和标题 --h1 stylecolor:white;信息管理系统/h1!-- 用户信息和注销按钮 --p stylecolor:white;当前登录用户/p/div
div idsidebar!-- 左侧菜单 --div classmenu-itema targethaha href/day/views/student/list.html学生管理/a/divdiv classmenu-itema targethaha href/teacher/show教师管理/a/divdiv classmenu-itema targethaha href/class/show班级管理/a/divdiv classmenu-itema targethaha href/views/emp/changepassword.jsp修改密码/a/divdiv classmenu-itema targethaha href/log日志记录/a/divdiv classmenu-itema href/注销/a/div
/div
div idcontentdiv idiframe-containeriframe namehaha src idiframe-content/iframe/div/div
div idfooter!-- 页面底部区域可根据需求添加内容 --p stylecolor:white;版权所有 copy; 2023 学生管理系统/p
/div
/body
/html3.学生管理
3.1查询学生
点击学生管理获取学生数据并且展示在页面上
a targethaha href/day/views/student/list.html学生管理/a创建list.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/scriptscript srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/script
/head
body
div idappa href/day/views/student/add.html classbtn btn-success添加学生/atable classtable table-bordered table-condensed table-stripedtrth编号/thth姓名/th/trtr v-for(s,i) in stuArrtd{{s.id}}/tdtd{{s.name}}/tdtdbutton classbtn btn-danger clickdelStu(s.id)删除/buttonbutton classbtn btn-primary修改/button/td/tr/table
/divscript$.get(/day/stu/list, function (backData) {haha.stuArr backData.data;})var haha new Vue({el: #app,data: {stuArr: []},methods: {delStu: function (a) {if (confirm(确定删除)) {$.get(/day10/stu/delete?id a, function (backDate) {if (backDate.code 2) {alert(删除失败)} else {window.location.reload();}})}}}});
/script
/body
/html进入页面后通过ajax获取学生数据,并把返回的数据存入haha.stuArr数组中
$.get(/day/stu/list, function (backData) {haha.stuArr backData.data;})/day/stu/list执行list函数
创建StudentServlet类、StudentDAO接口、StudentDAOImpl实现类
StudentDAO接口
public interface StudentDAO {public ListMapString, Object listAllStudent();public int deleteStudentById(String id);
}StudentDAOImpl实现类
public class StudentDAOImpl implements StudentDAO {Overridepublic ListMapString, Object listAllStudent() {String sql select s.id,s.name from student s;return DAOUtil.executeQuery(sql);}Overridepublic int deleteStudentById(String id) {String sql delete from student where id ? ;return DAOUtil.executeUpdate(sql, id);}
}StudentServlet类
package com.grg.servlet;import com.alibaba.fastjson.JSON;
import com.grg.Result.AjaxResult;
import com.grg.dao.StudentDAO;
import com.grg.dao.impl.StudentDAOImpl;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.Map;/*** Author Grg* Date 2023/8/30 8:49* PackageName:com.grg.servlet* ClassName: StudentServlet* Description: 又是码代码的一天* Version plus max 宇宙无敌终极版本*/
WebServlet(/stu/*)
public class StudentServlet extends HttpServlet {private StudentDAO studentDAO new StudentDAOImpl();Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uri req.getRequestURI();String[] arr uri.split(/);String s arr[arr.length - 1];resp.setContentType(text/json;charsetUTF-8);PrintWriter out resp.getWriter();AjaxResult ajaxResult null;if (list.equals(s)) {ajaxResult list(req, resp);} else if (delete.equals(s)) {ajaxResult delete(req, resp);}String s1 JSON.toJSONString(ajaxResult);out.write(s1);}protected AjaxResult list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ListMapString, Object list studentDAO.listAllStudent();return AjaxResult.success(list);}protected AjaxResult delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id req.getParameter(id);int i studentDAO.deleteStudentById(id);if (i 0) {return AjaxResult.success();}return AjaxResult.error();}
}
3.2删除学生
点击删除按钮 执行点击事件函数delStu
在StudentServlet中执行删除
button classbtn btn-danger clickdelStu(s.id)删除/buttonmethods: {delStu: function (a) {if (confirm(确定删除)) {$.get(/day/stu/delete?id a, function (backDate) {if (backDate.code 2) {alert(删除失败)} else {window.location.reload();}})}}}3.3添加学生
a href/day/views/student/add.html classbtn btn-success添加学生/aadd.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/scriptscript srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/script
/head
stylefieldset {width: 500px;margin: 100px auto;}
/style
bodydiv idappfieldsetlegend添加学生span classlabel label-primary/span/legenddiv classform-grouplabel forinputEmail3 classcol-sm-2 control-label学生姓名/labeldiv classcol-sm-10input namename v-modelstuInfo.name typetext classform-control idinputEmail3placeholder请输入学生姓名/div/divdiv classform-grouplabel forinputPassword3 classcol-sm-2 control-label学生年龄/labeldiv classcol-sm-10input nameage v-modelstuInfo.age typetext classform-control idinputPassword3placeholder请输入学生年龄/div/divdiv classform-grouplabel classcol-sm-2 control-label学生住址/labeldiv classcol-sm-10select nameaddress v-modelstuInfo.addressoption北京/optionoption郑州/optionoption上海/option/select/div/divdiv classform-grouplabel classcol-sm-2 control-label学生班级/labeldiv classcol-sm-10select nameaddress v-modelstuInfo.gidoption value1一年级/optionoption value2二年级/optionoption value3三年级/option/select/div/divdiv classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-default btn-success clickadd()添加/button/div/div/fieldset
/divscriptvar haha new Vue({el: #app,data: {stuInfo: {},},methods: {add: function () {$.post(/day/stu/addStu, haha.stuInfo, function (backData) {})}}})
/script
/body
/html执行添加操作在StudentServlet中执行addStu函数,并且编写DAO层相应添加函数
$.post(/day/stu/add, haha.stuInfo, function (backData) {Overridepublic int addStu(Student student) {String sql insert into student values (null,?,?,?,?);return DAOUtil.executeUpdate(sql,student.getName(),student.getAge(),student.getAddress(),student.getGid());}protected AjaxResult addStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name req.getParameter(name);String age req.getParameter(age);String address req.getParameter(address);String gid req.getParameter(gid);Student student new Student(name, age,address,Integer.parseInt(gid));int i studentDAO.addStu(student);if (i 0) {return AjaxResult.success();}return AjaxResult.error();}3.4修改学生
点击修改按钮执行点击事件updateStu函数
button classbtn btn-primary clickupdateStu(s.id)修改/buttonupdateStu: function (a) {window.location.href /day/views/student/update.html?id a;}update.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 最新版本的 Bootstrap 核心 CSS 文件 --link relstylesheet hrefhttps://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.cssintegritysha384-HSMxcRTRxnNBdg0JdbxYKrThecOKuH5zCYotlSAcp1c8xmyTe9GYg1l9a69psu crossoriginanonymousscript srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/scriptscript srchttp://libs.baidu.com/jquery/2.0.0/jquery.min.js/script
/head
stylefieldset {width: 500px;margin: 100px auto;}.col-sm-10 {width: 85.333333%;}.btn-block {width: 63%;}
/style
body
div idappfieldsetlegend修改学生span classlabel label-primary{{msg}}/span/legenddivlabel classcol-sm-2 control-label姓名/labeldiv classcol-sm-10input typetext classform-control v-modelstuInfo.name/div/divdivlabel classcol-sm-2 control-label年龄/labeldiv classcol-sm-10input typetext classform-control v-modelstuInfo.age/div/divdivlabel classcol-sm-2 control-label住址/labeldiv classcol-sm-10select nameaddress v-modelstuInfo.addressoption北京/optionoption郑州/optionoption上海/option/select/div/divdivlabel classcol-sm-2 control-label班级/labeldiv classcol-sm-10select namegid v-modelstuInfo.gidoption value1一年级/optionoption value2二年级/optionoption value3三年级/option/select/div/divdivdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-info btn-block clickupdate()修改/buttona href/day/views/student/list.html classbtn btn-info btn-block返回/a/div/div/fieldset
/divscriptvar id window.location.href.split()[1];$.get(/day/stu/getStu?id id, function (backData) {haha.stuInfo backData.data;})var haha new Vue({el: #app,data: {stuInfo: {},msg:},methods: {update: function () {$.post(/day/stu/updateStu,haha.stuInfo,function (backData) {haha.msg backData.msg;})}}})
/script
/body
/html先发送请求到getStu
protected AjaxResult getStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id req.getParameter(id);ListMapString, Object data studentDAO.getStudentById(id);if (data.size() 0) {return AjaxResult.success(data.get(0));} else {return AjaxResult.error();}}点击修改按钮发送请求到updateStu
protected AjaxResult updateStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name req.getParameter(name);String age req.getParameter(age);String address req.getParameter(address);String gid req.getParameter(gid);String id req.getParameter(id);Student student new Student(Integer.parseInt(id), name, age, address, Integer.parseInt(gid));int i studentDAO.updateStu(student);if (i 0) {return AjaxResult.success();}return AjaxResult.error();}
