目录结构
StudentController.java
package com.example.web.Controller;
import com.example.web.Pojo.Result;
import com.example.web.Pojo.Student;
import com.example.web.Service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
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
private StudentService studentService;
//查询全部，返回的是Result类型的json数据。
@RequestMapping("/StudentsAll")
public List<Student> selectController(){
return studentService.SelectService();
}
@RequestMapping("/studentdelete/{Sno}")
public void delete(@PathVariable("Sno") String Sno){
studentService.delete(Sno);
}
@RequestMapping("/studentinsert")
public Result insert(@RequestBody Student student){
boolean result =studentService.insert(student);
if(result) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("添加失败");
}
}
@RequestMapping("/studentfindById/{sno}")
public Result studentfindById(@PathVariable("sno") String sno) {
return Result.success(studentService.select(sno));
}
@RequestMapping("/studentupdate")
public Result update(@RequestBody Student student){
boolean r = studentService.update(student);
if(r) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.error("更新失败");
}
}
}
StudentMapper
package com.example.web.Mapper;
import com.example.web.Pojo.Student;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface StudentMapper {
@Select("select * from studentinformation")
public List<Student> Select();
@Delete("delete from studentinformation where Sno=#{Sno}")
public void delete(String Sno);
@Insert("insert into studentinformation(Sno, Sname, Ssex) values (#{Sno}, #{Sname}, #{Ssex})")
public int insert(Student student);
@Select("select * from studentinformation where Sno=#{Sno}")
public Student studentfindById(String Sno);
@Update("update studentinformation set Sno=#{Sno},Sname=#{Sname},Ssex=#{Ssex} where Sno=#{Sno} ")
public boolean update(Student student);
}
StudentService
package com.example.web.Service;
import com.example.web.Pojo.Student;
import java.util.List;
public interface StudentService {
public List<Student> SelectService();
public void delete(String Sno);
public boolean insert(Student student);
public Student select(String Sno);
public boolean update(Student student);
}
StudentService2.java
package com.example.web.Service;
import com.example.web.Mapper.StudentMapper;
import com.example.web.Pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class StudentService2 implements StudentService{
@Autowired
private StudentMapper studentMapper;
@Override
public List<Student> SelectService() {
return studentMapper.Select();
}
@Override
public void delete(String Sno) {
studentMapper.delete(Sno);
}
@Override
public boolean insert(Student student) {
int result = studentMapper.insert(student);
return result == 1;
}
@Override
public boolean update(Student student) {
return studentMapper.update(student);
}
@Override
public Student select(String Sno) {
return studentMapper.studentfindById(Sno);
}
}
student_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息</title>
</head>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<h1 align="center">学生信息列表展示</h1>
<div id="app" align="center">
<a href="student_insert.html">新增</a>
<table border="1" cellspacing="0" width="60%">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr align="center" v-for="student in tableData">
<td>{{student.sno}}</td>
<td>{{student.sname}}</td>
<td>{{student.ssex}}</td>
<td class="text-center">
<a :href="'student_delete.html?sno='+student.sno">删除</a>
<a :href="'student_update.html?sno='+student.sno">修改</a>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: []
}
},
mounted(){
//https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId=171587808
//peotfindAll 返回类型为List类型
axios.get('StudentsAll').then(res=>{
this.tableData = res.data;
});
},
});
</script>
</html>
student_delete.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息</title>
</head>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<body>
<h1 align="center">学生信息列表展示</h1>
<div id="app" align="center">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr align="center" v-for="student in tableData">
<td>{{student.sno}}</td>
<td>{{student.sname}}</td>
<td>{{student.ssex}}</td>
<td class="text-center">
<a :href="'student_delete.html?sno='+student.sno">删除</a>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: []
}
},
mounted(){
//https://mock.apifox.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId=171587808
//peotfindAll 返回类型为List类型
axios.get('StudentsAll').then(res=>{
this.tableData = res.data;
});
},
methods:{
findAll:function () {
var _this = this;
axios.post('StudentsAll', {
})
.then(function (response) {
_this.tableData = response.data.data;
})
.catch(function (error) {
console.log(error);
});
},
deleteId:function (sno) {
var _thisd = this;
var url = `studentdelete/${sno}` //注意这里是反引号
if (window.confirm("确定要删除该条数据吗？？？")){
axios.post(url)
.then(function (response) {
alert("删除成功")
// _thisd.findAll();
location.href = 'student_list.html'
})
.catch(function (error) {
console.log(error);
});
}
}
},
created() {
// 获得参数sno值
this.sno = location.href.split("?sno=")[1]
// 通过sno查询详情
this.deleteId(this.sno);
},
});
</script>
</html>
student_insert.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>学号</td>
<td><input type="text" v-model="student.sno"> </td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" v-model="student.sname"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" v-model="student.ssex"></td>
</tr>
<tr>
<td></td>
<td><input type="button" @click="addStudent" value="增加"> </td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
student: {
"sno":"",
"sname":"",
"ssex":""
} //详情
},
methods: {
addStudent() {
var url = 'studentinsert'
axios.post(url,this.student)
.then(res => {
var baseResult = res.data
if(baseResult.code == 1) {
// 成功
location.href = 'student_list.html'
} else {
// 失败
alert(baseResult.message)
}
})
.catch(err => {
console.error(err);
})
}
},
})
</script>
</html>
student_update.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>学号</td>
<td><input type="text" v-model="this.sno"> </td>
</tr>
<tr>
<td>姓名</td>
<td><input type="text" v-model="student.sname"> </td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" v-model="student.ssex"></td>
</tr>
<tr>
<td></td>
<td><input type="button" @click="updatestudent" value="更新"> </td>
</tr>
</table>
{{student}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
sno: '',
student: {}, //详情
},
methods: {
selectById() {
//${this.id}
var url = `studentfindById/${this.sno}` //注意这里是反引号
//反引号（backticks，也称为模板字符串或模板字面量）是ES6（ECMAScript 2015）中引入的一种新字符串字面量功能，
// 它允许您在字符串中嵌入表达式。反引号用`（键盘上通常位于Tab键上方）来界定字符串的开始和结束。
axios.get(url)
.then(response => {
var baseResult = response.data
if(baseResult.code == 1) {
this.student = baseResult.data
}
})
.catch( error => {})
},
updatestudent() {
var url = 'studentupdate'
axios.put(url,this.student)
.then(res => {
var baseResult = res.data
if(baseResult.code == 1) {
// 成功
location.href = 'student_list.html'
} else {
// 失败
alert(baseResult.message)
}
})
.catch(err => {
console.error(err);
})
},
},
created() {
// 获得参数id值
this.sno = location.href.split("?sno=")[1]
// 通过id查询详情
this.selectById()
},
})
</script>
</html>
运行，效果如下：
3297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
