##序
本系列的写作风格是第一人称，目的是为了让教程看起来更有意思一点，叶小凡是我某本JS书籍的主人公名字。以下经历纯属虚构，如有雷同，纯属巧合！
##01 兔哥，收我为徒吧
我叫叶小凡，即将毕业，正愁找工作。之前在网上关注了一位博主，网名叫剽悍一小兔，感觉文章写的还可以，后来关注了他的公众号，学会了基本的环境配置。可是，也就仅此而已了，我只会HelloWorld。
这一天，我微信上问他，你为啥叫剽悍一小兔啊？
“没多想，我挺喜欢兔子的，应该很好吃，脑袋一热，就取了这个名字！”
“兔哥，我刚毕业，想学Java，能不能收我为徒啊？”
“是么，你可要想好，跟我修行可是很辛苦的！”
“我已经想好了，我虽然只会HelloWorld，但是我愿意学。”
“这样，你先用SpringBoot帮我做一个系统出来，我打算做一个教育网站，正好要用，你什么时候给我做出来，我就什么时候收你为徒！”
我一听就惊呆了，连忙说道：“可是我只会HelloWorld啊…”
“没事，我可以指导你怎么写，放心，只会HelloWorld也没有关系，你一定可以的！”
“我明白了，兔哥，你是打算把修行的内容平摊到每一天中，让我在做网站的时候，就学到了编程的技术，对吗？”
“不是，我只是单纯地不想自己写而已！”
“。。。。。。额，最后一个问题，为什么你每说完一句话，都要加个感叹号啊？”
“！”
##02 先建表吧
根据兔哥的说法，他要做一个能发布教程的系统，教程，不就是文章嘛。emmm…
我先建一个文章表肯定没错的，SpringBoot啥的待会再说吧。
兔哥：“你先别着急建文章表，要不你先把我关于springboot的入门教程看了，其实你用spring data jpa的话，可以直接写JavaBean，顺便把表建了，很方便。”
路径：打开公众号
点击经典博客，在这里：
“我靠，你从哪冒出来的，吓死宝宝了！”我吃了一惊，然后就去看了一下教程，感觉其实也挺简单的嘛。
##03 搭建SpringBoot项目
ok，说干就干，先把系统给建起来。兔哥的文章里面讲的是在线生成springboot项目，我偏不，我就自己建。
当然，我已经通过看这里的文章，把环境都搭建好了，maven也配置好了。
接下来就是撸起袖子加油干，打开eclipse，创建一个maven项目。
点击Finish完成。
现在，修改一下pom文件：
4.0.0
com.tuzi
edu
0.0.1-SNAPSHOT
兔子编程
某个很水的在线教育平台
org.springframework.boot
spring-boot-starter-parent
1.5.9.RELEASE
org.springframework.boot
spring-boot-starter-web
junit
junit
3.8.1
test
javax.servlet
javax.servlet-api
javax.servlet
jstl
org.apache.tomcat.embed
tomcat-embed-jasper
org.springframework.boot
spring-boot-devtools
true
org.springframework.boot
spring-boot-starter-data-jpa
mysql
mysql-connector-java
5.1.21
org.springframework.boot
spring-boot-starter-test
test
1.8
org.springframework.boot
spring-boot-maven-plugin
1.4.2.RELEASE
${basedir}/src/main/webapp
meta-INF/resources
****
基本的配置都有了，保存了以后maven会去自动下载对应的jar包的，不用我操心啦。
然后，这边建一个简单的目录结构：
配置文件就用yml吧，兔哥的教程里面也是yml的，然后这边我加了点mvc的配置，因为视图层我只会jsp：
server:
port: 8080
context-path: /edu
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/edu?characterEncoding=UTF-8
username: root
password:
jpa:
database: mysql
hibernate:
ddl-auto: update
show-sql: true
resources:
static-locations: classpath:static/
mvc:
view:
prefix: /WEB-INF/jsp/
suffix: .jsp
先写一个User类：
package com.edu.entity;
import javax.persistence.*;
@Entity
public class User {
@Id
@Column(length = 20)
private String userName;
@Column(length = 20)
private String password;
@Column(length = 30)
private String nickName;
@Column(length = 80)
private String headerPic;
@Column(length = 1)
private String isVip;
@Column(length = 1)
private String isLogined;
@Column(length = 2)
private String roleId;
@Column(length = 1)
private String isDelete;
@Column(length = 8)
private String createTime;
@Column(length = 8)
private String lastLoginTime;
@Column(length = 64)
private String ipAddr;
//无参构造方法，这个必须要有，不然会报错
public User() {
}
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 String getNickName() {
return nickName;
}
public void setNickName(String nickName) {
this.nickName = nickName;
}
public String getHeaderPic() {
return headerPic;
}
public void setHeaderPic(String headerPic) {
this.headerPic = headerPic;
}
public String getIsVip() {
return isVip;
}
public void setIsVip(String isVip) {
this.isVip = isVip;
}
public String getRoleId() {
return roleId;
}
public void setRoleId(String roleId) {
this.roleId = roleId;
}
public String getIsDelete() {
return isDelete;
}
public void setIsDelete(String isDelete) {
this.isDelete = isDelete;
}
public String getCreateTime() {
return createTime;
}
public void setCreateTime(String createTime) {
this.createTime = createTime;
}
public String getIsLogined() {
return isLogined;
}
public void setIsLogined(String isLogined) {
this.isLogined = isLogined;
}
public String getLastLoginTime() {
return lastLoginTime;
}
public void setLastLoginTime(String lastLoginTime) {
this.lastLoginTime = lastLoginTime;
}
public String getIpAddr() {
return ipAddr;
}
public void setIpAddr(String ipAddr) {
this.ipAddr = ipAddr;
}
}
这个User类主要是用来做用户的登录的，嗯，反正他自己一个人用，我就做登录功能，不注册了。
然后，用mysql-front工具去新建一个叫做edu的数据库。
这是启动类：
package com.edu;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
接下来就是见证奇迹的时刻，运行启动类：
没报错欸！看下数据库：
来了来了，真的来了，好高兴哦，又吃成长快乐了！
##03 访问登录页面吧
既然是个系统，肯定得有一个登录页面撒，可是我html和css写的很一般，美工又不会做，就只能网上找一找现成的登录模板，才可以维持得了生活，这样子。
兔哥：“别去乱搜了，我们得加快进度啊，我已经给你找好了，直接用这一套吧！”
“我靠，你能不能别总是一下子就跑出来吓人好不啦！”我又吃了一惊。
于是，兔哥给我发了一个资料包，我根据他的要求把一系列文件放在了对应的地方。
这是公共的jsp和登录页面——login.jsp。
taglib.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
//获取当前项目路径
String path = request.getContextPath();
int port = request.getServerPort();
String basePath = null;
if(port==80){
basePath = request.getScheme()+"://"+request.getServerName()+path;
}else{
basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
}
pageContext.setAttribute("basePath", basePath);
%>
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="common/taglib.jsp"%>
document
#canvas {
position: fixed;
top: 0;
z-index: -100;
opacity:0.6;
}
.box{
display: flex;
justify-content: center;
margin-top: 50px;
perspective: 500px;
transform-style: preserve-3d;
animation: fadeInUp 0.5s;
}
.font {
float: left;
width: 100px;
height: 100px;
background: #fff;
color: #16142B;
border: 1px solid #16142B;
font-family: consolas;
font-weight: bold;
font-size: 50px;
text-align: center;
line-height: 100px;
transition: 0.8s;
box-shadow: 0 5px 10px black, inset 0 5px 2px #777, inset 0 -5px 2px #333, inset 5px 0px 2px #444, inset -5px 0px 2px #444;
border-radius: 20px;
}
#mainContent {position:absolute;left:50%;margin-left:-220px;margin-top:20px;}
.box2 {position:relative;top:24px;color:#222;}
input {
display: inline-block;
width: 100%;
height: 28px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
#message {color:red;}
小
兔
教
育
兔哥说是网上随便找的，看起来挺牛掰的，咱也不敢问，等以后学到前端知识的时候再说吧。
然后是static这里放静态资源：
因为在application.yml里面已经配置静态资源了，所以这样就能直接访问static文件夹里面的东西了。
resources:
static-locations: classpath:static/
接下来是java的部分
ViewController就是视图访问控制器，看下代码：
package com.edu.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ViewController {
@RequestMapping("/view/{page}")
public String view(@PathVariable(name = "page") String page) {
return page;
}
}
意思就是页面访问这个映射地址，直接返回 WEB-INF/jsp里面对应的文件。
启动项目，然后我们访问
http://localhost:8080/edu/view/login
看到了登录页面：
