1、明确课程设计的小组题目，并认领功能模块
我们组课程设计的题目是： 仓库管理系统 ，我认领的功能模块是： 职工管理
2.新建数据表
3、前端页面 worker.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>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<h1 style="text-align: center">职工信息表</h1>
<div id="app">
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 80%;margin: auto " >
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="gender">
</el-table-column>
<el-table-column
label="职位"
prop="job">
</el-table-column>
<el-table-column
label="年龄"
prop="age">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="5"
:total="total">
</el-pagination>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: [],
search: '',
currentPage: 1,// 当前页码
pageSize: 5,
total: 50
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
this.find();
},
handleCurrentChange(val) {
this.currentPage = val;
this.find();
},
find() {
axios(`/page/${this.pageSize}/${this.currentPage}`).then(r => {
if (r.data.code == 1) {
this.tableData = r.data.data.rows;
this.total = r.data.data.total;
}
}).catch(error => {
console.error(error);
})
}
},
created(){
this.find();
}
})
</script>
</body>
</html>4、实体类Worker.java
package com.itheima.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Worker {
private Integer id;
public String name;
private String gender;
private String job;
private Short age;
}
5、mapper 层
package com.itheima.mapper;
import com.itheima.pojo.Worker;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface WorkerMapper {
@Select("select * from mybatis.worker")
public List<Worker> Select();
}
6、service层
package com.itheima.service;
import com.itheima.pojo.PageBean;
import com.itheima.pojo.Worker;
import java.util.List;
public interface WorkerService {
public List<Worker> SelectService();
public PageBean page(Integer pageNumber, Integer pageSize);
}
package com.itheima.service.impl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.itheima.mapper.WorkerMapper;
import com.itheima.pojo.PageBean;
import com.itheima.pojo.Worker;
import com.itheima.service.WorkerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class WorkerServicelmpl implements WorkerService {
@Autowired
WorkerMapper woekerMapper;
@Override
public List<Worker> SelectService(){
return woekerMapper.Select();
}
@Override
public PageBean page(Integer pageNumber, Integer pageSize) {
PageHelper.startPage(pageNumber, pageSize);
List<Worker> wor=woekerMapper.Select();
PageInfo<Worker> p = new PageInfo<>(wor);
PageBean pageBean = new PageBean(p.getTotal(),p.getPages(),p.getPageNum(),p.getPageSize(),p.getList());
return pageBean;
}
}
7、controller层
package com.itheima.controller;
import com.itheima.pojo.PageBean;
import com.itheima.pojo.Result;
import com.itheima.service.WorkerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class WorkerController {
@Autowired
WorkerService workerService;
@RequestMapping("/find")
public Result Select(){
return Result.success(workerService.SelectService());
}
@RequestMapping("/page/{PageSize}/{PageNumber}")
public Result page(@PathVariable Integer PageSize, @PathVariable Integer PageNumber){
PageBean page=workerService.page(PageNumber,PageSize);
return Result.success(page);
}
}
8、效果
9、增加 删除 修改
①删除
<!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>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<h1 style="text-align: center">职工信息表</h1>
<div id="app">
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 80%;margin: auto " >
<el-table-column
label="id"
prop="id">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column
label="性别"
prop="gender">
</el-table-column>
<el-table-column
label="职位"
prop="job">
</el-table-column>
<el-table-column
label="年龄"
prop="age">
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">
<a :href="'worker-update.html?id='+scope.row.id">Edit</a>
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
@click="deletee(scope.row.id)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 15]"
:page-size="5"
:total="total">
</el-pagination>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
tableData: [],
search: '',
currentPage: 1,// 当前页码
pageSize: 5,
total: 50
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
},
handleSizeChange(val) {
this.pageSize = val;
this.find();
},
handleCurrentChange(val) {
this.currentPage = val;
this.find();
},
find() {
axios(`/page/${this.pageSize}/${this.currentPage}`).then(r => {
if (r.data.code == 1) {
this.tableData = r.data.data.rows;
this.total = r.data.data.total;
}
}).catch(error => {
console.error(error);
})
},
deletee:function (id){
var this_=this;
if(window.confirm("您确定要删除这条数据吗？")){
axios.post('/WorkerDelete?id='+id).then(function(response){
alert("删除成功！")
this_.find();
})
.catch(function(error){
console.error("删除失败",error);
})
}
}
},
created(){
this.find();
}
})
</script>
</body>
</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>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
justify-content: center;
align-items: center">
<table>
<tr>
<td>ID</td>
<td>
<input type="text" v-model="this.id">
</td>
</tr>
<tr>
<td>
姓名：
</td>
<td>
<input type="text" v-model="worker.name">
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="gender" v-model="worker.gender" value="1">男
<input type="radio" name="gender" v-model="worker.gender" value="2">女
</td>
</tr>
<tr>
<td>
职位：
</td>
<td>
<input type="text" v-model="worker.job">
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" v-model="worker.age">
</td>
</tr>
<tr>
<td>
<input type="button" @click="updateworker" value="修改">
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
worker:{},
id:''
},
methods:{
selectpart:function (){
axios.get(`/WorkerSelectpart/${this.id}`).then(r=>{
if(r.data.code==1){
if (Array.isArray(r.data.data) && r.data.data.length > 0) {
this.worker = r.data.data[0];
} else {
this.worker = {};
}
}
else{
console.log(r.data.message);
}
}).catch(er=>{
console.error(er);
})
},
updateworker:function (){
axios({ method: 'put',
url: '/WorkerUpdate',
data: JSON.stringify(this.worker),
headers: {
'Content-Type': 'application/json'
} }).then(r=>{
if(r.data.code==1){
location.href='worker.html';
}
else{
alert(r.data.message);
}
}).catch(e=>{
console.error(e);
})
}
},
created(){
this.id=location.href.split("?id=")[1]
this.selectpart();
}
})
</script>
</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>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
</head>
<body>
<div id="app" style=" display: flex;
justify-content: center;
align-items: center">
<table>
<tr>
<td>ID</td>
<td>
<input type="text" v-model="worker.id">
</td>
</tr>
<tr>
<td>
姓名：
</td>
<td>
<input type="text" v-model="worker.name">
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="gender" v-model="worker.gender" value="1">男
<input type="radio" name="gender" v-model="worker.gender" value="2">女
</td>
</tr>
<tr>
<td>
职位：
</td>
<td>
<input type="text" v-model="worker.dynasty">
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" v-model="worker.title">
</td>
</tr>
<tr>
<td>
<input type="button" @click="addworker" value="新增">
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
worker:{
"id":"",
"name":"",
"gender":"",
"job":"",
"age":""
}
},
methods:{
addworker:function (){
axios.post('/WorkerInsert',this.worker).then(r=>{
if(r.data.code==1){
location.href='worker.html';
}
else{
alert(r.data.message);
}
}).catch(error=>{
console.error(error);
})
}
}
})
</script>
</html>
④后端系列代码
@Mapper
public interface WorkerMapper {
@Select("select * from mybatis.worker")
public List<Worker> Select();
@Insert("insert into worker values(#{id},#{name},#{gender},#{job},#{age})")
public boolean insert(Worker worker);
@Select("select * from mybatis.worker where id=#{id}")
public List<Worker> selectpart(short id);
@Update("update mybatis.worker set name=#{name},gender=#{gender},job=#{job},age=#{age} where id=#{id}")
public boolean update(Worker worker);
@Delete("delete from mybatis.worker where id=#{id}")
public boolean delete(short id);
}public interface WorkerService {
public List<Worker> SelectService();
public PageBean page(Integer pageNumber, Integer pageSize);
public boolean Winsert(Worker worker);
public List<Worker> Wselectpart(short id);
public boolean Wupdate(Worker worker);
public boolean Wdelete(short id);
}
@Service
public class WorkerServicelmpl implements WorkerService {
@Autowired
WorkerMapper workerMapper;
@Override
public List<Worker> SelectService(){
return workerMapper.Select();
}
@Override
public PageBean page(Integer pageNumber, Integer pageSize) {
PageHelper.startPage(pageNumber, pageSize);
List<Worker> wor=workerMapper.Select();
PageInfo<Worker> p = new PageInfo<>(wor);
PageBean pageBean = new PageBean(p.getTotal(),p.getPages(),p.getPageNum(),p.getPageSize(),p.getList());
return pageBean;
}
@Override
public boolean Winsert(Worker worker) {
boolean result = workerMapper.insert(worker);
return result;
}
@Override
public boolean Wupdate(Worker worker) {
return workerMapper.update(worker);
}
@Override
public boolean Wdelete(short id) {
return workerMapper.delete(id);
}
@Override
public List<Worker> Wselectpart(short id) {
return workerMapper.selectpart(id);
}
}
@RestController
public class WorkerController {
@Autowired
WorkerService workerService;
@RequestMapping("/find")
public Result Select(){
return Result.success(workerService.SelectService());
}
@RequestMapping("/page/{PageSize}/{PageNumber}")
public Result page(@PathVariable Integer PageSize, @PathVariable Integer PageNumber){
PageBean page=workerService.page(PageNumber,PageSize);
return Result.success(page);
}
@RequestMapping("/WorkerInsert")
public Result insert(@RequestBody Worker worker){
boolean result =workerService.Winsert(worker);
if(result) {
return Result.success();
} else {
return Result.error();
}
}
@RequestMapping("/WorkerUpdate")
public Result update(@RequestBody Worker worker){
boolean r=workerService.Wupdate(worker);
if(r){
return Result.success();
}
else {
return Result.error();
}
}
@RequestMapping("/WorkerDelete")
public Result delete( short id){
boolean r=workerService.Wdelete(id);
if(r){
return Result.success();
}
else{
return Result.error();
}
}
@RequestMapping("/workerSelectpart/{id}")
public Result selectpart(@PathVariable short id){
return Result.success(workerService.Wselectpart(id));
}
}
⑤效果
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
