springboot+vue 旅游信息管理系统（三）省份信息的增加、删除、修改、展示的实现

最新推荐文章于 2023-07-22 16:50:54 发布

qq_39682037

最新推荐文章于 2023-07-22 16:50:54 发布

阅读量3.3k

点赞数 1

分类专栏： springboot 文章标签： java vue springboot mybatis 前后端分离

本文链接：https://blog.csdn.net/qq_39682037/article/details/105825880

版权

springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

旅游信息管理系统省份信息的增加、删除、修改、展示的实现

前言

代码已上传至github：https://github.com/kalipoison/travelManageSystem

流程

com.gohb.travels.Controller.ProvinceController代码如下：

package com.gohb.travels.Controller;

import com.gohb.travels.entity.Province;
import com.gohb.travels.entity.Result;
import com.gohb.travels.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@CrossOrigin
@RequestMapping("province")
public class ProvinceController {

    @Autowired
    private ProvinceService provinceService;

    /**
     * 修改省份信息方法
     */
    @PostMapping("update")
    public Result update(@RequestBody Province province) {
        Result result = new Result();
        try {
            provinceService.update(province);
            result.setMsg("修改省份信息成功");
        }catch (Exception e){
            e.printStackTrace();
            result.setState(false).setMsg(e.getMessage());
        }
        return result;
    }

    /**
     * 查询一个省份信息
     */
    @GetMapping("findOne")
    public Province findOne(String id) {
        return provinceService.findOne(id);
    }


    /**
     * 删除省份信息
     *
     * @param id
     * @return
     */
    @GetMapping("delete")
    public Result delete(String id) {
        Result result = new Result();
        try {
            provinceService.delete(id);
            result.setMsg("删除省份信息成功");
        } catch (Exception e) {
            e.printStackTrace();
            result.setState(false).setMsg("删除省份信息失败!!!");
        }
        return result;
    }


    /**
     * 保存省份信息
     *
     * @param province
     * @return
     */
    @PostMapping("save")
    public Result save(@RequestBody Province province) {
        Result result = new Result();
        try {
            provinceService.save(province);
            result.setMsg("保存省份信息成功");
        } catch (Exception e) {
            e.printStackTrace();
            result.setState(false).setMsg("保存省份信息失败!!!");
        }
        return result;
    }

    /**
     * 查询所有
     *
     * @param page
     * @param rows
     * @return
     */
    @GetMapping("findByPage")
    public Map<String, Object> findByPage(Integer page, Integer rows) {
        page = page == null ? 1 : page;
        rows = rows == null ? 4 : rows;
        HashMap<String, Object> map = new HashMap<>();
        //分页处理
        List<Province> provinces = provinceService.findByPage(page, rows);
        //计算总页数
        Integer totals = provinceService.findTotals();
        Integer totalPage = totals % rows == 0 ? totals / rows : totals / rows + 1;
        map.put("provinces", provinces);
        map.put("totals", totals);
        map.put("totalPage", totalPage);
        map.put("page", page);
        return map;
    }



}

com.gohb.travels.dao.BaseDAO代码如下：

package com.gohb.travels.dao;

import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface BaseDAO<T,K> {


    void save(T t);

    void update(T t);

    void delete(K k);

    T findOne(K k);

    List<T> findAll();

    List<T> findByPage(@Param("start") Integer start, @Param("rows") Integer rows);

    Integer findTotals();

}

com.gohb.travels.dao.ProvinceDAO代码如下：

package com.gohb.travels.dao;

import com.gohb.travels.entity.Province;
import org.apache.ibatis.annotations.Mapper;


@Mapper
public interface ProvinceDAO extends BaseDAO<Province,String> {


}

com.gohb.travels.entity.Province代码如下：

package com.gohb.travels.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
import lombok.experimental.Accessors;

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
@Accessors(chain=true)
public class Province {
    private String id;
    private String name;
    private String tags;
    private Integer placecounts;

}

com.gohb.travels.service.ProvinceService代码如下：

package com.gohb.travels.service;

import com.gohb.travels.entity.Province;

import java.util.List;

