嘉兴网站建设咨询,长宁区网站建设网页,提供低价网站建设,固始县住房和城乡规划建设局网站1#xff0c;点击专业管理菜单------查询所有专业信息列表
①点击菜单#xff0c;切换专业组件
②切换到列表组件后#xff0c;向后端发送请求到Servlet
③调用DAO层#xff0c;查询数据库#xff08;sql#xff09;#xff0c;封装查询到的内容
④从后端向前端做出…1点击专业管理菜单------查询所有专业信息列表
①点击菜单切换专业组件
②切换到列表组件后向后端发送请求到Servlet
③调用DAO层查询数据库sql封装查询到的内容
④从后端向前端做出响应
⑤在前端进行渲染
网页点击触发查询事件向后端传入select后端接收再响应数据回到前端。
前端
templatedivel-button typeprimary添加专业信息/el-buttonel-table :datatableData height400 border stylewidth: 100%el-table-column propid label序号 width100/el-table-columnel-table-column propname label专业名 width100/el-table-columnel-table-column propaccount label修改人/el-table-columnel-table-column value-formatyyyy-MM-dd HH:mm:ss propoper_time label修改时间 aligncenter/el-table-columnel-table-column width200template slot-scopescopeel-button typeprimary iconel-icon-edit/el-buttonel-button typeprimary iconel-icon-delete/el-button/template/el-table-column/el-table/div
/template
scriptexport default {data() {return {tableData: []}},methods: {},mounted() {this.$http.get(admin/MajorServlet?markselect).then(resp {this.tableData resp.data.data;})}}
/scriptstyle
/style 后端后端接收数据对数据库查询获得数据传回前端 private void selectMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter resp.getWriter();CommonData commonData null;try {MajorDao majorDao new MajorDao();ListMajor majorlist majorDao.majors();commonData new CommonData(200, majorlist, 查询成功);} catch (SQLException throwables) {throwables.printStackTrace();commonData new CommonData(200, 服务器忙...请稍后再试);}ObjectMapper objectMapper new ObjectMapper();String json objectMapper.writeValueAsString(commonData);printWriter.print(json);} public ListMajormajors() throws SQLException {ListMajorlistnew ArrayList();Connection connection DButils.getConnection();String sqlSELECT m.id,m.name,a.account,m.oper_time\n FROM major m LEFT JOIN USER a \n ON a.idm.adminid;;PreparedStatement preparedStatement connection.prepareStatement(sql);ResultSet resultSetpreparedStatement.executeQuery();while(resultSet.next()){Major majornew Major();major.setId(resultSet.getInt(id));major.setAccount(resultSet.getString(account));major.setName(resultSet.getString(name));major.setOper_time(resultSet.getDate(oper_time));list.add(major);}DButils.close(resultSet,preparedStatement,connection);return list;}
页面显示结果 2新增专业要求不能新增已有专业--查重
①点击新增打开新增专业表单
②在表单中动态显示专业信息
③输入专业信息查重使用axios响应拦截器
④点击保存提交数据到后端保存到数据库前端更新页面
前端
templateel-dialog title新增专业 :visible.syncdialogFormVisibleel-form label-width80pxel-form-item label专业名el-input v-modelform.name/el-input/el-form-itemel-form-item label授课老师el-input v-modelform.teacher/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clicksave()确 定/el-button/div/el-dialog
/templatescriptexport default {data() {return {dialogFormVisible: false,majorlist: [],form: {name:,teacher:,}}},methods: {save() {this.$http.post(admin/MajorServlet?marksave, jsonToString(this.form)).then(resp {if (resp.data.code 200) {this.$message({message: resp.data.message,type: success});this.dialogFormVisible false;this.$router.go(); //更新当前页面}})}},mounted() {this.$http.get(admin/StudentServlet?markmajorselect).then(resp {this.majorlist resp.data.data;})}}//将json对象序列化为键值键值function jsonToString(jsonobj) {console.log(jsonobj)var str ;for (var s in jsonobj) {str s jsonobj[s] ;}return str.substring(0, str.length - 1);}
/scriptstyle
/style
后端 POST请求传入save字符串获取传来的数据新增到数据库。
public class MajorServlet extends HttpServlet {Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String markreq.getParameter(mark);if(save.equals(mark)){saveMajor(req,resp);}}private void saveMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter resp.getWriter();MajorDao majorDaonew MajorDao();CommonData commonData null;try {String idreq.getParameter(id);String name req.getParameter(name);String teacherreq.getParameter(teacher);String adminToken req.getHeader(userToken);System.out.println(adminToken);DecodedJWT decodedJWT JWTUtil.getTokenInfo(adminToken);int adminid decodedJWT.getClaim(id).asInt();Date date null;if(idnull){majorDao.save(name,teacher,adminid);commonData new CommonData(200, 新增成功);}
// else
// {
// studentDao.update(id,num,name,gender,birthday,phone, address,adminid, majorid, date);
// commonData new CommonData(200, 修改成功);
// }} catch (Exception e) {e.printStackTrace();commonData new CommonData(500, 服务器忙请稍后重试);}ObjectMapper objectMapper new ObjectMapper();String json objectMapper.writeValueAsString(commonData);printWriter.print(json);}
}调用DAO层将数据打包发送给前端
import javax.imageio.ImageReader;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;public class MajorDao {public void save(String name, String teacher, int adminid) throws SQLException {String sqlINSERT INTO major(NAME,adminid, oper_time,teacher) VALUES (?,?,?,?);;Connection connection DButils.getConnection();PreparedStatement preparedStatementconnection.prepareStatement(sql);preparedStatement.setObject(1,name);preparedStatement.setObject(2,adminid);preparedStatement.setObject(3,new Date());preparedStatement.setObject(4,teacher);preparedStatement.executeUpdate();}
}结果显示 在新增专业基础上进行查重如果已经存在当前新增的专业和任课老师则新增失败。 我使用了两个方法第一个是在DAO层数据库查询判断是否为空为空则返回状态值“200”表示可以新增否则不可以。
后端
if(idnull){if(!majorDao.check(name,teacher)){majorDao.save(name,teacher,adminid);commonData new CommonData(200, 新增成功);}else{System.out.println(课程已存在);commonData new CommonData(202, 课程已存在);}} public boolean check(String name, String teacher) throws SQLException {String sqlSELECT teacher,name FROM major WHERE teacher? AND name?;Connection connection DButils.getConnection();PreparedStatement preparedStatementconnection.prepareStatement(sql);preparedStatement.setObject(1,teacher);preparedStatement.setObject(2,name);ResultSet resultSetpreparedStatement.executeQuery();return resultSet.next();}
前端 methods: {save() {this.$http.post(admin/MajorServlet?marksave, jsonToString(this.form)).then(resp {if (resp.data.code 200) {this.$message({message: resp.data.message,type: success});this.dialogFormVisible false;} else if (resp.data.code 202) {this.$message({message: resp.data.message,type: warning});}this.$router.go(); //更新当前页面})}},
第二种方法
axios响应拦截器类似例子见登录或注册直接查询是否存在当前账号。
以百度账号注册为例进行模仿 3修改专业
①点击修改按钮弹出对话框拿到专业id传到后端后端数据库查询
②在表单中显示专业信息
③提交学生信息到后端更新数据库 首先对各属性值进行前后端绑定如下样式 然后在已有基础上进行修改。
前端代码首先向前端传入当前修改的专业id从后端获取该id下的专业信息。 updateinfo(id){this.form.idid;this.$http.get(admin/StudentServlet?markfindstudentidid).then(resp{this.formresp.data.data;})} 后端代码 Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String mark req.getParameter(mark);if (delete.equals(mark)) {deleteMajor(req, resp);} else if (select.equals(mark)) {selectMajor(req, resp);}else if(update.equals(mark)) {update(req,resp);}}private void update(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter resp.getWriter();CommonData commonData null;try {MajorDao majorDaonew MajorDao();String id req.getParameter(id);Major major majorDao.findmajor(id);commonData new CommonData(200, major, 查询成功);} catch (Exception e) {e.printStackTrace();commonData new CommonData(500, 服务器忙请稍后重试);}ObjectMapper objectMapper new ObjectMapper();String json objectMapper.writeValueAsString(commonData);printWriter.print(json);}
dao层查询 public Major findmajor(String id) throws SQLException {String sqlSELECT NAME,teacher FROM major WHERE id?;;Connection connection DButils.getConnection();PreparedStatement preparedStatementconnection.prepareStatement(sql);preparedStatement.setObject(1,id);ResultSet resultSetpreparedStatement.executeQuery();Major majornew Major();while(resultSet.next()){major.setTeacher(resultSet.getString(teacher));major.setName(resultSet.getString(name));}return major;}
修改之后进行保存。 保存大体上和新增类似依旧使用新增的save()函数向后端传去save字符串 save() {this.$http.post(admin/MajorServlet?marksave, jsonToString(this.form)).then(resp {if (resp.data.code 200) {this.$message({message: resp.data.message,type: success});}this.dialogFormVisible false;this.$router.go(); //更新当前页面})}
后端收到前端传来的请求判断id是否为空。如果id为空说明此时是新增专业如果id不为空说明是修改专业信息从后端传来的id。
所以我们就依据id是否为空来使用分支编写代码。 private void saveMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter resp.getWriter();MajorDao majorDaonew MajorDao();CommonData commonData null;try {String idreq.getParameter(id);String name req.getParameter(name);String teacherreq.getParameter(teacher);String adminToken req.getHeader(userToken);System.out.println(adminToken);DecodedJWT decodedJWT JWTUtil.getTokenInfo(adminToken);int adminid decodedJWT.getClaim(id).asInt();Date date null;if(idnull){if(!majorDao.check(name,teacher)){majorDao.save(name,teacher,adminid);commonData new CommonData(200, 新增成功);}else{System.out.println(课程已存在);commonData new CommonData(202, 课程已存在);}}else//id不为空存在当前专业进行修改操作{if(!majorDao.check(name,teacher)){majorDao.update(id,name,teacher,adminid);commonData new CommonData(200, 修改成功);}else{System.out.println(课程存在无需再增加);commonData new CommonData(202, 课程存在无需再增加);}}} catch (Exception e) {e.printStackTrace();commonData new CommonData(500, 服务器忙请稍后重试);}ObjectMapper objectMapper new ObjectMapper();String json objectMapper.writeValueAsString(commonData);printWriter.print(json);}
在修改专业信息情况下调用dao层。
public void update(String id, String num, String name, String gender, String birthday, String phone, String address, int adminid, String majorid, Date date) throws SQLException {String sqlUPDATE student s SET\n s.num?,\n s.name?,\n s.gender?,\n s.address?,\n s.phone?,\n s.birthday?,\n s.majorid?,\n s.adminid?,\n s.oper_time?\n WHERE id?;;Connection connection DButils.getConnection();PreparedStatement preparedStatementconnection.prepareStatement(sql);preparedStatement.setObject(1,num);preparedStatement.setObject(2,name);preparedStatement.setObject(3,gender);preparedStatement.setObject(4,address);preparedStatement.setObject(5,phone);preparedStatement.setObject(6,birthday);preparedStatement.setObject(7,majorid);preparedStatement.setObject(8,adminid);preparedStatement.setObject(9,new Date());preparedStatement.setObject(10,id);preparedStatement.executeUpdate();} 最后要判断一下如果该专业已经存在那么修改失败。
结果展示 4删除专业 ①点击删除按钮弹出对话框拿到专业id传到后端后端数据库删除
②点击确认删除保存到数据库前端更新页面
前端代码向后端传id和字符串
handleDelete(id) {this.$confirm(此操作将删除当前专业, 是否继续?, 操作提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.$http.get(admin/MajorServlet?markdeleteid id).then(resp {this.$message({message: resp.data.message,type: success});this.$router.go(); //更新当前页面});});}
后端获取数据调用dao删除当前专业
private void deleteMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter resp.getWriter();MajorDao majorDao new MajorDao();CommonData commonData null;try {majorDao.deleteinfo(req.getParameter(id));commonData new CommonData(200, 删除成功);} catch (Exception e) {e.printStackTrace();commonData new CommonData(500, 服务器忙请稍后重试);}ObjectMapper objectMapper new ObjectMapper();String json objectMapper.writeValueAsString(commonData);printWriter.print(json);}
dao
public void deleteinfo(String id) throws SQLException {String sqlDELETE FROM major WHERE id?;Connection connection DButils.getConnection();PreparedStatement preparedStatementconnection.prepareStatement(sql);preparedStatement.setObject(1,id);preparedStatement.executeUpdate();}
