guyuehuanhuan

 

https://blog.csdn.net/daleiwang/article/details/75007588

 

Spring Boot(5)一个极简且完整的后台框架

一个完整的极简后台框架,方便做小项目的时候可以快速开发。 
这里面多贴图片和代码,做个参考吧,代码可以下载下来自己看看,里面这套后台模板不错,喜欢的拿去。

先放几张图

后台登录页面

后台主页面

列表页

项目介绍

SpringBoot,我也是第一次用,实现了一个极简单的后台框架,希望有不太合理的地方大家给个建议。 
基础架构

项目结构

项目配置

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83

项目配置文件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
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end

#uploadFileSize start
spring.http.multipart.maxFileSize=10Mb
spring.http.multipart.maxRequestSize=100Mb
#uploadFileSize end
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

项目分层

Controller层,追求极简,分页自己进行了一个简单封装

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";
    }

    /**
     * 文章分类新增、修改跳转
     * @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";
    }


}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125

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;
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

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);

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

View层,使用的thymeleaf的标签,挺好用的,本来打算全站用ajax,不过开发效率稍微慢了些。

<!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>内容管理</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>
                                

分类:

技术点:

相关文章:

  • 2021-07-29
  • 2022-01-26
  • 2021-07-10
  • 2021-05-17
  • 2021-11-28
  • 2021-05-03
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-01-09
  • 2021-11-23
  • 2021-12-06
  • 2021-10-17
  • 2022-01-13
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案