springboot+vue前后端分离旅游项目

在这里插入图片描述上下移动代码的快捷键:alt+shift+上下的键盘

先写实体类在写Dao再写mapper的xml的sql语句,再写service再写controller

page表示的是当前页,start表示的起始条数

做项目之前首先要做的就是需求分析:库表设计,编码(项目环境的搭建+项目编码),编码成功以后最后再做项目的调试。之后就是项目的部署上线

1.需求分析(分析系统中有那些模块,进而根据模块抽取出我们的库表)

1.用户模块
登录和注册
2.省份模块   一个省份可能存在多个景点
CRUD  增删改查
3.景点模块   一个景点只能对应一个省份
CRUD

省份和景点属于一对多的库表设计

2.库表设计

库表设计的原则
1.分析系统中有那些表(指的就是表的个数)
2.分析系统中表与表之间的关联关系
3.分析每个表中的字段(字段又分为显性字段(通过页面就可以看出来的字段)和隐性字段(也叫业务字段或者叫项目经验字段))

这里我们需要的是
用户表  t_user    独立的
  id  username password  email  

省份表  t_province    省份表:景点表 ===1:N
  id name  tags placecounts
景点表  t_place 
  id name picpath  hottime hotticker dimticket  placedes  provinceid(一个景点要保存一个省份的id)
数据库的名字我们就叫travels
   
CREATE table t_user(
  id int(6) PRIMARY KEY auto_increment,
	username VARCHAR(60),
	password VARCHAR(60),
	email VARCHAR(60)

);

在这里插入图片描述

-- 省份表  注释快捷键一样是ctrl+/
CREATE TABLE t_province(
 id int(6) PRIMARY KEY auto_increment,
 name VARCHAR(60),
 tags VARCHAR(80),
 placecounts int(4)
	
);

在这里插入图片描述

CREATE TABLE t_place(
	id int(6) PRIMARY KEY auto_increment,
	name VARCHAR(60),
	picpath VARCHAR(100),
	hottime TIMESTAMP,
-- 	指的是数值不会超过7位同时小数位有2位小数
	hotticket DOUBLE(7,2),
	dimticket DOUBLE(7,2),
	placedes VARCHAR(300),
-- 	设置了外键
	provinceid int(6) REFERENCES t_province(id)
);

外键的作用不用外键行不行:https://blog.csdn.net/weixin_42103026/article/details/89703427

在这里插入图片描述引入mybatis的相关依赖我们就要配置一下数据源

在这里插入图片描述

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
           <version>1.1.19</version>
</dependency>

在这里插入图片描述
用户模块的开发
用户注册:用户验证码+用户注册

实现用户验证码功能,我们先把它的验证码工具栏拷贝过来
在这里插入图片描述

package com.baizhi.travels.utils;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Arrays;
import java.util.Random;

