者：foreknow

鏈接：https://www.jianshu.com/p/871e70b3ad7c

一個(gè)完整的極簡后臺(tái)框架，方便做小項(xiàng)目的時(shí)候可以快速開發(fā)。

這里面多貼圖片和代碼，做個(gè)參考吧，代碼可以下載下來自己看看，里面這套后臺(tái)模板不錯(cuò)，喜歡的拿去。

先放幾張圖

image

image

image

項(xiàng)目介紹

SpringBoot，實(shí)現(xiàn)了一個(gè)極簡單的后臺(tái)框架

image

項(xiàng)目配置

maven配置pox.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.moxi</groupId>
 <artifactId>moxi</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <packaging>jar</packaging>
 <name>moxi</name>
 <description>mox</description>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>1.5.2.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.springframework.boot</groupId>
 <artifactId>spring-boot-starter-test</artifactId>
 <scope>test</scope>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-devtools</artifactId>
 </dependency>
 <!-- mybatis -->
 <dependency>
 <groupId>org.mybatis.spring.boot</groupId>
 <artifactId>mybatis-spring-boot-starter</artifactId>
 <version>1.2.0</version>
 </dependency>
 <!-- mysql -->
 <dependency>
 <groupId>mysql</groupId>
 <artifactId>mysql-connector-java</artifactId>
 <scope>runtime</scope>
 </dependency>
 <!--thymeleaf -->
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <!--commons-io -->
 <dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.4</version>
 </dependency>
 </dependencies>
 <build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>
</project>

項(xiàng)目配置文件application.properties

#DataBase start

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/moxi?useUnicode=true&characterEncoding=UTF-8

spring.datasource.username=root

spring.datasource.password=Shu1shu2

spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#DataBase end

#thymeleaf start

spring.thymeleaf.mode=HTML5

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

#開發(fā)時(shí)關(guān)閉緩存,不然沒法看到實(shí)時(shí)頁面

spring.thymeleaf.cache=false

#thymeleaf end

#uploadFileSize start

spring.http.multipart.maxFileSize=10Mb

spring.http.multipart.maxRequestSize=100Mb

#uploadFileSize end

項(xiàng)目分層

Controller層，追求極簡，分頁自己進(jìn)行了一個(gè)簡單封裝

