1、我们组课程设计的题目是:超市系统管理, 我认领的功能模块是: 销售管理
2、新建一个该功能模块的表。
3、查询 分页 增删改查 源代码
controller:SellController
@RestController
public class SellController {
@Autowired
SellService sellService;
@RequestMapping("/show")
public Result Select() {
return Result.success(sellService.SelectService());
}
@RequestMapping("/page/{PageSize}/{PageNumber}")
public Result page(@PathVariable Integer PageSize, @PathVariable Integer PageNumber) {
PageBean page = sellService.page(PageNumber, PageSize);
return Result.success(page);
}
//查询所有+分页
@RequestMapping("/page1/{page}/{pageSize}")
public Result findAllSelect(@PathVariable Integer page, @PathVariable Integer pageSize, Integer saleID, String merChID){
PageBean pageBean = sellService.selectList(page,pageSize,saleID,merChID);
return Result.success(pageBean);
}
@RequestMapping("/showpart/{saleID}")
public Result selectPart(@PathVariable("saleID") String saleID) {
return Result.success(sellService.SelectPartService(saleID));
}
@RequestMapping("/update") //更新
public Result update(@RequestBody Sell sell){
boolean r = sellService.UpdateService(sell);
if(r) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.erro();
}
}
@RequestMapping("/insert") //插入
public Result insert(@RequestBody Sell sell) {
boolean result = sellService.InsertService(sell);
if (result) {
// 成功 code==1
return Result.success();
} else {
// 失败 code==0
return Result.erro();
}
}
@RequestMapping("/delete") //删除
public void delete(String saleID){
sellService.DeleteService(saleID);
}
}
mapper:SellMapper
@Mapper
public interface SellMapper {
@Select("select * from sale")
public List<Sell> Select();
@Select("select * from sale where SaleID=#{saleID}")
public List<Sell> selectPart(String saleID);
@Update("update sale set SaleID=#{saleID},MerChID=#{merChID},SaleDate=#{saleDate},SaleNum=#{saleNum} ,SalePrice=#{salePrice} where SaleID=#{saleID}")
public boolean Update(Sell sell);
@Insert("insert into sale values (#{saleID},#{merChID},#{saleDate},#{saleNum},#{salePrice})")
public boolean Insert(Sell sell);
@Delete("delete from sale where SaleID=#{saleID}")
public boolean Delete(String saleID);
@Select("SELECT * FROM sale WHERE SaleID like concat('%',#{saleID},'%')AND MerChID like concat('%',#{merChID},'%')")
public List<Sell> listSelect(@Param("saleID") Integer saleID, @Param("merChID") String merChID);
}
pojo: Sell
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Sell {
private Integer saleID;
private String merChID;
private Date saleDate;
private Integer saleNum;
private Integer salePrice;
}
service:
public interface SellService {
public List<Sell> SelectService();
public PageBean page(Integer pageNumber, Integer pageSize);
public List<Sell> SelectPartService(String saleID);
public boolean UpdateService(Sell sell);
public boolean InsertService(Sell sell);
public boolean DeleteService(String saleID);
public PageBean selectList(Integer page, Integer pageSize, Integer saleID, String merChID);
}
@Service
public class SellServiceA implements SellService {
@Autowired
SellMapper sellMapper;
@Override
public List<Sell> SelectService() {
return sellMapper.Select();
}
@Override
public PageBean page(Integer pageNumber, Integer pageSize) {
PageHelper.startPage(pageNumber, pageSize);
List<Sell> com = sellMapper.Select();
PageInfo<Sell> p = new PageInfo<>(com);
PageBean pageBean = new PageBean(p.getTotal(), p.getPages(), p.getPageNum(), p.getPageSize(), p.getList());
return pageBean;
}
@Override
//查询
public PageBean selectList(Integer page, Integer pageSize, Integer saleID, String merChID) {
//设置分页参数
PageHelper.startPage(page, pageSize);
//执行分页查询
List<Sell> sellList = sellMapper.listSelect(saleID,merChID);
//获取分页结果
PageInfo<Sell> p = new PageInfo<>(sellList);
//封装pageBean
PageBean pageBean = new PageBean(p.getTotal(), p.getPages(), p.getPageNum(), p.getPageSize(), p.getList());
return pageBean;
}
@Override
public List<Sell> SelectPartService(String saleID) {
return sellMapper.selectPart(saleID);
}
@Override
public boolean UpdateService(Sell sell) {
return sellMapper.Update(sell);
}
@Override
public boolean InsertService(Sell sell) {
return sellMapper.Insert(sell);
}
@Override
public boolean DeleteService(String saleID) {
return sellMapper.Delete(saleID);
}
}
前端页面:index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超市管理</title>
<link rel="stylesheet" href="js/element.css">
<!-- 引入组件库 -->
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body style="margin: 0">
<div id="app" style="width: 100%;height: 100%">
<!--头导航栏-->
<el-container>
<el-header style="height: 60px;width: 100%;margin-top: 0;background-color: #545c64 ">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1" style="float: left">
<template slot="title">超市管理</template>
</el-menu-item>
<el-menu-item index="1" style="float: right">处理中心</el-menu-item>
<el-submenu index="2" style="float: right">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled style="float: right">消息中心</el-menu-item>
<el-menu-item index="4" style="float: right"><a href="https://www.ele.me" target="_blank">订单管理</a>
</el-menu-item>
</el-menu>
</el-header>
<!--左导航栏-->
<el-container style="height: 900px;">
<el-aside width="300px" height="900px" style="background-color:#545c64">
<el-col style="height: 100%;width: 300px;color:#545c64">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>功能管理</span>
</template>
<el-menu-item-group>
<template slot="title">核心功能</template>
<el-menu-item index="1-1">商品信息管理</el-menu-item>
<el-menu-item index="1-2">厂商管理</el-menu-item>
<el-menu-item index="1-3">供货商管理</el-menu-item>
<el-menu-item index="1-4">销售管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>统计分析</span>
</template>
<el-menu-item-group>
<template slot="title">图表统计</template>
<el-menu-item index="2-1">统计分析</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-col>
</el-aside>
<!--主表格页面-->
<el-main height="900px">
<!--查询栏-->
<el-form :inline="true" :model="formInline" class="demo-form-inline" style="font-size: 15px">
<el-form-item label="销售编号">
<el-input v-model="formInline.saleID" placeholder="销售编号" size="mini"></el-input>
</el-form-item>
<el-form-item label="商品编号">
<el-input v-model="formInline.merChID" placeholder="商品编号" size="mini"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
</el-form-item>
<!-- <el-form-item>-->
<!-- <el-button type="success" @click="gotoInsert" size="mini" icon="el-icon-circle-plus-outline">-->
<!-- 新增-->
<!-- </el-button>-->
<!-- </el-form-item>-->
</el-form>
<a href="insert.html" style="text-align: center">新增信息</a>
<!--表格-->
<el-table
:data="tableList.filter(data => !search || data.saleID.toLowerCase().includes(search.toLowerCase()))">
<el-table-column align="center"
label="销售编号"
prop="saleID">
</el-table-column>
<el-table-column align="center"
label="商品编号"
prop="merChID">
</el-table-column>
<el-table-column align="center"
label="价格"
prop="saleDate">
</el-table-column>
<el-table-column align="center"
label="库存数量"
prop="saleNum">
</el-table-column>
<el-table-column align="center"
label="厂商编号"
prop="salePrice">
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button size="mini"
type="danger"
><a :href="'update.html?saleID='+scope.row.saleID">Edit</a></el-button>
<!-- <a :href="'update.html?saleID='+scope.row.saleID">Edit</a>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="danger"-->
<!-- @click="handleEdit(scope.row.saleID)">Edit-->
<!-- </el-button>-->
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row.saleID)">Delete
</el-button>
</template>
</el-table-column>
</el-table>
<p align="center">
<el-pagination
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 3, 4, 10]"
:page-size="pageSize"
:total="total">
</el-pagination>
</p>
</el-main>
</el-container>
</el-container>
</div>
<script>
new Vue({
el: "#app",
data: {
activeIndex: '1',
search: '',
currentPage: 1,
pageSize: 100,
total: null,
formInline: {
saleID: '',
merChID: '',
},
tableList: [],
formLabelWidth: '120px'
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleEdit(row) {
window.location.href="update.html?saleID="+row.saleID;
},
//根据id删除操作
//根据id删除操作
// deleteById: function (id) {
// var _this = this;
// if (window.confirm("确定要删除该条数据吗???")) {
// axios.delete('/delete/' + id)
// .then(function (response) {
// alert("删除成功!!!")
// _this.findAll();
// })
// .catch(function (error) {
// console.log(error);
// });
// }
// },
handleSizeChange(val) {
this.pageSize=val;
this.show();
},
handleCurrentChange(val) {
this.currentPage =val;
this.show();
},
onSubmit() {
var url = `/page1/${this.currentPage}/${this.pageSize}?saleID=${encodeURIComponent(this.formInline.saleID)}&merChID=${encodeURIComponent(this.formInline.merChID)}`
console.log(this.formInline.saleID);
console.log(this.formInline.merChID);
axios.get(url)
.then(res =>{
this.tableList = res.data.data.rows;
this.total=res.data.data.total;
console.log(this.tableList);
console.log(this.total);
})
.catch(error=>{
console.error(error);
})
},
handleDelete: function (saleID) {
var _this = this;
if (window.confirm("确定要删除该条数据吗???")) {
axios.post('/delete?saleID=' + saleID)
.then(function (response) {
alert("删除成功!!!")
_this.show();
})
.catch(function (error) {
console.log(error);
});
}
},
show(){
axios(`/page/${this.pageSize}/${this.currentPage}`).then(r=>{
if(r.data.statusCode==1){
this.tableList=r.data.data.rows;
this.total=r.data.data.total;
}
}).catch(error=>{
console.error(error);
})
}
},
mounted(){
this.show();
}
})
</script>
</body>
</html>
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>
<link rel="stylesheet" href="element-ui/index.css">
<script src="./element-ui/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
<h1 align="center">新增销售信息</h1>
<el-form label-width="80px">
<el-form-item label="销售编号">
<el-input v-model="tableList.saleID"></el-input>
</el-form-item>
<el-form-item label="商品编号">
<el-input v-model="tableList.merChID" size="medium"></el-input>
</el-form-item>
<el-form-item label="销售时间">
<el-input v-model="tableList.saleDate" size="medium"></el-input>
</el-form-item>
<el-form-item label="销售数量">
<el-input v-model="tableList.saleNum" size="medium"></el-input>
</el-form-item>
<el-form-item label="销售价格">
<el-input v-model="tableList.salePrice" size="medium"></el-input>
</el-form-item>
<el-button>取 消</el-button>
<el-button type="success" v-on:click="addP">提交</el-button>
</el-form>
<!--<div id="app" style="width: 500px">-->
<!-- <ul style="list-style: none ">-->
<!-- <li>-->
<!-- <el-input v-model="tableList.saleID" placeholder="销售编号"></el-input>-->
<!-- </li>-->
<!-- <li>-->
<!-- <el-input v-model="tableList.merChID" placeholder="商品编号"></el-input>-->
<!-- </li>-->
<!-- <li>-->
<!-- <el-input v-model="tableList.saleDate" placeholder="销售日期"></el-input>-->
<!-- </li>-->
<!-- <li>-->
<!-- <el-input v-model="tableList.saleNum" placeholder="销售数量"></el-input>-->
<!-- </li>-->
<!-- <li>-->
<!-- <el-input v-model="tableList.salePrice" placeholder="销售单价"></el-input>-->
<!-- </li>-->
<!-- <li>-->
<!-- <br>-->
<!-- <el-button type="success" v-on:click="addP">提交</el-button>-->
<!-- </li>-->
<!-- </ul>-->
</div>
<script>
new Vue({
el:"#app",
data(){
return{
tableList:{}
}
},
methods:{
addP(){
axios.post("/insert",this.tableList).then(r=>{
if(r.data.statusCode==1){
location.href='index1.html';
}
else{
console.log(r.data.message);
}
}).catch(error=>{
console.error(error);
})
}
},
created(){
}
})
</script>
</body>
</html>
update.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>update</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>
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<!--<h1 style="text-align: center">修改销售数据</h1>-->
<div id="app">
<h1 align="center">修改销售信息</h1>
<el-form label-width="80px">
<el-form-item label="销售编号">
<el-input v-model="tableList.saleID"></el-input>
</el-form-item>
<el-form-item label="商品编号">
<el-input v-model="tableList.merChID" size="medium"></el-input>
</el-form-item>
<el-form-item label="销售时间">
<el-input v-model="tableList.saleDate" size="medium"></el-input>
</el-form-item>
<el-form-item label="销售数量">
<el-input v-model="tableList.saleNum" size="medium"></el-input>
</el-form-item>
<el-form-item label="销售价格">
<el-input v-model="tableList.salePrice" size="medium"></el-input>
</el-form-item>
<el-button>取 消</el-button>
<el-button type="success" v-on:click="update">提交</el-button>
</el-form>
<!--<div id="app">-->
<!-- <ul style="list-style: center ">-->
<!-- <li>-->
<!-- 销售编号:<input type="text" v-model="this.saleID">-->
<!-- </li>-->
<!-- <li>-->
<!-- 商品编号:<input type="text" v-model="tableList.merChID">-->
<!-- </li>-->
<!-- <li>-->
<!-- 销售时间:<input type="text" v-model="tableList.saleDate">-->
<!-- </li>-->
<!-- <li>-->
<!-- 销售数量:<input type="text" v-model="tableList.saleNum">-->
<!-- </li>-->
<!-- <li>-->
<!-- 销售单价:<input type="text" v-model="tableList.salePrice">-->
<!-- </li>-->
<!-- <li>-->
<!-- <input type="button" @click="update" value="提交">-->
<!-- </li>-->
<!-- </ul>-->
</div>
<script>
new Vue({
el:"#app",
data(){
return{
tableList:{},
saleID:''
}
},
methods: {
// getSaleID(){
// var search = window.location.search;
// search = search.substring(5);
// this.saleID=search;
// },
selectPart:function() {
axios.get(`/showpart/${this.saleID}`).then(r => {
if (r.data.statusCode == 1) {
if (Array.isArray(r.data.data) && r.data.data.length > 0) {
this.tableList = r.data.data[0];
//console.log(this.tableList);
} else {
this.tableList = {};
}
} else {
console.log(r.data.message);
}
}).catch(error => {
console.error(error);
})
},
// update(){
// axios.post("/update",JSON.stringify(this.tableList),{headers: {
// 'Content-Type': 'application/json'
// }}).then((r)=>{
// if(r.data.statusCode==1){
// location.href='index1.html';
// console.log(JSON.stringify(this.tableList))
// }
// else{
// console.log(r.data.message);
// }
// }).catch(error=>{
// console.error(error);
// })
// }
// },
update: function () {
axios({
method: 'put',
url: '/update',
data: JSON.stringify(this.tableList),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => {
if (res.data.statusCode == 1) {
// 成功
location.href = 'index1.html';
} else {
// 失败
alert(res.data.message);
}
})
.catch(err => {
console.error(err);
})
},
// selectPart() {
// var url = `showpart/${this.saleID}`
// axios.get(url)
// .then(response => {
// var baseResult = response.data
// if (baseResult.statusCode == 1) {
// this.tableList = baseResult.data
// }
// })
// .catch(error => {
// })
// },
// update() {
// var url = `update`
// axios.put(url, this.tableList)
// .then(res => {
// var baseResult = res.data
// if (baseResult.statusCode == 1) {
// //成功
// location.href = 'index1.html.html'
// } else {
// //失败
// alert(baseResult.message)
// }
// })
// .catch(err => {
// console.error(err);
// })
// }
// },
},
created() {
// this.getSaleID();
this.saleID = location.href.split("?saleID=")[1]
this.selectPart();
}
})
</script>
</body>
</html>
4、页面实现
1.主页面
2.分页功能
3.搜索功能
4.增
添加成功
5.删
已成功删除销售编号为4 的销售信息
6.改
将销售编号为5的销售价格改为888888
修改成功