public class ValidateImageCodeUtils {
    /**
     * 验证码难度级别 Simple-数字 Medium-数字和小写字母 Hard-数字和大小写字母
     */
    public enum SecurityCodeLevel {
        Simple, Medium, Hard
    };
    /**
     * 产生默认验证码,4位中等难度
     *
     * @return
     */
    public static String getSecurityCode() {
        return getSecurityCode(4, SecurityCodeLevel.Medium, false);
    }
    /**
     * 产生长度和难度任意的验证码
     *
     * @param length
     * @param level
     * @param isCanRepeat
     * @return
     */
    public static String getSecurityCode(int length, SecurityCodeLevel level, boolean isCanRepeat) {
        // 随机抽取len个字符
        int len = length;
        // 字符集合(--除去易混淆的数字0,1,字母l,o,O)
        char[] codes = {
                '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
        };
        // 根据不同难度截取字符串
        if (level == SecurityCodeLevel.Simple) {
            codes = Arrays.copyOfRange(codes, 0, 10);
        } else if (level == SecurityCodeLevel.Medium) {
            codes = Arrays.copyOfRange(codes, 0, 36);
        }
        // 字符集和长度
        int n = codes.length;
        // 抛出运行时异常
        if (len > n && isCanRepeat == false) {
            throw new RuntimeException(String.format("调用SecurityCode.getSecurityCode(%1$s,%2$s,%3$s)出现异常," + "当isCanRepeat为%3$s时,传入参数%1$s不能大于%4$s", len, level, isCanRepeat, n));
        }
        // 存放抽取出来的字符
        char[] result = new char[len];
        // 判断能否出现重复字符
        if (isCanRepeat) {
            for (int i = 0; i < result.length; i++) {
                // 索引0 and n-1
                int r = (int) (Math.random() * n);
                // 将result中的第i个元素设置为code[r]存放的数值
                result[i] = codes[r];
            }
        } else {
            for (int i = 0; i < result.length; i++) {
                // 索引0 and n-1
                int r = (int) (Math.random() * n);
                // 将result中的第i个元素设置为code[r]存放的数值
                result[i] = codes[r];
                // 必须确保不会再次抽取到那个字符,这里用数组中最后一个字符改写code[r],并将n-1
                codes[r] = codes[n - 1];
                n--;
            }
        }
        return String.valueOf(result);
    }
	/**
     * 生成验证码图片

     * @param securityCode

     * @return

     */
    public static BufferedImage createImage(String securityCode){

        int codeLength = securityCode.length();//验证码长度

        int fontSize = 18;//字体大小

        int fontWidth = fontSize+1;

        //图片宽高

        int width = codeLength*fontWidth+60;
        int height = fontSize*2+1;
        //图片

        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        Graphics2D g = image.createGraphics();

        g.setColor(Color.WHITE);//设置背景色

        g.fillRect(0, 0, width, height);//填充背景

        g.setColor(Color.LIGHT_GRAY);//设置边框颜色

        g.setFont(new Font("Arial", Font.BOLD, height-2));//边框字体样式

        g.drawRect(0, 0, width-1, height-1);//绘制边框

        //绘制噪点

        Random rand = new Random();

        g.setColor(Color.LIGHT_GRAY);

        for (int i = 0; i < codeLength*6; i++) {

            int x = rand.nextInt(width);

            int y = rand.nextInt(height);

            g.drawRect(x, y, 1, 1);//绘制1*1大小的矩形

        }

        //绘制验证码

        int codeY = height-10;

        g.setColor(new Color(19,148,246));

        g.setFont(new Font("Georgia", Font.BOLD, fontSize));
        for(int i=0;i<codeLength;i++){
        	double deg=new Random().nextDouble()*20;
        	g.rotate(Math.toRadians(deg), i*16+13,codeY-7.5);
            g.drawString(String.valueOf(securityCode.charAt(i)), i*16+5, codeY);
            g.rotate(Math.toRadians(-deg), i*16+13,codeY-7.5);
        }
       
        g.dispose();//关闭资源
        return image;
    }

    public static void main(String[] args) throws IOException {
        String securityCode = ValidateImageCodeUtils.getSecurityCode();
        System.out.println(securityCode);

        BufferedImage image = ValidateImageCodeUtils.createImage(securityCode);
        ImageIO.write(image,"png",new FileOutputStream("aa.png"));
    }
    
    
}

接下来我们只需要开发一个控制器就可以了

package com.baizhi.travels.controller;

import com.baizhi.travels.utils.ValidateImageCodeUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Controller
@RequestMapping("user")
@CrossOrigin   //实现跨域的功能
public class UserController {

    @GetMapping("getImage")
    public void getImage(HttpServletResponse response, HttpSession session) throws IOException {
        //获取验证码
        String securityCode = ValidateImageCodeUtils.getSecurityCode();
        //验证码存入session
        session.setAttribute("code",securityCode);
        //生成图片
        BufferedImage image = ValidateImageCodeUtils.createImage(securityCode);
        //响应浏览器
        response.setContentType("image/png");
        ImageIO.write(image,"png",response.getOutputStream());
    }
}

接下来就是把路径让前端的页面获取到就可以了

package com.baizhi.travels.utils;


import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;


public class CreateImageCode {
    // 图片的宽度。
    private int width = 160;
    // 图片的高度。
    private int height = 40;
    // 验证码字符个数
    private int codeCount = 4;
    // 验证码干扰线数
    private int lineCount = 20;
    // 验证码
    private String code = null;
    // 验证码图片Buffer
    private BufferedImage buffImg = null;
    Random random = new Random();

    public CreateImageCode() {
        creatImage();
    }

    public CreateImageCode(int width, int height) {
        this.width = width;
        this.height = height;
        creatImage();
    }

    public CreateImageCode(int width, int height, int codeCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        creatImage();
    }

    public CreateImageCode(int width, int height, int codeCount, int lineCount) {
        this.width = width;
        this.height = height;
        this.codeCount = codeCount;
        this.lineCount = lineCount;
        creatImage();
    }

