搭建spring-boot+vue前后端分离框架并实现登录功能
一、环境、工具
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更改,信息如下
[code]<?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文件,信息如下
[code]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、更改项目启动类
[code]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
信息如下:
[code]<?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.js实现前后端分离的文件上传功能
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- 完整使用SSM框架(Spring SpringMVC Mybatis)搭建web服务器实现登录功能
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- 基于CAS的单点登录SSO[5]: 基于Springboot实现CAS客户端的前后端分离
- 基于springboot+vue+element+ueditor实现前后端分离的富文本框实现
- Spring学习之SpringMVC框架快速搭建实现用户登录功能
- Spring boot 集成 Kaptcha 实现前后端分离验证码功能
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- 菜鸟使用SSM框架搭建web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- 在Spring Boot框架下使用WebSocket实现聊天功能
- 从壹开始前后端分离【 .NET Core2.0 Api + Vue 2.0 + AOP + 分布式】框架之六 || API项目整体搭建 6.1 仓储
- SpringBoot + SpringSecurity 短信验证码登录功能实现
- 在Spring Boot框架下使用WebSocket实现聊天功能