VUE+Spring Boot整合MyBatis实现前后端分离项目壁纸网站

目录

前言

一.项目运行

二.环境需要

 三.技术栈

四.项目说明

五.后端代码

---

前言

        每次换桌面,壁纸总是不好找,搜索图片得不到好的索引与反馈，很难找到自己喜欢的壁纸，而壁纸网站可以免去我们去寻找壁纸的艰辛与纠结。 桌面壁纸是电脑桌面所使用的背景图片,可以根据大小和分辨率来做相应调整。 壁纸让我们的电脑看起来更好看,更漂亮,更有个性。网站内的图片是经过人工筛选的,保证色彩、构图和内容的质量。近年来，壁纸网站越来越受到人们的欢迎。作为一名前端开发者，我最近使用了Vue和Spring Boot整合MyBatis来搭建了一个壁纸网站，今天我想和大家分享一下我的经验。

一.项目运行

1. 环境配置：Java1.8+Mysql 8.0+node.js+Vue.js+element-ui。

2. 项目技术：Springboot + mybatis + Maven + Vue +Jwt+Axios+oss。

二.环境需要

1. 运行环境：java jdk 1.8。
2. IDE环境：IDEA。

3. tomcat环境：Tomcat 7.x,8.x,9.x版本均可；

4. 硬件环境：windows 7/8/10 1G内存以上；

5. 是否Maven项目: 否；查看源码目录中是否包含pom.xml；若包含，则为maven项目，否则为非maven项目；

6. .数据库：MySql 8.0版本；

7. 身份验证：JWT令牌验证；

8. 储存图片：阿里云对象存储OSS。

 三.技术栈

1. 前端：vue+css+javascript+Axios+element-ui
2. 后端：Springboot + mybatis

四.项目说明

        首先，我使用了Spring Boot来构建后端部分。Spring Boot是一个流行的Java框架，它提供了许多有用的功能，例如自动配置、快速开发和易于扩展。我使用Spring Boot来处理用户的请求，并将数据存储在数据库中。我还使用了JWT令牌验证来管理用户的身份验证和授权。

        接下来，我使用了Vue.js来构建前端部分。Vue.js是一个流行的JavaScript框架，它提供了许多有用的功能，例如组件化、虚拟DOM和响应式数据绑定。我使用Vue.js来构建了壁纸网站的主要界面，并使用了Vue Router来管理路由和页面导航。此外，我还使用了Vue CLI来快速创建项目并管理依赖。

        在整个开发过程中，我遇到了一些挑战。其中一个挑战是如何处理大量的图片数据。为了解决这个问题，我使用了 阿里云对象存储OSS来存储图片，这样可以确保图片数据的安全性和可扩展性。

object 就是我们要存储的 对象，这是 oss 的基本单元。在 com.aliyun.oss.model 包中，有如下的 ossObject 定义：

public class OSSObject extends GenericResult implements Closeable {

    // Object key (name)
    private String key;

    // Object's bucket name
    private String bucketName;

    // Object's metadata.
    private ObjectMetadata metadata = new ObjectMetadata();

    // Object's content
    private InputStream objectContent;

    /**
     * Gets the object's metadata
     * 
     * @return Object's metadata in（{@link ObjectMetadata}
     */
    public ObjectMetadata getObjectMetadata() {
        return metadata;
    }

        另一个挑战是如何处理用户上传的图片。为了解决这个问题，我使用了Spring Boot的Multipart File Upload功能。这个功能允许用户上传图片，并将图片保存在服务器上。我还使用了Vue.js的File Upload组件来管理上传过程，并在上传完成后向用户提供反馈。

1. Mapper层

   
   	
   	    select * from newbooks where title=#{title}
   	

2. Service层

   @Override
   public NewBooks changePicUrl(String title) {
       //根据参数调用方法
       NewBooks newBooks = newBooksMapper.changeAvatar(title);
       if (newBooks == null){
           throw new NewsBookNotException("书库没有该书数据，请先添加！");
       }
       return newBooks;
   }
   

   五.后端代码

1. 导入spring-boot

   
   
       4.0.0
       
           org.springframework.boot
           spring-boot-starter-parent
           2.7.10
            
       
       com.itheima
       springboot-web-quickstart
       0.0.1-SNAPSHOT
       springboot-web-quickstart
       springboot-web-quickstart
       
           1.8
           true
       
       
           
               org.springframework.boot
               spring-boot-starter-web
           
           
               org.mybatis.spring.boot
               mybatis-spring-boot-starter
               2.2.2
           
           
               com.mysql
               mysql-connector-j
               runtime
           
           
               org.projectlombok
               lombok
               true
           
           
               org.springframework.boot
               spring-boot-starter-test
               test
           

2.  阿里云对象存储OSS。

   
           
               com.aliyun.oss
               aliyun-sdk-oss
               3.15.1
           
   
           
               org.springframework.boot
               spring-boot-configuration-processor
           

   OSS。

3. 分页

   
           
               com.github.pagehelper
               pagehelper-spring-boot-starter
               1.4.2
           

4. JWT令牌验证

   
           
               io.jsonwebtoken
               jjwt
               0.9.1
           
   
           
               com.alibaba
               fastjson
               1.2.76
           
       

        总的来说，使用Vue.js和Spring Boot来构建壁纸网站是一项非常有趣和有挑战性的任务。通过这个项目，我学习了很多有关Vue.js和Spring Boot的知识，并且进一步提高了我的编程技能。如果你也想尝试构建一个壁纸网站，我希望我的经验能够帮助你。

源码地址：https://github.com/ksasbses/wallpaper

成品展示：http://111.230.49.39:80