目录
二、新增学生openUpdate(scope.row.id)
三、删除 deleteStudent(scope.row.id)
1.在List.vue组件中，编写向后端发送删除请求操作的代码。
2.在StudentServlet中接收学生id，并提交给前端
前后端分离框架图
（一、）分析
本文章仅针对学生管理系统的学生管理进行处理，专业管理与其类似，不予详细代码及解释。
1.学生信息进行增删改查操作
2.数据库设计：
（1.）学生信息表student
CREATE TABLE student( id INT PRIMARY KEY AUTO_INCREMENT, num INT, NAME VARCHAR(10), gender CHAR(1), birthday DATE, phone VARCHAR(15), address VARCHAR(30), majorid INT, adminid INT, oper_time DATETIME )（2.）专业信息表 major
CREATE TABLE major( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(10), adminid INT, oper_time DATETIME )（3.）admin 管理员表
CREATE TABLE admin( id INT PRIMARY KEY AUTO_INCREMENT, account VARCHAR(10), PASSWORD VARCHAR(20) )
3.登录界面(login)和信息管理界面(main)
（二、）编码
1.学生管理功能的入口--->学生管理菜单--->点菜单--->打开一个学生信息列表
-
router下的index.js中创建学生列表的vue组件，注册列表组件
import StudentList from "../views/student/List.vue";//学生列表组件-
定义组件路由
path:"/studentList",
component:StudentList-
在menu标签上添加router属性；
-
在右边区域显示学生列表
由于点击之后学生信息列表直接覆盖整个页面，解决：路由嵌套
-
在router下的index.js下的组件路由中将studentList嵌套进main中
（三、）主要操作
一、查询学生列表数据
1.发送一个http请求查询学生数据
-
发送请求到后端(包含token)，过滤器验证token
//页面打开后，向后端发送请求，获取数据，请求头发送token
this.$http.get("admin/student?mark=list").then((resp) => {
if (resp.data.code == 200) {
this.studentList = resp.data.data;
}
})
2.创建student类封装学生数据
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
public class Student {
private int id;
private int num;
private String name;
private String gender;
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
private Date birthday;
private String phone;
private String address;
private String mName;///专业名称
private String account;//操作人
//jackson组件中进行转换时的格式化标签，可指定日期格式和时区
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
private Date operTime;//操作时间
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getmName() {
return mName;
}
public void setmName(String mName) {
this.mName = mName;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public Date getOperTime() {
return operTime;
}
public void setOperTime(Date operTime) {
this.operTime = operTime;
}
}
3.在后端对查询学生列表的这次请求进行处理
-
创建StudentServlet.配置servlet
<servlet>
<servlet-name>studentServlet</servlet-name>
<servlet-class>com.ffyc.webback.servlet.StudentServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>studentServlet</servlet-name><!--找对应的servlet-->
<url-pattern>/admin/student</url-pattern>
</servlet-mapping>-
创建学生StudentDao,定义一个方法查询所有学生信息，将学生信息封装到一个List中返回即可
public class StudentDao {
public List<Student> students() throws ClassNotFoundException, SQLException {
List<Student> students=new ArrayList<>();
Connection connection = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类
String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai";
String uname = "root";
String pass = "tmm";
connection = DriverManager.getConnection(url, uname, pass);
//预编译
ps = connection.prepareStatement("SELECT\n" +
" s.id,\n" +
" s.num,\n" +
" s.name,\n" +
" s.gender,\n" +
" s.birthday,\n" +
" s.phone,\n" +
" s.address,\n" +
" m.name mname,\n" +
" a.account,\n" +
" s.oper_time\n" +
"FROM student s LEFT JOIN major m ON s.majorid = m.id\n" +
"\t\tLEFT JOIN admin a ON s.majorid = a.id");
ResultSet resultSet = ps.executeQuery();//真正发送sql
while (resultSet.next()) {
Student student=new Student();
student.setId(resultSet.getInt("id"));
student.setNum(resultSet.getInt("num"));
student.setName(resultSet.getString("name"));
student.setGender(resultSet.getString("gender"));
student.setBirthday(resultSet.getDate("birthday"));//年月日
student.setPhone(resultSet.getString("phone"));
student.setAddress(resultSet.getString("address"));
student.setmName(resultSet.getString("mname"));
student.setAccount(resultSet.getString("account"));
student.setOperTime(resultSet.getTimestamp("oper_time"));//年月日时分秒
students.add(student);
}
} finally {
if (ps != null) {
ps.close();
}
if (connection != null) {
connection.close();
}
}
return students;
}
}
4.使用elementui数据表格组件渲染表格
-
为学生列表添加编辑、删除组件(借用ElementUI组件)
-
注意日期格式化，后端使用jackson组件提供的注解解决
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")private Date oper_time;//操作时间<template>
<el-card class="box-card" style="text-align: left;">
<!-- 查询条件 -->
<el-row :gutter="20">
<el-col :span="6">
<el-input placeholder="学号"></el-input>
</el-col>
<el-col :span="6">
<el-input placeholder="姓名"></el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" icon="el-icon-search">查询</el-button>
</el-col>
</el-row>
<br />
<el-button type="primary" icon="el-icon-plus" @click="openAddDialog()">新增</el-button>
<el-table :data="studentList" border style="width: 100%">
<el-table-column prop="num" label="学号" width="100"></el-table-column>
<el-table-column prop="name" label="姓名" width="100"></el-table-column>
<el-table-column prop="gender" label="性别" align="center"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="mName" label="专业"></el-table-column>
<el-table-column prop="account" label="操作人"></el-table-column>
<el-table-column prop="operTime" sortable label="操作时间"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="openUpdate(scope.row.id)">编辑</el-button>
<el-button size="mini" type="danger" @click="deleteStudent(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>5.效果展示
数据都是经过多次删改之后的，所以有点乱，大致样式展示出来即可.
二、新增学生openUpdate(scope.row.id)
（1）点击新增按钮，打开对话框
因新增修改内容较多，建议将新增(Add.vue)和修改(Update.vue)单独放到一个组件中
openAddDialog(){ this.$refs.add.dialogFormVisible=true;//在父组件中调用子组件 }（2）在List组件中导入Add组件
*在List中： import Add from"./App.vue";//导入其他组件 export default { components:{//在List中注册Add组件 Add }, <!-- 放置组件 ref="引用名"--> <Add ref="add"></Add> *在父组件中调用子组件 this.$refs.add.dialogFromVisible=true;//在父组件中调用子组件 *专业下拉框组件 需与后端进行交互，进行数据动态加载
1.操作一：
点击新增按钮打开新增对话框；
并将对话框渲染成所需的数据表格形式；
其中专业数据需动态加载处理，因此向后端发送请求查询专业数据
<template>
<el-dialog title="新增学生" :visible.sync="dialogFormVisible">
<el-form ref="refform" :model="form" :rules="rules">
<el-form-item label="学号" >
<el-input v-model="form.num" autocomplete="off" placeholder="请输入学号!"></el-input>
</el-form-item>
<el-form-item label="姓名" >
<el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名!"></el-input>
</el-form-item>
<el-form-item label="性别" >
<el-radio v-model="form.gender" label="男">男</el-radio>
<el-radio v-model="form.gender" label="女">女</el-radio>
</el-form-item>
<el-form-item label="生日" >
<el-date-picker value-format="yyyy-MM-dd" v-model="form.birthday" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="电话" >
<el-input v-model="form.phone" autocomplete="off" placeholder="请输入电话!"></el-input>
</el-form-item>
<el-form-item label="地址" >
<el-input v-model="form.address" autocomplete="off" placeholder="请输入地址!"></el-input>
</el-form-item>
<el-form-item label="专业" ><!-- 数据在数据库中，需要动态查询 和后端交互 -->
<el-select v-model="form.majorid" placeholder="请选择">
<el-option
v-for="major in majorList"
:key="major.id"
:label="major.name"
:value="major.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="warning" @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary">保存</el-button>
</div>
</el-dialog>
</template>
<script>
export default{
data(){
return{
dialogFormVisible:false,//默认对话框关闭
majorList:[],
form:{
num:"",
name:"",
gender:"男",
birthday:"",
phone:"",
address:"",
majorid:""
},
rules: {
num: [
{ required: true, message: '请输入学号!', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入姓名!', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
phone:[
{required:true, message: '请输入电话!', trigger: 'blur' },
{ min: 3, max: 5, message: '长度为10', trigger: 'blur' }
],
address:[
{required:true, message: '请输入地址!', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods:{
},
mounted(){
//向后端发送请求，查询专业信息
this.$http.get("admin/student?mark=major").then((resp) => {
if (resp.data.code == 200) {
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>
2.在StudentServlet中进行数据接收
后端在StudentServlet中进行数据接收并通过StudentDao与后端进行交互，进行数据处理，并提交给前端。
private void findMajorList(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter pt=resp.getWriter();
CommonResult commonResult=null;
try{
StudentDao studentDao=new StudentDao();
List<Major> majorList=studentDao.majorList();
commonResult=new CommonResult(200,majorList,"查询成功");
}catch (Exception e){
e.printStackTrace();
commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
pt.print(json);
}3.在StudentDao中与数据库进行交互
public List<Major> majorList() throws ClassNotFoundException, SQLException {
List<Major> list=new ArrayList<>();
Connection connection = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类
String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai";
String uname = "root";
String pass = "***";
connection = DriverManager.getConnection(url, uname, pass);
//预编译
ps = connection.prepareStatement("select id,name from major");
ResultSet resultSet = ps.executeQuery();//真正发送sql
while (resultSet.next()) {
Major major=new Major();
major.setId(resultSet.getInt("id"));
major.setName(resultSet.getString("name"));
list.add(major);
}
} finally {
if (ps != null) {
ps.close();
}
if (connection != null) {
connection.close();
}
}
return list;
}4.效果展示
点击新增按钮，打开新增界面，将学生数据输入；打开专业下拉框，可得到数据库中专业表major的专业信息
三、删除 deleteStudent(scope.row.id)
点击删除按钮，通过学生id，删除学生；
需要注意的是：
有多个get请求，后端只有一个doget(),通过传参(mark),在后端区别操作
删除时，弹框提示
删除后，更新列表 this.$router.go();
1.在List.vue组件中，编写向后端发送删除请求操作的代码。
//删除
deleteStudent(id){
this.$confirm('您确定要删除吗?', '操作提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//向后端发送删除请求操作
this.$http.get("admin/student?mark=delete&id="+id).then((resp)=>{
if(resp.data.code==200){
this.$router.go();//重载达当前组件
}
});
});
}2.在后端StudentServlet中接收前端发来的请求
private void deleteStudent(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter pt=resp.getWriter();
CommonResult commonResult=null;
try{
String id=req.getParameter("id");
StudentDao studentDao=new StudentDao();
studentDao.deleteStudent(id);
commonResult=new CommonResult(200,null,"删除成功");
}catch (Exception e){
e.printStackTrace();
commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
pt.print(json);
}
3.在后端StudentDao中与数据库进行交互
//删除学生信息
public void deleteStudent(String id) throws SQLException, ClassNotFoundException {
Connection connection = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类
String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai";
String uname = "root";
String pass = "***";
connection = DriverManager.getConnection(url,uname,pass);
//预编译
ps = connection.prepareStatement("DELETE FROM student WHERE id=?");
ps.setObject(1,id);
ps.executeUpdate();
} finally {
if (connection != null) {
connection.close();
}
if(ps!=null){
ps.close();
}
}
}4.效果展示
点击删除按钮，删除学号为4的学生
点击确定，即可删除
数据库中的信息随之动态变化
四、保存学生信息save
在新增学生信息的基础上进行保存；
1.点击保存按钮，在前端发送请求
methods:{
save(refform){
this.$refs[refform].validate((valid)=>{
if(valid){
this.$http.post("admin/student",jsonToString(this.form)).then((resp) => {
if (resp.data.code == 200) {
this.$message({message:resp.data.message,type: 'success'});
this.dialogFormVisible = false;//关闭窗口
this.$router.go();//刷新当前列表
}
})
}
})
}
}2.在后端StudentServlet中接收前端发来的请求
//保存
private void saveStudent(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter pt=resp.getWriter();
CommonResult commonResult=null;
try{
//接收学生信息
String id=req.getParameter("id");
String num=req.getParameter("num");
String name=req.getParameter("name");
String gender=req.getParameter("gender");
String birthday=req.getParameter("birthday");
String phone=req.getParameter("phone");
String address=req.getParameter("address");
String majorid=req.getParameter("majorid");
//需要从token中获取当前登录人id
//获取请求头中的token
String token=req.getHeader("token");
DecodedJWT tokenInfo = JWTUtil.getTokenInfo(token);//解析token
//获取当前登录人id
Integer adminid=tokenInfo.getClaim("id").asInt();
//和数据库进行交互
StudentDao studentDao=new StudentDao();
studentDao.saveStudent(num,name,gender,birthday,phone,address,
majorid,adminid);
commonResult=new CommonResult(200,null,"保存成功");
}catch (Exception e){
e.printStackTrace();
commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
pt.print(json);
}
3.与数据库交互，将数据保存至数据库中
public void saveStudent(String num, String name, String gender, String birthday, String phone, String address, String majorid,Integer adminid) throws ClassNotFoundException, SQLException {
Connection connection = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类
String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai";
String uname = "root";
String pass = "***";
connection = DriverManager.getConnection(url, uname, pass);
//预编译
ps = connection.prepareStatement("insert into student(num,name,gender,birthday,phone,address,majorid,adminid,oper_time)" +
"values(?,?,?,?,?,?,?,?,?)");
ps.setObject(1,num);
ps.setObject(2,name);
ps.setObject(3,gender);
ps.setObject(4,birthday);
ps.setObject(5,phone);
ps.setObject(6,address);
ps.setObject(7,majorid);
ps.setObject(8,adminid);
ps.setObject(9,new java.util.Date());
ps.executeUpdate();
} finally {
if (ps != null) {
ps.close();
}
if (connection != null) {
connection.close();
}
}
}4.效果展示
点击保存按钮，数据直接保存在页面所显示的学生数据列表中，数据库的学生信息也随之改变。
五、修改学生信息openUpdate
1.先得到学生id
2.点击编辑按钮，打开对话框
3.同时根据id查询学生信息
4.在表单中显示学生信息
5.修改学生信息
6.提交学生信息到后端
7.保存信息到数据库(与打开新增对话框保存学生信息一样，这里不做过多介绍)
1.通过与数据库交互得到学生id
public Student findStudentById(String id) throws ClassNotFoundException, SQLException {
Student student=new Student();
Connection connection = null;
PreparedStatement ps = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类
String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai";
String uname = "root";
String pass = "tmm";
connection = DriverManager.getConnection(url, uname, pass);
//预编译
ps = connection.prepareStatement("SELECT \n" +
" s.id,\n" +
" s.num,\n" +
" s.name,\n" +
" s.gender,\n" +
" s.birthday,\n" +
" s.phone,\n" +
" s.address,\n" +
" s.majorid\n" +
"FROM student s WHERE s.id=?");
ps.setObject(1,id);
ResultSet resultSet=ps.executeQuery();
while(resultSet.next()){
student.setId(resultSet.getInt("id"));
student.setNum(resultSet.getInt("num"));
student.setName(resultSet.getString("name"));
student.setGender(resultSet.getString("gender"));
student.setBirthday(resultSet.getDate("birthday"));//年月日
student.setPhone(resultSet.getString("phone"));
student.setAddress(resultSet.getString("address"));
student.setMajorid(resultSet.getInt("majorid"));
}
} finally {
if (ps != null) {
ps.close();
}
if (connection != null) {
connection.close();
}
}
return student;
}2.在StudentServlet中接收学生id，并提交给前端
private void findStudentById(HttpServletRequest req, HttpServletResponse resp) throws IOException {
PrintWriter pt=resp.getWriter();
CommonResult commonResult=null;
try{
//和数据库进行交互
StudentDao studentDao=new StudentDao();
//接收学生id
String id=req.getParameter("id");
Student student=studentDao.findStudentById(id);
commonResult=new CommonResult(200,student,"查询成功");
}catch (Exception e){
e.printStackTrace();
commonResult=new CommonResult(500,null,"系统忙"+e.getMessage());
}
ObjectMapper objectMapper=new ObjectMapper();
String json=objectMapper.writeValueAsString(commonResult);
pt.print(json);
}3.前端接收后端响应回来的数据并将数据赋给编辑表单
//根据id查询学生信息
findStudentById(id){
//向后端发送请求
this.$http.get("admin/student?mark=findStudentById&id="+id).then((resp) => {
if (resp.data.code == 200) {
//显示学生信息
this.form.id=resp.data.data.id;
this.form.num=resp.data.data.num;//将后端响应回来的数据赋给表单中的num
this.form.name=resp.data.data.name;
this.form.gender=resp.data.data.gender;
this.form.birthday=resp.data.data.birthday;
this.form.phone=resp.data.data.phone;
this.form.address=resp.data.data.address;
this.form.majorid=resp.data.data.majorid;
}
})
}4.效果展示：
点击编辑学号为103的学生，修改其学号为104，名字为csdn1，点击保存
六、总体代码
HBuilder
student目录下
List.vue组件
<template> <el-card class="box-card" style="text-align: left;"> <!-- 查询条件 --> <el-row :gutter="20"> <el-col :span="6"> <el-input placeholder="学号"></el-input> </el-col> <el-col :span="6"> <el-input placeholder="姓名"></el-input> </el-col> <el-col :span="6"> <el-button type="primary" icon="el-icon-search">查询</el-button> </el-col> </el-row> <br /> <el-button type="primary" icon="el-icon-plus" @click="openAddDialog()">新增</el-button> <el-table :data="studentList" border style="width: 100%"> <el-table-column prop="num" label="学号" width="100"></el-table-column> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="gender" label="性别" align="center"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column prop="mName" label="专业"></el-table-column> <el-table-column prop="account" label="操作人"></el-table-column> <el-table-column prop="operTime" sortable label="操作时间"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="openUpdate(scope.row.id)">编辑</el-button> <el-button size="mini" type="danger" @click="deleteStudent(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 3.放置组件 ref="引用名"--> <Add ref="add"></Add> <Update ref="update"></Update> </el-card> </template> <script> import Add from "./Add.vue";//1.导入其他组件 import Update from "./Update.vue"; export default { components:{//2.在List中注册Add组件 Add, Update }, data() { return { studentList: [] } }, methods: { //新增打开对话框 openAddDialog(){ this.$refs.add.dialogFormVisible=true;//在父组件中调用子组件 }, //打开修改对话框 openUpdate(id){ this.$refs.update.dialogFormVisible=true; this.$refs.update.findStudentById(id);//在父组件中调用子组件的方法 }, //删除 deleteStudent(id){ this.$confirm('您确定要删除吗?', '操作提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //向后端发送删除请求操作 this.$http.get("admin/student?mark=delete&id="+id).then((resp)=>{ if(resp.data.code==200){ this.$router.go();//重载达当前组件 } }); }); } }, mounted() { //页面打开后，向后端发送请求，获取数据，请求头发送token this.$http.get("admin/student?mark=list").then((resp) => { if (resp.data.code == 200) { this.studentList = resp.data.data; } }) } } </script> <style> </style>Add.vue
<template> <el-dialog title="新增学生" :visible.sync="dialogFormVisible"> <el-form ref="refform" :model="form" :rules="rules"> <el-form-item label="学号" > <el-input v-model="form.num" autocomplete="off" placeholder="请输入学号!"></el-input> </el-form-item> <el-form-item label="姓名" > <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名!"></el-input> </el-form-item> <el-form-item label="性别" > <el-radio v-model="form.gender" label="男">男</el-radio> <el-radio v-model="form.gender" label="女">女</el-radio> </el-form-item> <el-form-item label="生日" > <el-date-picker value-format="yyyy-MM-dd" v-model="form.birthday" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> <el-form-item label="电话" > <el-input v-model="form.phone" autocomplete="off" placeholder="请输入电话!"></el-input> </el-form-item> <el-form-item label="地址" > <el-input v-model="form.address" autocomplete="off" placeholder="请输入地址!"></el-input> </el-form-item> <el-form-item label="专业" ><!-- 数据在数据库中，需要动态查询 和后端交互 --> <el-select v-model="form.majorid" placeholder="请选择"> <el-option v-for="major in majorList" :key="major.id" :label="major.name" :value="major.id"> </el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="warning" @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="save('refform')">保存</el-button> </div> </el-dialog> </template> <script> export default{ data(){ return{ dialogFormVisible:false,//默认对话框关闭 majorList:[], form:{ num:"", name:"", gender:"男", birthday:"", phone:"", address:"", majorid:"", mark:"save" /* 因post不能在地址里传 */ }, rules: { num: [ { required: true, message: '请输入学号!', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], name: [ { required: true, message: '请输入姓名!', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], phone:[ {required:true, message: '请输入电话!', trigger: 'blur' }, { min: 3, max: 5, message: '长度为10', trigger: 'blur' } ], address:[ {required:true, message: '请输入地址!', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ] } } }, methods:{ save(refform){ this.$refs[refform].validate((valid)=>{ if(valid){ this.$http.post("admin/student",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/student?mark=major").then((resp) => { if (resp.data.code == 200) { 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>Update.vue
<template> <el-dialog title="修改学生" :visible.sync="dialogFormVisible"> <el-form :model="form"> <el-form-item label="学号" > <el-input v-model="form.num" autocomplete="off" placeholder="请输入学号!"></el-input> </el-form-item> <el-form-item label="姓名" > <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名!"></el-input> </el-form-item> <el-form-item label="性别" > <el-radio v-model="form.gender" label="男">男</el-radio> <el-radio v-model="form.gender" label="女">女</el-radio> </el-form-item> <el-form-item label="生日" > <el-date-picker value-format="yyyy-MM-dd" v-model="form.birthday" type="date" placeholder="选择日期"></el-date-picker> </el-form-item> <el-form-item label="电话" > <el-input v-model="form.phone" autocomplete="off" placeholder="请输入电话!"></el-input> </el-form-item> <el-form-item label="地址" > <el-input v-model="form.address" autocomplete="off" placeholder="请输入地址!"></el-input> </el-form-item> <el-form-item label="专业" ><!-- 数据在数据库中，需要动态查询 和后端交互 --> <el-select v-model="form.majorid" placeholder="请选择"> <el-option v-for="major in majorList" :key="major.id" :label="major.name" :value="major.id"> </el-option> </el-select> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="warning" @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:{ id:"",//虽然不显示，但要提交，修改时作为唯一标识 num:"", name:"", gender:"男", birthday:"", phone:"", address:"", majorid:"", mark:"save" } } }, methods:{ //保存学生信息 save(){ this.$http.post("admin/student",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查询学生信息 findStudentById(id){ //向后端发送请求 this.$http.get("admin/student?mark=findStudentById&id="+id).then((resp) => { if (resp.data.code == 200) { //显示学生信息 this.form.id=resp.data.data.id; this.form.num=resp.data.data.num;//将后端响应回来的数据赋给表单中的num this.form.name=resp.data.data.name; this.form.gender=resp.data.data.gender; this.form.birthday=resp.data.data.birthday; this.form.phone=resp.data.data.phone; this.form.address=resp.data.data.address; this.form.majorid=resp.data.data.majorid; } }) } }, mounted(){ //向后端发送请求，查询专业信息 this.$http.get("admin/student?mark=major").then((resp) => { if (resp.data.code == 200) { 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>
后端idea
StudentServlet
package com.ffyc.webback.servlet; import com.auth0.jwt.interfaces.DecodedJWT; import com.fasterxml.jackson.databind.ObjectMapper; import com.ffyc.webback.dao.StudentDao; import com.ffyc.webback.model.CommonResult; import com.ffyc.webback.model.Major; import com.ffyc.webback.model.Student; import com.ffyc.webback.util.JWTUtil; import javax.servlet.ServletException; 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; /* 学生后端处理的servlet程序 */ public class StudentServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String mark=req.getParameter("mark"); if("list".equals(mark)){ findStudentList(req,resp); } if("delete".equals(mark)){ deleteStudent(req,resp); } if("major".equals(mark)){ findMajorList(req,resp); } if("findStudentById".equals(mark)){ findStudentById(req,resp); } } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String mark=req.getParameter("mark"); if("save".equals(mark)){ saveStudent(req,resp); } } private void findStudentById(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter pt=resp.getWriter(); CommonResult commonResult=null; try{ //和数据库进行交互 StudentDao studentDao=new StudentDao(); //接收学生id String id=req.getParameter("id"); Student student=studentDao.findStudentById(id); commonResult=new CommonResult(200,student,"查询成功"); }catch (Exception e){ e.printStackTrace(); commonResult=new CommonResult(500,null,"系统忙"+e.getMessage()); } ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(commonResult); pt.print(json); } //保存 private void saveStudent(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter pt=resp.getWriter(); CommonResult commonResult=null; try{ //接收学生信息 String id=req.getParameter("id"); String num=req.getParameter("num"); String name=req.getParameter("name"); String gender=req.getParameter("gender"); String birthday=req.getParameter("birthday"); String phone=req.getParameter("phone"); String address=req.getParameter("address"); String majorid=req.getParameter("majorid"); //需要从token中获取当前登录人id //获取请求头中的token String token=req.getHeader("token"); DecodedJWT tokenInfo = JWTUtil.getTokenInfo(token);//解析token //获取当前登录人id Integer adminid=tokenInfo.getClaim("id").asInt(); //和数据库进行交互 StudentDao studentDao=new StudentDao(); if(id==null){//新增 studentDao.saveStudent(num,name,gender,birthday,phone,address,majorid,adminid); }else{//修改 studentDao.updateStudent(id,num,name,gender,birthday,phone,address,majorid,adminid); } commonResult=new CommonResult(200,null,"保存成功"); }catch (Exception e){ e.printStackTrace(); commonResult=new CommonResult(500,null,"系统忙"+e.getMessage()); } ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(commonResult); pt.print(json); } private void findMajorList(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter pt=resp.getWriter(); CommonResult commonResult=null; try{ StudentDao studentDao=new StudentDao(); List<Major> majorList=studentDao.majorList(); commonResult=new CommonResult(200,majorList,"查询成功"); }catch (Exception e){ e.printStackTrace(); commonResult=new CommonResult(500,null,"系统忙"+e.getMessage()); } ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(commonResult); pt.print(json); } private void deleteStudent(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter pt=resp.getWriter(); CommonResult commonResult=null; try{ String id=req.getParameter("id"); StudentDao studentDao=new StudentDao(); studentDao.deleteStudent(id); commonResult=new CommonResult(200,null,"删除成功"); }catch (Exception e){ e.printStackTrace(); commonResult=new CommonResult(500,null,"系统忙"+e.getMessage()); } ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(commonResult); pt.print(json); } private void findStudentList(HttpServletRequest req, HttpServletResponse resp) throws IOException { PrintWriter pt=resp.getWriter(); CommonResult commonResult=null; try{ StudentDao studentDao=new StudentDao(); List<Student> studentList=studentDao.students(); commonResult=new CommonResult(200,studentList,"查询成功"); }catch (Exception e){ e.printStackTrace(); commonResult=new CommonResult(500,null,"系统忙"+e.getMessage()); } ObjectMapper objectMapper=new ObjectMapper(); String json=objectMapper.writeValueAsString(commonResult); pt.print(json); } }StudentDao
package com.ffyc.webback.dao; import com.ffyc.webback.model.Major; import com.ffyc.webback.model.Student; import java.sql.*; import java.util.ArrayList; import java.util.List; public class StudentDao { public List<Student> students() throws ClassNotFoundException, SQLException { List<Student> students=new ArrayList<>(); Connection connection = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类 String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai"; String uname = "root"; String pass = "***"; connection = DriverManager.getConnection(url, uname, pass); //预编译 ps = connection.prepareStatement("SELECT\n" + " s.id,\n" + " s.num,\n" + " s.name,\n" + " s.gender,\n" + " s.birthday,\n" + " s.phone,\n" + " s.address,\n" + " m.name mname,\n" + " a.account,\n" + " s.oper_time\n" + "FROM student s LEFT JOIN major m ON s.majorid = m.id\n" + "\t\tLEFT JOIN admin a ON s.majorid = a.id"); ResultSet resultSet = ps.executeQuery();//真正发送sql while (resultSet.next()) { Student student=new Student(); student.setId(resultSet.getInt("id")); student.setNum(resultSet.getInt("num")); student.setName(resultSet.getString("name")); student.setGender(resultSet.getString("gender")); student.setBirthday(resultSet.getDate("birthday"));//年月日 student.setPhone(resultSet.getString("phone")); student.setAddress(resultSet.getString("address")); student.setmName(resultSet.getString("mname")); student.setAccount(resultSet.getString("account")); student.setOperTime(resultSet.getTimestamp("oper_time"));//年月日时分秒 students.add(student); } } finally { if (ps != null) { ps.close(); } if (connection != null) { connection.close(); } } return students; } //删除学生信息 public void deleteStudent(String id) throws SQLException, ClassNotFoundException { Connection connection = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类 String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai"; String uname = "root"; String pass = "***"; connection = DriverManager.getConnection(url,uname,pass); //预编译 ps = connection.prepareStatement("DELETE FROM student WHERE id=?"); ps.setObject(1,id); ps.executeUpdate(); } finally { if (connection != null) { connection.close(); } if(ps!=null){ ps.close(); } } } public List<Major> majorList() throws ClassNotFoundException, SQLException { List<Major> list=new ArrayList<>(); Connection connection = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类 String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai"; String uname = "root"; String pass = "***"; connection = DriverManager.getConnection(url, uname, pass); //预编译 ps = connection.prepareStatement("select id,name from major"); ResultSet resultSet = ps.executeQuery();//真正发送sql while (resultSet.next()) { Major major=new Major(); major.setId(resultSet.getInt("id")); major.setName(resultSet.getString("name")); list.add(major); } } finally { if (ps != null) { ps.close(); } if (connection != null) { connection.close(); } } return list; } public void saveStudent(String num, String name, String gender, String birthday, String phone, String address, String majorid,Integer adminid) throws ClassNotFoundException, SQLException { Connection connection = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类 String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai"; String uname = "root"; String pass = "***"; connection = DriverManager.getConnection(url, uname, pass); //预编译 ps = connection.prepareStatement("insert into student(num,name,gender,birthday,phone,address,majorid,adminid,oper_time)" + "values(?,?,?,?,?,?,?,?,?)"); ps.setObject(1,num); ps.setObject(2,name); ps.setObject(3,gender); ps.setObject(4,birthday); ps.setObject(5,phone); ps.setObject(6,address); ps.setObject(7,majorid); ps.setObject(8,adminid); ps.setObject(9,new java.util.Date()); ps.executeUpdate(); } finally { if (ps != null) { ps.close(); } if (connection != null) { connection.close(); } } } public Student findStudentById(String id) throws ClassNotFoundException, SQLException { Student student=new Student(); Connection connection = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类 String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai"; String uname = "root"; String pass = "***"; connection = DriverManager.getConnection(url, uname, pass); //预编译 ps = connection.prepareStatement("SELECT \n" + " s.id,\n" + " s.num,\n" + " s.name,\n" + " s.gender,\n" + " s.birthday,\n" + " s.phone,\n" + " s.address,\n" + " s.majorid\n" + "FROM student s WHERE s.id=?"); ps.setObject(1,id); ResultSet resultSet=ps.executeQuery(); while(resultSet.next()){ student.setId(resultSet.getInt("id")); student.setNum(resultSet.getInt("num")); student.setName(resultSet.getString("name")); student.setGender(resultSet.getString("gender")); student.setBirthday(resultSet.getDate("birthday"));//年月日 student.setPhone(resultSet.getString("phone")); student.setAddress(resultSet.getString("address")); student.setMajorid(resultSet.getInt("majorid")); } } finally { if (ps != null) { ps.close(); } if (connection != null) { connection.close(); } } return student; } public void updateStudent(String id, String num, String name, String gender, String birthday, String phone, String address, String majorid, Integer adminid) throws ClassNotFoundException, SQLException { Connection connection = null; PreparedStatement ps = null; try { Class.forName("com.mysql.cj.jdbc.Driver");//动态加载Driver类 String url = "jdbc:mysql://127.0.0.1:3306/webdb?serverTimezone=Asia/Shanghai"; String uname = "root"; String pass = "***"; connection = DriverManager.getConnection(url, uname, pass); //预编译 ps = connection.prepareStatement("update student set num=?,name=?,gender=?,birthday=?," + "phone=?,address=?,majorid=?,adminid=?,oper_time=? where id=?"); ps.setObject(1,num); ps.setObject(2,name); ps.setObject(3,gender); ps.setObject(4,birthday); ps.setObject(5,phone); ps.setObject(6,address); ps.setObject(7,majorid); ps.setObject(8,adminid); ps.setObject(9,new java.util.Date()); ps.setObject(10,id); ps.executeUpdate(); } finally { if (ps != null) { ps.close(); } if (connection != null) { connection.close(); } } } }Student类
package com.ffyc.webback.model; import com.fasterxml.jackson.annotation.JsonFormat; import java.util.Date; public class Student { private int id; private int num; private String name; private String gender; @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8") private Date birthday; private String phone; private String address; private String mName;///专业名称 private String account;//操作人 private int majorid; //jackson组件中进行转换时的格式化标签，可指定日期格式和时区 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") private Date operTime;//操作时间 public int getMajorid() { return majorid; } public void setMajorid(int majorid) { this.majorid = majorid; } public int getId() { return id; } public void setId(int id) { this.id = id; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public Date getBirthday() { return birthday; } public void setBirthday(Date birthday) { this.birthday = birthday; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public String getmName() { return mName; } public void setmName(String mName) { this.mName = mName; } public String getAccount() { return account; } public void setAccount(String account) { this.account = account; } public Date getOperTime() { return operTime; } public void setOperTime(Date operTime) { this.operTime = operTime; } }
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
