需求：
1、不同的角色拥有不同的权限进入相对应的页面
2、对价格进行区间查询，以及分页
3、添加的时候状态为默认、删除提示
4、表格统计每个厂商的个数
首先Maven 项目的搭建，导入所需要的jar包
建表建库：
create table phone (
id int primary key auto_increment,
name varchar(20),
fid int ,
price int,
create_time date,
state int ,
foreign key (fid) references frim (id)
)
create table frim(
id int primary key auto_increment,
name varchar(20)
)
create table admin (
id int primary key auto_increment,
username varchar(20),
password varchar(20),
role_id int,
foreign key (role_id) references role (id)
)
create table role(
id int primary key auto_increment,
role_name varchar(20)
);登录界面：
public class UserService implements UserDetailsService {
@Reference
MyService myService;
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
Admin user=myService.getusername(username);
List<GrantedAuthority> list = new ArrayList<>();
list.add(new SimpleGrantedAuthority(user.getRole().getRoleName()));
return new User(username,"{noop}"+user.getPassword(),list);
}MyService 接口
ublic interface MyService {
Admin getusername(String username);
PageResult findPage(Phone phone);
List<Frim> bu();
void del(Integer id);
void add(Phone phone);
List<KeVo> findcount1();
List<KeVo> ji();
List<KeVo> sds();
}
MyServiceImpl 的实现类
Service
public class MyServiceimpl implements MyService {
@Autowired
AdminMapper adminMapper;
@Autowired
FrimMapper frimMapper;
@Autowired
PhoneMapper phoneMapper;
@Autowired
RoleMapper roleMapper;
@Override
public Admin getusername(String username) {
Example example = new Example(Admin.class);
Example.Criteria criteria = example.createCriteria();
criteria.andEqualTo("username",username);
Admin admin = adminMapper.selectOneByExample(example);
Integer roleId = admin.getRoleId();
Role role = roleMapper.selectByPrimaryKey(roleId);
admin.setRole(role);
return admin;
}
@Override
public PageResult findPage(Phone phone) {
Example example = new Example(Phone.class);
Example.Criteria criteria = example.createCriteria();
Integer sta = phone.getSta();
Integer end = phone.getEnd();
String fname = phone.getFname();
if(sta!=null){
criteria.andGreaterThanOrEqualTo("price",sta);
}
if(end!=null){
criteria.andLessThanOrEqualTo("price",end);
}
List<Phone> list = phoneMapper.selectByExample(example);
for (Phone phone1 : list) {
Integer fid = phone1.getFid();
Frim frim = frimMapper.selectByPrimaryKey(fid);
phone1.setFrim(frim);
}
PageInfo<Phone> p = new PageInfo<>(list);
return new PageResult(p.getTotal(),p.getList());
}
@Override
public List<Frim> bu() {
return frimMapper.selectAll();
}
@Override
public void del(Integer id) {
phoneMapper.deleteByPrimaryKey(id);
}
@Override
public void add(Phone phone) {
phoneMapper.insert(phone);
}
@Override
public List<KeVo> findcount1() {
return phoneMapper.count();
}
@Override
public List<KeVo> ji() {
return phoneMapper.count();
}
@Override
public List<KeVo> sds() {
return phoneMapper.count();
}
}
dao层
public interface PhoneMapper extends Mapper<Phone> {
@Select("select f.name cname ,count(*) num from phone p join frim f on p.fid = f.id where p.state=1 group by f.name")
List<KeVo> count();
}pojo中Phone 类
package com.jiyun.pojo;
import javax.persistence.*;
import java.io.Serializable;
import java.io.Serializable;
import java.util.Date;
@Table(name = "phone")
public class Phone implements Serializable {
private static final long serialVersionUID = 4539362065725308439L;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "name")
private String name;
@Column(name = "fid")
private Integer fid;
@Column(name = "price")
private Integer price;
@Column(name = "create_time")
private Date createTime;
@Column(name = "state")
private Integer state;
@Transient
private Integer pageSize;
@Transient
private Integer pageNum;
@Transient
private String fname;
public String getFname() {
return fname;
}
public void setFname(String fname) {
this.fname = fname;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getPageNum() {
return pageNum;
}
public void setPageNum(Integer pageNum) {
this.pageNum = pageNum;
}
@Transient
private Frim frim;
@Transient
private Integer sta;
@Transient
private Integer end;
public Integer getSta() {
return sta;
}
public void setSta(Integer sta) {
this.sta = sta;
}
public Integer getEnd() {
return end;
}
public void setEnd(Integer end) {
this.end = end;
}
public static long getSerialVersionUID() {
return serialVersionUID;
}
public Frim getFrim() {
return frim;
}
public void setFrim(Frim frim) {
this.frim = frim;
}
public Phone() {
}
public Phone(Integer id, String name, Integer fid, Integer price, Date createTime, Integer state) {
this.id = id;
this.name = name;
this.fid = fid;
this.price = price;
this.createTime = createTime;
this.state = state;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getFid() {
return fid;
}
public void setFid(Integer fid) {
this.fid = fid;
}
public Integer getPrice() {
return price;
}
public void setPrice(Integer price) {
this.price = price;
}
public Date getCreateTime() {
return createTime;
}
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
@Override
public String toString() {
return "Phone{" +
"id='" + id + '\'' +
"name='" + name + '\'' +
"fid='" + fid + '\'' +
"price='" + price + '\'' +
"createTime='" + createTime + '\'' +
"state='" + state + '\'' +
'}';
}
}
前台代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<!-- 引入样式 -->
<link rel="stylesheet" href="../js/node_modules/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 70px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 70px;
display: block;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>管理
<small>疫苗管理</small>
</h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>管理</el-breadcrumb-item>
<el-breadcrumb-item>疫苗管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<!--查询表单-->
<el-form :inline="true">
<el-form-item label="价格个数">
<el-input v-model="page.sta" placeholder="起始" class="filter-item"></el-input>
</el-form-item>
<el-form-item label="">
<el-input v-model="page.end" placeholder="结束" class="filter-item"></el-input>
</el-form-item>
<!--<el-form-item label="厂商" >-->
<!--<el-select v-model="pojo.fid" placeholder="请选择厂商区域">-->
<!--<el-option v-for="a in dept" :label="a.name" :value="a.id"></el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<!--<el-form-item label="厂商">-->
<!--<el-input v-model="page.fname" placeholder="起始" class="filter-item"></el-input>-->
<!--</el-form-item>-->
<el-button class="dalfBut" @click="fetchData()">查询</el-button>
<el-button type="primary" class="butT" @click="handleAdd">新增</el-button>
<!--<el-button type="primary" class="butT" @click="delAll">批量删除</el-button>-->
</el-form>
</div>
<el-table ref="multipleTable" :data="tableData" border style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column prop="id" label="编号"></el-table-column>
<el-table-column prop="name" label="品牌"></el-table-column>
<el-table-column label="厂商">
<template slot-scope="scope">
<span>{{ scope.row.frim.name}}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<!--<el-table-column label="性别">-->
<!--<template slot-scope="scope">-->
<!--<span>{{ scope.row.sex == 1 ? '男' : '女'}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<el-table-column prop="createTime" label="时间"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<span>{{ scope.row.state == 1 ? '已发售' : '未发售'}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!--<el-button @click="edit(scope.row.id)" size="mini" type="primary" size="small">修改</el-button>-->
<el-button @click="dele(scope.row.id)" size="mini" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.pageNum"
:page-sizes="[2, 4, 6, 8]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
<div class="add-form">
<!--弹出窗口-->
<el-dialog title="添加" :visible.sync="formVisible">
<el-form label-width="80px">
<el-form-item label="品牌 ">
<el-input v-model="pojo.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="厂商" :label-width="formLabelWidth">
<el-select v-model="pojo.fid" placeholder="请选择场地区域">
<el-option v-for="a in dept" :label="a.name" :value="a.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="价格 ">
<el-input v-model="pojo.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="时间 ">
<el-date-picker
v-model="pojo.createTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth">
<el-select v-model="pojo.state" placeholder="请选择活动区域">
<el-option label="已发售" value=1></el-option>
<el-option label="未发售" value=2></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save()">保存</el-button>
<el-button @click="formVisible = false">关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
<div class="add-form">
<!--弹出窗口-->
<el-dialog title="添加" :visible.sync="formVisible2">
<el-form label-width="80px">
<el-form-item label="类型" :label-width="formLabelWidth">
<el-select v-model="pojo.zid" placeholder="请选择场地区域">
<el-option v-for="a in dept" :label="a.name" :value="a.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth">
<el-select v-model="pojo.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-input v-model="pojo.couponDesc" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="开始时间 ">
<el-date-picker
v-model="pojo.createTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="介绍 ">
<el-input v-model="pojo.kil" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="出货" :label-width="formLabelWidth">
<el-select v-model="pojo.state" placeholder="请选择活动区域">
<el-option label="已出货" value=1></el-option>
<el-option label="未出货" value=0></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="update">保存</el-button>
<el-button @click="formVisible2 = false">关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<script src="../js/node_modules/vue/dist/vue.js"></script>
<script src="../js/node_modules/axios/dist/axios.js"></script>
<script src="../js/node_modules/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
contents: [],
tableData: [],
multipleSelection: [],
page: {
pageNum: 1,
total: null,
pageSize:2,
name:"",
couponId:null,
sta:"",
end:"",
fname:"",
state:'2'
},
pojo: {},
dept: {},
formVisible: false,
formVisible2: false,
contentVisible: false,
imageUrl: '',
parentIds: [0]
}
},
created() {
this.fetchData();
this.bu();
},
methods: {
bu() {
axios.get("/bu.do").then(res => {
// 用户的集合，有没有疫苗的id
this.dept = res.data;
})
},
out(userId, vaccineId) {
axios.get("/out.do?userId=" + userId + "&vaccineId=" + vaccineId).then(res => {
axios.get("/findContents.do?id=" + vaccineId).then(res => {
// 用户的集合，有没有疫苗的id
this.contents = res.data;
// 给每一个当前疫苗的详情用户，绑定疫苗id
for (let i = 0; i < this.contents.length; i++) {
this.contents[i].vaccineId = id;
}
})
})
},
handleAdd() {
this.pojo = {};
// this.pojo = {
//
// state:1
// };
this.pojo.state='2'
this.formVisible = true;
// 从保存parentId的数组中，得到最后一位数据
this.pojo.parentId = this.parentIds[this.parentIds.length - 1];
},
fetchData() {
axios.post("/findPage.do",this.page).then(response => {
this.tableData = response.data.rows;
this.page.total = response.data.total;
});
},
save() {
axios.post("/add.do", this.pojo).then(response => {
if (response.data.code == 0) {
this.$message({
message: '恭喜你，添加成功！',
type: 'success'
});
this.formVisible = false;//关闭窗口
this.fetchData(); //刷新列表
} else {
this.$message.error("没有权限添加")
}
});
},
update() {
axios.post("/update.do", this.pojo).then(response => {
if (response.data.code == 0) {
this.$message({
message: '恭喜你，修改成功！',
type: 'success'
});
this.formVisible2 = false;//关闭窗口
this.fetchData(); //刷新列表
} else {
this.$message.error("没有权限修改")
}
});
},
content(id) {
this.contentVisible = true;
// 通过疫苗的id，查询中间表用户信息
axios.get("/findContents.do?id=" + id).then(res => {
// 用户的集合，有没有疫苗的id
this.contents = res.data;
// // 给每一个当前疫苗的详情用户，绑定疫苗id
// for (let i = 0; i < this.contents.length; i++) {
// this.contents[i].vaccineId = id;
// }
})
},
edit(id) {
this.formVisible2 = true // 打开窗口
// 调用查询
axios.get(`/byid.do?id=${id}`).then(response => {
this.pojo = response.data;
// this.imageUrl=this.pojo.image //显示图片 如页面有图片上传功能放开注释
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
delAll() {
this.$confirm('确定要多选删除此记录吗?', '提示', {}).then(() => {
axios.post("/delAll.do", this.multipleSelection).then(response => {
if (response.data.code == 0) {
this.fetchData(); //刷新列表
this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
} else {
this.$message.error("删除数据失败")
}
})
})
},
dele(id) {
this.$confirm('确定要删除此记录吗?').then(() => {
axios.get("/del.do?id=" + id).then(response => {
if (response.data.code == 0) {
this.$message({
message: '恭喜你，删除数据成功！',
type: 'success'
});
this.fetchData(); //刷新列表
} else {
this.$message({
message: "没有权限，不能删除",
type: 'success'
});
}
})
})
},
handleSizeChange(val) {
this.page.pageSize=val;
this.fetchData();
},
handleCurrentChange(val) {
this.page.pageNum=val;
this.fetchData();
}
}
})
</script>
</html>
MyController
package com.jiyun.controller.security;
import com.alibaba.dubbo.config.annotation.Reference;
import com.jiyun.entity.PageResult;
import com.jiyun.entity.Result;
import com.jiyun.pojo.Frim;
import com.jiyun.pojo.KeVo;
import com.jiyun.pojo.Phone;
import com.jiyun.service.MyService;
import org.springframework.security.access.prepost.PreAuthorize;
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 MyController {
@Reference
MyService myService;
//展示所有
@RequestMapping("findPage")
public PageResult findPage(@RequestBody Phone phone ){
return myService.findPage(phone);
}
//添加
// 超级管理员
@PreAuthorize("hasRole('ROLE_CHAO')")
@RequestMapping("add")
public Result add(@RequestBody Phone phone ){
myService.add(phone);
return new Result() ;
}
@PreAuthorize("hasRole('ROLE_CHAO')")
@RequestMapping("del")
public Result del(Integer id ){
myService.del(id);
return new Result() ;
}
@PreAuthorize("hasRole('ROLE_CHAO')")
@RequestMapping("ji")
public List<KeVo> ji(){
return myService.ji();
}
@RequestMapping("bu")
public List<Frim> bu( ){
return myService.bu();
}
}
效果展示：
表格统计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入样式 -->
<!-- 引入样式 -->
<link rel="stylesheet" href="../js/node_modules/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 150px;
height: 70px;
line-height: 150px;
text-align: center;
}
.avatar {
width: 150px;
height: 70px;
display: block;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>管理
<small>疫苗管理</small>
</h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>管理</el-breadcrumb-item>
<el-breadcrumb-item>疫苗管理</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<el-table ref="multipleTable" :data="tableData" border style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column prop="cname" label="名称"></el-table-column>
<el-table-column prop="num" label="个数"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.pageNum"
:page-sizes="[2, 4, 6, 8]"
:page-size="page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
</div>
</div>
</div>
</body>
<script src="../js/node_modules/vue/dist/vue.js"></script>
<script src="../js/node_modules/axios/dist/axios.js"></script>
<script src="../js/node_modules/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
contents: [],
tableData: [],
multipleSelection: [],
page: {
pageNum: 1,
total: null,
pageSize:2,
name:"",
couponId:null,
sta:"",
end:"",
state:2
},
pojo: {},
dept: {},
formVisible: false,
formVisible2: false,
contentVisible: false,
imageUrl: '',
parentIds: [0]
}
},
created() {
this.fetchData();
this.bu();
},
methods: {
bu() {
axios.get("/bu.do").then(res => {
// 用户的集合，有没有疫苗的id
this.dept = res.data;
})
},
out(userId, vaccineId) {
axios.get("/out.do?userId=" + userId + "&vaccineId=" + vaccineId).then(res => {
axios.get("/findContents.do?id=" + vaccineId).then(res => {
// 用户的集合，有没有疫苗的id
this.contents = res.data;
// 给每一个当前疫苗的详情用户，绑定疫苗id
for (let i = 0; i < this.contents.length; i++) {
this.contents[i].vaccineId = id;
}
})
})
},
handleAdd() {
this.pojo = {};
this.formVisible = true;
// 从保存parentId的数组中，得到最后一位数据
this.pojo.parentId = this.parentIds[this.parentIds.length - 1];
},
fetchData() {
axios.post("/ji.do",).then(response => {
this.tableData = response.data;
});
},
handleSizeChange(val) {
this.page.pageSize=val;
this.fetchData();
},
handleCurrentChange(val) {
this.page.pageNum=val;
this.fetchData();
}
}
})
</script>
</html>
效果展示
添加：
删除提示：
如果我的博客对你有帮助，也是你所喜欢的内容，请“点赞” “评论” “收藏” 一键三连，就是对我最大的支持
扫一扫
1391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
