springboot+vue 旅遊信息管理系統(四)景點信息的增加、刪除、修改、展示的實現

旅遊信息管理系統 景點信息的增加、刪除、修改、展示的實現

前言

代碼已上傳至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">&emsp;&emsp;點:</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>&emsp;
                <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">&emsp;&emsp;點:</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>&emsp;
                <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&emsp;
            <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>&emsp;
        <a href="../province/provincelist.html">返回省份列表</a>
        <div id="pages">
            <a href="javascript:;" v-if="page>1" class="page" @click="findAllPage(page-1)">&lt;上一頁</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)">下一頁&gt;</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>

在這裏插入圖片描述

在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章