首先我们需要配置好我们的本地环境
本项目需要用到的环境:jdk1.8、apache-maven3.5.4、mysql8.0(最好下载一个navigat for mysql:方便管理数据库)
开发工具:IntelliJ IDEA 2020.3.4 x64
后台系统前端技术栈:vue.js、jquery、layui
用到的js插件:captcha.js
后端开发用到的框架/工具包:spring boot、mybatis、lombok、redis、themlef…
1、jdk环境变量配置
第二步:初始化项目
在pom文件中添加以下依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-validation</artifactId>
</dependency>
<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>2.2.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.26</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
<version>2.4.5</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2</version>
</dependency>
第三步:配置application.properties文件
我自己习惯改成 .yml文件,根据个人喜好修改即可
添加以下内容:
spring:
web:
resources:
#配置静态资源路径
static-locations: classpath:templates/,classpath:static/
datasource:
#数据库用户名
username: root
#数据库密码
password: ***
#mysql驱动
driver-class-name: com.mysql.cj.jdbc.Driver
#数据库地址
url: jdbc:mysql://localhost:3306/futureshomall?useUnicode=true&characterEncoding=utf-8&relaxAutoCommit=true&zeroDateTimeBehavior=convertToNull&allowMultiQueries=true
mvc:
#访问静态资源是可以不用加static
static-path-pattern: /**
server:
port: 8080
servlet:
#项目域名后面跟的名字,可以随便起
context-path: /future
address: 127.0.0.1
第四步:配置跨域请求
在项目中新建文件夹:config/
在config目录下新建配置文件:WebMvcConfig
@Configuration
public class WebMvcConfig implements WebMvcConfigurer{
@Override
public void addCorsMappings(CorsRegistry registry) {
WebMvcConfigurer.super.addCorsMappings(registry);
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowCredentials(true)
.maxAge(3600)
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE");
}
}
第五步:新建消息返回工具类
public class Result {
private String code;
private String message;
private boolean success;
private Object pojo;
private List<Object> objList;
private PageInfo pageInfo;
public Result(String code, String message, boolean success, PageInfo pageInfo) {
this.code = code;
this.message = message;
this.success = success;
this.pageInfo = pageInfo;
}
public Result(String code, String message, boolean success, List<Object> objList) {
this.code = code;
this.message = message;
this.success = success;
this.objList = objList;
}
public Result(String code, String message, boolean success) {
this.code = code;
this.message = message;
this.success = success;
}
public Result(String code, String message, boolean success, Object pojo) {
this.code = code;
this.message = message;
this.success = success;
this.pojo = pojo;
}
public boolean isSuccess() {
return success;
}
public PageInfo getPageInfo() {
return pageInfo;
}
public void setPageInfo(PageInfo pageInfo) {
this.pageInfo = pageInfo;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public boolean getSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public Object getPojo() {
return pojo;
}
public void setPojo(Object pojo) {
this.pojo = pojo;
}
public List<Object> getObjList() {
return objList;
}
public void setObjList(List<Object> objList) {
this.objList = objList;
}
}
如上为消息返回类
再建一个类用于实现返回消息的实例化不同场景
public class RespUtil {
/**
*三种成功返回
* @param code
* @param message
* @param success
* @param pojo
* @return
*/
public Result JOK(String code,String message,boolean success,Object pojo){
return new Result(code,message,success,pojo);
}
public Result LOK(String code, String message, boolean success, List objList){
return new Result(code,message,success,objList);
}
public Result MOK(String code, String message, boolean success){
return new Result(code,message,success);
}
public Result POK(String code, String message, boolean success, PageInfo pageInfo){
return new Result(code,message,success,pageInfo);
}
}
第六步:完成后台登录操作
先来看一下效果把:
登录演示
下一章我们继续说登录的实现。