搭建 VUE + SpringBoot 前后端分离项目

迈不过友情╰ 2022-10-12 00:46 5阅读 0赞

### 实现前后端分离 ###

*   *  VUE + SpringBoot 实现前后端分离
     *   *  1. VUE 项目结构
         *  2. SpringBoot 项目结构
         *  2. pom.xml (Maven项目依赖)
         *  3. application.properties (配置文件)
         *  4. 前端 VUE 界面
         *   *  4.1 index.html
             *  4.2 input.html
         *  5. 后端界面
         *   *  5.1 EmployeeController 控制器
             *  5.2 EmployeeMapper 接口
             *  5.3 IEmployeeService (Service层接口)
             *  5.4 EmployeeServiceImpl (Service实现层)
         *  6. Config 配置（跨域请求、拦截器、分页）
         *  7. App 启动类

## VUE + SpringBoot 实现前后端分离 ##

### 1. VUE 项目结构 ###

**项目搭建**：[VUE 项目搭建][VUE]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70]

### 2. SpringBoot 项目结构 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 1]

### 2. pom.xml (Maven项目依赖) ###

<?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 http://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.4.3</version>
        </parent>
        
        <groupId>com.yy.mybatis-plus</groupId>
        <artifactId>mybatis-plus-demo</artifactId>
        <version>1.0.1</version>
        <packaging>jar</packaging>
        <properties>
            <java.version>11</java.version>
        </properties>
    
        
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
    
            
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </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>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-jdbc</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>druid-spring-boot-starter</artifactId>
                <version>1.2.5</version>
            </dependency>
    
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.4.0</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-aop</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-freemarker</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.74</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-redis</artifactId>
            </dependency>
    
            
            <dependency>
                <groupId>com.aliyun.oss</groupId>
                <artifactId>aliyun-sdk-oss</artifactId>
                <version>3.5.0</version>
            </dependency>
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.6</version>
            </dependency>
    
            
    
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <configuration>
                        <excludes>
                            <exclude>
                                <groupId>org.projectlombok</groupId>
                                <artifactId>lombok</artifactId>
                            </exclude>
                        </excludes>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </project>
        
        
    </project>

### 3. application.properties (配置文件) ###

server.port=8888
    #mysql
    spring.datasource.url=jdbc:mysql://localhost:3306/mybatis-plus?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2b8
    spring.datasource.username=root
    spring.datasource.password=admin
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    
    # mybatis 配置 slq 打印日志
    #logging.level.com.yy.mp.mapper=debug
    
    # mybatis-plus 配置 slq 打印日志
    mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
    
    #mongodb
    #spring.data.mongodb.uri=mongodb://127.0.0.1:27017,127.0.0.1:27018,127.0.0.1:27019/wolf2w?replicaSet=rs
    #spring.data.mongodb.uri=mongodb://127.0.0.1:27017/wolf2w
    #logging.level.org.springframework.data.mongodb.core= DEBUG
    
    #redis
    #spring.redis.host=127.0.0.1
    
    #elasticsearch
    #spring.elasticsearch.rest.uris=http://localhost:9200
    
    #配置短信发送服务接口
    #sms.url=https://way.jd.com/kaixintong/kaixintong?mobile={0}&content=\u3010\u51ef\u4fe1\u901a\u3011\u60a8\u7684\u9a8c\u8bc1\u7801\u662f\uff1a{1}&appkey={2}
    #sms.appkey=f3c4f8c6845efddac0420ebbfeae256f

### 4. 前端 VUE 界面 ###

#### 4.1 index.html ####

<!DOCTYPE html>
    <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../js/vue.js"></script>
        <script src="../../js/jquery.js"></script>
    </head>
    <body>
    <a href="/views/11_demo_list/input.html">添加</a>
    <div id="app">
        <ul>
            <li v-for="e in emps" v-on:click="clickMeVue($event,e)">
                
                {
       {e.id}}-{
       {e.name}}-{
       {e.age}}}
                
                <a v-bind:href="'input.html?id=' + e.id">编辑</a>
            </li>
        </ul>
    </div>
    
    <script> var vue = new Vue({ el: "#app", data: { emps: { } }, mounted: function () { let _this = this; $.get('Http://localhost:8888/employees', function (data) { _this.emps = data; }) } }); </script>
    </body>
    </html>

#### 4.2 input.html ####

