1，點(diǎn)擊專業(yè)管理菜單------查詢所有專業(yè)信息列表

①點(diǎn)擊菜單，切換專業(yè)組件

②切換到列表組件后，向后端發(fā)送請(qǐng)求到Servlet

③調(diào)用DAO層，查詢數(shù)據(jù)庫(kù)（sql），封裝查詢到的內(nèi)容

④從后端向前端做出響應(yīng)

⑤在前端進(jìn)行渲染

網(wǎng)頁(yè)點(diǎn)擊觸發(fā)查詢事件，向后端傳入"select"，后端接收，再響應(yīng)數(shù)據(jù)回到前端。

前端：

<template><div><el-button type="primary">添加專業(yè)信息</el-button><el-table :data="tableData" height="400" border style="width: 100%"><el-table-column prop="id" label="序號(hào)" width="100"></el-table-column><el-table-column prop="name" label="專業(yè)名" width="100"></el-table-column><el-table-column prop="account" label="修改人"></el-table-column><el-table-column  value-format="yyyy-MM-dd HH:mm:ss" prop="oper_time" label="修改時(shí)間" align="center"></el-table-column><el-table-column width="200"><template slot-scope="scope"><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-delete"></el-button></template></el-table-column></el-table></div>
</template>
<script>export default {data() {return {tableData: []}},methods: {},mounted() {this.$http.get("admin/MajorServlet?mark=select").then(resp => {this.tableData = resp.data.data;})}}
</script><style>
</style>