public interface ProvinceService {


    //参数1:当前页 //参数2:每页显示记录数
    List<Province> findByPage(Integer page, Integer rows);


    //查询总跳数
    Integer findTotals();

    //保存省份方法
    void save(Province province);

    //删除省份的方法
    void delete(String id);

    //查询省份信息
    Province findOne(String id);

    //修改省份信息
    void update(Province province);

}

com.gohb.travels.service.ProvinceServiceImpl代码如下：

package com.gohb.travels.service;

import com.gohb.travels.dao.ProvinceDAO;
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 ProvinceServiceImpl implements ProvinceService {

    @Autowired
    private ProvinceDAO provinceDAO;


    @Override
    public List<Province> findByPage(Integer page, Integer rows) {
        int start = (page-1)*rows;
        return provinceDAO.findByPage(start,rows);
    }

    @Override
    public Province findOne(String id) {
        return provinceDAO.findOne(id);
    }

    @Override
    public void update(Province province) {
        provinceDAO.update(province);
    }

    @Override
    public void delete(String id) {
        provinceDAO.delete(id);
    }

    @Override
    public void save(Province province) {
        province.setPlacecounts(0);//景点个数为零
        provinceDAO.save(province);
    }

    @Override
    public Integer findTotals() {
        return provinceDAO.findTotals();
    }
}

com/gohb/travels/mapper/ProvinceDAOMapper.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.ProvinceDAO">



    <!--分页查询所有-->
    <select id="findByPage" resultType="Province">
        select id,name,tags,placecounts
        from t_province
        order by placecounts
        limit #{start},#{rows}
    </select>


    <!--查询总条数-->
    <select id="findTotals" resultType="Integer">
        select count(id) from t_province
    </select>

    <!--省份添加-->
    <insert id="save" parameterType="Province" useGeneratedKeys="true" keyProperty="id">
        insert into t_province values(#{id},#{name},#{tags},#{placecounts})
    </insert>

    <!--省份删除-->
    <delete id="delete" parameterType="String">
        DELETE from t_province where id = #{id}
    </delete>

    <!--查询一个-->
    <select id="findOne" resultType="Province">
        select id,name,tags,placecounts
        from t_province
        where id =#{id}
    </select>

    <!--修改省份信息方法-->
    <update id="update" parameterType="Province">
        update t_province set name=#{name},tags=#{tags},placecounts=#{placecounts}
        where id=#{id}
    </update>

</mapper>

addprovince.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: 70%;
            background: #eee;
        }

        input:focus {
            background: #fff;
        }

        form {
            padding: 0 12px 12px;
        }

        label {
            display: block;
            padding-bottom: 12px;
        }

        .label-text {
            width: 30%;
            float: left;
        }
    </style>
</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: 360px">
            <img src="../img/timg.jpg" style="float: right;height: 320px">
            <h2>添加省份</h2>
            <form action="provincelist.html" method="post">
                <label>
                    <div class="label-text">省&emsp;份：</div>
                    <input type="text" v-model="province.name">
                </label>
                <label>
                    <div class="label-text">标&emsp;签：</div>
                    <input type="text" v-model="province.tags">
                </label>
                <button type="button" @click="saveProvinceInfo">提 交</button>&emsp;
                <a href="provincelist.html">返回</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: {
            province:{}
        },
        methods:{
            saveProvinceInfo(){
                axios.post("http://localhost:8989/province/save",this.province).then((res)=>{
                   if(res.data.state){
                       alert(res.data.msg+",点击确定跳转到省份列表页面!");
                       location.href='./provincelist.html';
                   }else{
                       alert(res.data.msg);
                   }
                });
            }
        }
    });
</script>

