利用elementUI做了一個簡單的學生管理系統，主要包括基礎的增刪改查，模糊搜索以及分頁，若本文對你有所幫助，請一鍵三連，
首先搭建Maven專案，匯入相關的包以及組態檔
前端：
<!DOCTYPE html>
<html lang="en">
<title>Title</title>
<head>
<meta charset="UTF-8">
<script src="js/node_modules/axios/dist/axios.js"></script>
<script src="js/node_modules/vue/dist/vue.js"></script>
<script src="js/node_modules/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="js/node_modules/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<el-form :model="page">
<el-form-item label="名字" :label-width="formLabelWidth">
<el-input v-model="page.name" autocomplete="off"></el-input>
</el-form-item>
<div class="block">
<span class="demonstration"></span>
<el-date-picker
v-model="page.time"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
<el-form-item label="教師" :label-width="formLabelWidth">
<el-select v-model="page.did" placeholder="請選擇部門">
<el-option value=""></el-option>
<el-option v-for="a in dept" :label="a.name" :value="a.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<el-button type="primary" @click="anniu">添加</el-button>
<el-button type="primary" @click="findAll">搜索</el-button>
<el-button type="primary" @click="delAll">批量洗掉</el-button>
<el-table ref="multipleTable" :data="alist" style="width: 100%" @selection-change="handleSelectionChange"> >
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column prop="id" label="編號" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column label="性別" width="180">
<template slot-scope="scope">
<span>{{ scope.row.sex == '1' ? '男' : '女'}}</span>
</template>
</el-table-column>
<el-table-column prop="hobby" label="愛好" width="180"></el-table-column>
<el-table-column prop="time" label="時間" width="180"></el-table-column>
<el-table-column label="狀態" width="180">
<template slot-scope="scope">
<span>{{ scope.row.state == '1' ? '畢業' : '未畢業'}}</span>
</template>
</el-table-column>
<el-table-column prop="cname" label="教師" width="180"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit( scope.row)">編輯
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete( scope.row)">洗掉
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.pageNum"
:page-sizes="[2, 6, 8, 10]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
</template>
<el-dialog title="學生的添加" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="名字" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性別" :label-width="formLabelWidth">
<el-select v-model="form.sex" placeholder="請選擇性別">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="愛好">
<el-checkbox-group v-model="checkList">
<el-checkbox label="籃球"></el-checkbox>
<el-checkbox label="足球"></el-checkbox>
<el-checkbox label="排球"></el-checkbox>
<el-checkbox label="棒球"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<div class="block">
<span class="demonstration">默認</span>
<el-date-picker
v-model="form.time"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
<el-form-item label="狀態" :label-width="formLabelWidth">
<el-select v-model="form.state" placeholder="請選擇性別">
<el-option label="畢業" value="1"></el-option>
<el-option label="未畢業" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="教師" :label-width="formLabelWidth">
<el-select v-model="form.did" placeholder="請選擇教師">
<el-option v-for="a in dept" :label="a.name" :value="a.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="add">確 定</el-button>
</div>
</el-dialog>
<el-dialog title="學生的添加" :visible.sync="dialogFormVisible5">
<el-form :model="form">
<el-form-item label="名字" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性別" :label-width="formLabelWidth">
<el-select v-model="form.sex" placeholder="請選擇性別">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="愛好">
<el-checkbox-group v-model="checkList">
<el-checkbox label="籃球"></el-checkbox>
<el-checkbox label="足球"></el-checkbox>
<el-checkbox label="排球"></el-checkbox>
<el-checkbox label="棒球"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<div class="block">
<span class="demonstration">默認</span>
<el-date-picker
v-model="form.time"
type="date"
placeholder="選擇日期">
</el-date-picker>
</div>
<el-form-item label="狀態" :label-width="formLabelWidth">
<el-select v-model="form.state" placeholder="請選擇性別">
<el-option label="畢業" value="1"></el-option>
<el-option label="未畢業" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="教師" :label-width="formLabelWidth">
<el-select v-model="form.did" placeholder="請選擇教師">
<el-option v-for="a in dept" :label="a.name" :value="a.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible5 = false">取 消</el-button>
<el-button type="primary" @click="update">確 定</el-button>
</div>
</el-dialog>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
alist: {},
student: {},
checkList: [],
form: {},
dialogFormVisible: false,
dialogFormVisible5: false,
page:{
pageSize:2,
pageNum:1,
total:0,
name:"",
did:null,
time:null,
},
multipleSelection:[],
},
methods: {
findAll() {
axios.post("show.do", this.page).then(res => {
this.alist = res.data.list;
this.page.total = res.data.total;
})
},
add() {
this.form.hobby = this.checkList.join(",")
axios.post("add.do", this.form).then(res => {
if (res.data == true) {
this.$message({
message: "添加成功",
type: 'success'
})
this.dialogFormVisible = false;
this.findAll()
} else {
this.$message.error("資料添加錯誤")
}
})
},
update() {
this.form.hobby = this.checkList.join(",")
axios.post("update.do", this.form).then(res => {
if (res.data == true) {
this.$message({
message: "修改成功",
type: 'success'
})
this.dialogFormVisible5 = false;
this.findAll()
} else {
this.$message.error("資料添加錯誤")
}
})
},
handleEdit(row){
this.dialogFormVisible5 = true;
this.form=row;
this.checkList= row.hobby.split(",")
},
delAll(){
this.$confirm("是否洗掉").then(res=>{
axios.post("delAll.do?",this.multipleSelection).then(res => {
if (res.data == true) {
this.$message({
message: "洗掉成功",
type: 'success'
})
this.findAll()
} else {
this.$message.error("資料添加錯誤")
}
})
})
},
handleDelete(row){
this.$confirm("是否洗掉").then(res=>{
axios.post("del.do?id="+row.id).then(res => {
if (res.data == true) {
this.$message({
message: "洗掉成功",
type: 'success'
})
this.findAll()
} else {
this.$message.error("資料添加錯誤")
}
})
})
},
bu(){
axios.post("bu.do").then(res => {
this.dept = res.data;
})
},
anniu() {
this.dialogFormVisible = true;
this.checkList=[];
this.form={};
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleSizeChange(val) {
this.page.pageSize=val
this.findAll();
},
handleCurrentChange(val) {
this.page.pageNum=val
this.findAll();
},
},
created() {
this.findAll();
this.bu();
}
})
</script>
</html>效果展示：
Controller:
package com.jiyun.controller;
import com.github.pagehelper.PageInfo;
import com.jiyun.mapper.TeacherMapper;
import com.jiyun.pojo.PageTvo;
import com.jiyun.pojo.Student;
import com.jiyun.pojo.Teacher;
import com.jiyun.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class StudentController {
@Autowired
StudentService b;
@Autowired
TeacherMapper d;
@RequestMapping("show")
public PageInfo<Student> show(@RequestBody PageTvo pageTvo){
return b.show(pageTvo);
}
// 教師
@RequestMapping("bu")
public List<Teacher> bu(){
return d.show();
}
@RequestMapping("add")
public Boolean add(@RequestBody Student student){
b.add(student);
return true;
}
//修改
@RequestMapping("update")
public Boolean update(@RequestBody Student student){
b.update(student);
return true;
}
@RequestMapping("del")
public Boolean del( Integer id){
b.del(id);
return true;
}
// 多選洗掉
@RequestMapping("delAll")
public Boolean delAll( @RequestBody List<Student> students){
for (Student student : students) {
b.del(student.getId());
}
return true;
}
}
封裝分頁資訊：
Service:
package com.jiyun.service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jiyun.mapper.StudentMapper;
import com.jiyun.pojo.PageTvo;
import com.jiyun.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Date;
import java.util.List;
@Service
public class StudentService {
@Autowired
StudentMapper b;
public PageInfo<Student> show(PageTvo pageTvo) {
//分頁
PageHelper.startPage(pageTvo.getPageNum(),pageTvo.getPageSize());
// 獲取封裝里面的資料
Integer did = pageTvo.getDid();
String name = pageTvo.getName();
Date time = pageTvo.getTime();
//
//存入物件
Student student = new Student();
student.setName(name);
student.setDid(did);
student.setTime(time);
List<Student> show = b.show(student);
PageInfo<Student> studentPageInfo = new PageInfo<Student>(show);
return studentPageInfo;
}
public void add(Student student) {
b.add(student);
}
public void update(Student student) {
b.update(student);
}
public void del(Integer id) {
b.del(id);
}
}
Mapper:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--表示這個mapper中可以寫那個介面中方法的sql陳述句-->
<mapper namespace="com.jiyun.mapper.StudentMapper">
<!--id必須和介面中的某個方法名一樣
resultType id屬性對應的方法的回傳值
-->
<select id="show" resultType="Student" parameterType="Student" >
select s.*,t.name cname from student s join teacher t on s.did = t.id
<if test="name!=null and name!=''">
where s.name like '%${name}%'
</if>
<if test="did!=null and did!=0">
where s.did=#{did}
</if>
<if test="time!=null and time!=''">
where time gt=#{time}
</if>
</select>
<insert id="add" parameterType="Student">
insert into student (name, sex, hobby, time, state,did)
values (#{name},#{sex},#{hobby},#{time},#{state},#{did});
</insert>
<update id="update" parameterType="Student">
update student set name=#{name}, sex=#{sex}, hobby=#{hobby}, time=#{time}, state=#{state},did=#{did} where id=#{id}
</update>
</mapper>效果展示：
添加
修改：
小付博客目錄
如果我的博客對你有幫助，也是你所喜歡的內容，請“點贊” “評論” “收藏” 一鍵三連，就是對我最大的支持
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/377007.html
標籤：其他
上一篇：hive關于一個表的操作