    // 生成图片
    private void creatImage() {
        int fontWidth = width / codeCount;// 字体的宽度
        int fontHeight = height - 5;// 字体的高度
        int codeY = height - 8;

        // 图像buffer
        buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics g = buffImg.getGraphics();
        //Graphics2D g = buffImg.createGraphics();
        // 设置背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);



        // 设置字体
        //Font font1 = getFont(fontHeight);
        Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
        g.setFont(font);

        // 设置干扰线
        for (int i = 0; i < lineCount; i++) {
            int xs = random.nextInt(width);
            int ys = random.nextInt(height);
            int xe = xs + random.nextInt(width);
            int ye = ys + random.nextInt(height);
            g.setColor(getRandColor(1, 255));
            g.drawLine(xs, ys, xe, ye);
        }

        // 添加噪点
        float yawpRate = 0.01f;// 噪声率
        int area = (int) (yawpRate * width * height);
        for (int i = 0; i < area; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);

            buffImg.setRGB(x, y, random.nextInt(255));
        }


        String str1 = randomStr(codeCount);// 得到随机字符
        this.code = str1;
        for (int i = 0; i < codeCount; i++) {
            String strRand = str1.substring(i, i + 1);
            g.setColor(getRandColor(1, 255));
            // g.drawString(a,x,y);
            // a为要画出来的东西,x和y表示要画的东西最左侧字符的基线位于此图形上下文坐标系的 (x, y) 位置处

            g.drawString(strRand, i*fontWidth+3, codeY);
        }


    }

    // 得到随机字符
    private String randomStr(int n) {
        String str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
        String str2 = "";
        int len = str1.length() - 1;
        double r;
        for (int i = 0; i < n; i++) {
            r = (Math.random()) * len;
            str2 = str2 + str1.charAt((int) r);
        }
        return str2;
    }

    // 得到随机颜色
    private Color getRandColor(int fc, int bc) {// 给定范围获得随机颜色
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

    /**
     * 产生随机字体
     */
    private Font getFont(int size) {
        Random random = new Random();
        Font font[] = new Font[5];
        font[0] = new Font("Ravie", Font.PLAIN, size);
        font[1] = new Font("Antique Olive Compact", Font.PLAIN, size);
        font[2] = new Font("Fixedsys", Font.PLAIN, size);
        font[3] = new Font("Wide Latin", Font.PLAIN, size);
        font[4] = new Font("Gill Sans Ultra Bold", Font.PLAIN, size);
        return font[random.nextInt(5)];
    }

    // 扭曲方法
    private void shear(Graphics g, int w1, int h1, Color color) {
        shearX(g, w1, h1, color);
        shearY(g, w1, h1, color);
    }

    private void shearX(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(2);

        boolean borderGap = true;
        int frames = 1;
        int phase = random.nextInt(2);

        for (int i = 0; i < h1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(0, i, w1, 1, (int) d, 0);
            if (borderGap) {
                g.setColor(color);
                g.drawLine((int) d, i, 0, i);
                g.drawLine((int) d + w1, i, w1, i);
            }
        }

    }

    private void shearY(Graphics g, int w1, int h1, Color color) {

        int period = random.nextInt(40) + 10; // 50;

        boolean borderGap = true;
        int frames = 20;
        int phase = 7;
        for (int i = 0; i < w1; i++) {
            double d = (double) (period >> 1)
                    * Math.sin((double) i / (double) period
                    + (6.2831853071795862D * (double) phase)
                    / (double) frames);
            g.copyArea(i, 0, 1, h1, 0, (int) d);
            if (borderGap) {
                g.setColor(color);
                g.drawLine(i, (int) d, i, 0);
                g.drawLine(i, (int) d + h1, i, h1);
            }

        }

    }



    public void write(OutputStream sos) throws IOException {
        ImageIO.write(buffImg, "png", sos);
        sos.close();
    }

    public BufferedImage getBuffImg() {
        return buffImg;
    }

    public String getCode() {
        return code.toLowerCase();
    }

    //使用方法
 /*public void getCode3(HttpServletRequest req, HttpServletResponse response,HttpSession session) throws IOException{
        // 设置响应的类型格式为图片格式
            response.setContentType("image/jpeg");
            //禁止图像缓存。
            response.setHeader("Pragma", "no-cache");
            response.setHeader("Cache-Control", "no-cache");
            response.setDateHeader("Expires", 0);


            CreateImageCode vCode = new CreateImageCode(100,30,5,10);
            session.setAttribute("code", vCode.getCode());
            vCode.write(response.getOutputStream());
     }*/

}
package com.baizhi.travels.controller;

