旅遊信息管理系統 景點信息的增加、刪除、修改、展示的實現
前言
代碼已上傳至github:https://github.com/kalipoison/travelManageSystem
由於上傳文件使用base64編碼之後,mysql可能存儲不下,小編實驗結論是小於20k的文件都可以成功上傳
流程
com.gohb.travels.Controller.PlaceController代碼如下:
package com.gohb.travels.Controller;
import com.gohb.travels.entity.Place;
import com.gohb.travels.entity.Result;
import com.gohb.travels.service.PlaceService;
import org.apache.commons.io.FilenameUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@CrossOrigin
@RequestMapping("place")
public class PlaceController {
@Autowired
private PlaceService placeService;
@Value("${upload.dir}")
private String realPath;
/**
* 修改景點信息
*/
@PostMapping("update")
public Result update(MultipartFile pic, Place place) throws IOException {
Result result = new Result();
try{
//對接收文件做base64
String picpath = Base64Utils.encodeToString(pic.getBytes());
place.setPicpath(picpath);
//處理文件上傳
String extension = FilenameUtils.getExtension(pic.getOriginalFilename());
String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + extension;
pic.transferTo(new File(realPath,newFileName));
//修改景點信息
placeService.update(place);
result.setMsg("修改景點信息成功");
}catch (Exception e){
e.printStackTrace();
result.setState(false).setMsg(e.getMessage());
}
return result;
}
/**
* 查詢景點信息
*/
@GetMapping("findOne")
public Place findOne(String id){
return placeService.findOne(id);
}
/**
* 刪除景點信息
* @param id
* @return
*/
@GetMapping("delete")
public Result delete(String id){
Result result = new Result();
try{
placeService.delete(id);
result.setMsg("刪除景點信息成功");
}catch (Exception e){
e.printStackTrace();
result.setState(false).setMsg(e.getMessage());
}
return result;
}
/**
* 保存景點信息
*
* @param pic
* @return
*/
@PostMapping("save")
public Result save(MultipartFile pic, Place place) throws IOException {
Result result = new Result();
try {
//文件上傳
String extension = FilenameUtils.getExtension(pic.getOriginalFilename());
String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) + extension;
//base64編碼處理
place.setPicpath(Base64Utils.encodeToString(pic.getBytes()));
//文件上傳
File file = new File(realPath);
pic.transferTo(new File(file,newFileName));
//保存place對象
placeService.save(place);
result.setMsg("保存景點信息成功!!!");
} catch (Exception e) {
e.printStackTrace();
result.setState(false).setMsg(e.getMessage());
}
return result;
}
/**
* 根據省份id查詢景點的方法
*/
@GetMapping("findAllPlace")
public Map<String, Object> findAllPlace(Integer page, Integer rows, String provinceId) {
HashMap<String, Object> result = new HashMap<>();
page = page == null ? 1 : page;
rows = rows == null ? 3 : rows;
//景點集合
List<Place> places = placeService.findByProvinceIdPage(page, rows, provinceId);
//處理分頁
Integer counts = placeService.findByProvinceIdCounts(provinceId);
//總頁數
Integer totalPage = counts % rows == 0 ? counts / rows : counts / rows + 1;
result.put("places", places);
result.put("page", page);
result.put("counts", counts);
result.put("totalPage", totalPage);
return result;
}
}
com.gohb.travels.dao.PlaceDAO代碼如下:
package com.gohb.travels.dao;
import com.gohb.travels.entity.Place;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import java.util.List;
@Mapper
public interface PlaceDAO extends BaseDAO<Place,String> {
List<Place> findByProvinceIdPage(@Param("start") Integer start, @Param("rows") Integer rows, @Param("provinceId") String provinceId);
Integer findByProvinceIdCounts(String provinceId);
}
com.gohb.travels.entity.Place代碼如下:
package com.gohb.travels.entity;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;
import java.util.Date;
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain = true)
@ToString
public class Place {
private String id;
private String name;
private String picpath;
@JsonFormat(pattern = "yyyy/MM/dd")
private Date hottime;
private Double hotticket;
private Double dimticket;
private String placedes;
private String provinceid;
}
com.gohb.travels.service.PlaceService代碼如下:
package com.gohb.travels.service;
import com.gohb.travels.entity.Place;
import java.util.List;
public interface PlaceService {
List<Place> findByProvinceIdPage(Integer page, Integer rows, String provinceId);
Integer findByProvinceIdCounts(String provinceId);
void save(Place place);
void delete(String id);
Place findOne(String id);
void update(Place place);
}
com.gohb.travels.service.PlaceServiceImpl代碼如下:
package com.gohb.travels.service;
import com.gohb.travels.dao.PlaceDAO;
import com.gohb.travels.entity.Place;
import com.gohb.travels.entity.Province;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class PlaceServiceImpl implements PlaceService {
@Autowired
private PlaceDAO placeDAO;
@Override
public void update(Place place) {
placeDAO.update(place);
}
@Override
public Place findOne(String id) {
return placeDAO.findOne(id);
}
@Autowired
private ProvinceService provinceService;
@Override
public void delete(String id) {
//直接刪除景點 更新省份景點個數 刪除景點
Place place = placeDAO.findOne(id);
Province province = provinceService.findOne(place.getProvinceid());
province.setPlacecounts(province.getPlacecounts()-1);
provinceService.update(province);
//刪除景點信息
placeDAO.delete(id);
}
@Override
public void save(Place place) {
//保存景點
placeDAO.save(place);
//查詢原始省份信息
Province province = provinceService.findOne(place.getProvinceid());
//更新省份信息的景點個數
province.setPlacecounts(province.getPlacecounts()+1);
provinceService.update(province);
}
@Override
public List<Place> findByProvinceIdPage(Integer page, Integer rows, String provinceId) {
int start = (page-1)*rows;
return placeDAO.findByProvinceIdPage(start,rows,provinceId);
}
@Override
public Integer findByProvinceIdCounts(String provinceId) {
return placeDAO.findByProvinceIdCounts(provinceId);
}
}
com/gohb/travels/mapper/PlaceDAOMapper.xml.xml內容如下:
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gohb.travels.dao.PlaceDAO">
<!--根據省份id查詢所有景點信息並排序-->
<select id="findByProvinceIdPage" resultType="Place">
select
id, name, picpath, hottime, hotticket, dimticket, placedes, provinceid
from t_place
where provinceid = #{provinceId}
order by id
limit #{start},#{rows}
</select>
<!--根據省份id查詢當前省份所有景點個數-->
<select id="findByProvinceIdCounts" parameterType="String" resultType="Integer">
select count(id) from t_place where provinceid=#{provinceId}
</select>
<!--保存place-->
<insert id="save" parameterType="Place" useGeneratedKeys="true" keyProperty="id">
insert into t_place values (#{id},#{name},#{picpath},#{hottime},#{hotticket},#{dimticket},#{placedes},#{provinceid})
</insert>
<!--根據id查詢景點信息-->
<select id="findOne" parameterType="String" resultType="Place">
select
id, name, picpath, hottime, hotticket, dimticket, placedes, provinceid
from t_place
where id=#{id}
</select>
<!--刪除景點信息方法-->
<delete id="delete" parameterType="String">
delete from t_place where id = #{id}
</delete>
<!--修改經典信息-->
<update id="update" parameterType="Place">
update t_place set
name=#{name},
picpath=#{picpath},
hottime=#{hottime},
hotticket=#{hotticket},
dimticket=#{dimticket},
placedes=#{placedes},
provinceid=#{provinceid}
where id = #{id}
</update>
</mapper>
addviewspot.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/style.css">
<style>
form{
width:270px;
}
input{
width: 64%;
background: #eee;
}
input:focus{
background: #fff;
}
form{
padding: 0 12px 12px;
}
label{
display: block;
padding-bottom:12px;
}
.label-text{
width: 36%;
float: left;
}
#upload-tip{
border: 1px dashed #d9d9d9;
width: 135px;
height: 135px;
line-height: 135px;
cursor: pointer;
font-size: 36px;
color:#d9d9d9;
}
#img-show{
width: 135px;
height: 135px;
display: block;
margin: 0 auto;
object-fit: cover;
}
</style>
<script>
function imgfileChange() {
var upload_tip = document.getElementById("upload-tip");
var img_show = document.getElementById("img-show");
var imgfile = document.getElementById("imgfile");
var freader = new FileReader();
freader.readAsDataURL(imgfile.files[0]);
freader.onload = function (e) {
img_show.src = e.target.result;
img_show.style.display = "inline";
upload_tip.style.display = "none";
};
}
</script>
</head>
<body>
<div id="app">
<div id="wrap">
<div id="header">
<div style="float: right;padding-top: 24px">2009/11/20</div>
<h1>旅遊信息管理系統</h1>
</div>
<div id="header-bar"></div>
<div id="content" style="height: 480px">
<img src="../img/timg.jpg" style="float: right;height: 320px">
<h2>添加景點</h2>
<form action="viewspotlist.html" method="post">
<label>
<div class="label-text">景  點:</div>
<input type="text" v-model="place.name" name="vname">
</label>
<label>
<div class="label-text">印象圖片:</div>
<div style="text-align: center;padding-left: 36%">
<div id="upload-tip">+</div>
<img src="" alt="" id="img-show" style="display: none">
<input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
</div>
</label>
<label>
<div class="label-text">旺季時間:</div>
<input type="text" v-model="place.hottime">
</label>
<label>
<div class="label-text">旺季門票:</div>
<input type="text" v-model="place.hotticket" >
</label>
<label>
<div class="label-text">淡季門票:</div>
<input type="text" v-model="place.dimticket">
</label>
<label>
<div class="label-text">景點描述:</div>
<input type="text" v-model="place.placedes">
</label>
<label>
<div class="label-text">所屬省份:</div>
<select v-model="place.provinceid">
<option v-for="(pro,index) in provinces" :value="pro.id" v-text="pro.name"></option>
</select>
</label>
<button type="button" @click="savePlaceInfo">提 交</button> 
<a :href="'viewspotlist.html?id='+id">返回</a>
</form>
</div>
<div id="footer">
ABC@126.com
</div>
</div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
provinces:[],
place:{},
id:"",
},
methods:{
savePlaceInfo(){//保存景點的方法
console.log(this.place);
let myFile = this.$refs.myFile;
let files = myFile.files;
let file = files[0];
let formData = new FormData();
formData.append("pic",file);
formData.append("name",this.place.name);
formData.append("hottime",this.place.hottime);
formData.append("hotticket",this.place.hotticket);
formData.append("dimticket",this.place.dimticket);
formData.append("placedes",this.place.placedes);
formData.append("provinceid",this.place.provinceid);
//axios
axios({
method:'post',
url:'http://localhost:8989/place/save',
data:formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res)=>{
console.log(res.data);
if(res.data.state){
alert(res.data.msg+",點擊確定回到景點列表");
location.href="./viewspotlist.html?id="+this.place.provinceid;
}else{
alert(res.data.msg+",點擊確定回到景點列表");
}
});
},
findAllProvinces(){
_this = this;
axios.get("http://localhost:8989/province/findByPage?rows=35").then((res)=>{
console.log(res.data.provinces);
_this.provinces = res.data.provinces;
});
}
},
created(){
//查詢所有省份信息
this.findAllProvinces();
//獲取省份id
let id = location.href.substring(location.href.indexOf("=")+1);
this.id = id;
}
})
</script>
updateviewspot.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/style.css">
<style>
form{
width:270px;
}
input{
width: 64%;
background: #eee;
}
input:focus{
background: #fff;
}
form{
padding: 0 12px 12px;
}
label{
display: block;
padding-bottom:12px;
}
.label-text{
width: 36%;
float: left;
}
#img-show{
width: 135px;
height: 135px;
display: block;
margin: 0 auto;
object-fit: cover;
}
</style>
<script>
function imgfileChange() {
var img_show = document.getElementById("img-show");
var imgfile = document.getElementById("imgfile");
var freader = new FileReader();
freader.readAsDataURL(imgfile.files[0]);
freader.onload = function (e) {
img_show.src = e.target.result;
};
}
</script>
</head>
<body>
<div id="app">
<div id="wrap">
<div id="header">
<div style="float: right;padding-top: 24px">2009/11/20</div>
<h1>旅遊信息管理系統</h1>
</div>
<div id="header-bar"></div>
<div id="content" style="height: 480px">
<img src="../img/timg.jpg" style="float: right;height: 320px">
<h2>修改景點</h2>
<form action="viewspotlist.html" method="post">
<label>
<div class="label-text">景  點:</div>
<input type="text" v-model="place.name">
</label>
<label>
<div class="label-text">印象圖片:</div>
<div style="text-align: center;padding-left: 36%">
<img :src="src" alt="" id="img-show">
<input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()">
</div>
</label>
<label>
<div class="label-text">旺季時間:</div>
<input type="text" v-model="place.hottime">
</label>
<label>
<div class="label-text">旺季門票:</div>
<input type="text" v-model="place.hotticket">
</label>
<label>
<div class="label-text">淡季門票:</div>
<input type="text" v-model="place.dimticket">
</label>
<label>
<div class="label-text">景點描述:</div>
<input type="text" v-model="place.placedes">
</label>
<label>
<div class="label-text">所屬省份:</div>
<select v-model="place.provinceid">
<option v-for="(pro,index) in provinces" :value="pro.id" v-text="pro.name"></option>
</select>
</label>
<button type="button" @click="updatePlace">提 交</button> 
<a :href="'viewspotlist.html?id='+ place.provinceid">返回</a>
</form>
</div>
<div id="footer">
ABC@126.com
</div>
</div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
id:"",
place:{},
provinces:[],
src:"",
},
methods:{
updatePlace(){
console.log(this.place);
let myFile = this.$refs.myFile;
let files = myFile.files;
let file = files[0];
let formData = new FormData();
formData.append("pic",file);
formData.append("id",this.place.id);
formData.append("name",this.place.name);
formData.append("hottime",this.place.hottime);
formData.append("hotticket",this.place.hotticket);
formData.append("dimticket",this.place.dimticket);
formData.append("placedes",this.place.placedes);
formData.append("provinceid",this.place.provinceid);
//axios
axios({
method:'post',
url:'http://localhost:8989/place/update',
data:formData,
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((res)=>{
console.log(res.data);
if(res.data.state){
alert(res.data.msg+",點擊確定回到景點列表");
location.href="./viewspotlist.html?id="+this.place.provinceid;
}else{
alert(res.data.msg+",點擊確定回到景點列表");
}
});
},
findOnePlace(){//根據id查詢景點信息
_this =this;
axios.get("http://localhost:8989/place/findOne?id="+this.id).then((res)=>{
_this.place = res.data;
_this.src = "data:image/png;base64,"+_this.place.picpath;
});
},
findAllProvinces(){
_this = this;
axios.get("http://localhost:8989/province/findByPage?rows=35").then((res)=>{
console.log(res.data.provinces);
_this.provinces = res.data.provinces;
});
}
},
created(){
let id = location.href.substring(location.href.indexOf("=")+1);
this.id = id;
this.findOnePlace();
this.findAllProvinces();
}
})
</script>
viewspotlist.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/style.css">
<style>
table{
width: 100%;
margin-bottom: 15px;
border-collapse: collapse;
table-layout: fixed;
}
th,td{
border: 1px solid #CBD6DE;
padding-left: 10px;
line-height: 28px;
}
th{
text-align: left;
background: linear-gradient(#edf2f5,#dce9f2,#edf2f5);
color:#467aa7;
}
tbody tr:nth-child(4n),tbody tr:nth-child(4n-1){
background: #f2f2f2;
}
#pages{
text-align: center;
padding: 8px 0;
}
.page{
min-width: 50px;
display: inline-block;
}
.viewspotimg{
width: 135px;
height: 135px;
margin-left: -10px;
display: block;
object-fit: cover;
}
</style>
</head>
<body>
<div id="app">
<div id="wrap">
<div id="header">
<div style="float: right;padding-top: 24px">
2009/11/20 
<a href="../login.html" style="color:#fff;float: right">安全退出</a>
</div>
<h1>旅遊信息管理系統</h1>
</div>
<div id="header-bar"></div>
<div id="content">
<h2>景點列表</h2>
<table>
<thead>
<tr>
<th width="14%">ID</th>
<th width="20%">景點</th>
<th width="12%">印象圖</th>
<th width="16%">旺季時間</th>
<th width="10%">旺季門票</th>
<th width="10%">淡季門票</th>
<th width="18%">操作</th>
</tr>
</thead>
<tbody v-for="place in places">
<tr>
<td rowspan="2" ><span v-text="place.id"/></td>
<td rowspan="2"><span v-text="place.name"/></td>
<td><img :src="'data:image/png;base64,'+place.picpath" class="viewspotimg"></td>
<td><span v-text="place.hottime"/></td>
<td><span v-text="place.hotticket"/></td>
<td><span v-text="place.dimticket"/></td>
<td style="text-align: center">
<a href="javascript:;" @click="deletePlace(place.id)">刪除景點</a><br>
<a :href="'updateviewspot.html?id='+place.id">修改景點</a>
</td>
</tr>
</tr>
<tr>
<td colspan="5">
<div style="height: 56px;font-size: 14px;line-height: normal">
<b style="color:#467aa7">簡介:</b> <span v-text="place.placedes"/>
</div>
</td>
</tr>
</tbody>
</table>
<a :href="'addviewspot.html?id='+id"><button type="button">添加景點</button></a> 
<a href="../province/provincelist.html">返回省份列表</a>
<div id="pages">
<a href="javascript:;" v-if="page>1" class="page" @click="findAllPage(page-1)"><上一頁</a>
<span v-for="index in totalPage">
<a href="javascript:;" v-if="page==index" class="page" v-text="index"></a>
<a href="javascript:;" v-if="page!=index" @click="findAllPage(index)" class="page" v-text="index"></a>
</span>
<a href="javascript:;" class="page" v-if="page<totalPage" @click="findAllPage(page+1)">下一頁></a>
</div>
</div>
<div id="footer">
ABC@126.com
</div>
</div>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
places:[],
id:"",
totalPage:0,
page:1,
},
methods:{
findAllPage(index){//封裝查詢所有的函數
_this = this;
if(index){
this.page = index;
}
axios.get("http://localhost:8989/place/findAllPlace?provinceId="+this.id+"&page="+this.page).then((res)=>{
_this.places = res.data.places;
_this.totalPage = res.data.totalPage;
_this.page = res.data.page;
});
},
deletePlace(id){//刪除景點信息
console.log(id);
if(confirm("確定要刪除景點嗎?")){
axios.get("http://localhost:8989/place/delete?id="+id).then((res)=>{
if(res.data.state){
alert(res.data.msg+",點擊確定刷新數據!!!");
location.reload();
}else{
alert(res.data.msg);
}
});
}
}
},
created(){
let id = location.href.substring(location.href.indexOf("=")+1);
this.id = id;
this.findAllPage();
}
})
</script>