provincelist.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(even) {
            background: #f2f2f2;
        }

        #pages {
            text-align: center;
            padding-top: 8px;
        }

        .page {
            min-width: 50px;
            display: inline-block;
        }
    </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" style="height: 360px">
            <h2>省份列表</h2>
            <table>
                <thead>
                <tr>
                    <th width="15%">ID</th>
                    <th width="20%">省份</th>
                    <th width="25%">标签</th>
                    <th width="15%">景点个数</th>
                    <th width="25%">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="province in provinces" :key="province.id">
                    <td v-text="province.id"></td>
                    <td v-text="province.name"></td>
                    <td v-text="province.tags"></td>
                    <td v-text="province.placecounts"></td>
                    <td>
                        <a href="javascript:;" @click="deleteProvince(province.id)">删除省份</a>
                        <a :href="'../viewspot/viewspotlist.html?id='+province.id">景点列表</a>
                        <a :href="'./updateprovince.html?id='+province.id">修改省份</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <a href="addprovince.html">
                <button type="button">添加省份</button>
            </a>
            <div id="pages">

                <a href="javascript:;" @click="findAll(page-1)" v-if="page>1"  class="page">&lt;上一页</a>
                <a class="page" href="javascript:;" v-for="indexpage in totalPage" @click="findAll(indexpage)" v-text="indexpage"></a>
                <a href="javascript:;"  v-if="page<totalPage" @click="findAll(page+1)" class="page">下一页&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: {
            provinces: [],
            page: 1,
            rows: 4,
            totalPage: 0,
            totals: 0,
        },
        methods: {
            deleteProvince(id){
                if(confirm("您确定要删除省份信息吗?")){
                    axios.get("http://localhost:8989/province/delete?id="+id).then((res)=>{
                        if(res.data.state){
                            alert(res.data.msg+",点击确定跳转到查询所有页面!!!");
                            location.reload(true);//刷新当前页面
                        }else{
                            alert(res.data.msg);
                        }
                    });
                }
            },
            findAll(indexpage) {//查询所有
                if (indexpage) {
                    this.page = indexpage;
                }
                _this = this;
                axios.get("http://localhost:8989/province/findByPage?page=" + this.page).then((res) => {
                    _this.provinces = res.data.provinces;
                    _this.page = res.data.page;
                    _this.totalPage = res.data.totalPage;
                    _this.totals = res.data.totals;
                });
            }
        },
        created() {
            this.findAll();
        }
    })

</script>

updateprovince.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: 70%;
            background: #eee;
        }

        input:focus {
            background: #fff;
        }

        form {
            padding: 0 12px 12px;
        }

        label {
            display: block;
            padding-bottom: 12px;
        }

        .label-text {
            width: 30%;
            float: left;
        }
    </style>
</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: 360px">
            <img src="../img/timg.jpg" style="float: right;height: 320px">
            <h2>修改省份</h2>
            <form action="provincelist.html" method="post">
                <label>
                    <div class="label-text">省&emsp;份：</div>
                    <input type="text" v-model="province.name">
                </label>
                <label>
                    <div class="label-text">标&emsp;签：</div>
                    <input type="text" v-model="province.tags">
                </label>
                <button type="button" @click="updateProvince">提 交</button>&emsp;
                <a href="provincelist.html">返回</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:"",
            province:{}
        },
        methods:{
            findOneProvince(id){
                _this = this;
                axios.get("http://localhost:8989/province/findOne?id="+id).then((res)=>{
                    console.log(res.data);
                    _this.province = res.data;
                });
            },
            updateProvince(){
                axios.post("http://localhost:8989/province/update",this.province).then((res)=>{
                    if(res.data.state){
                        alert(res.data.msg+",点击确定回到主页!!!");
                        location.href='./provincelist.html';
                    }else{
                        alert(res.data.msg);
                    }
                })
            }
        },
        created(){
            this.id =location.href.substring(location.href.indexOf("=")+1);
            this.findOneProvince(this.id);
        }
    })

</script>

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.gohb</groupId>
    <artifactId>travels</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>travels</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.19</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

在这里插入图片描述

qq_39682037

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
springboot+vue 旅游信息管理系统（三）省份信息的增加、删除、修改、展示的实现

省份信息的CRUDcom.gohb.travels.Controller.ProvinceController代码如下：package com.gohb.travels.Controller;import com.gohb.travels.entity.Province;import com.gohb.travels.entity.Result;import com.gohb.trav...
复制链接

扫一扫