import com.baizhi.travels.utils.CreateImageCode;
import com.baizhi.travels.utils.ValidateImageCodeUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Controller
@RequestMapping("user")
@CrossOrigin   //实现跨域的功能
public class UserController {

    @GetMapping("getImage")
    public void getImage(HttpServletResponse response, HttpSession session) throws IOException {
        CreateImageCode createImageCode=new CreateImageCode();
        //获取验证码
        String securityCode = createImageCode.getCode();
        //验证码存入session
        session.setAttribute("code",securityCode);
        //生成图片
        BufferedImage image = createImageCode.getBuffImg();
        //响应浏览器
        response.setContentType("image/png");
        ImageIO.write(image,"png",response.getOutputStream());
    }
}

注册功能就需要用到我们前端的vue了,因为我们需要发异步请求
idea替换所有字符的快捷键

@Transactional 详解:https://blog.csdn.net/jiangyu1013/article/details/84397366

mybatis可以理解为就是个专门用来写sql语句的。

我们一般写完一个业务层(也就是service就要测试一下)

在这里插入图片描述lombok @Accessors用法
https://blog.csdn.net/weixin_38229356/article/details/82937420

在这里插入图片描述

package com.baizhi.travels.controller;

import com.baizhi.travels.entity.Result;
import com.baizhi.travels.entity.User;
import com.baizhi.travels.service.UserService;
import com.baizhi.travels.utils.CreateImageCode;
import com.baizhi.travels.utils.ValidateImageCodeUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.web.servlet.server.Session;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.IOException;

@Controller
@RequestMapping("user")
@CrossOrigin   //实现跨域的功能
@Slf4j    //用来打印参数的
public class UserController {
    @Autowired
    private UserService userService;
    //用户注册
    @PostMapping("/register")
    @ResponseBody
    public Result register(String code, @RequestBody User user, HttpSession session){
        Result result = new Result();
        log.info("接收到的验证码:"+code);
        log.info("接受到的user对象"+user);
        //验证验证码
        String sessionCode = (String) session.getAttribute("code");
        log.info(sessionCode);
        try {
            if (code.equalsIgnoreCase(sessionCode)){
                //注册用户

                    //快捷键是ctrl+alt+t
                    userService.register(user);
                    result.setMsg("注册成功");

            }else {
                throw new RuntimeException("验证码错误!!!");
            }

        } catch (Exception e) {
            e.printStackTrace();
            result.setMsg(e.getMessage()).setState(false);
        }
        return result;
    }

    //生成验证码
    @GetMapping("getImage")
    public void getImage(HttpServletResponse response, HttpSession session) throws IOException {
        CreateImageCode createImageCode=new CreateImageCode();
        //获取验证码
        String securityCode = createImageCode.getCode();
        //验证码存入session
        session.setAttribute("code",securityCode);
        //生成图片
        BufferedImage image = createImageCode.getBuffImg();
        //响应浏览器
        response.setContentType("image/png");
        ImageIO.write(image,"png",response.getOutputStream());
    }
}

在这里插入图片描述

当我们点击提交的时候,我们需要把用户名和密码提交到后台
axios请求在传对象类型参数的时候会把对象转成json格式,所以后端接收数据的时候一定要加@requestBody注解

在这里插入图片描述在这里插入图片描述

package com.baizhi.travels.service;

import com.baizhi.travels.dao.UserDao;
import com.baizhi.travels.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional  //用来控制事务的
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;

    @Override
    public User login(User user) {
        User userDB = userDao.findByUsername(user.getUsername());
        if(userDB!=null){
            if(userDB.getPassword().equals(user.getPassword())){
                return userDB;
            }
            throw new RuntimeException("密码输入错误!!!");
        }else {
            throw new RuntimeException("你的用户名输入错误!!!");
        }

    }

    @Override
    public void register(User user) {
        if (userDao.findByUsername(user.getUsername())==null){
            userDao.save(user);
        }else {
            throw new RuntimeException("用户名已经存在");
        }

    }
}

package com.baizhi.travels.controller;