?后端：后端接收數(shù)據(jù)，對(duì)數(shù)據(jù)庫(kù)查詢，獲得數(shù)據(jù)，傳回前端

    private void selectMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter = resp.getWriter();CommonData commonData = null;try {MajorDao majorDao = new MajorDao();List<Major> majorlist = majorDao.majors();commonData = new CommonData(200, majorlist, "查詢成功！");} catch (SQLException throwables) {throwables.printStackTrace();commonData = new CommonData(200, "服務(wù)器忙...請(qǐng)稍后再試！");}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(commonData);printWriter.print(json);}

    public List<Major>majors() throws SQLException {List<Major>list=new ArrayList<>();Connection connection= DButils.getConnection();String sql="SELECT m.id,m.name,a.account,m.oper_time\n" +"FROM major m LEFT JOIN USER a \n" +"ON a.id=m.adminid;";PreparedStatement preparedStatement= connection.prepareStatement(sql);ResultSet resultSet=preparedStatement.executeQuery();while(resultSet.next()){Major major=new 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;}

頁(yè)面顯示結(jié)果：

---

2，新增專業(yè)（要求不能新增已有專業(yè)--查重）?

①點(diǎn)擊新增，打開新增專業(yè)表單

②在表單中動(dòng)態(tài)顯示專業(yè)信息

③輸入專業(yè)信息（查重，使用axios響應(yīng)攔截器）

④點(diǎn)擊保存，提交數(shù)據(jù)到后端，保存到數(shù)據(jù)庫(kù)，前端更新頁(yè)面

前端：

<template><el-dialog title="新增專業(yè)" :visible.sync="dialogFormVisible"><el-form label-width="80px"><el-form-item label="專業(yè)名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="授課老師"><el-input v-model="form.teacher"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save()">確 定</el-button></div></el-dialog>
</template><script>export default {data() {return {dialogFormVisible: false,majorlist: [],form: {name:"",teacher:"",}}},methods: {save() {this.$http.post("admin/MajorServlet?mark=save", jsonToString(this.form)).then(resp => {if (resp.data.code == 200) {this.$message({message: resp.data.message,type: 'success'});this.dialogFormVisible = false;this.$router.go(); //更新當(dāng)前頁(yè)面}})}},mounted() {this.$http.get("admin/StudentServlet?mark=majorselect").then(resp => {this.majorlist = resp.data.data;})}}//將json對(duì)象序列化為鍵=值&鍵=值function jsonToString(jsonobj) {console.log(jsonobj)var str = "";for (var s in jsonobj) {str += s + "=" + jsonobj[s] + "&";}return str.substring(0, str.length - 1);}
</script><style>
</style>

后端： POST請(qǐng)求，傳入save字符串，獲取傳來的數(shù)據(jù)，新增到數(shù)據(jù)庫(kù)。

public class MajorServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String mark=req.getParameter("mark");if("save".equals(mark)){saveMajor(req,resp);}}private void saveMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter = resp.getWriter();MajorDao majorDao=new MajorDao();CommonData commonData = null;try {String id=req.getParameter("id");String name = req.getParameter("name");String teacher=req.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(id==null){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, "服務(wù)器忙，請(qǐng)稍后重試！");}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(commonData);printWriter.print(json);}
}

調(diào)用DAO層，將數(shù)據(jù)打包發(fā)送給前端

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 sql="INSERT INTO major(NAME,adminid," +"oper_time,teacher) " +"VALUES (?,?,?,?);";Connection connection= DButils.getConnection();PreparedStatement preparedStatement=connection.prepareStatement(sql);preparedStatement.setObject(1,name);preparedStatement.setObject(2,adminid);preparedStatement.setObject(3,new Date());preparedStatement.setObject(4,teacher);preparedStatement.executeUpdate();}
}

結(jié)果顯示：

在新增專業(yè)基礎(chǔ)上進(jìn)行查重，如果已經(jīng)存在當(dāng)前新增的專業(yè)和任課老師，則新增失敗。

?我使用了兩個(gè)方法，第一個(gè)是在DAO層數(shù)據(jù)庫(kù)查詢判斷是否為空，為空則返回狀態(tài)值“200”，表示可以新增，否則不可以。

后端：

if(id==null){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 sql="SELECT teacher,name FROM major WHERE teacher=? AND name=?";Connection connection= DButils.getConnection();PreparedStatement preparedStatement=connection.prepareStatement(sql);preparedStatement.setObject(1,teacher);preparedStatement.setObject(2,name);ResultSet resultSet=preparedStatement.executeQuery();return resultSet.next();}

前端：

		methods: {save() {this.$http.post("admin/MajorServlet?mark=save", 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(); //更新當(dāng)前頁(yè)面})}},

第二種方法：

axios響應(yīng)攔截器，類似例子見登錄或注冊(cè)，直接查詢是否存在當(dāng)前賬號(hào)。

以百度賬號(hào)注冊(cè)為例進(jìn)行模仿：

---

3，修改專業(yè)

①點(diǎn)擊修改按鈕，彈出對(duì)話框，拿到專業(yè)id，傳到后端，后端數(shù)據(jù)庫(kù)查詢

②在表單中顯示專業(yè)信息

③提交學(xué)生信息到后端，更新數(shù)據(jù)庫(kù)

?首先對(duì)各屬性值進(jìn)行前后端綁定，如下樣式

然后在已有基礎(chǔ)上進(jìn)行修改。

前端代碼：首先向前端傳入當(dāng)前修改的專業(yè)id，從后端獲取該id下的專業(yè)信息。

			updateinfo(id){this.form.id=id;this.$http.get("admin/StudentServlet?mark=findstudent&id="+id).then(resp=>{this.form=resp.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 majorDao=new 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, "服務(wù)器忙，請(qǐng)稍后重試！");}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(commonData);printWriter.print(json);}

dao層：查詢

    public Major findmajor(String id) throws SQLException {String sql="SELECT NAME,teacher FROM major WHERE id=?;";Connection connection= DButils.getConnection();PreparedStatement preparedStatement=connection.prepareStatement(sql);preparedStatement.setObject(1,id);ResultSet resultSet=preparedStatement.executeQuery();Major major=new Major();while(resultSet.next()){major.setTeacher(resultSet.getString("teacher"));major.setName(resultSet.getString("name"));}return major;}

修改之后，進(jìn)行保存。

?保存大體上和新增類似，依舊使用新增的save()函數(shù)，向后端傳去save字符串，

			save() {this.$http.post("admin/MajorServlet?mark=save", jsonToString(this.form)).then(resp => {if (resp.data.code == 200) {this.$message({message: resp.data.message,type: 'success'});}this.dialogFormVisible = false;this.$router.go(); //更新當(dāng)前頁(yè)面})}

后端收到前端傳來的請(qǐng)求，判斷id是否為空。如果id為空說明此時(shí)是新增專業(yè)，如果id不為空，說明是修改專業(yè)信息，從后端傳來的id。

所以我們就依據(jù)id是否為空來使用分支編寫代碼。

 private void saveMajor(HttpServletRequest req, HttpServletResponse resp) throws IOException {PrintWriter printWriter = resp.getWriter();MajorDao majorDao=new MajorDao();CommonData commonData = null;try {String id=req.getParameter("id");String name = req.getParameter("name");String teacher=req.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(id==null){if(!majorDao.check(name,teacher)){majorDao.save(name,teacher,adminid);commonData = new CommonData(200, "新增成功！");}else{System.out.println("課程已存在！");commonData = new CommonData(202, "課程已存在！");}}else//id不為空，存在當(dāng)前專業(yè)，進(jìn)行修改操作{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, "服務(wù)器忙，請(qǐng)稍后重試！");}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(commonData);printWriter.print(json);}

在修改專業(yè)信息情況下調(diào)用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 sql="UPDATE 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 preparedStatement=connection.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();}

?最后要判斷一下，如果該專業(yè)已經(jīng)存在那么修改失敗。

結(jié)果展示：

---

?4，刪除專業(yè)

?①點(diǎn)擊刪除按鈕，彈出對(duì)話框，拿到專業(yè)id，傳到后端，后端數(shù)據(jù)庫(kù)刪除

②點(diǎn)擊確認(rèn)刪除，保存到數(shù)據(jù)庫(kù)，前端更新頁(yè)面

前端代碼：向后端傳id，和字符串

handleDelete(id) {this.$confirm('此操作將刪除當(dāng)前專業(yè), 是否繼續(xù)?', '操作提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$http.get("admin/MajorServlet?mark=delete&id=" + id).then(resp => {this.$message({message: resp.data.message,type: 'success'});this.$router.go(); //更新當(dāng)前頁(yè)面});});}

后端獲取數(shù)據(jù)，調(diào)用dao刪除當(dāng)前專業(yè)

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, "服務(wù)器忙，請(qǐng)稍后重試！");}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(commonData);printWriter.print(json);}

dao：

public void deleteinfo(String id) throws SQLException {String sql="DELETE FROM major WHERE id=?";Connection connection= DButils.getConnection();PreparedStatement preparedStatement=connection.prepareStatement(sql);preparedStatement.setObject(1,id);preparedStatement.executeUpdate();}