<!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/js/jquery.js"></script>
        <script src="/js/jquery.form.js"></script>
        <script src="/js/vue.js"></script>
        <script> //获取url上的请求参数 function getParams() { //获取问号及问号后面的内容 var url = window.location.search; var params = new Object(); if (url.indexOf("?") != -1) { //截取问号后面的内容,再使用&分割多个属性 var arr = url.substr(1).split("&"); for (var i = 0; i < arr.length; i++) { //使用=分割为keyvalue var keyValue = arr[i].split("="); params[keyValue[0]] = keyValue[1]; } } return params; } </script>
    </head>
    <body>
        <div id="app">
            <form id="formId">
                <input type="hidden" name="id" v-model="emp.id">
                名称：<input type="text" name="name" v-model="emp.name"><br/>
                年龄：<input type="text" name="age" v-bind:value="emp.age"><br>
                <input type="button" id="btn" @click="submitForm()" value="提交">
            </form>
        </div>
        <script> let vue = new Vue({ el: '#app', data: { emp: [] }, methods: { submitForm: function () { // $.post(url, 表单参数序列化, function(data){...}) // 点击按钮时，发起起步请求，提交表单（异步表单提交） // $("#formId").ajaxSubmit(); // 将表单转成异步表单，并提交 // $("#formId").ajaxForm(); // 将表单转成异步表单，不提交 $("#formId").ajaxSubmit({ url: "http://localhost:8888/employees", type: "POST", success: function (data) { if (data) { // 操作成功跳转 window.location.href = "input.html"; } } }); } }, mounted: function () { let _this = this; $.ajax({ url: "http://localhost:8888/employees/" + getParams().id, type: "GET", success: function (data) { console.log(_this); _this.emp = data; } }); } }); </script>
    </body>
    </html>

### 5. 后端界面 ###

#### 5.1 EmployeeController 控制器 ####

package com.yy.mp.web.controller;
    
    import com.yy.mp.domain.Employee;
    import com.yy.mp.service.IEmployeeService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    
    /** * @program: mybatis-plus-demo * @ClassName: EmployeeController * @description: * @author: YanYang * @create: 2021-06-27 15:00 **/
    @RestController
    @RequestMapping("/employees")
    public class EmployeeController { 
    
        @Autowired
        private IEmployeeService employeeService;
    
        @GetMapping
        public List<Employee> list() { 
            return employeeService.list();
        }
    
        @PostMapping
        public boolean saveOrUpdate(Employee employee) { 
            if (employee.getId() != null) { 
                return employeeService.updateById(employee);
            }
            return employeeService.save(employee);
        }
    
        @GetMapping("/{id}")
        public Employee input(@PathVariable Long id) { 
            return employeeService.getById(id);
        }
    }

#### 5.2 EmployeeMapper 接口 ####

public interface EmployeeMapper extends BaseMapper<Employee> { }

#### 5.3 IEmployeeService (Service层接口) ####

package com.yy.mp.service;
    
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.yy.mp.domain.Employee;
    import com.yy.mp.qo.EmployeeQueryObject;
    
    /** * 自定义 mybatis-plus 服务层接口 * 1> 自定义接口 IEmployeeService * 2> 继承通用接口 IService * 3> 指定泛型，即操作实体类型 */
    public interface IEmployeeService extends IService<Employee> { 
    }

#### 5.4 EmployeeServiceImpl (Service实现层) ####

package com.yy.mp.service.impl;
    
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import com.yy.mp.domain.Employee;
    import com.yy.mp.mapper.EmployeeMapper;
    import com.yy.mp.qo.EmployeeQueryObject;
    import com.yy.mp.service.IEmployeeService;
    import org.springframework.stereotype.Service;
    import org.springframework.util.StringUtils;
    
    /** * 自定义 mybatis-plus 服务层接口实现类 * 1> 自定义类 EmployeeServiceImpl * 2> 实现自定义接口：IEmployeeService * 3> 继承通用接口 IService 实现类：ServiceImpl * 4> 指定2个泛型：1：操作实体类 mapper 接口；2：操作实体对象类型：Employee */
    @Service
    public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements IEmployeeService { 
    }

### 6. Config 配置（跨域请求、拦截器、分页） ###

package com.yy.mp.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import com.baomidou.mybatisplus.annotation.DbType;
    import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
    import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.PropertySource;
    
    @Configuration
    @MapperScan(basePackages = "com.yy.mp.mapper")
    public class Config implements WebMvcConfigurer { 
        @Autowired
        private CheckLoginInterceptor checkLoginInterceptor;
    
        /** * 拦截器配置 * 具体拦截器配置在我博客搜索——拦截器 */
        @Override
        public void addInterceptors(InterceptorRegistry registry) { 
            registry.addInterceptor(checkLoginInterceptor)
                    .addPathPatterns("/**")
                    .excludePathPatterns("/users/checkPhone")
                    .excludePathPatterns("/users/sendVerifyCode")
                    .excludePathPatterns("/users/regist")
                    .excludePathPatterns("/users/login");
        }
    
    	/** * 跨域访问 * 具体跨域访问在我博客搜索——跨域 */
        // 重写父类提供的跨域请求处理的接口
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            // 添加映射路径
            registry.addMapping("/**")
                    // 放行哪些原始域
                    // .allowedOrigins("*")
                    .allowedOriginPatterns("*")
                    // 是否发送 Cookie 信息
                    .allowCredentials(true)
                    // 放行哪些原始域（请求方式）
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    // 放行哪些原始域（头部信息）
                    .allowedHeaders("*")
                    // 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                    .exposedHeaders("Header1", "Header2");
        }
    
    	/** * 配置分页插件 */
        @Bean
        public MybatisPlusInterceptor mybatisPlusInterceptor() { 
            MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
            PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor(DbType.MYSQL);
            paginationInnerInterceptor.setOverflow(true); //合理化
            interceptor.addInnerInterceptor(paginationInnerInterceptor);
            return interceptor;
        }
    }

### 7. App 启动类 ###

@SpringBootApplication
    public class App { 
        public static void main(String[] args) { 
            SpringApplication.run(App.class, args);
        }
    }

[VUE]: https://blog.csdn.net/zzvar/article/details/118398691
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70]: /images/20221005/b2cc7f5566684b96af9f59eca57d1089.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6dmFy_size_16_color_FFFFFF_t_70 1]: /images/20221005/900e5eb55cb94b9b966bc1a22d5ceaf8.png