精华内容
下载资源
问答
  • Spring Boot Vue前后端分离开发实战.pdf 上手简单,文档讲述清晰,实在好用。
  • 百分百完善的vue+springboot前后端分离架构,可直接拿去做前后端分离项目的底层架构,包含3个部分,应用springboot框架的java后端代码,vue前端代码,mysql数据库脚本,已完成反向代理,跨域,数据库连接等基础参数...
  • springboot+vue 前后端分离 整合教程额外补充 详情请查看文档资料 2020年11月12日10:25:51
  • 搭建spring-boot+vue前后端分离框架并实现登录功能

    万次阅读 多人点赞 2018-08-12 12:17:01
    一、环境、工具 jdk1.8 maven spring-boot idea VSVode vue 二、搭建后台spring-boot...这时候就需要下载跨域请求用的axios jar包 控制台cnpm install axios --save-dev 至此前后端都已经搭建完毕,启动项目即可访问

     

    一、环境、工具

    jdk1.8

    maven

    spring-boot

    idea

    VSVode

    vue

    二、搭建后台spring-boot框架

    步骤:

    1、new- project选择Spring Initializr  next

    2、创建项目文件结构以及jdk版本

    3、选择项目需要的依赖

    next然后finish

    4、创建完毕的文件结构如图

    5、对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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    	<modelVersion>4.0.0</modelVersion>
    
    	<groupId>com.zks</groupId>
    	<artifactId>myspringboot</artifactId>
    	<version>0.0.1-SNAPSHOT</version>
    	<packaging>jar</packaging>
    
    	<name>myspringboot</name>
    	<description>Demo project for Spring Boot</description>
    
    	<parent>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-parent</artifactId>
    		<version>2.0.4.RELEASE</version>
    		<relativePath/> <!-- lookup parent from repository -->
    	</parent>
    
    	<properties>
    		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    		<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>1.3.2</version>
    		</dependency>
    		<dependency>
    			<groupId>mysql</groupId>
    			<artifactId>mysql-connector-java</artifactId>
    			<scope>runtime</scope>
    		</dependency>
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-test</artifactId>
    			<scope>test</scope>
    		</dependency>
    		<dependency>
    			<groupId>org.apache.commons</groupId>
    			<artifactId>commons-lang3</artifactId>
    			<version>3.4</version>
    		</dependency>
    
    
    		<dependency>
    			<groupId>com.fasterxml.jackson.core</groupId>
    			<artifactId>jackson-core</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>com.fasterxml.jackson.core</groupId>
    			<artifactId>jackson-databind</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>com.fasterxml.jackson.datatype</groupId>
    			<artifactId>jackson-datatype-joda</artifactId>
    		</dependency>
    		<dependency>
    			<groupId>com.fasterxml.jackson.module</groupId>
    			<artifactId>jackson-module-parameter-names</artifactId>
    		</dependency>
    		<!-- 分页插件 -->
    		<dependency>
    			<groupId>com.github.pagehelper</groupId>
    			<artifactId>pagehelper-spring-boot-starter</artifactId>
    			<version>1.2.5</version>
    		</dependency>
    		<!-- alibaba的druid数据库连接池 -->
    		<dependency>
    			<groupId>com.alibaba</groupId>
    			<artifactId>druid-spring-boot-starter</artifactId>
    			<version>1.1.9</version>
    		</dependency>
    	</dependencies>
    
    	<build>
    		<plugins>
    			<plugin>
    				<groupId>org.springframework.boot</groupId>
    				<artifactId>spring-boot-maven-plugin</artifactId>
    			</plugin>
    			<!-- mybatis generator 自动生成代码插件 -->
    			<plugin>
    				<groupId>org.mybatis.generator</groupId>
    				<artifactId>mybatis-generator-maven-plugin</artifactId>
    				<version>1.3.2</version>
    				<configuration>
    					<configurationFile>${basedir}/src/main/resources/generator/generatorConfig.xml</configurationFile>
    					<overwrite>true</overwrite>
    					<verbose>true</verbose>
    				</configuration>
    			</plugin>
    		</plugins>
    	</build>
    
    
    </project>
    

    6、在resources文件夹下删除application.properties文件并添加新的application.yml文件,信息如下

     

    server:
      port: 8880 #端口号
    
    
    spring:
        datasource:
            name: zksdb #数据库名称
            type: com.alibaba.druid.pool.DruidDataSource
            #druid相关配置
            druid:
              #监控统计拦截的filters
              filters: stat
              driver-class-name: com.mysql.jdbc.Driver
              #基本属性
              url: jdbc:mysql://127.0.0.1:3306/zksdb?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true
              username: root
              password: 123456
              #配置初始化大小/最小/最大
              initial-size: 1
              min-idle: 1
              max-active: 20
              #获取连接等待超时时间
              max-wait: 60000
              #间隔多久进行一次检测,检测需要关闭的空闲连接
              time-between-eviction-runs-millis: 60000
              #一个连接在池中最小生存的时间
              min-evictable-idle-time-millis: 300000
              validation-query: SELECT 'x'
              test-while-idle: true
              test-on-borrow: false
              test-on-return: false
              #打开PSCache,并指定每个连接上PSCache的大小。oracle设为true,mysql设为false。分库分表较多推荐设置为false
              pool-prepared-statements: false
              max-pool-prepared-statement-per-connection-size: 20
    ## 该配置节点为独立的节点,有很多同学容易将这个配置放在spring的节点下,导致配置无法被识别
    mybatis:
      mapper-locations: classpath:mapper/*.xml  #注意:一定要对应mapper映射xml文件的所在路径
      type-aliases-package: com.winterchen.model  # 注意:对应实体类的路径
    
    #pagehelper
    pagehelper:
        helperDialect: mysql
        reasonable: true
        supportMethodsArguments: true
        params: count=countSql
        returnPageInfo: check

    7、更改项目启动类

    package com.zks.myspringboot;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    @MapperScan("com.zks.dao")
    public class MyspringbootApplication {
    	public static void main(String[] args) {
    		SpringApplication.run(MyspringbootApplication.class, args);
    	}
    
    }

    8、创建数据库以及表,详情如下

    9、使用mybatis generator自动生成代码

    配置pom.xml文件中generator插件所需要的配置文件${basedir}/src/main/resources/generator/generatorConfig.xml

    信息如下:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE generatorConfiguration
            PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
            "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
    <generatorConfiguration>
        <!-- 数据库驱动:选择你的本地硬盘上面的数据库驱动包-->
        <classPathEntry  location="C:\Users\Administrator\.m2\repository\mysql\mysql-connector-java\5.1.46\mysql-connector-java-5.1.46.jar"/>
        <context id="DB2Tables"  targetRuntime="MyBatis3">
            <commentGenerator>
                <property name="suppressDate" value="true"/>
                <!-- 是否去除自动生成的注释 true:是 : false:否 -->
                <property name="suppressAllComments" value="true"/>
            </commentGenerator>
            <!--数据库链接URL,用户名、密码 -->
            <jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://127.0.0.1/zksdb" userId="root" password="123456">
            </jdbcConnection>
            <javaTypeResolver>
                <property name="forceBigDecimals" value="false"/>
            </javaTypeResolver>
            <!-- 生成模型的包名和位置-->
            <javaModelGenerator targetPackage="com.zks.model" targetProject="src/main/java">
                <property name="enableSubPackages" value="true"/>
                <property name="trimStrings" value="true"/>
            </javaModelGenerator>
            <!-- 生成映射文件的包名和位置-->
            <sqlMapGenerator targetPackage="mapper" targetProject="src/main/resources">
                <property name="enableSubPackages" value="true"/>
            </sqlMapGenerator>
            <!-- 生成DAO的包名和位置-->
            <javaClientGenerator type="XMLMAPPER" targetPackage="com.zks.dao" targetProject="src/main/java">
                <property name="enableSubPackages" value="true"/>
            </javaClientGenerator>
            <!-- 要生成的表 tableName是数据库中的表名或视图名 domainObjectName是实体类名-->
            <table tableName="t_user" domainObjectName="User" enableCountByExample="false" enableUpdateByExample="false" enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>
        </context>
    </generatorConfiguration>

    关于如何查找本地数据库驱动包

    file-Project Stricture

    如图便是我们需要的地址;

    然后点击run-Edit Configurations

    添加配置(maven需手动添加)

    然后Apply   OK

    运行。(注意:同一张表不要多次运行,因为mapper映射文件会生成多次代码)

    如图表示没有报错运行代码生成成功。

    因为生成的是UserMapper,这里需要改成UserDao(个人喜欢用UserDao)

    生成代码如下

    User.java

    UserMapper(我已改为UserDao)

    10、注意MyspringbootApplication文件的路径位置,需如图所示

    11、创建UserController、UserService、UserServiceImpl,MyResult详情如下

    MyResult

    UserController

    controller层传递对象参数时记得前面加@RequestBody注解

    UserService

    UserServiceImpl

    此处可能会报错,但是并不影响,若想清除此处报错如下图所示

    错误就没了

    启动项目无报错,后台搭建成功

    三、搭建前端vue部分(前提安装node环境)

    打开VSCode工作目录下,输入vue init webpack-simple 项目名称,回车,等待下载模板

    如图下载完毕

    项目名称、描述、下依赖、启动项目完毕

    浏览器localhost:8080看到vue表示成功

    接下来即可书写登录请求(我就直接在app.vue下写的)

    登录页代码如下

    其中需要添加一个utils文件夹以及一个utils.js文件,文件如下

    还需要在webpack.config.js下添加跨域请求

    代码如下:

    此处的8880对应application.yml文件中的

    这时候就需要下载跨域请求用的axios  jar包

    控制台cnpm install axios --save-dev

    至此前后端都已经搭建完毕,启动项目即可访问

     

    展开全文
  • 主要介绍了部署vue+Springboot前后端分离项目的步骤实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • springboot+vue,前后端分离商城项目,有部署教程
  • 数据库使用mysql8.0,springboot2.2.6.RELEASE进行开发,前端vue,前后端分离项目。
  • 关于前后端分离的理论描述可以参考一下这篇文章,个人感觉写的还是很不错的前后端分离:web实现前后端分离,前后端解耦 本篇文章主要介绍前后端分离的一个小demo,前端使用vue实现,后端采用SpringBoot实现,数据库...

    关于前后端分离的理论描述可以参考一下这篇文章,个人感觉写的还是很不错的前后端分离:web实现前后端分离,前后端解耦
    本篇文章主要介绍前后端分离的一个小demo,前端使用vue实现,后端采用SpringBoot实现,数据库采用mysql,demo已上传至GitHub:SpringBoot_Vue
    在这里插入图片描述
    先启动项目给大家看一下效果
    启动后端项目
    在这里插入图片描述
    启动前端项目
    在这里插入图片描述
    访问前端网页查看一下能否后从后台读到数据,注意端口号是前端项目的8080
    在这里插入图片描述
    这里在后端项目中也提供的前后端为分离的前端页面,可以访问8088端口查看,但是采用的也是Restful风格请求,大家可以对比查看一下前后端分离区别
    在这里插入图片描述

    接下来说一下前后端分离时前后端各自需要做哪些修改
    关于项目的搭建配置、CRUD代码的编写这里就不做赘述了,主要讲解一下前后端分离时后端的需要做出哪些改变。
    后端方面主要是需要做一个跨域的配置,新建config包,在config包下新建WebMvcConfigurer.java

    package com.thz.vuecrud.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    class WebMvcConfigurer extends WebMvcConfigurerAdapter {
        //跨域配置
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                //重写父类提供的跨域请求处理的接口
                public void addCorsMappings(CorsRegistry registry) {
                    //添加映射路径
                    registry.addMapping("/**")
                            //放行哪些原始域
                            .allowedOrigins("*")
                            //是否发送Cookie信息
                            .allowCredentials(true)
                            //放行哪些原始域(请求方式)
                            .allowedMethods("GET", "POST", "PUT", "DELETE")
                            //放行哪些原始域(头部信息)
                            .allowedHeaders("*")
                            //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
                            .exposedHeaders("Header1", "Header2");
                }
            };
        }
    }
    

    然后就是将前端访问地址修改为Restful风格的,其实不修改也是可以的,但是既然都前后端分离了,这里还是提倡使用Restful风格。
    什么是Restful风格?看下面这张图
    在这里插入图片描述
    采用Restful风格需要将之前的RequestMapping修改为PutMapping、DeleteMapping等,用以区分请求是CRUD中的哪一种
    在这里插入图片描述
    关于前端部分的页面搭建这里就不多做赘述了,主要使用的是Vue框架。不使用Vue框架使用普通的html页面也行,因为前后端分离时前端部分主要是在请求后端数据时发生了一些变化,至于数据的展示、页面的布局等都是一样的。
    所有的请求都交由Ajax进行发送,我这里使用了ajax框架axios
    使用npm下载axios后导入vue项目中
    在这里插入图片描述
    看一下如何使用在这里插入图片描述
    因为使用了Restful风格,所以上图红框部分使用了不同的请求方式,划红线的url是后端暴露出来的接口,我们可以看到端口号8088正是我们之前启动后端项目时的端口号

    展开全文
  • springboot+vue前后端分离开发项目源码
  • 版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在明显的谬误,请留言...因为新进入的公司现在做的项目是前后端分离的,后端用的是springboot加mybatis,登录验证用的是secutiry,前端用的是vue.js。而...

    版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在明显的谬误,请留言说明原因再踩哦,谢谢,我也可以知道原因,不断进步! https://blog.csdn.net/csonst1017/article/details/85329865

    因为新进入的公司现在做的项目是前后端分离的,后端用的是springboot加mybatis,登录验证用的是secutiry,前端用的是vue.js。而我之前都是在做前后端一起开发的,所以在这方面还不是太明白,百度了许多资料,终于成功实现登录功能了(json参数传递)。
    在这里借助一位老哥的前端vue.js代码代码链接,但是用这位老哥的前端代码过程中出了一些问题,在这里把一些需要注意的地方写出来。

    前端:

    vue项目文件夹\src\main.js

    在这里插入图片描述

    vue项目文件夹\config\index.js

    在这里插入图片描述
    注意这两个个配置,这是用axios进行端口转发的配置,配的地址一定要和后端springboot配置的server端口地址一样,如图。
    在这里插入图片描述
    我后端springboot配置文件是yml,配置的是8082端口,那么vue项目文件夹\src\main.js的axios地址配置和proxyTable里的也要配成跟后端一样的(http://localhost:8082),因为实现前后端分离就是,我运行vue项目,浏览器输入vue项目的地址(http://localhost:8080),然后通过这个配置项把数据进行端口转发到后端的端口。这样就不需要把前端的文件放进springboot项目里去了,各自开发各的,知道彼此的端口就行了。

    还有就是登陆页点击提交的地址问题:
    vue项目文件夹\src\components\manage\BlogLogin.vue
    在这里插入图片描述

    画圈里的地址是后端controller层的mapping地址,我把controller层图贴出来。
    在这里插入图片描述

    记住不需要把前端文件放进后端的项目文件夹里,之前放进去弄半天,后来才知道原来不需要,直接npm run dev把vue项目跑起来然后浏览器输vue的地址端口会自动转发传参数!!!(极度舒服)
    在这里插入图片描述

    后端:
    因为后端代码是公司的,所以不好贴出来,在这里就只贴login的把。

    package com.likemoney.controller;
    
    import com.likemoney.dao.entity.Employee;
    import com.likemoney.form.LoginUserForm;
    import com.likemoney.config.security.SecurityUserDetails;
    import com.likemoney.config.security.jwt.JwtTokenUtil;
    import com.likemoney.log.factory.LogTaskFactory;
    import com.likemoney.model.ResponseBean;
    import com.likemoney.utils.PasswordEncoder;
    import com.likemoney.service.IEmployeeService;
    import org.apache.log4j.LogManager;
    import org.apache.log4j.Logger;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.data.redis.core.RedisTemplate;
    import org.springframework.security.authentication.AuthenticationManager;
    import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
    import org.springframework.security.core.Authentication;
    import org.springframework.security.core.context.SecurityContextHolder;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RestController;
    
    import javax.servlet.http.HttpServletResponse;
    import javax.validation.Valid;
    
    import static com.likemoney.utils.HttpKit.getIp;
    
    /**
     * @author gj
     * @date 2018/12/20
     */
    @RestController
    public class LoginController {
        private static final Logger log = LogManager.getLogger(LoginController.class);
        @Autowired
        private AuthenticationManager authenticationManager;
        @Autowired
        //对redis进行操作
        private RedisTemplate<String, Object> redisTemplate;
        @Autowired
        private IEmployeeService iEmployeeService;
        @Value("${jwt.header}")
        private String header;
        @CrossOrigin
        @PostMapping("/admin/login")
        public ResponseBean login(HttpServletResponse response, @RequestBody @Valid LoginUserForm userForm) {
            Employee employee = iEmployeeService.getByAccount(userForm.getUserName());
            //调用ProviderManager的authenticate方法进行验证(
    //        实际是方法中调用类中的List<AuthenticationProvider> providers集合中的各个AuthenticationProvider接口实现类中的authenticate(Authentication authentication)方法进行验证),默认DaoAuthenticationProvider
    //        认证通过返回带有权限信息的authentication,AuthenticationManager的实现类ProviderManager
            //获取账户信息和密码匹配都在该方法里,详见https://www.jianshu.com/p/32fa221e03b7
            final Authentication authentication = authenticationManager.authenticate(
                    //UsernamePasswordAuthenticationToken的超父类是Authentication
                    new UsernamePasswordAuthenticationToken(
                            userForm.getUserName(),
                            PasswordEncoder.encode(userForm.getPassword(), employee.getEmployeeBirthday().getTime())
                    )
            );
            //验证通过则把用户权限信息封装到spring全局缓存SecurityContextHolder中
            SecurityContextHolder.getContext().setAuthentication(authentication);
            //getPrincipal()返回的其实是一个UserDetails的实例,UserDetails是Spring Security中一个核心的接口。其中定义了一些可以获取用户名、密码、权限等与认证相关的信息的方法
            //认证通过后会将该UserDetails赋给认证通过的Authentication的principal
            final SecurityUserDetails userDetails = (SecurityUserDetails) authentication.getPrincipal();
    
            String token = JwtTokenUtil.generateToken(userDetails);
            response.addHeader(header, token);
            userDetails.setToken(token);
            //opsForValue()操作字符串
            redisTemplate.opsForValue().set("auth" + employee.getEmployeePhone(), userDetails, 60L, java.util.concurrent.TimeUnit.MINUTES);
            com.likemoney.log.LogManager.me().executeLog(LogTaskFactory.loginLog(userDetails.getId(), getIp()));
            return new ResponseBean(200, "Login success");
        }
    
    }
    
    

    在这里返回的是一个JSON类对象,里面存JSON数据。贴上代码。

    package com.likemoney.model;
    /**
     * @author jgh
     * @date 2018/8/20
     */
    public class ResponseBean {
    
        // http 状态码
        private int code;
    
        // 返回信息
        private String msg;
    
        // 返回的数据
        private Object data;
    
        public ResponseBean(int code, String msg, Object data) {
            this.code = code;
            this.msg = msg;
            this.data = data;
        }
    
        public ResponseBean(int code, String msg) {
            this.code = code;
            this.msg = msg;
        }
    
        public int getCode() {
            return code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public Object getData() {
            return data;
        }
    
        public void setData(Object data) {
            this.data = data;
        }
    }
    
    

    在这里插入图片描述
    随便输个账号密码测试,接收到后端传过来的json数据,测试成功,实现了参数传递功能。

    好了,目前就只做到登录前后端分离了,后面可能会更新其他模块的博客(可能)。有什么问题欢迎大家在评论区互相交流!必答!

    展开全文
  • 1.导读 这篇文章主要是讲了目前很火的springboot和vue实现前后端分离的web开发模式,主要是探究前后端分离的一种框架模式开发。属于基本入门篇,其中springboot实现了和spr...

    1.导读

    这篇文章主要是讲了目前很火的springboot和vue实现前后端分离的web开发模式,主要是探究前后端分离的一种框架模式开发。属于基本入门篇,其中springboot实现了和spring data JPA的整合实现后端数据交互,其中也会探讨相关框架的整合和相似框架的对比,对于想了解和走进前后端分离的伙伴来说是一个非常值得学习的前后端入门教程。

    2.前后端分离。

    对于前后端分离来说,对于大部分web开发来说都是利大于弊,相对而言,业务逻辑复杂的项目或者项目庞大的适合前后端分离,一般项目较小或者修改变动较小的项目可以考虑前后端不分离。不过现在的硬件空间便宜的环境下,笔者还是非常建议前后端分离的。

    好处:

    1)前后端解耦,各自职责明确,分工合理,开发效率较高。

    2)减轻服务器压力,各自配置,各自运作,更容易维护。

    3)项目模块化更明显,业务逻辑更加清晰,不至于等到项目规模过大的时候无法维护或者更新项目。

    4)方便单元测试以及bug调试,互不相干,前后端的人技术职责分开,减少前后端的人打架的概率,技术成本更少...

    不好的地方:

    1)搭建项目成本相对高一些,因为需要前后端项目同时运作。

    2)对于项目的初步设计需要有很好的文档说明,大家都按照一定的约定来开发,这就考验项目技术经理的能力了。

    不好的地方:

    3.实现

    首先搭建一个基本的springboot的项目,建好基本的目录结构。如下图:

    这个就是基本的springboot的目录,

    1)首先dao层是数据持久层,很多道友也比较喜欢叫它mapper层,起作用是操作sql语句实现和数据库的数据交互。

    2)其次是service层,起作用是接收dao层的方法并且封装成适合业务逻辑的一条条服务,目的是提供给controller层调用,其中为了屏蔽掉太过复杂的业务逻辑,我们设置service层为接口,同目录下建立一个对应的实现Impl层。

    3)再次是entity层,这个好理解,就是数据实体类,java是一门面向对象的语言,所以我们面向数据库也是实体封装好的,也就意味着我们不需要太多的去关心数据库属性的细节,只需要关心实体类就行了。

    4)最后是controller层,这个就是控制service的每一条服务应该流向哪里去的控制器,分发器。

    随着上面的顺序,首先解决dao层,怎样和数据库交互,老的方式我们就不说了,这里是整合spring data JPA。详情请看:https://blog.csdn.net/zhuzhezhuzhe1/article/details/80561449

    基本上来说spring data JPA就是想实现后端数据持久层天下归一,让我们更少的去配置和编写相关的sql。重要的是srping data JPA实现了大部分的sql功能的函数,还可以执行自己写的sql语句和自定义方法。比如:

    这样呢我们就可以在controller层直接调用该方法,如下service层:

    controller层:

    我们返回的是一个Map,也就是数据,通常里面有很多各种类型的数据,叫接口数据。前后端分离后端只负责数据,不负责页面逻辑。所以接下来问题就是前端如何获取这些数据,我们的目的也是我只提供接口文档的数据,其他的前端的我不关心。

    上面的接口通过http://localhost:8080/zh就可以访问到,postmen里面测试如下:

     

    至此,后端算是完了。

    前端我们搭建一个简单的vue项目,项目结构如下:

    一般利用vue都是采用axios来访问后端数据,故我们在App.vue里简单的写一个测试程序:

    
     
    1. <template>
    2. <div class="info">
    3. 这是从本地后端项目获取的json数据:
    4. <button v-on:click="postInfo">Greet </button>
    5. <br>
    6. {{this.info}}
    7. </div>
    8. </template>
    9. <script>
    10. export default {
    11. name: 'App',
    12. data() {
    13. return {
    14. info: {}
    15. }
    16. },
    17. methods: {
    18. postInfo: function () {
    19. this.$axios.get( 'http://localhost:8089/zh')
    20. .then( response => ( this.info = response))
    21. .catch( function (error) { // 请求失败处理
    22. console.log(error);
    23. });
    24. }
    25. }
    26. }
    27. </script>
    28. <style>
    29. .info{
    30. width: 100%;
    31. height: 100%;
    32. }
    33. </style>

    当然,这是失败的,因为跨域请求是会被阻止的,也就是说在本机上两个不同的项目访问也是跨域。解决办法就是我们在后端加一个配置类CorsConfig:

    里面写上:

    
     
    1. package com.example.demo3.controller;
    2. import org.springframework.web.servlet.config.annotation.CorsRegistry;
    3. import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    4. public class CorsConfig extends WebMvcConfigurationSupport {
    5. @Override
    6. protected void addCorsMappings(CorsRegistry registry) {
    7. System.out.println("----------------------");
    8. registry.addMapping("/**")
    9. .allowedOrigins("*")
    10. .allowCredentials(true)
    11. .allowedMethods("GET", "POST", "DELETE", "PUT")
    12. .maxAge(3600);
    13. }
    14. }

    这里就是后端允许跨域访问:

    前端vue简单的设置一下访问代理路径:

    在config下的index.js里的dev下的proxyTable写上访问的后端接口路径:

    
     
    1. proxyTable: {
    2. // proxy all requests starting with /api to jsonplaceholder
    3. '/api': {//虚拟目录
    4. target: 'http://localhost:8089',//后台NodeSpringboot项目的请求网址
    5. changeOrigin: true,
    6. pathRewrite: {
    7. '^/api': ''//由于上面的虚拟目录实际上是不存在的,不去掉的话访问的时候显示的url会变成'http://localhost:3000/api',所以得去掉
    8. }
    9. }

    后面的访问路径改成/api/zh就能实现跨域访问了,注意这里的localhost换成了"/api":

    
     
    1. methods: {
    2. postInfo: function () {
    3. this.$axios.get('/api/zh')
    4. .then(response => (this.info = response))
    5. .catch(function (error) { // 请求失败处理
    6. console.log(error);
    7. });
    8. }
    9. }

    最后的vue项目访问的结果为:

    这样就实现了springboot后端,vue前端的前后端分离模式。也就是后端springboot负责数据传递,前端利用ajax或者vue的axios进行异步数据访问,并且在前端进行数据渲染。本文相关技术没有详细的介绍,主要是提供一种前后端分离的开发模式,相关技术同志可以自行学习。

    一剪寒梅,傲立雪中,愿此生不负期望。

    展开全文
  • Vue.js + Spring Boot 前后端分离项目实践(一):项目简介 Vue.js + Spring Boot 前后端分离项目实践(二):搭建 Vue.js 项目 Vue.js + Spring Boot 前后端分离项目实践(三):前后端结合测试(登录页面开发) ...
  • Springboot+Vue前后端分离实现用户登录Token权限验证以及登录Token状态保存
  • Spring Boot+Vue前后端分离开发 标签 : Java Vue Sring JPA ELementUI 作者 : Maxchen 版本 : V1.0.0 日期 : 2020/2/24 前后端分离的概念 前后端分离顾名思义将前端代码和后端代码分开写,为什么我们要前后端...
  • (前后端分离)SpringBoot+Vue实现视频播放

    万次阅读 热门讨论 2020-02-25 14:22:49
    跳坑日志 SpringBoot+vue的项目中,实现前端播放视频 SpringBoot 定义GET请求ApI,返回视频流,前端通过 话不多说,走起 一、新建如下类,用于返回视频流 ...import org.springframework.core.io....
  • springBoot+vue初始化前后端分离项目搭建(含数据库) 适合初学习 包含如何跨域 axios 比较简单清晰 https://www.cnblogs.com/mike-mei/p/13597036.html
  • 最近很多小伙伴都在学习前后端分离的知识,苦于找不到好的基础资料,于是我翻箱倒柜,找了一份好的Vue入门视频和笔记pdf,然后更是亲自录制了SpringBoot + Vue的前后端分离的综...
  • SpringBoot+Vue开发简单的前后端分离系统
  • 发送请求2.后端接收请求3.ExcelUtil工具类4....   文件导出功能是一种常态,大多数网站开发来说都会有各种形式的导出功能,以往使用ssm前后端不开的框架直接向后端发送一个请求,然后后端直接使用文件流的形式就可
  • SpringBoot + Vue 开发前后端分离的旅游管理系统

    千次阅读 多人点赞 2020-06-26 00:24:05
    前后端分离:axios、json 前端技术栈、技术架构:Vue、node.js 要求: 了解 Vue 组件之前的知识 对 springboot + mybatis 较熟悉 开发流程: 需求分析 库表设计 编码(项目环境搭建+编码) 项目调试 项目部署...
  • Vue+多模块SpringBoot前后端分离项目部署服务器环境常用 Linux 命令后端部署SpringBoot 打 jar 包SpringBoot 进程在 linux 后台启动前端部署Vue生成 dist 文件夹nginx 安装与配置完成部署欢迎使用Markdown编辑器新的...
  • SpringBoot+Vue前后端分离项目实战:个人博客系统

    千次阅读 多人点赞 2021-03-08 19:59:44
    基于 SpringBoot + Vue 前后端分离开发的一款动态个人博客系统。 项目开源地址:Github | Gitee 前言 学习Java也有一段时间,期间更多的是理论的学习和一些Demo代码编写,知识还比较分散、浅薄,所以我做了这么一个...
  • springboot+Vue整合前后端分离权限后台管理系统 拥有八年的Jav...
  • springboot-data-jpa+vue实现前后端分离增删改分页查询 废话不多说直接上代码 一.后台 1.实体类(pojo) package com.wentao.springbootvue.pojo; import lombok.Data; import javax.persistence.*; /** * @...
  • 医院预约就诊系统 前后端分离,技术栈:springboot+mybatis-plus+vue
  • springboot+mybatis+vue前后端分离实现用户登陆注册功能效果图:环境介绍核心代码介绍 效果图: 登陆页 注册页 登陆成功页: 环境介绍 jdk:1.8以及上 前端:vue 后端:springboot+mybatis 数据库:mysql5.6 如果...
  •  Vue 前端 首页 用户列表 搜索 添加 批量删除 {{scope.$index+1}} 编辑 删除 男 女 取消 保存 分页组件 Pagination.vue /** * 分页组件 */ 因为是前后端分离。就一定会出现跨域问题,需要在后端配置 下 @...
  • 1、问题描述 1、环境配置   IDEA   Spring Boot 2.2.2.RELEASE   @Vue/cle 4.5.11   “element-ui”: “^2.13.0” 2、问题描述   运行Vue代码时,会报出下面的错误:   经过检查,后端返回数据正确,且...
  • 作者:@nele ...介绍常规的开发方式MVVMSPA(Single Page Application)Spring Boot + Vue 使前后端分离Show Code后端搭建vue项目搭建在spring boot 引入静态文件 介绍 最近在工作中做个新项目,后端...

空空如也

空空如也

1 2 3 4 5 6
收藏数 117
精华内容 46
关键字:

springbootvue前后端分离

vue 订阅
spring 订阅