搭建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更改，信息如下

<?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:#监控统计拦截的filtersfilters: statdriver-class-name: com.mysql.jdbc.Driver#基本属性url: jdbc:mysql://127.0.0.1:3306/zksdb?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=trueusername: rootpassword: 123456#配置初始化大小/最小/最大initial-size: 1min-idle: 1max-active: 20#获取连接等待超时时间max-wait: 60000#间隔多久进行一次检测，检测需要关闭的空闲连接time-between-eviction-runs-millis: 60000#一个连接在池中最小生存的时间min-evictable-idle-time-millis: 300000validation-query: SELECT 'x'test-while-idle: truetest-on-borrow: falsetest-on-return: false#打开PSCache，并指定每个连接上PSCache的大小。oracle设为true，mysql设为false。分库分表较多推荐设置为falsepool-prepared-statements: falsemax-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: mysqlreasonable: truesupportMethodsArguments: trueparams: count=countSqlreturnPageInfo: 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 generatorConfigurationPUBLIC "-//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

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

搭建spring-boot+vue前后端分离框架并实现登录功能相关推荐

Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...
phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
Spring Boot + Vue前后端分离（一）前端Vue环境搭建
你好,[程序职场]专注于:Spring Boot ,微服务和前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索副业赚钱渠道,在提升技术的同时我们一起交流敏捷流程提高工作效率 ...
Spring Boot + Vue 前后端分离
前后端分离 Spring Booot + Vue 开发单页面应用前言需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网 ...
Spring Boot + Vue 前后端分离开发，权限管理的一点思路
在传统的前后端不分的开发中,权限管理主要通过过滤器或者拦截器来进行(权限管理框架本身也是通过过滤器来实现功能),如果用户不具备某一个角色或者某一个权限,则无法访问某一个页面. 但是在前后端分离中,页面 ...
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
Spring Boot + Vue前后端分离项目，Maven自动打包整合
前言现在各类项目为了降低项目.服务模块间的高度耦合性,提出了"前后端分离",而前后端分离的项目该如何打包呢? 一般的做法是前端项目打包完,将打包文件手动复制到后端项目工程的src ...
开源~~~~spring boot +vue 前后端分离在线考试系统加自动组卷！！！！
在线考试系统+自动组卷!!! springboot +vue 前后端分离系统想要源码的可以B站搜索技术小余哥
Spring Boot + Vue 前后端分离，两种文件上传方式总结
在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传通过 ElementUI 里边的 U ...

搭建spring-boot+vue前后端分离框架并实现登录功能

搭建spring-boot+vue前后端分离框架并实现登录功能相关推荐

最新文章

热门文章