使用JdbcTemplate+Spring注解+Vue+servlet+BS+c3p0实现简单的学生管理系统(增删改查)
1-前提需要准备的工作
下载BootStrap
下载Jquery
下载Vue
下载axios spring目录下的相关配置文件以及db.properies属性配置在上一篇博客就已经演示了 这里就不一一阐述 需要导入的jar包以及BS+VUE+Axios对应的js文件
2-前端页面(index.html)
<!DOCTYPE html>
< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 学生管理系统</ title>
< link rel = " stylesheet" href = " bootstrap/css/bootstrap.min.css" >
< script src = " bootstrap/js/jquery-2.2.3.min.js" > </ script>
< script src = " bootstrap/js/bootstrap.min.js" > </ script>
< script src = " bootstrap/js/vue.min.js" > </ script>
< script src = " bootstrap/js/axios.min.js" > </ script>
< style>
.table {
text-align : center;
}
.panel-title {
padding : 12px 0;
}
</ style>
</ head>
< body>
< div class = " container" >
< div class = " page-header" >
< div class = " panel panel-primary" >
< div class = " panel-heading" >
< h3 class = " panel-title" > 学生管理系统</ h3>
</ div>
< table class = " table" >
< tr>
< td> 学号</ td>
< td> 姓名</ td>
< td> 性别</ td>
< td> 年龄</ td>
< td> 住址</ td>
< td> 所在班级</ td>
< td> 操作</ td>
</ tr>
< tr v-for = " stud in students" >
< td> {
{stud.sid}}</ td>
< td> {
{stud.sname}}</ td>
< td> {
{stud.sex}}</ td>
< td> {
{stud.age}}</ td>
< td> {
{stud.addr}}</ td>
< td> {
{stud.cname}}</ td>
< td>
< a class = " btn btn-danger btn-sm" @click = " delStu(stud.sid)" > 删除</ a>
< a class = " btn btn-warning btn-sm" @click = " updateStu(stud)" > 修改</ a>
</ td>
</ tr>
</ table>
< div class = " panel-footer text-right" >
< a class = " btn btn-success" data-toggle = " modal" href = " #addStu" > 添加学生</ a>
JavaWeb
</ div>
</ div>
</ div>
< div class = " modal fade" id = " addStu" >
< div class = " modal-dialog" >
< div class = " modal-content" >
< div class = " modal-header" >
< button type = " button" class = " close" data-dismiss = " modal" aria-hidden = " true" > × </ button>
< h4 class = " modal-title" > 学生管理</ h4>
</ div>
< div class = " modal-body" >
{
{student}}
< form action = " " method = " post" class = " form-horizontal" >
< div class = " form-group" >
< label class = " col-sm-2 control-label" > 学生姓名</ label>
< div class = " col-sm-10" >
< input type = " text" class = " form-control" v-model = " student.sname" placeholder = " 请输入学生姓名" >
</ div>