一、建立目录
我使用过的是idea的编辑器
首先新建一个spring项目-》选择spring initializr -》next
填写pom的信息
选择组件,我选择的是jpa和thymeleaf,web要选择web核心组件
选择目录和填写项目名称-》finish
二、项目搭建
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.lili</groupId>
<artifactId>news</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>news</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.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-cache</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
目录结构
application.properties
############################################
## MySQL数据库连接
############################################
spring.datasource.url = jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf8&useSSL=false
spring.datasource.username = root
spring.datasource.password = 123456
spring.datasource.driverClassName = com.mysql.jdbc.Driver
############################################
## 配置自动建表:updata:没有表新建,有表更新操作,控制台显示建表语句
############################################
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
#thymelea模板配置
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
#热部署文件,页面不产生缓存,及时更新
spring.thymeleaf.cache=false
spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**
#热部署生效
spring.devtools.restart.enabled: true
#设置重启的目录
#spring.devtools.restart.additional-paths: src/main/java
#classpath目录下的WEB-INF文件夹内容修改不重启
spring.devtools.restart.exclude: WEB-INF/**
登陆控制器
package com.lili.news.controller;
import com.lili.news.entity.User;
import com.lili.news.result.CommonResult;
import com.lili.news.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@Controller
//@RestController
public class Login {
@Autowired
private UserService usi;
/*
* 登陆页面
*
* */
@RequestMapping("/login")
public String login(Map<String,Object> map){
map.put("test","123456");
map.put("userinfo" ,new User("lili","123456",22));
List<User> list = new ArrayList<>();
for (int i=0 ; i<=5; i++){
User u = new User("lili","123456",(22+i) );
list.add(u);
}
map.put("userlist",list);
return "login/login";
}
@RequestMapping("/dologin")
@ResponseBody
public Object dologin(User user){
System.out.printf(user.toString());
CommonResult cr = usi.checkUser(user.getUsername(),user.getPassword());
return cr;
}
}
dao层jpa接口
package com.lili.news.dao;
import com.lili.news.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;
public interface UserRepository extends JpaRepository<User,Long> {
/**
* 查询用户名为username,密码为password的用户
* @param username
* @param password
* @return
*/
List<User> findUserByUsernameAndPassword(String username , String password );
}
实体类user
package com.lili.news.entity;
import javax.persistence.*;
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
@Column(length = 100)
private String username;
@Column(length = 255)
private String password;
@Column(length = 10)
private Integer age;
public User(String username, String password, Integer age) {
this.username = username;
this.password = password;
this.age = age;
}
public User(){
}
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", age=" + age +
'}';
}
}
result类返回json使用
package com.lili.news.result;
public class CommonResult {
private Integer code;
private String msg;
private Object jsonObj;
public CommonResult(Integer code, String msg, Object jsonObj) {
this.code = code;
this.msg = msg;
this.jsonObj = jsonObj;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getJsonObj() {
return jsonObj;
}
public void setJsonObj(Object jsonObj) {
this.jsonObj = jsonObj;
}
}
service服务层接口
package com.lili.news.service;
import com.lili.news.entity.User;
import com.lili.news.result.CommonResult;
public interface UserService {
/*
* 通过id获得user数据
* @param int id 主键
* @return User user对象
* */
User getUser(Integer id);
/*
* 检查登陆的账户信息是否匹配,用户名和密码是否存在、正误
* @param string username 用户名
* @param string password 密码
* @return bool 正确返回true 否则返回false
* */
CommonResult checkUser(String username, String password);
}
serviceimpl实现类
package com.lili.news.service.serviceImpl;
import com.lili.news.dao.UserRepository;
import com.lili.news.entity.User;
import com.lili.news.result.CommonResult;
import com.lili.news.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
private final UserRepository ur ;
@Autowired
UserServiceImpl(UserRepository ur){
this.ur = ur;
}
@Override
public User getUser(Integer id) {
return null;
}
@Override
public CommonResult checkUser(String username, String password) {
List<User> users = this.ur.findUserByUsernameAndPassword(username,password);
if(users.isEmpty()){
return new CommonResult(101,"没有这个用户或者用户名字错误",null);
}else {
return new CommonResult(100,"登陆成功",users);
}
}
}
视图的目录在resource下面的
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Fullscreen Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" th:href="@{/login/assets/css/reset.css}">
<link rel="stylesheet" th:href="@{/login/assets/css/supersized.css}">
<link rel="stylesheet" th:href="@{/login/assets/css/style.css}">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="page-container">
<h1>Login</h1>
<span th:text="'用户名:' +${userinfo.username}">aaa</span>
<form action="#" th:action="@{/dologin}" th:object="${userinfo}" method="post">
<input type="text" name="username" class="username" th:value="*{username}">
<input type="password" name="password" class="password" th:value="*{password}">
<span th:text="'用户名:' +*{username}">aaa</span>
<span th:text="'密码:' +*{password}">aaa</span>
<button type="submit">登陆</button>
</form>
</div>
<!-- Javascript -->
<script th:src="@{/login/assets/js/jquery-1.8.2.min.js}"></script>
<script th:src="@{/login/assets/js/supersized.3.2.7.min.js}"></script>
<script th:src="@{/login/assets/js/supersized-init.js}"></script>
<script th:src="@{/login/assets/js/scripts.js}"></script>
</body>
</html>
thymeleaf的语法链接使用@,普通的变量使用${},或者*{}
静态资源如图所示默认在resource下面的static里面
三、运行
现在在login控制器加一个控制方法,作为跳转页面使用
@RequestMapping("/weblogin")
public String weblogin(Map<String,Object> map, User user){
System.out.printf(user.toString());
CommonResult cr = usi.checkUser(user.getUsername(),user.getPassword());
if (cr.getCode() == 100 ){
//登陆成功
map.put("userinfo",user);
return "main/main";
}else {
return "redirect:login/login";
}
}
我也加了一个main页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">layui 后台布局</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
<span th:text="${userinfo.username}"></span>
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
© layui.com - 底部固定区域
</div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>