package com.moxi.controller;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import javax.servlet.http.HttpSession;
import org.apache.commons.io.FileUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.moxi.model.NewsCategory;
import com.moxi.service.NewsCategoryService;
import com.moxi.util.PageUtil;
@Controller
@RequestMapping("/admin")
public class NewsController {
 @Autowired
 private NewsCategoryService newsCategoryService;
 @RequestMapping("/newsManage_{pageCurrent}_{pageSize}_{pageCount}")
 public String newsManage(@PathVariable Integer pageCurrent,@PathVariable Integer pageSize,@PathVariable Integer pageCount, Model model) {
 return "/news/newsManage";
 }
 /**
 * 文章分類列表
 * @param newsCategory
 * @param pageCurrent
 * @param pageSize
 * @param pageCount
 * @param model
 * @return
 */
 @RequestMapping("/newsCategoryManage_{pageCurrent}_{pageSize}_{pageCount}")
 public String newsCategoryManage(NewsCategory newsCategory,@PathVariable Integer pageCurrent,@PathVariable Integer pageSize,@PathVariable Integer pageCount, Model model) {
 //判斷
 if(pageSize==0) pageSize=10;
 if(pageCurrent==0) pageCurrent=1;
 int rows=newsCategoryService.count(newsCategory);
 if(pageCount==0) pageCount=rows%pageSize==0 ? (rows/pageSize) : (rows/pageSize) + 1;
 //查詢
 newsCategory.setStart((pageCurrent - 1)*pageSize);
 newsCategory.setEnd(pageSize);
 List<NewsCategory> list=newsCategoryService.list(newsCategory);
 //輸出
 model.addAttribute("list", list);
 String pageHTML=PageUtil.getPageContent("newsCategoryManage_{pageCurrent}_{pageSize}_{pageCount}?name="+newsCategory.getName(), pageCurrent, pageSize, pageCount);
 model.addAttribute("pageHTML",pageHTML);
 model.addAttribute("newsCategory",newsCategory);
 return "/news/newsCategoryManage";
 }
 /**
 * 文章分類新增、修改跳轉(zhuǎn)
 * @param model
 * @param newsCategory
 * @return
 */
 @GetMapping("newsCategoryEdit")
 public String newsCategoryEditGet(Model model,NewsCategory newsCategory) {
 if(newsCategory.getId()!=0){
 NewsCategory newsCategoryT=newsCategoryService.findById(newsCategory);
 model.addAttribute("newsCategory",newsCategoryT);
 }
 return "/news/newsCategoryEdit";
 }
 /**
 * 文章分類新增、修改提交
 * @param model
 * @param newsCategory
 * @param imageFile
 * @param httpSession
 * @return
 */
 @PostMapping("newsCategoryEdit")
 public String newsCategoryEditPost(Model model,NewsCategory newsCategory, @RequestParam MultipartFile[] imageFile,HttpSession httpSession) {
 for (MultipartFile file : imageFile) {
 if (file.isEmpty()) {
 System.out.println("文件未上傳");
 } else {
 SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
 Date date=new java.util.Date();
 String strDate=sdf.format(date);
 String fileName=strDate + file.getOriginalFilename().substring(
 file.getOriginalFilename().indexOf("."),
 file.getOriginalFilename().length());
 String realPath=httpSession.getServletContext().getRealPath("/userfiles");
 System.out.println("realPath : "+realPath);
 try {
 FileUtils.copyInputStreamToFile(file.getInputStream(),new File(realPath, fileName));
 newsCategory.setImage("/userfiles/"+fileName);
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
 }
 if(newsCategory.getId()!=0){
 newsCategoryService.update(newsCategory);
 } else {
 newsCategoryService.insert(newsCategory);
 }
 return "redirect:newsCategoryManage_0_0_0";
 }
}

Model層（pure類）

package com.moxi.model;

import java.sql.Date;

public class NewsCategory extends BaseObject {

private long id;

private String name;

private String description;

private String image;

private Date addDate;

private int state;

public long getId() {

return id;

}

public void setId(long id) {

this.id=id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name=name;

}

public String getDescription() {

return description;

}

public void setDescription(String description) {

this.description=description;

}

public String getImage() {

return image;

}

public void setImage(String image) {

this.image=image;

}

public Date getAddDate() {

return addDate;

}

public void setAddDate(Date addDate) {

this.addDate=addDate;

}

public int getState() {

return state;

}

public void setState(int state) {

this.state=state;

}

}

Service層，一切追求極簡，所以這里Mybatis用得是注解，我覺得注解也挺好用的。

package com.moxi.service;
import java.util.List;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import com.moxi.model.NewsCategory;
@Mapper
public interface NewsCategoryService {
 @Select("SELECT * FROM `moxi`.`news_category` where id=#{id};")
 NewsCategory findById(NewsCategory newsCategory);
 @Select({
 "<script>",
 "SELECT * FROM `moxi`.`news_category`",
 "WHERE state=0",
 "<when test='name!=null'>",
 "AND name LIKE CONCAT('%',#{name},'%')",
 "</when>",
 "order by addDate desc limit #{start},#{end}",
 "</script>"
 })
 List<NewsCategory> list(NewsCategory newsCategory);
 @Select({
 "<script>",
 "SELECT count(*) FROM `moxi`.`news_category`",
 "WHERE state=0",
 "<when test='name!=null'>",
 "AND name LIKE CONCAT('%',#{name},'%')",
 "</when>",
 "</script>"
 })
 int count(NewsCategory newsCategory);
 @Insert("INSERT INTO `moxi`.`news_category` (`id`, `name`, `description`, `image`, `addDate`, `state`) VALUES (null, #{name}, #{description}, #{image}, now(), 0);")
 int insert(NewsCategory newsCategory);
 @Update("UPDATE `moxi`.`news_category`SET `name`=#{name}, `description`=#{description}, `image`=#{image}, `state`=#{state} WHERE `id`=#{id};")
 int update(NewsCategory newsCategory);
}

View層，使用的thymeleaf的標(biāo)簽，挺好用的，本來打算全站用ajax，不過開發(fā)效率稍微慢了些。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MOXI</title>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
<link th:href="@{/css/style.css}" rel="stylesheet" />
<link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/footable/footable.core.css}" rel="stylesheet"/>
</head>
<body>
 <div id="wrapper">
 <nav class="navbar-default navbar-static-side" role="navigation" th:include="nav :: navigation"></nav>
 <div id="page-wrapper" class="gray-bg">
 <div class="border-bottom" th:include="header :: headerTop"></div>
 <div class="row wrapper border-bottom white-bg page-heading" th:fragment="headerNav">
 <div class="col-lg-10">
 <h2>文章分類</h2>
 <ol class="breadcrumb">
 <li>
 <a href="#">首頁</a>
 </li>
 <li>
 <a>內(nèi)容管理</a>
 </li>
 <li class="active">
 <strong>文章分類</strong>
 </li>
 </ol>
 </div>
 <div class="col-lg-2">
 </div>
 </div>
 <div class="wrapper wrapper-content animated fadeInRight">
 <div class="row">
 <div class="col-lg-12">
 <div class="ibox float-e-margins">
 <div class="ibox-title">
 <h5>搜索</h5>
 <div class="ibox-tools">
 <a class="collapse-link">
 <i class="fa fa-chevron-up"></i>
 </a>
 </div>
 </div>
 <div class="ibox-content" style="display: block;">
 <form action="newsCategoryManage_0_0_0">
 <div class="row">
 <div class="col-sm-3 m-b-xs">
 <input name="name" value="" th:value="${newsCategory.name}" placeholder="分類名稱" class="form-control" type="text"/>
 </div>
 <div class="col-sm-1 m-b-xs">
 <button id="submitButton" class="btn btn-primary btn-block" type="submit"><i class="fa fa-search"></i> <strong>搜索</strong></button>
 </div>
 </div>
 </form>
 <div class="row">
 <div class="col-sm-6 m-b-xs">
 <a th:href="@{newsCategoryEdit}" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="" data-original-title="Refresh inbox"><i class="fa fa-plus"></i> 新增分類 </a>
 </div>
 <div class="col-sm-6 m-b-xs"></div>
 </div>
 </div>
 </div>
 </div>
 <div class="col-lg-12">
 <div class="ibox float-e-margins">
 <div class="ibox-title">
 <h5>文章列表</h5>
 <div class="ibox-tools">
 <a class="collapse-link">
 <i class="fa fa-chevron-up"></i>
 </a>
 </div>
 </div>
 <div class="ibox-content">
 <div class="table-responsive">
 <table class=" table table-hover" data-page-size="10">
 <thead>
 <tr>
 <th width="5%">ID</th>
 <th width="30%">名稱 </th>
 <th width="40%">描述 </th>
 <th width="10%">添加時(shí)間</th>
 <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr th:each="nc : ${list}">
 <td th:text="${nc.id}">Onions</td>
 <td th:text="${nc.name}">Onions</td>
 <td th:text="${nc.description}">Onions</td>
 <td th:text="${nc.addDate}">Onions</td>
 <td>
 <a th:href="@{'newsCategoryEdit?id='+${nc.id}}" title="修改"><i class="fa fa-edit text-navy"></i></a>
 <a th:href="@{'newsCategoryEdit?id='+${nc.id}}" title="修改"><i class="fa fa-trash-o text-navy"></i></a>
 </td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="7">
 <ul id="pageHTML" class="pagination pull-right"></ul>
 </td>
 </tr>
 </tfoot>
 </table>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="footer" th:include="footer :: copyright"></div>
 </div>
 </div>
 <!-- Mainly scripts -->
 <script th:src="@{/js/jquery-2.1.1.js}"></script>
 <script th:src="@{/js/bootstrap.min.js}"></script>
 <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
 <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
 <!-- Peity -->
 <script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>
 <!-- Custom and plugin javascript -->
 <script th:src="@{/js/inspinia.js}"></script>
 <script th:src="@{/js/plugins/pace/pace.min.js}"></script>
 <!-- iCheck -->
 <script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>
 <!-- Peity -->
 <script th:src="@{/js/demo/peity-demo.js}"></script>
 <!-- FooTable -->
 <script th:src="@{/js/plugins/footable/footable.all.min.js}"></script>
 <!-- common -->
 <script th:src="@{/js/common.js}"></script>
 <script th:inline="javascript">
 var pageHTML=[[${pageHTML}]];
 $(document).ready(function () {
 $("#pageHTML").html(pageHTML);
 });
 </script>
</body>
</html>

分頁封裝，一切為了極簡，做了個(gè)util類

package com.moxi.util;

public class PageUtil {

public static String getPageContent(String url,int pageCurrent,int pageSize,int pageCount){

if (pageCount==0) {

return "";

}

String urlNew=url.replace("{pageSize}", pageSize+"").replace("{pageCount}", pageCount+"");

String first=urlNew.replace("{pageCurrent}", 1+"");

String prev=urlNew.replace("{pageCurrent}", (pageCurrent - 1)+"");

String next=urlNew.replace("{pageCurrent}", (pageCurrent + 1)+"");

String last=urlNew.replace("{pageCurrent}", pageCount+"");

StringBuffer html=new StringBuffer();

html.append("<li class=\"footable-page-arrow"+(pageCurrent<=1?" disabled":"")+"\"><a href=\""+(pageCurrent<=1?"#":first)+"\">?</a></li>");

html.append("<li class=\"footable-page-arrow"+(pageCurrent<=1?" disabled":"")+"\"><a href=\""+(pageCurrent<=1?"#":prev)+"\">?</a></li>");

for(int i=0 ;i < pageCount; i++){

String urlItem=urlNew.replace("{pageCurrent}", (i+1)+"");

html.append("<li class=\"footable-page"+(((i+1)==pageCurrent)?" active":"")+"\"><a href=\""+urlItem+"\">"+(i+1)+"</a></li>");

}

html.append("<li class=\"footable-page-arrow"+(pageCurrent==pageCount?" disabled":"")+"\"><a href=\""+(pageCurrent==pageCount?"#":next)+"\">?</a></li>");

html.append("<li class=\"footable-page-arrow"+(pageCurrent==pageCount?" disabled":"")+"\"><a href=\""+(pageCurrent==pageCount?"#":last)+"\">?</a></li>");

return html.toString().replaceAll("null", "");

}

}

就這些，足夠簡單。包含登錄、列表、分頁、新增、修改、上傳文件等……接下來會(huì)不斷進(jìn)行完善。

sql語句放到項(xiàng)目里面了。