我的第一个项目
一、新建一个maven项目
-
1.配置所要的依赖
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.cainfly,jp</groupId> <artifactId>cainfly</artifactId> <version>0.0.1-SNAPSHOT</version> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <spring-boot.version>2.3.7.RELEASE</spring-boot.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger-ui</artifactId> <version>2.9.2</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.2</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.15</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>${spring-boot.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <source>1.8</source> <target>1.8</target> <encoding>UTF-8</encoding> </configuration> </plugin> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>2.3.7.RELEASE</version> <configuration> <mainClass>com.cainfly.jp.ApplicationCainFly</mainClass> </configuration> <executions> <execution> <id>repackage</id> <goals> <goal>repackage</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project>
-
2.在Java目录下设置服务端所要的包和启动器类(需要注意的是:启动器类和这些包必须在同一级下)
-
3.在resources目录下配置客户端和连接数据库和端口的条件
-
application.properties 连接数据库和端口
-
webapp 配置客户端
-
mapper 存放映射层的xml文件
#端口 server.port=8090 #加载驱动(如果MySQL超过8.0需要加上cj) spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/jp?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/shanghai #连接数据库名字 spring.datasource.username=root #连接数据库的密码 spring.datasource.password=root # 配置前端资源文件存放的目录名称/webapp必须在resources资源目录中/默认是在static目录下 spring.resources.static-locations=classpath:/webapp
-
二、编写数据库文件
-- 创建数据库并设置字符
create database if not exists jp charset utf8;
-- 使用数据库
use jp;
-- 创建用户user表
create table user(
id int not null primary key auto_increment comment '用户id',
name varchar(64) not null comment '用户姓名',
password varchar(64) not null comment '用户密码',
address varchar(32) comment '用户地址',
phone varchar(128) comment '用户手机号'
);
-- 插入数据
insert into user values(1,'张三','123456','江苏省','18793326389'),(2,'李四','123456','甘肃省','17793388024');
三、利用mvc三层架构编写服务端
-
1.首先编写bean层,建立User.java
package com.cainfly.jp.bean; import lombok.Data; @Data //使用@Data注解可以自动生成get和set 以及tostring方法 public class User { //使用驼峰命名规则 private Integer id; private String name; private String password; private String address; private String phone; }
-
2.编写映射层连接到数据库
package com.cainfly.jp.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.cainfly.jp.bean.User; import org.apache.ibatis.annotations.Param; import org.springframework.stereotype.Repository; import java.util.List; //取消服务层mapper对象爆红 @Repository public interface UserMapper extends BaseMapper { //登录验证用户和密码 String selectFindNP(User user); User selectFindName(User user); //注册用户和密码 int insetUP(User user); }
2.mapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.cainfly.jp.mapper.UserMapper"> <insert id="insetUP"> insert into user(id,name,password) values(null,#{name},#{password}); </insert> <select id="selectFindNP" resultType="java.lang.String"> select name,password from user where name=#{name} and password=#{password}; </select> <select id="selectFindName" resultType="com.cainfly.jp.bean.User"> select name from user where name=#{name}; </select> </mapper>
-
3.编写service层
-
接口类UserService
package com.cainfly.jp.service; import com.cainfly.jp.bean.User; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public interface UserService { String login(User user, HttpServletRequest request, HttpServletResponse response); String register(User user, HttpServletRequest request, HttpServletResponse response); }
-
-
-
UserServiceImpl
package com.cainfly.jp.service; import com.cainfly.jp.bean.User; import com.cainfly.jp.mapper.UserMapper; import org.apache.commons.codec.digest.DigestUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.List; @Service public class UserServiceImpl implements UserService { //导入映射mapper @Autowired private UserMapper userMapper; //登录用户 @Override public String login(User user, HttpServletRequest request, HttpServletResponse response) { //获取信息 user.setName(request.getParameter("name")); //对密码进行加密 user.setPassword(DigestUtils.md5Hex(request.getParameter("password"))); //单字段查找出来,根据查找出来的字段类型设置 String s = userMapper.selectFindNP(user); if(s!=null){ return "success"; } return "error"; } //注册用户 @Override public String register(User user, HttpServletRequest request, HttpServletResponse response) { //判断是否存在该用户 //将前端输入的用户现存到User中在和数据库中的比较 user.setName(request.getParameter("name")); User users = userMapper.selectFindName(user); if(users!=null) { return "error"; }else{ user.setName(request.getParameter("name"));//获取注册的用户账号,存放到数据库 user.setPassword(DigestUtils.md5Hex(request.getParameter("password")));//获取注册的用户密码,存放到数据库 //定义插入的类型 //如果直接返回会插入但会出错 // 多字段插入/找到一行数据,定义为ing型方便理解(如果大于0存在,反之不存在) int np=userMapper.insetUP(user); if(np>0){ return "success"; //response.sendRedirect("/login.html"); } return "error"; } } }
-
-
4.编写controller层
-
UserController
package com.cainfly.jp.controller; import com.cainfly.jp.bean.User; import com.cainfly.jp.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @RestController @RequestMapping public class UserController { @Autowired private UserService userService; @PostMapping("/login") public String login(User user, HttpServletRequest request, HttpServletResponse response){ return userService.login(user,request,response); } @PostMapping("/register") public String register(User user, HttpServletRequest request, HttpServletResponse response){ return userService.register(user, request, response); } }
-
-
5.编写客户端
-
login.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>登录页面 - CainFly后台管理系统模板</title> <link rel="icon" href="favicon.ico" type="image/ico"> <meta name="keywords" content="CainFly后台管理系统,光年HTML模板"> <meta name="description" content="CainFly是一个基于后台管理系统的HTML模板。"> <meta name="author" content="yinqi"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/materialdesignicons.min.css" rel="stylesheet"> <link href="css/style.min.css" rel="stylesheet"> <style> .lyear-wrapper { position: relative; } .lyear-login { display: flex !important; min-height: 100vh; align-items: center !important; justify-content: center !important; } .lyear-login:after{ content: ''; min-height: inherit; font-size: 0; } .login-center { background-color: rgba(255,255,255,.075); min-width: 29.25rem; padding: 2.14286em 3.57143em; border-radius: 3px; margin: 2.85714em; } .login-header { margin-bottom: 1.5rem !important; } .login-center .has-feedback.feedback-left .form-control { padding-left: 38px; padding-right: 12px; background-color: rgba(255,255,255,.075); border-color: rgba(255,255,255,.075) } .login-center .has-feedback.feedback-left .form-control-feedback { left: 0; right: auto; width: 38px; height: 38px; line-height: 38px; z-index: 4; color: #dcdcdc; } .login-center .has-feedback.feedback-left.row .form-control-feedback { left: 15px; } .login-center .form-control::-webkit-input-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .form-control:-moz-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .form-control::-moz-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .form-control:-ms-input-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .custom-control-label::before { background: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.1); } .login-center .lyear-checkbox span::before { border-color: rgba(255,255,255,.075) } .log{ background-color: #3b4552; font-size: 25px; font-family: 新宋体; font-weight: bold; color: darkblue; text-align: center; height: 30px; line-height: 30px; } </style> </head> <body> <div class="row lyear-wrapper" style="background-image: url(images/login-bg-2.jpg); background-size: cover;"> <div class="lyear-login"> <div class="login-center"> <form action="#"> <div class="form-group has-feedback feedback-left"> <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span> <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" /> <label class="control-label"></label> </div> <div class="form-group has-feedback feedback-left"> <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span> <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" /> <label class="control-label"></label> </div> <div> <div class="form-group col-lg-6"> <button class="btn btn-block btn-primary" type="button" id="login-btn">登录</button> </div> <div class="form-group col-lg-6"> <button onclick="window.open('register.html')" class="btn btn-block btn-primary" type="button" href="register.html" id="resign-btn">注册</button> </div> </div> </form> </div> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-notify.min.js"></script> <script type="text/javascript"> /* 1. 获取元素dom对象 */ var usernameInput=$("#username"); var passwordInput=$("#password"); var loginBtn=$("#login-btn"); /* 2. 注册元素dom事件 */ usernameInput.blur(validUsername); // 用户输入框失去焦点事件 passwordInput.blur(validPassword); // 密码输入框失去焦点事件 /* 3. 声明函数 */ function validUsername() { var username=usernameInput.val(); if(!username){ usernameInput.next().text("用户名不能为空"); usernameInput.parent().addClass("has-error"); usernameInput.parent().removeClass("has-success"); return false; }else{ usernameInput.next().text(""); usernameInput.parent().addClass("has-success"); usernameInput.parent().removeClass("has-error"); return true; } } function validPassword() { var password = passwordInput.val(); if(!password&&password.length<6){ passwordInput.next().text("密码格式有误或长度小于六位"); passwordInput.parent().addClass("has-error"); passwordInput.parent().removeClass("has-success"); return false; }else{ passwordInput.next().text(""); passwordInput.parent().addClass("has-success"); passwordInput.parent().removeClass("has-error"); return true; } } loginBtn.click(function () { var name=$("#username").val(); var password=$("#password").val(); $.ajax({ type : "POST", url : "http://localhost:8090/login", data : { name:name, password:password }, dataType : "text", success : function(data) { if(data.status=="error"){ alert("账号或密码错误!") }else{ location.href="index.html"; } } }); }); </script> </body> </html>
-
register.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>注册页面 </title> <link rel="icon" href="favicon.ico" type="image/ico"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/materialdesignicons.min.css" rel="stylesheet"> <link href="css/style.min.css" rel="stylesheet"> <style> .lyear-wrapper { position: relative; } .lyear-login { display: flex !important; min-height: 100vh; align-items: center !important; justify-content: center !important; } .lyear-login:after{ content: ''; min-height: inherit; font-size: 0; } .login-center { background-color: rgba(255,255,255,.075); min-width: 29.25rem; padding: 2.14286em 3.57143em; border-radius: 3px; margin: 2.85714em; } .login-header { margin-bottom: 1.5rem !important; } .login-center .has-feedback.feedback-left .form-control { padding-left: 38px; padding-right: 12px; background-color: rgba(255,255,255,.075); border-color: rgba(255,255,255,.075) } .login-center .has-feedback.feedback-left .form-control-feedback { left: 0; right: auto; width: 38px; height: 38px; line-height: 38px; z-index: 4; color: #dcdcdc; } .login-center .has-feedback.feedback-left.row .form-control-feedback { left: 15px; } .login-center .form-control::-webkit-input-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .form-control:-moz-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .form-control::-moz-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .form-control:-ms-input-placeholder{ color: rgba(255, 255, 255, .8); } .login-center .custom-control-label::before { background: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.1); } .login-center .lyear-checkbox span::before { border-color: rgba(255,255,255,.075) } .log{ background-color: #3b4552; font-size: 25px; font-family: 新宋体; font-weight: bold; color: darkblue; text-align: center; height: 30px; line-height: 30px; } </style> </head> <body> <div class="row lyear-wrapper" style="background-image: url(images/login-bg-2.jpg); background-size: cover;"> <div class="lyear-login"> <div class="login-center"> <form action="#"> <div class="form-group has-feedback feedback-left"> <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span> <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" /> <label class="control-label"></label> </div> <div class="form-group has-feedback feedback-left"> <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span> <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" /> <label class="control-label"></label> </div> <div class="form-group has-feedback feedback-left"> <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span> <input type="password" placeholder="请确认密码" class="form-control" id="password2" name="password" /> <label class="control-label"></label> </div> <div> <div class="form-group"> <button class="btn btn-block btn-primary" type="button" id="resign-btn">注册</button> </div> </div> </form> </div> </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-notify.min.js"></script> <script type="text/javascript"> /* 1. 获取元素dom对象 */ var usernameInput=$("#username"); var passwordInput=$("#password"); var password2Input=$("#password2"); var registerBtn=$("#resign-btn"); /* 2. 注册元素dom事件 */ usernameInput.blur(validUsername); // 用户输入框失去焦点事件 passwordInput.blur(validPassword); // 密码输入框失去焦点事件 password2Input.blur(validPassword2); /* 3. 声明函数 */ function validUsername() { var username=usernameInput.val(); if(!username){ usernameInput.next().text("用户名不能为空"); usernameInput.parent().addClass("has-error"); usernameInput.parent().removeClass("has-success"); return false; }else{ usernameInput.next().text(""); usernameInput.parent().addClass("has-success"); usernameInput.parent().removeClass("has-error"); return true; } } function validPassword() { var password = passwordInput.val(); if(!password&&password.length<6){ passwordInput.next().text("密码格式有误或长度小于六位"); passwordInput.parent().addClass("has-error"); passwordInput.parent().removeClass("has-success"); return false; }else{ passwordInput.next().text(""); passwordInput.parent().addClass("has-success"); passwordInput.parent().removeClass("has-error"); return true; } } function validPassword2() { var password = passwordInput.val(); var password2 = password2Input.val(); if(password!=password2){ password2Input.next().text("密码不一致,重新输入"); password2Input.parent().addClass("has-error"); password2Input.parent().removeClass("has-success"); return false; }else{ password2Input.next().text(""); password2Input.parent().addClass("has-success"); password2Input.parent().removeClass("has-error"); return true; } } registerBtn.click(function () { var usernameInput=$("#username"); var passwordInput=$("#password"); $.ajax({ url:'http://localhost:8090/register', type:"POST", async:false, data:{ name:usernameInput.val(), password:passwordInput.val() }, dataType:'text', success:function (data) { console.log(data); if(data.status=="error"){ alert("用户已经存在!另起他名!!"); }else{ alert("注册成功,请登录"); location.href="login.html"; } } }); }); </script> </body> </html>
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>登录成功</h1> </body> </html>
-
四、总结
-
每个人的编写风格不同,如果过程中虽然后端的响应传到了浏览器,但你的Ajax接收不到,可能的原因就是你的dataType写成了json格式,改成text即可
-
项目已上传到gitee,有需要的自行下载https://gitee.com/cainfly-ff/cainfly-first-mall.git
-
有什么问题可以指出我们一起共同学习
五、演示