在本月我们学习了Vue的基础知识，结合所学的内容，做了一个小的项目健康管理系统，开发所含的需求,检查项或检查组的增删改查，导入导出，缓存数据用定时任务删除，以及柱状图和柱状图，若本文对你有所帮助，建议一键三连。
创建maven项目模块，导入相关的jar包以及依赖。
，
建表建库：
create table kew(
id int primary key auto_increment,
kid varchar(20),
name varchar(20),
shi varchar(20),
xing varchar(20),
xue varchar(20),
ming varchar(20)
)
create table studentw(
id int primary key auto_increment,
sid varchar(20),
name varchar(20),
sex varchar(20),
age int,
address varchar(20),
zhu varchar(20)
)
create table zhongjian(
s_id int,
k_id int,
foreign key (s_id) references studentw (id),
foreign key (k_id) references kew (id)
)
insert into studentw (id, sid, name, sex, age, address, zhu)
values
(1,'100','小明','男',21,'河南','优秀'),
(2,'101','小红','男',21,'南阳','低级'),
(3,'102','小黑','男',41,'内乡','H欧'),
(4,'103','小有','女',11,'河南','优秀');
insert into kew (id, kid, name, shi, xing, xue, ming)
values
(1,'200','大数据','10','理科','500','理科据就是好'),
(2,'201','语文','10','文科','500','大就是好'),
(3,'202','英语','11','文科','100','大就是好'),
(4,'203','数学','22','理科','900','大就是好'),
(5,'204','政治','13','文科','100','大就是好');
insert into zhongjian (s_id, k_id)
values
(1,1),
(2,2),
(3,3),
(4,1),
(1,1);创建对应的实体类：
public class Student implements Serializable {
private Integer id;
private String sid;
private String name;
private String sex;
private Integer age;
private String address;
private String zhu;
private String names;
private List<Ke> k;
提供get和set方法
}public class Ke implements Serializable {
private Integer id;
private String kid;
private String name;
private String shi;
private String xing;
private String xue;
private String ming;
}检查项前端：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
</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-input placeholder="课程编码/课程名称" v-model="pagination.queryString" style="width: 200px;"
class="filter-item"></el-input>
<el-button @click="findPage()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
<!--<el-upload action="/teacher/import1.do"-->
<!--name="impfile"-->
<!--:show-file-list="false"-->
<!--:on-success="handleSuccess"-->
<!--:before-upload="beforeUpload">-->
<!--<el-button type="primary">上传文件</el-button>-->
<!--</el-upload>-->
<!--<el-button type="primary" class="butT" @click="outExcel()">下载文件</el-button>-->
<!---->
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="kid" label="课程编码" align="center"></el-table-column>
<el-table-column prop="name" label="课程名称" align="center"></el-table-column>
<el-table-column prop="shi" label="课程学时" align="center"></el-table-column>
<el-table-column prop="ming" label="课程说明" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增检查项" :visible.sync="dialogFormVisible">
<el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="课程编码" prop="kid">
<el-input v-model="formData.kid"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程学时" prop="shi">
<el-input v-model="formData.shi"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型">
<el-select v-model="formData.xing">
<el-option label="理科" value="1"></el-option>
<el-option label="文科" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程学费" prop="xue">
<el-input v-model="formData.xue"/>
</el-form-item>
</el-col>
</el-row>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="课程说明">
<el-input v-model="formData.ming" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="课程编码" prop="kid">
<el-input v-model="formData.kid"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程学时" prop="shi">
<el-input v-model="formData.shi"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="类型">
<el-select v-model="formData.xing">
<el-option label="理科" value="1"></el-option>
<el-option label="文科" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="课程学费" prop="xue">
<el-input v-model="formData.xue"/>
</el-form-item>
</el-col>
</el-row>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="课程说明">
<el-input v-model="formData.ming" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize: 10,//每页显示的记录数
total: 0,//总记录数
queryString: null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
formData: {},//表单数据
dialogFormVisible: false,//增加表单是否可见
dialogFormVisible4Edit: false,//编辑表单是否可见
rules: {//校验规则
code: [{required: true, message: '项目编码为必填项', trigger: 'blur'}],
name: [{required: true, message: '项目名称为必填项', trigger: 'blur'}]
}
},
//钩子函数，VUE对象初始化完成后自动执行
created() {
this.findPage();
},
methods: {
//
//
// //导出
// outExcel(){
// location.href="/teacher/export1.do"
// },
// //上传成功提示
// handleSuccess(response, file) {
// if(response.flag){
// this.$message({
// message: response.message,
// type: 'success'
// });
// this.findPage()
// }else{
// this.$message.error(response.message);
// }
// console.log(response, file, fileList);
// },
// //上传之前进行文件格式校验
// beforeUpload(file){
// const isXLS = file.type === 'application/vnd.ms-excel';
// if(isXLS){
// return true;
// }
// const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
// if (isXLSX) {
// return true;
// }
// this.$message.error('上传文件只能是xls或者xlsx格式!');
// return false;
// },
//编辑
handleEdit() {
this.$refs['dataEditForm'].validate(val => {
if (val == true) {
axios.post("/ke/update.do", this.formData).then(res => {
if (res.data.flag == true) {
this.$message({
message: res.data.message,
type: 'success'
})
this.dialogFormVisible4Edit = false;
this.findPage();
} else {
this.$message.error("数据添加错误")
}
})
} else {
this.$message.error("数据错误")
}
})
},
//添加
handleAdd() {
this.$refs['dataAddForm'].validate(val => {
if (val == true) {
axios.post("/ke/add.do", this.formData).then(res => {
if (res.data.flag == true) {
this.$message({
message: res.data.message,
type: 'success'
})
this.dialogFormVisible = false;
this.findPage();
} else {
this.$message.error("数据添加错误")
}
})
} else {
this.$message.error("数据错误")
}
})
},
//分页查询
findPage() {
axios.post("/ke/findPage.do", this.pagination).then(res => {
this.dataList = res.data.rows;
this.pagination.total = res.data.total;
})
},
// 重置表单
resetForm() {
},
// 弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.formData = {};
},
// 弹出编辑窗口
handleUpdate(row) {
this.dialogFormVisible4Edit = true;
this.formData = row;
},
//切换页码
handleCurrentChange(currentPage) {
this.pagination.currentPage = currentPage;
this.findPage();
},
// 删除
handleDelete(row) {
this.$confirm("是否删除","提示",{type:"red"}).then(res=>{
axios.post("/ke/del.do?id="+row.id).then(res=>{
if(res.data.flag==true){
this.$message({
message:res.data.message,
type:'success'
})
this.findPage();
}else {
this.$message.error(res.data.message)
}
})
})
}
}
})
</script>
</html>controller:
package com.jiyun.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.fastjson.JSON;
import com.jiyun.constant.MessageConstant;
import com.jiyun.entity.PageResult;
import com.jiyun.entity.QueryPageBean;
import com.jiyun.entity.Result;
import com.jiyun.pojo.Ke;
import com.jiyun.service.KeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;
import java.util.List;
@RestController
@RequestMapping("ke")
public class KeController {
@Autowired
JedisPool jedisPool;
@Reference
KeService keService;
@RequestMapping("findPage")
public PageResult findPage (@RequestBody QueryPageBean queryPageBean){
return keService.findPage(queryPageBean);
}
@RequestMapping("add")
public Result add (@RequestBody Ke ke){
keService.add(ke);
Jedis redis = jedisPool.getResource();
String s = JSON.toJSONString(ke);
redis.lpush("list",s);
return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS);
}
@RequestMapping("findAll")
public Result findAll (){
List<Ke> list= keService.findAll();
return new Result(true, MessageConstant.ADD_CHECKITEM_SUCCESS,list);
}
@RequestMapping("update")
public Result update (@RequestBody Ke ke){
Jedis redis = jedisPool.getResource();
// 通过这个对象获取id
Integer id = ke.getId();
// 通过这个id 返回的是对象
Ke s= keService.getid(id);
String s1 = JSON.toJSONString(s);
redis.lpush("list",s1);
keService.update(ke);
return new Result(true, MessageConstant.EDIT_CHECKITEM_SUCCESS);
}
@RequestMapping("del")
public Result del (Integer id){
Integer count=keService.getids(id);
if(count>0){
return new Result(false, "数据有关联，不能删除");
}
keService.del(id);
return new Result(true, MessageConstant.DELETE_CHECKITEM_SUCCESS);
}
}
service
package com.jiyun.service;
import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jiyun.entity.PageResult;
import com.jiyun.entity.QueryPageBean;
import com.jiyun.mapper.KeMapper;
import com.jiyun.pojo.Ke;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
@Service
public class KeServiceimpl implements KeService{
@Autowired
KeMapper keMapper;
@Override
public PageResult findPage(QueryPageBean queryPageBean) {
PageHelper.startPage(queryPageBean.getCurrentPage(), queryPageBean.getPageSize());
List<Ke> list=keMapper.findPage(queryPageBean.getQueryString());
PageInfo<Ke> page = new PageInfo<>(list);
return new PageResult( page.getTotal(),page.getList());
}
@Override
public void add(Ke ke) {
keMapper.add(ke);
}
@Override
public void update(Ke ke) {
keMapper.update(ke) ;
}
@Override
public void del(Integer id) {
keMapper.del(id) ;
}
@Override
public List<Ke> findAll() {
return keMapper.findAll();
}
@Override
public Ke getid(Integer id) {
return keMapper.getifd(id);
}
@Override
public Integer getids(Integer id) {
return keMapper.getwq(id);
}
}
mapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--表示这个mapper中可以写那个接口中方法的sql语句-->
<mapper namespace="com.jiyun.mapper.KeMapper">
<!--id必须和接口中的某个方法名一样
resultType id属性对应的方法的返回值
-->
<select id="findPage" resultType="com.jiyun.pojo.Ke" parameterType="String">
select * from kew
<if test="value!=null and value!=''">
where kid=#{value} or name=#{value}
</if>
</select>
<select id="findAll" resultType="com.jiyun.pojo.Ke" >
select * from kew
</select>
<select id="getwq" resultType="int" parameterType="int">
select count(*) from zhongjian where k_id=#{id}
</select>
<insert id="add" parameterType="com.jiyun.pojo.Ke">
insert into kew ( kid, name, shi, xing, xue, ming)
values (#{kid},#{name},#{shi},#{xing},#{xue},#{ming})
</insert>
<update id="update" parameterType="com.jiyun.pojo.Ke">
update kew set kid=#{kid}, name=#{name}, shi=#{shi}, xing=#{xing}, xue=#{xue}, ming=#{ming} where id=#{id}
</update>
<delete id="del" parameterType="int">
delete from kew where id=#{id}
</delete>
</mapper>检查项效果展示：
添加：
修改：
检查组：
前端：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<style>
.datatable {
position: relative;
box-sizing: border-box;
-webkit-box-flex: 1;
width: 100%;
max-width: 100%;
font-size: 14px;
color: rgb(96, 98, 102);
overflow: hidden;
flex: 1 1 0%;
}
.datatable td, .datatable th {
padding: 12px 0;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
}
</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-input placeholder="学号/名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"></el-input>
<el-button @click="findPage()" class="dalfBut">查询</el-button>
<el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
<el-upload action="/student/import1.do"
name="impfile"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button type="primary">上传文件</el-button>
</el-upload>
<el-button type="primary" class="butT" @click="outExcel()">下载文件</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="sid" label="编码" align="center"></el-table-column>
<el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column label="适用性别" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址" align="center"></el-table-column>
<el-table-column prop="zhu" label="说明" align="center"></el-table-column>
<el-table-column prop="names" label="课程说明" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增检查组" :visible.sync="dialogFormVisible">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.sid"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="适用性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄">
<el-input v-model="formData.age"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地址">
<el-input v-model="formData.address"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.zhu" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="课程信息" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>课程编码</th>
<th>课程名称</th>
<th>课程说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.kid}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.ming}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
<!-- 编辑标签弹层 -->
<div class="add-form">
<el-dialog title="编辑检查组" :visible.sync="dialogFormVisible4Edit">
<template>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="基本信息" name="first">
<el-form label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="编码">
<el-input v-model="formData.sid"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="适用性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄">
<el-input v-model="formData.age"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地址">
<el-input v-model="formData.address"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="说明">
<el-input v-model="formData.zhu" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="课程信息" name="second">
<div class="checkScrol">
<table class="datatable">
<thead>
<tr>
<th>选择</th>
<th>课程编码</th>
<th>课程名称</th>
<th>课程说明</th>
</tr>
</thead>
<tbody>
<tr v-for="c in tableData">
<td>
<input :id="c.id" v-model="checkitemIds" type="checkbox" :value="c.id">
</td>
<td><label :for="c.id">{{c.kid}}</label></td>
<td><label :for="c.id">{{c.name}}</label></td>
<td><label :for="c.id">{{c.ming}}</label></td>
</tr>
</tbody>
</table>
</div>
</el-tab-pane>
</el-tabs>
</template>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible4Edit = false">取消</el-button>
<el-button type="primary" @click="handleEdit()">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data:{
activeName:'first',//添加/编辑窗口Tab标签名称
pagination: {//分页相关属性
currentPage: 1,
pageSize:10,
total:100,
queryString:null,
},
dataList: [],//列表数据
formData: {},//表单数据
tableData:[],//新增和编辑表单中对应的检查项列表数据
checkitemIds:[],//新增和编辑表单中检查项对应的复选框，基于双向绑定可以进行回显和数据提交
dialogFormVisible: false,//控制添加窗口显示/隐藏
dialogFormVisible4Edit:false//控制编辑窗口显示/隐藏
},
created() {
this.findPage();
},
methods: {
//导出
outExcel(){
location.href="/student/export1.do"
},
//上传成功提示
handleSuccess(response, file) {
if(response.flag){
this.$message({
message: response.message,
type: 'success'
});
this.findPage()
}else{
this.$message.error(response.message);
}
console.log(response, file, fileList);
},
//上传之前进行文件格式校验
beforeUpload(file){
const isXLS = file.type === 'application/vnd.ms-excel';
if(isXLS){
return true;
}
const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
if (isXLSX) {
return true;
}
this.$message.error('上传文件只能是xls或者xlsx格式!');
return false;
},
//编辑
handleEdit() {
axios.post("/student/update.do?ids="+this.checkitemIds, this.formData).then(res=>{
this.dialogFormVisible4Edit=false;
this.findPage();
})
},
//添加
handleAdd () {
axios.post("/student/add.do?ids="+this.checkitemIds, this.formData).then(res=>{
this.dialogFormVisible=false;
this.findPage();
})
},
//分页查询
findPage() {
axios.post("/student/findPage.do", this.pagination).then(res => {
this.dataList = res.data.rows;
this.pagination.total = res.data.total;
})
},
// 重置表单
resetForm() {
},
// 弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
axios.post("/ke/findAll.do").then(res=>{
this.tableData=res.data.data;
})
this.checkitemIds=[];
},
// 弹出编辑窗口
handleUpdate(row) {
this.formData = row;
this.dialogFormVisible4Edit = true;
axios.post("/ke/findAll.do").then(res=>{
this.tableData=res.data.data;
axios.post("/student/getid.do?id="+row.id).then(res=>{
this.checkitemIds=res.data.data;
})
})
},
//切换页码
handleCurrentChange(currentPage) {
this.pagination.currentPage = currentPage;
this.findPage();
},
// 删除
handleDelete(row) {
this.$confirm("是否删除","提示",{type:"red"}).then(res=>{
axios.post("/student/del.do?id="+row.id).then(res=>{
if(res.data.flag==true){
this.$message({
message:res.data.message,
type:'success'
})
this.findPage();
}else {
this.$message.error("数据删除错误")
}
})
})
}
}
})
</script>
</html>
controller:
package com.jiyun.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.jiyun.constant.MessageConstant;
import com.jiyun.entity.PageResult;
import com.jiyun.entity.QueryPageBean;
import com.jiyun.entity.Result;
import com.jiyun.pojo.Ke;
import com.jiyun.pojo.Student;
import com.jiyun.service.StudetnService;
import org.apache.poi.hssf.usermodel.HSSFRow;
import org.apache.poi.hssf.usermodel.HSSFSheet;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletResponse;
import java.net.URLEncoder;
import java.util.List;
@RestController
@RequestMapping("student")
public class StudentController {
@Reference
StudetnService studetnService;
@RequestMapping("findPage")
public PageResult findPage (@RequestBody QueryPageBean queryPageBean){
return studetnService.findPage(queryPageBean);
}
@RequestMapping("add")
public Result add (@RequestBody Student student,Integer[] ids){
studetnService.add(student,ids);
return new Result(true, MessageConstant.ADD_CHECKGROUP_SUCCESS);
}
@RequestMapping("update")
public Result update (@RequestBody Student student,Integer[] ids){
studetnService.update(student,ids);
return new Result(true, MessageConstant.EDIT_CHECKGROUP_SUCCESS);
}
@RequestMapping("del")
public Result del (Integer id){
studetnService.del(id);
return new Result(true, MessageConstant.DELETE_CHECKGROUP_SUCCESS);
}
@RequestMapping("getid")
public Result getid (Integer id){
List<Integer> list= studetnService.getid(id);
return new Result(true, MessageConstant.DELETE_CHECKGROUP_SUCCESS,list);
}
@RequestMapping("/export1")
public void export1 (HttpServletResponse response) throws Exception {
//创建空的工作薄
HSSFWorkbook workbook = new HSSFWorkbook();
// 创建空的表
HSSFSheet sheet = workbook.createSheet();
//创建一个数组
String[] tital={"编号","名称","性别","年龄","地址","说明","课程说明"};
HSSFRow row = sheet.createRow(0);
for (int i = 0; i < tital.length; i++) {
row.createCell(i).setCellValue(tital[i]);
}
// 查询数据库
List<Student> list=studetnService.fan3();
for (int i = 0; i < list.size(); i++) {
row = sheet.createRow(i+1);
row.createCell(0).setCellValue(list.get(i).getSid());
row.createCell(1).setCellValue(list.get(i).getName());
row.createCell(2).setCellValue(list.get(i).getSex());
row.createCell(3).setCellValue(list.get(i).getAge());
row.createCell(4).setCellValue(list.get(i).getAddress());
row.createCell(5).setCellValue(list.get(i).getZhu());
row.createCell(6).setCellValue(list.get(i).getNames());
}
//7.把工作簿对象返回给前端浏览
response.setHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode("艺人列表.xls", "UTF-8"));
response.setHeader("Connection", "close");
response.setHeader("Content-Type", "application/octet-stream");
workbook.write(response.getOutputStream());
workbook.close();
}
@RequestMapping("/import1")
public Result import1 (MultipartFile impfile, HttpServletResponse response) throws Exception {
// 创建空的工作薄
HSSFWorkbook workbook = new HSSFWorkbook(impfile.getInputStream());
// 获取表
HSSFSheet sheetAt = workbook.getSheetAt(0);
// 获取最后一个交表
int lastRowNum = sheetAt.getLastRowNum();
for (int i = 1; i <=lastRowNum; i++) {
HSSFRow row = sheetAt.getRow(i);
String sid = row.getCell(0).getStringCellValue();
String name = row.getCell(1).getStringCellValue();
String sex = row.getCell(2).getStringCellValue();
int age = (int)row.getCell(3).getNumericCellValue();
String address = row.getCell(4).getStringCellValue();
String zhu = row.getCell(5).getStringCellValue();
String names = row.getCell(6).getStringCellValue();
Student student = new Student();
student.setSid(sid);
student.setName(name);
student.setAddress(address);
student.setAge(age);
student.setZhu(zhu);
student.setSex(sex);
student.setNames(names);
studetnService.add1(student);
}
return new Result(true, MessageConstant.UPLOAD_SUCCESS);
}
}
service:
package com.jiyun.service;
import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jiyun.entity.PageResult;
import com.jiyun.entity.QueryPageBean;
import com.jiyun.mapper.StudentMapper;
import com.jiyun.pojo.Ke;
import com.jiyun.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import java.util.List;
@Service
public class StudetnServiceimpl implements StudetnService {
@Autowired
StudentMapper studentMapper;
@Override
public PageResult findPage(QueryPageBean queryPageBean) {
PageHelper.startPage(queryPageBean.getCurrentPage(), queryPageBean.getPageSize());
List<Student> list=studentMapper.findPage(queryPageBean.getQueryString());
// select * from zhongjian z join kew k on z.s_id=k.id where s_id=#{id}
for (Student student : list) {
// 获取学生的id
Integer id = student.getId();
//同过id在去中间表关联查询检查项的信息
List<Ke> list2=studentMapper.zjianxinag(id);
// 再检查组 中自定义属性
String names= "";
for (Ke ke : list2) {
// 字符串拼接
names+=ke.getMing()+",";
}
//再把这个对象放到检查组自定义的属性
student.setNames(names);
}
PageInfo<Student> page = new PageInfo<>(list);
return new PageResult( page.getTotal(),page.getList());
}
@Override
public void add(Student student, Integer[] ids) {
studentMapper.add(student);
Integer id = student.getId();
for (Integer kid : ids) {
studentMapper.zjian(id,kid);
}
}
@Override
public void update(Student student, Integer[] ids) {
studentMapper.update(student);
Integer id = student.getId();
studentMapper.del(id);
for (Integer kid : ids) {
studentMapper.zjian(id,kid);
}
}
@Override
public void del(Integer id) {
studentMapper.del(id);
studentMapper.delAll(id);
}
@Override
public List<Integer> getid(Integer id) {
return studentMapper.getid(id);
}
@Override
public List<Student> fan3() {
return studentMapper.fan3();
}
@Override
public void add1(Student student) {
studentMapper.add1(student);
}
}
定时删除：
package com.jiyun.jobs;
import com.alibaba.fastjson.JSON;
import com.jiyun.pojo.Ke;
import com.jiyun.pojo.Strudent;
import org.springframework.beans.factory.annotation.Autowired;
import redis.clients.jedis.Jedis;
import redis.clients.jedis.JedisPool;
import java.util.List;
public class ClearImgJob {
@Autowired
JedisPool jedisPool;
public void clearImg(){
Jedis redis = jedisPool.getResource();
// 读取缓存中的信息
List<String> list = redis.lrange("list", 0, -1);
redis.lpop("list");
redis.close();
redis.lrem("list",0,list.get(1));
在list中名字是小米粒用定时任务删除
// for (int i = 0; i < list.size(); i++) {
// Ke ke = JSON.parseObject(list.get(i), Ke.class);
// if(ke.getName().equals("小米粒")){
// redis.lrem("list",0,list.get(i));
// }
// }
}
}
mapper:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--表示这个mapper中可以写那个接口中方法的sql语句-->
<mapper namespace="com.jiyun.mapper.StudentMapper">
<!--id必须和接口中的某个方法名一样
resultType id属性对应的方法的返回值
-->
<!--展示所有-->
<select id="findPage" resultType="com.jiyun.pojo.Student" parameterType="String">
select * from studentw
<if test="value!=null and value!=''">
where sid=#{value} or name=#{value}
</if>
</select>
<select id="fan3" resultType="com.jiyun.pojo.Student">
select w.*, ming names from studentw w ,kew k where w.id=k.id
</select>
<!--添加-->
<insert id="add" parameterType="com.jiyun.pojo.Student" useGeneratedKeys="true" keyProperty="id">
insert into studentw (sid, name, sex, age, address, zhu)
values (#{sid},#{name},#{sex},#{age},#{address},#{zhu})
</insert>
<insert id="add1" parameterType="com.jiyun.pojo.Student">
insert into studentw (sid, name, sex, age, address, zhu)
values (#{sid},#{name},#{sex},#{age},#{address},#{zhu})
</insert>
<!--中间表-->
<insert id="zjian" parameterType="int">
insert into zhongjian (s_id,k_id) values (#{sid},#{kid});
</insert>
<!--修改-->
<update id="update" parameterType="com.jiyun.pojo.Student" useGeneratedKeys="true" keyProperty="id">
update studentw set sid=#{sid}, name=#{name}, sex=#{sex}, age=#{age}, address=#{address}, zhu=#{zhu} where id=#{id}
</update>
<!--删除-->
<delete id="del" parameterType="int">
delete from zhongjian where s_id=#{id}
</delete>
<select id="getid" parameterType="int" resultType="int" >
select k_id from zhongjian where s_id=#{id}
</select>
<!--关联检查项的课程说明-->
<select id="zjianxinag" parameterType="int" resultType="com.jiyun.pojo.Ke" >
select * from zhongjian z join kew k on z.s_id=k.id where s_id=#{id}
</select>
<!--删除检查组-->
<delete id="delAll" parameterType="int">
delete from studentw where id=#{id}
</delete>
</mapper>
效果展示：
添加：
修改：
统计图：
前端：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/echarts/echarts.js"></script>
</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">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart1" style="height:600px;"></div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
axios.get("/report/zzt.do").then((res)=>{
myChart1.setOption(
{
xAxis: {
type: 'category',
//名字
data: res.data.data.cname,
"axisLabel":{
interval: 0
}
},
tooltip: {},
yAxis: {
type: 'value'
},
series: [{
//数量
data: res.data.data.num,
type: 'bar'
}]
});
});
</script>
</html>
饼图：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>传智健康</title>
<meta name="description" content="传智健康">
<meta name="keywords" content="传智健康">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../css/style.css">
<script src="../js/echarts.js"></script>
</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">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart1" style="height:600px;"></div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
axios.get("/report/bt.do").then((res) => {
var list = res.data.data;
var echartDate = [];
for (var i = 0; i < list.length; i++) {
var t = list[i];
var obj = {
//数量
value: t.num,
//名字
name: t.cname
};
echartDate.push(obj);
}
myChart1.setOption(
{
title: {
text: '商品信息统计',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '数量',
type: 'pie',
radius: '50%',
// data: echartDate,
center:['50%','60%'],
data:echartDate,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
}
);
</script>
</html>
controller:
package com.jiyun.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.jiyun.entity.Result;
import com.jiyun.pojo.KeVo;
import com.jiyun.service.KeService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("report")
public class tongji {
@Reference
KeService keService;
@RequestMapping("zzt")
public Result zzt(){
List<KeVo> list = keService.findcount1();
List<Integer> num = new ArrayList<>();
List<String> cname = new ArrayList<>();
Map<String,Object> map = new HashMap<>();
for (KeVo keVo : list) {
num.add(keVo.getNum());
cname.add(keVo.getCname());
}
map.put("num",num);
map.put("cname",cname);
return new Result(true,"显示成功",map);
}
@RequestMapping("bt")
public Result bingzhuangtu(){
List<KeVo> list = keService.findcount1();
List<Integer> num = new ArrayList<>();
List<String> cname = new ArrayList<>();
List<Map<String,Object>> list1 = new ArrayList<>();
for (KeVo keVo : list) {
num.add(keVo.getNum());
cname.add(keVo.getCname());
HashMap<String,Object> map = new HashMap<>();
map.put("num",keVo.getNum());
map.put("cname",keVo.getCname());
list1.add(map);
}
return new Result(true,"显示成功",list1);
}
}
效果展示：
好文推荐
如果我的博客对你有帮助，也是你所喜欢的内容，请“点赞” “评论” “收藏” 一键三连，就是对我最大的支持
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
