springboot+vue 旅游信息管理系统（三）省份信息的增加、删除、修改、展示的实现
旅游信息管理系统 省份信息的增加、删除、修改、展示的实现
前言
代码已上传至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">省 份：</div>
<input type="text" v-model="province.name">
</label>
<label>
<div class="label-text">标 签：</div>
<input type="text" v-model="province.tags">
</label>
<button type="button" @click="saveProvinceInfo">提 交</button> 
<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 
<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"><上一页</a>
<a class="page" href="javascript:;" v-for="indexpage in totalPage" @click="findAll(indexpage)" v-text="indexpage"></a>
<a href="javascript:;" v-if="page @click="findAll(page+1)" class="page">下一页></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">省 份：</div>
<input type="text" v-model="province.name">
</label>
<label>
<div class="label-text">标 签：</div>
<input type="text" v-model="province.tags">
</label>
<button type="button" @click="updateProvince">提 交</button> 
<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>