import com.baizhi.travels.entity.Result;
import com.baizhi.travels.entity.User;
import com.baizhi.travels.service.UserService;
import com.baizhi.travels.utils.CreateImageCode;
import com.baizhi.travels.utils.ValidateImageCodeUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.web.servlet.server.Session;
import org.springframework.stereotype.Controller;
import org.springframework.util.Base64Utils;
import org.springframework.web.bind.annotation.*;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("user")
@CrossOrigin   //实现跨域的功能
@Slf4j    //用来打印参数的
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("login")
    public Result login(@RequestBody User user){
        Result result=new Result();
        log.info("user:"+user);
        try {
            User userDB = userService.login(user);
            result.setMsg("登录成功");
        } catch (Exception e) {
            result.setState(false).setMsg(e.getMessage());
        }
        return result;
    }



    //用户注册
    @PostMapping("/register")
    public Result register(String code, String key, @RequestBody User user, HttpServletRequest request){
        Result result = new Result();
        log.info("接收到的验证码:"+code);
        log.info("接收到的验证码key:"+key);
        log.info("接受到的user对象"+user);
        //验证验证码
        String keyCode = (String) request.getServletContext().getAttribute(key);
        log.info(keyCode);
        try {
            if (code.equalsIgnoreCase(keyCode)){
                //注册用户

                    //快捷键是ctrl+alt+t
                    userService.register(user);
                    result.setMsg("注册成功");

            }else {
                throw new RuntimeException("验证码错误!!!");
            }

        } catch (Exception e) {
            e.printStackTrace();
            result.setMsg(e.getMessage()).setState(false);
        }
        return result;
    }

    //生成验证码
    @GetMapping("getImage")
    public Map<String,String> getImage(HttpServletRequest request) throws IOException {
        Map<String,String> result=new HashMap<>();
        CreateImageCode createImageCode=new CreateImageCode();
        //获取验证码
        String securityCode = createImageCode.getCode();
        //验证码存入session
        String key=new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
        request.getServletContext().setAttribute(key,securityCode);
        //生成图片
        BufferedImage image = createImageCode.getBuffImg();
        //进行base64的编码
        ByteArrayOutputStream bos=new ByteArrayOutputStream();
        ImageIO.write(image,"png",bos);
        String string = Base64Utils.encodeToString(bos.toByteArray());
//        result.put(key,securityCode);
        result.put("key",key);
        result.put("image",string);
        return result;
    }
}

在这里插入图片描述在这里插入图片描述在这里插入图片描述
@param注解的作用:https://blog.csdn.net/qq_41621362/article/details/103594212?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

在这里插入图片描述在这里插入图片描述
里面的name属性是可以不写的了

删除方法和添加方法其实是差不多的

*js:;是什么意思?

1、执行一段 空白JAVASCRIPT语句 并且返回的也是空或者false值。就终止了,相当于return false;

2、把 javascript:; 加在超级链接上 就可以防止 链接跳转…从而 可以给 链接的 onclick 方法上 写 自己想执行的代码…

例子
我是一个超级链接 //这个链接不会跳转,但会执行里面的onclick方法
//这个链接不会跳转,但会执行里面的onclick方法

在这里插入图片描述在这里插入图片描述
修改页面我们需要进行数据的回显(前端给后端发送请求然后后端回显给前端数据,然后前端再将数据进行绑定)

在这里插入图片描述根据省份的id去展示省份下面的景点

先写实体类在写Dao再写mapper的xml的sql语句,再写service再写controller

景点的分页是基于省份的id进行分页的,查询总条数也是查询这个省份下面的总条数
在这里插入图片描述在这里插入图片描述

//快速查询出所有字段
select group_concat(COLUMN_NAME) from information_schema.COLUMNS where table_name = '表名';

进入景点列表(初始化的时候我们就应该发一个异步请求)

根据地址栏传入的省份ID去拿所有的景点信息。

rowspan=“2” 横跨去两行

在这里插入图片描述
v-if表示的是这个标签什么时候展示

在这里插入图片描述在这里插入图片描述上传图片的功能我们就涉及到了文件上传
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述在这里插入图片描述

<dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
</dependency>

删除景点的时候省份的景点也应该进行减1的操作

package com.baizhi.travels.controller;

import com.baizhi.travels.entity.Place;
import com.baizhi.travels.entity.Result;
import com.baizhi.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;
    //删除景点
    /**
     * 删除景点信息
     * @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;
    }

    //保存景点信息
    @PostMapping("save")
    public Result save(MultipartFile pic, Place place) throws IOException {
//        System.out.println(pic.getOriginalFilename());
//        System.out.println(place);
        Result result=new Result();
        try {
            //文件上传(我们需要把它传到一个指定的目录)所以我们需要在springboot里面定义一个配置
            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 (IOException e) {
            e.printStackTrace();
            result.setState(false).setMsg(e.getMessage());
        }

        return result;

    }

    //根据省份id查询景点的方法
    //我们需要把集合和对应的分页数据都返回到前端所以我们这里返回的是Map集合
    @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;

    }
}

代码地址:https://www.lanzoux.com/irrGYhccvah

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值