练手项目
《驾校预约管理系统》
springBoot+symeleaf+vue
第一天：建好数据库，完成登录和公告模块所有功能
数据库实体类字段表如下：
//管理员
public class Manager {
private int id;
private String username;
private String password;
private String tel;
private String status;
private Date creatDate;
private Date lastModifyDate;
}
//学员用户
public class User {
private int id;
private String username;
private String password;
private String tel;
private String sex;
private Date birth;
private int age;
private String address;
private String status;
private Date creatDate;
private Date lastModifyDate;
}
//公告
public class Advice {
private int id;
private String title;
private int managerId;
private String content;
private String status;
private Date creatDate;
private Date lastModifyDate;
}
//投诉
public class Complaint {
private int id;
private int userId;
private String content;
private String status;
private Date creatDate;
private Date lastModifyDate;
private String result;
}
//汽车信息
public class Car {
private int id;
private String carLicense;
private String brand;
private String carType;
private String status;
private Date creatDate;
private Date lastModifyDate;
private String carImg;
}
//学员注册申请信息
public class ApplyInfo {
private int id;
private int userId;
private Date startDate;
private Date endDate;
private String status;
private Date creatDate;
private Date lastModifyDate;
private String result;
}
//教练表
public class Train {
private int id;
private String username;
private String tel;
private int age;
private String status;
@JsonFormat(pattern = "yyyy-MM-dd")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date creatDate;
@JsonFormat(pattern = "yyyy-MM-dd")
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date lastModifyDate;
private String headerImg;
}
//订单表
public class Order {
private int id;
private int userId;
private Date startDate;
private Date endDate;
private int carId;
private int trainId;
private String status;
private Date creatDate;
private Date lastModifyDate;
}
/**
使用的是注解
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
@EqualsAndHashCode
*/
2.登录页设计：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>管理员登录页</title>
<meta name="keywords" content="驾校预约管理系统">
<meta name="description" content="驾校预约管理系统">
<link th:href="@{/asserts/css/bootstrap.min.css?v=3.4.0}" rel="stylesheet">
<link th:href="@{/asserts/font-awesome/css/font-awesome.css?v=4.3.0}" rel="stylesheet">
<link th:href="@{/asserts/css/animate.css}" rel="stylesheet">
<link th:href="@{/asserts/css/style.css?v=2.2.0}" rel="stylesheet">
<!-- <script th:src="@{/asserts/scripts/vue2.6.10_min.js}"></script>-->
<script th:src="|https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js|"></script>
<script th:src="|https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js|"></script>
<!-- 引入样式 -->
<link rel="stylesheet" th:href="|https://unpkg.com/element-ui/lib/theme-chalk/index.css|"/>
<!-- 引入组件库 -->
<script th:src="|https://unpkg.com/element-ui/lib/index.js|"></script>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div id="app">
<h3>欢迎使用驾校预约管理系统 --> <span style="color: red">此页为管理员登录页,非管理员用户请离开</span></h3>
<!-- <p style="color: red" th:if="${!#strings.isEmpty(session.noLogin)}" th:text="${session.noLogin}"></p>-->
<el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" size="mini" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号:" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入管理员账号"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input v-model="loginForm.password" placeholder="请输入管理员密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('loginFormRef')">登录</el-button>
<el-button @click="resetForm('loginFormRef')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<script>
let vueApp = new Vue({
el:"#app",
data:{
loginForm:{
username:'',
password:'',
},
loginRules:{
username:[
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
],
}
},
methods:{
login(param){
let url = "user/mLogin";
this.$refs[param].validate((valid) =>{
if (valid){
let params = "username="+this.loginForm.username+"&password="+this.loginForm.password;
$.post(url,params,function (data) {
if (data.code == 200){
vueApp.$message({
showClose: true,
message:data.msg,
type:'success',
duration:8000
});
let user = data.data;
sessionStorage.setItem("userInfo",JSON.stringify(user));
location.href = "/managerMain.html";
}else {
vueApp.$message({
showClose: true,
message:data.msg,
type:'error',
duration: 8000
});
}
},"json");
}else {
console.log("submmit error");
return false;
}
})
},
resetForm(param){
this.$refs[param].resetFields();
}
},
created(){
}
})
</script>
<!-- Mainly scripts -->
<script th:src="@{/asserts/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap.min.js?v=3.4.0}"></script>
</body>
</html>
2.1：登陆后台
三层：controller层、service层、mapper层
controller:
package com.woniu.woniudriver.controller;
import com.woniu.woniudriver.entity.Manager;
import com.woniu.woniudriver.service.UserServiceImpl;
import com.woniu.woniudriver.utils.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
@Controller
@RequestMapping("user")
public class UserController {
@Autowired
UserServiceImpl userService;
@RequestMapping("/mLogin")
@ResponseBody
public ResponseResult<Manager> login(String username, String password, HttpServletRequest request){
ResponseResult<Manager> result = new ResponseResult<>();
try {
Manager manager = userService.Login(username);
if (manager == null){
//account is null
result.setCode(201);
result.setMsg("账户不存在");
}else {
//
if (manager.getPassword().equals(password)){
//checked is ok
request.getSession().setAttribute("userInfo",manager);
result.setCode(200);
result.setMsg("登陆成功");
result.setData(manager);
}else {
//password is error
result.setCode(201);
result.setMsg("密码错误");
}
}
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("系统出错，请联系管理员");
}
return result;
}
@RequestMapping("/exit")
public String exit(HttpSession session){
session.invalidate();
return "redirect:/index.html";
}
}
service层：
@Service
public class UserServiceImpl {
@Autowired
ManagerMapper managerMapper;
public Manager Login(String username){
Manager manager = managerMapper.forLogin(username);
return manager;
}
}
mapper层:
@Repository
public interface ManagerMapper {
@Select("select * from manager where username = #{value}")
Manager forLogin(String username);
}
2.2 公告页：
html --> controller --> service --> mapper
html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>公告管理</title>
<!-- <link th:href="@{/asserts/css/bootstrap.min.css?v=3.4.0}" rel="stylesheet">-->
<script th:src="|https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js|"></script>
<script th:src="|https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js|"></script>
<!-- 引入样式 -->
<link rel="stylesheet" th:href="|https://unpkg.com/element-ui/lib/theme-chalk/index.css|"/>
<!-- 引入组件库 -->
<script th:src="|https://unpkg.com/element-ui/lib/index.js|"></script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
</style>
</head>
<body>
<div id="app">
<!-- ------------------------开始--------------------------- -->
<!-- ------------------------导航--------------------------- -->
<el-row>
<el-col :span="24">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>一次过驾校管理系统</el-breadcrumb-item>
<el-breadcrumb-item><a th:href="@{/managerAdvice.html}" target="targetFrame">公告管理</a></el-breadcrumb-item>
</el-breadcrumb>
</el-col>
</el-row>
<!-- ------------------------搜索--------------------------- -->
<el-row>
<el-col :span="24">
<el-form :inline="true" :model="adviceForm" size="mini" class="demo-form-inline">
<el-form-item label="标题:">
<el-input v-model="adviceForm.title" placeholder="标题"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<!-- ------------------------添加公告--------------------------- -->
<el-button type="primary" @click="addAdvice" size="small">添加新公告</el-button>
<el-dialog title="添加新公告" :visible.sync="addDialogFormVisible">
<el-form :model="addAdviceForm" :rules="addAdviceRules" ref="addAdviceForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="新标题" prop="title">
<el-input v-model="addAdviceForm.title"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input v-model="addAdviceForm.content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.prevent="add">提交</el-button>
<el-button @click.prevent="resetAddForm">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- ------------------------批量删除--------------------------- -->
<el-button type="danger" @click="delBatch" size="small">批量删除</el-button>
<!-- ------------------------显示--------------------------- -->
<el-table
:data="adviceList"
style="width: 100%"
@selection-change="selectChange">
<el-table-column
type="selection"
width="50">
</el-table-column>
<el-table-column
label="发布日期"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px" >{{ scope.row.creatDate }}</span>
</template>
</el-table-column>
<el-table-column
label="标题"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row.content }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.title }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="发布者"
width="180">
<template slot-scope="scope">
<i class="el-icon-s-custom"></i>
<span style="margin-left: 10px">{{ scope.row.managerName }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click.prevent="edit(scope.row.id)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click.prevent="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- ------------------------编辑--------------------------- -->
<el-dialog title="修改公告" :visible.sync="editDialogFormVisible">
<el-form :model="editAdviceForm" :rules="editAdviceRules" ref="editAdviceForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="新标题" prop="title">
<el-input v-model="editAdviceForm.title"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input v-model="editAdviceForm.content"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.prevent="modify()">提交</el-button>
<el-button @click.prevent="resetEditForm">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- ------------------------分页--------------------------- -->
<el-row>
<el-col :span="24">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[2,4, 8, 16]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
<!-- ------------------------结束--------------------------- -->
</div>
<script>
let appVue = new Vue({
el:'#app',
data:{
editAdviceForm:{
title:'',
content:'',
},
adviceForm:{
title:'',
},
addAdviceForm:{
title:'',
content:'',
},
adviceList:[],
pageNum:1,
pageSize:2,
total:0,
editAdviceRules:{
title:[{ required: true, message: '标题不能为空', trigger: 'blur' }],
content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
},
addAdviceRules:{
title:[{ required: true, message: '标题不能为空', trigger: 'blur' }],
content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
},
addDialogFormVisible:false,
editDialogFormVisible:false,
aids:[],
},
methods:{
//批量删除
delBatch(){
let aids = this.aids;
if (aids.length < 1){
alert("至少一条")
}else {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认，提交删除
let url = "advice/delBatch";
let params = {"aids":aids};
$.ajax({
type:'post',
url:url,
data:params,
dataType:'json',
contentType:'application/x-www-form-urlencoded',
success:function (data) {
console.log(data);
if (data.code==200){
appVue.$message({
type: 'success',
message: '删除成功!',
duration:3000
});
appVue.pageNum = 1;
appVue.initData();
}else {
appVue.$message({
showClose:true,
message:data.msg,
type:'error',
duration:2000
});
}
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
//点击复选框，选定对象
selectChange(obj){
this.aids = [];
console.log(obj)
for (let i=0;i<obj.length;i++){
this.aids.push(obj[i].id);
}
},
//逻辑删除
del(id) {
let url = "advice/mdel?id="+id;
$.get(url,function (data){
if (data.code == 200){
appVue.$message({
type:'success',
message:data.msg,
duration:1000
})
appVue.initData();
}else {
appVue.$message({
type:'error',
message:data.msg,
duration:5000
})
}
},"json")
},
//修改提交
modify(){
this.$refs['editAdviceForm'].validate((valid)=>{
if (valid){
// alert("111")
let params = this.editAdviceForm;
// alert(params);
console.log(params);
let url = '/advice/modify'
$.ajax({
type:'post',
url : url,
dataType:'json',
data:JSON.stringify(params),
contentType:'application/json',
success:function (data){
console.log(data);
if (data.code == 200){
appVue.$message({
type:'success',
message:data.msg,
duration:1000
})
appVue.editDialogFormVisible = false;
appVue.initData();
}else {
appVue.$message({
type:'error',
message:data.msg,
duration:5000
})
}
}
},"json")
}else {
alert("提交失败");
return false;
}
})
},
//修改重置
resetEditForm(){
},
//弹出修改框
edit(id){
let url = "advice/getadvice?id="+id;
$.get(url,function (data){
if (data.code == 200){
console.log(data);
appVue.editAdviceForm = data.data;
appVue.editDialogFormVisible = true;
}else {
appVue.$message({
showClose:true,
type:'error',
message:data.msg,
duration:1000
})
}
})
},
//添加重置
resetAddForm(){
this.$refs['addAdviceForm'].resetFields();
},
//添加提交
add(){
this.$refs['addAdviceForm'].validate((valid)=>{
if (valid){
// alert("111")
let params = this.addAdviceForm;
// alert(params);
console.log(params);
let url = '/advice/madd'
$.ajax({
type:'post',
url : url,
dataType:'json',
data:JSON.stringify(params),
contentType:'application/json',
success:function (data){
console.log(data);
if (data.code == 200){
appVue.$message({
type:'success',
message:data.msg,
duration:1000
})
appVue.addDialogFormVisible = false;
appVue.initData();
}else {
appVue.$message({
type:'error',
message:data.msg,
duration:5000
})
}
}
},"json")
}else {
alert("提交失败");
return false;
}
})
},
//添加按钮
addAdvice(){
this.addDialogFormVisible = true;
this.$refs['addAdviceForm'].resetFields();
},
//分页，搜索
search(){
this.pageNum = 1;
this.initData();
},
handleSizeChange(size){
this.pageSize = size;
this.initData();
},
handleCurrentChange(now){
this.pageNum = now;
this.initData();
},
initData(){
let params = "now="+this.pageNum+"&size="+this.pageSize+"&title="+this.adviceForm.title;
let url = "advice/mlist?"+params;
$.get(url,function (data){
console.log(data);
if (data.code == 200){
appVue.$message({
showClose:true,
message:data.msg,
type:'success',
duration:1000
});
appVue.adviceList = data.data.list;
appVue.pageNum = data.data.pageNum;
appVue.pageSize = data.data.pageSize;
appVue.total = data.data.total;
}else {
appVue.$message({
showClose:true,
message: data.msg,
type: 'error',
duration: 1000
});
}
},"json")
},
},
created() {
this.initData();
}
})
</script>
</body>
</html>
controller层:
package com.woniu.woniudriver.controller;
import com.github.pagehelper.PageInfo;
import com.woniu.woniudriver.entity.Advice;
import com.woniu.woniudriver.entity.Manager;
import com.woniu.woniudriver.service.MAdviceService;
import com.woniu.woniudriver.utils.ResponseResult;
import com.woniu.woniudriver.vo.AdviceVo;
import org.apache.catalina.Session;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;
import java.util.List;
@Controller
@RequestMapping("advice")
public class MAdviceController {
@Autowired
MAdviceService mAdviceService;
@RequestMapping("/mlist")
@ResponseBody
public ResponseResult<PageInfo<AdviceVo>> mlist(Integer now,Integer size,String title){
ResponseResult<PageInfo<AdviceVo>> result = new ResponseResult<>();
try {
PageInfo<AdviceVo> pageInfo = mAdviceService.queryByTitle(now, size, title);
result.setCode(200);
result.setMsg("查询成功");
result.setData(pageInfo);
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("查询失败");
}
return result;
}
@RequestMapping("/madd")
@ResponseBody
public ResponseResult<PageInfo<Advice>> madd(@RequestBody Advice advice, HttpServletRequest request){
ResponseResult<PageInfo<Advice>> result = new ResponseResult<>();
Manager userInfo = (Manager) request.getSession().getAttribute("userInfo");
try {
System.out.println(advice);
advice.setCreatDate(new Date());
advice.setLastModifyDate(new Date());
advice.setManagerId(userInfo.getId());
mAdviceService.addAdvice(advice);
result.setCode(200);
result.setMsg("添加成功");
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("添加失败");
}
return result;
}
@RequestMapping("/getadvice")
@ResponseBody
public ResponseResult<AdviceVo> getadvice(int id, HttpServletRequest request){
ResponseResult<AdviceVo> result = new ResponseResult<>();
Manager userInfo = (Manager) request.getSession().getAttribute("userInfo");
try {
AdviceVo adviceVo = mAdviceService.queryAdvice(id);
result.setCode(200);
result.setData(adviceVo);
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("查询失败");
}
return result;
}
@RequestMapping("/modify")
@ResponseBody
public ResponseResult<PageInfo<Advice>> modify(@RequestBody Advice advice, HttpServletRequest request){
ResponseResult<PageInfo<Advice>> result = new ResponseResult<>();
Manager userInfo = (Manager) request.getSession().getAttribute("userInfo");
try {
System.out.println(advice);
advice.setCreatDate(new Date());
advice.setLastModifyDate(new Date());
advice.setManagerId(userInfo.getId());
mAdviceService.modifyAdvice(advice);
result.setCode(200);
result.setMsg("修改成功");
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("修改失败");
}
return result;
}
@RequestMapping("/mdel")
@ResponseBody
public ResponseResult<Void> mdel(int id, HttpServletRequest request){
ResponseResult<Void> result = new ResponseResult<>();
Manager userInfo = (Manager) request.getSession().getAttribute("userInfo");
try {
mAdviceService.removeAdvice(id);
result.setCode(200);
result.setMsg("删除成功");
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("删除失败");
}
return result;
}
@RequestMapping("/delBatch")
@ResponseBody
public ResponseResult<Void> delBatch(@RequestParam(value = "aids[]") int[] ids){
ResponseResult<Void> result = new ResponseResult<>();
try {
mAdviceService.removeByBatch(ids);
result.setCode(200);
result.setMsg("删除成功");
}catch (RuntimeException e){
e.printStackTrace();
result.setCode(201);
result.setMsg("删除失败");
}
return result;
}
}
service层：
package com.woniu.woniudriver.service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.woniu.woniudriver.entity.Advice;
import com.woniu.woniudriver.mapper.MAdviceMapper;
import com.woniu.woniudriver.vo.AdviceVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class MAdviceService {
@Autowired
MAdviceMapper mAdviceMapper;
public PageInfo<AdviceVo> queryByTitle(Integer now,Integer size,String title){
PageHelper.startPage(now,size);
List<AdviceVo> list = mAdviceMapper.selectByTitle(title);
return new PageInfo<>(list);
}
public void addAdvice(Advice advice) {
mAdviceMapper.insertAdvice(advice);
}
public AdviceVo queryAdvice(int id) {
return mAdviceMapper.updateAdvice(id);
}
public void modifyAdvice(Advice advice) {
mAdviceMapper.update(advice);
}
public void removeAdvice(int id) {
mAdviceMapper.delAdvice(id);
}
public void removeByBatch(int[] ids) {
mAdviceMapper.delByBatch(ids);
}
}
mapper:
package com.woniu.woniudriver.mapper;
import com.woniu.woniudriver.entity.Advice;
import com.woniu.woniudriver.vo.AdviceVo;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface MAdviceMapper {
List<AdviceVo> selectByTitle(String title);
void insertAdvice(Advice advice);
AdviceVo updateAdvice(int id);
void update(Advice advice);
@Update("update advice set status = 0 where id = #{id}")
void delAdvice(int id);
void delByBatch(@Param("arrayId") int[] ids);
}
不想写了，太多了。项目发布上来，其中有些错误是后来修改之后懒得改回去了，如果有下载了这个项目运行时有些按钮运行失败，建议自己找错修改 .= =. |
地址在下，免费 |
v
https://download.csdn.net/download/WL_bigman/86901690
3897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
