1,点击专业管理菜单------查询所有专业信息列表
①点击菜单,切换专业组件
②切换到列表组件后,向后端发送请求到Servlet
③调用DAO层,查询数据库(sql),封装查询到的内容
④从后端向前端做出响应
⑤在前端进行渲染
网页点击触发查询事件,向后端传入"select",后端接收,再响应数据回到前端。
前端:
<template>
<div>
<el-button type="primary">添加专业信息</el-button>
<el-table :data="tableData" height="400" border style="width: 100%">
<el-table-column prop="id" label="序号" width="100">
</el-table-column>
<el-table-column prop="name" label="专业名" 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="修改时间" 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>
后端:后端接收数据,对数据库查询,获得数据,传回前端
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, "服务器忙...请稍后再试!");
}
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;
}
页面显示结果:
2,新增专业(要求不能新增已有专业--查重)
①点击新增,打开新增专业表单
②在表单中动态显示专业信息
③输入专业信息(查重,使用axios响应拦截器)
④点击保存,提交数据到后端,保存到数据库,前端更新页面
前端:
<template>
<el-dialog title="新增专业" :visible.sync="dialogFormVisible">
<el-form label-width="80px">
<el-form-item label="专业名">
<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(); //更新当前页面
}
})
}
},
mounted() {
this.$http.get("admin/StudentServlet?mark=majorselect").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);
}
</script>
<style>
</style>
后端: POST请求,传入save字符串,获取传来的数据,新增到数据库。
public class MajorServlet extends HttpServlet {
@Override
protected 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, "服务器忙,请稍后重试!");
}
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 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();
}
}
结果显示:
在新增专业基础上进行查重,如果已经存在当前新增的专业和任课老师,则新增失败。
我使用了两个方法,第一个是在DAO层数据库查询判断是否为空,为空则返回状态值“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(); //更新当前页面
})
}
},
第二种方法:
axios响应拦截器,类似例子见登录或注册,直接查询是否存在当前账号。
以百度账号注册为例进行模仿:
3,修改专业
①点击修改按钮,弹出对话框,拿到专业id,传到后端,后端数据库查询
②在表单中显示专业信息
③提交学生信息到后端,更新数据库
首先对各属性值进行前后端绑定,如下样式
然后在已有基础上进行修改。
前端代码:首先向前端传入当前修改的专业id,从后端获取该id下的专业信息。
updateinfo(id){
this.form.id=id;
this.$http.get("admin/StudentServlet?mark=findstudent&id="+id).then(resp=>{
this.form=resp.data.data;
})
}
后端代码:
@Override
protected 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, "服务器忙,请稍后重试!");
}
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;
}
修改之后,进行保存。
保存大体上和新增类似,依旧使用新增的save()函数,向后端传去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(); //更新当前页面
})
}
后端收到前端传来的请求,判断id是否为空。如果id为空说明此时是新增专业,如果id不为空,说明是修改专业信息,从后端传来的id。
所以我们就依据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不为空,存在当前专业,进行修改操作
{
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 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();
}
最后要判断一下,如果该专业已经存在那么修改失败。
结果展示:
4,删除专业
①点击删除按钮,弹出对话框,拿到专业id,传到后端,后端数据库删除
②点击确认删除,保存到数据库,前端更新页面
前端代码:向后端传id,和字符串
handleDelete(id) {
this.$confirm('此操作将删除当前专业, 是否继续?', '操作提示', {
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(); //更新当前页面
});
});
}
后端获取数据,调用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 sql="DELETE FROM major WHERE id=?";
Connection connection= DButils.getConnection();
PreparedStatement preparedStatement=connection.prepareStatement(sql);
preparedStatement.setObject(1,id);
preparedStatement.executeUpdate();
}