Spring Boot CMS 开发实践

释放双眼,带上耳机,听听看~!

前言

在实际工作中入手,如何快速的开发一个后台管理系统呢?技术选型是啥?作为 Java 程序员,Spring Boot 使用者可以一起交流下这块如何整合?如何搭建?如何使用?

我们这篇 Chat 的中心是把实战经验给大家分享一下。主要是实际操作,完成整体认识。先介绍下技术选型:

具体开发步骤如下:

  • 配置依赖
  • 整合 Layui
  • 整合 Mybatis
  • 编写案例代码
  • 实现 OSS 文件上传

配置依赖

不懂创建 Spring Boot ,没有入门的看这个 《Spring Boot 2.0 的快速入门(图文教程)》http://gitbook.cn/gitchat/activity/5a4c47bf31d9b852d33dec90。恩,还有这个《Spring Boot 2.0 的配置详解(图文教程)》http://gitbook.cn/gitchat/activity/5a69a12f0b172b546f92f26c

打开一个基本的 pom.xml 配置,增加依赖配置如下:

  1.  <dependencies>
  2.    <!-- Spring Boot Web 依赖 -->
  3.    <dependency>
  4.      <groupId>org.springframework.boot</groupId>
  5.      <artifactId>spring-boot-starter-web</artifactId>
  6.    </dependency>
  7.    <!-- Spring Boot Test 依赖 -->
  8.    <dependency>
  9.      <groupId>org.springframework.boot</groupId>
  10.      <artifactId>spring-boot-starter-test</artifactId>
  11.      <scope>test</scope>
  12.    </dependency>
  13.    <!-- Spring Boot Mybatis 依赖 -->
  14.    <dependency>
  15.      <groupId>org.mybatis.spring.boot</groupId>
  16.      <artifactId>mybatis-spring-boot-starter</artifactId>
  17.      <version>1.3.1</version>
  18.    </dependency>
  19.    <!-- MyBatis 分页 -->
  20.    <dependency>
  21.      <groupId>com.github.pagehelper</groupId>
  22.      <artifactId>pagehelper-spring-boot-starter</artifactId>
  23.      <version>1.2.3</version>
  24.    </dependency>
  25.    <!-- MySQL 连接驱动依赖 -->
  26.    <dependency>
  27.      <groupId>mysql</groupId>
  28.      <artifactId>mysql-connector-java</artifactId>
  29.      <version>5.1.39</version>
  30.    </dependency>
  31.    <dependency>
  32.      <groupId>org.springframework.boot</groupId>
  33.      <artifactId>spring-boot-starter-thymeleaf</artifactId>
  34.    </dependency>
  35.    <!-- Lombok 插件 -->
  36.    <dependency>
  37.      <groupId>org.projectlombok</groupId>
  38.      <artifactId>lombok</artifactId>
  39.    </dependency>
  40.    <!-- FastJson 插件 -->
  41.    <dependency>
  42.      <groupId>com.alibaba</groupId>
  43.      <artifactId>fastjson</artifactId>
  44.      <version>1.2.7</version>
  45.    </dependency>
  46.    <!-- OSS 文件 -->
  47.    <dependency>
  48.      <groupId>com.aliyun.oss</groupId>
  49.      <artifactId>aliyun-sdk-oss</artifactId>
  50.      <version>2.8.3</version>
  51.    </dependency>
  52.    <!-- Junit -->
  53.    <dependency>
  54.      <groupId>junit</groupId>
  55.      <artifactId>junit</artifactId>
  56.      <version>4.12</version>
  57.    </dependency>
  58.  </dependencies>
  59.  <build>
  60.    <plugins>
  61.      <plugin>
  62.        <groupId>org.springframework.boot</groupId>
  63.        <artifactId>spring-boot-maven-plugin</artifactId>
  64.      </plugin>
  65.      <plugin>
  66.        <groupId>org.mybatis.generator</groupId>
  67.        <artifactId>mybatis-generator-maven-plugin</artifactId>
  68.        <version>1.3.5</version>
  69.        <dependencies>
  70.          <dependency>
  71.            <groupId>log4j</groupId>
  72.            <artifactId>log4j</artifactId>
  73.            <version>1.2.17</version>
  74.          </dependency>
  75.          <dependency>
  76.            <groupId>org.mybatis</groupId>
  77.            <artifactId>mybatis</artifactId>
  78.            <version>3.2.6</version>
  79.          </dependency>
  80.          <dependency>
  81.            <groupId>mysql</groupId>
  82.            <artifactId>mysql-connector-java</artifactId>
  83.            <version>5.1.39</version>
  84.          </dependency>
  85.        </dependencies>
  86.      </plugin>
  87.    </plugins>
  88.  </build>

配置如下:

  • spring-boot-starter-web 是用来编写 web 项目
  • mybatis-spring-boot-starter Mybatis 依赖和 pagehelper-spring-boot-starter Mybatis 分页依赖,可以快速的实现数据的 ORM 操作
  • spring-boot-starter-thymeleaf 前端模板引擎
  • Lombok 插件、FastJson 插件 、OSS 文件 SDK 就不详细介绍了

在 resources 增加 generatorConfig.xml 文件,配置参考:http://www.mybatis.org/generator/running/runningWithMaven.html

mybatis-generator-maven-plugin 可以利用 Maven 插件快速生产 ORM 需要的实体类和操作接口。如图:

整合 Layui

在 static 目录新增如下目录,并添加对应的 js。如图:

对应的 js 下载地址如下:

  • jquery 我就不说了,自己找
  • layui http://www.layui.com/
  • treegrid http://fly.layui.com/jie/11172/

还有待会要写的 userDeliveryList.js ,待会再说。最后需要添加一些公共的 HTML ,引用这些 JS 依赖。在 templates 目录添加如下文件,如图:

head.html 就是顶部和左侧菜单的封装,因为本次后台的实现是基于 fragment 的。所以菜单的定义需要在这里实现。

footer.html 代码如下:

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  3. <body>
  4. <footer th:fragment="footer">
  5.  <div class="layui-footer">
  6.    <!-- 底部固定区域 -->
  7.    <a href="http://gitbook.cn/">Copyright © gitbook.cn 2018</a>
  8.  </div>
  9. </footer>
  10. </body>
  11. </html>

userDeliveryList.html 是案例代码,后面会讲到

整合 Mybatis

整合 Mybatis 需要新建一个库表: demo,然后新增表 user_delivery 用户收获地址:

  1. CREATE TABLE `user_delivery` (
  2.  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '收货地址id',
  3.  `user_id` int(11) DEFAULT NULL COMMENT '用户id',
  4.  `contact` varchar(255) DEFAULT '' COMMENT '收货人姓名',
  5.  `tel` varchar(255) DEFAULT '' COMMENT '收货人电话',
  6.  `id_card_num` varchar(100) NOT NULL DEFAULT '' COMMENT '身份证号',
  7.  `province` varchar(255) DEFAULT '' COMMENT '收货地址:省',
  8.  `city` varchar(255) DEFAULT '' COMMENT '收货地址:城市',
  9.  `county` varchar(255) DEFAULT '' COMMENT '收货地址:县/区',
  10.  `address` varchar(255) DEFAULT '' COMMENT '收货地址 详细地址',
  11.  `default_status` tinyint(4) DEFAULT '0' COMMENT '默认收货地址标志 0 否 1 是',
  12.  `status` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '是否标记删除 0:否 1:是',
  13.  `create_time` datetime NOT NULL COMMENT '创建时间',
  14.  `update_time` datetime NOT NULL COMMENT '更新时间',
  15.  PRIMARY KEY (`id`)
  16. ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='用户收货地址表'

在 application.properties 配置如下:

  1. ## 静态资源
  2. spring.mvc.static-path-pattern=/**
  3. spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/
  4. ## 数据源配置
  5. spring.datasource.url=jdbc:mysql:// 数据库地址
  6. spring.datasource.username=数据库登录名
  7. spring.datasource.password=数据库登录密码
  8. spring.datasource.driver-class-name=com.mysql.jdbc.Driver
  9. ## MyBatis 配置
  10. mybatis.typeAliasesPackage=xxxxx 包名
  11. mybatis.mapperLocations=classpath:mapper/*.xml
  12. pagehelper.helperDialect=mysql
  13. pagehelper.reasonable=true

然后利用 mybatis-generator-maven-plugin 插件在对应的包目录,生成如下。

resouces/mapper 目录生成了 UserDeliveryMapper.xml

对应的 包换下。然后对应的包下会生成 三个类,UserDelivery 对象、 UserDeliveryExample 查询对象和 UserDeliveryMapper 操作接口类。

编写案例代码

自动的工作带来很大的便捷,下面实现这个 CRUD 分页。实现非常简单,三步走:

  • 编写 userDeliveryList.html 对应的页面
  • 编写 userDeliveryList.js 对应的 JS
  • 编写 UserDeliveryController 和 UserDeliveryService 控制层和逻辑层

编写 userDeliveryList.html 对应的页面。

这里实现了 搜索 和 列表、并隐藏了一个 id 为 editUserDelivery 的 DIV 用于弹框显示编辑页面。

编写 userDeliveryList.js 对应的 JS。

利用 layui.table 实现了带搜索的分页,监听栏实现编辑表单和删除。代码分块清晰简单。最后看看 java 逻辑的实现。

编写 UserDeliveryController 和 UserDeliveryService 控制层和逻辑层,代码如下:

  1. public class BaseController {
  2.    public static final String SUCCESS = "200";
  3.    public static final String ERROR = "操作出错,请您稍后再试";
  4.    public static final Integer SUCCESS_CODE = 200;
  5.    public static final Integer ERROR_CODE = 500;
  6. }
  7. @Controller
  8. @RequestMapping("/userDelivery")
  9. public class UserDeliveryController extends BaseController {
  10.    @Autowired
  11.    private UserDeliveryService userDeliveryService;
  12.    @GetMapping(value = "/list")
  13.    public ModelAndView listView() {
  14.        ModelAndView mav = new ModelAndView("user/userDeliveryList");
  15.        return mav;
  16.    }
  17.    @GetMapping(value = "/page")
  18.    @ResponseBody
  19.    public PageInfo<UserDelivery> page(
  20.            @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum,
  21.            @RequestParam(value = "pageSize", defaultValue = "15") Integer pageSize,
  22.            UserDelivery userDeliverySearch) {
  23.        PageInfo<UserDelivery> pageInfo = new PageInfo<UserDelivery>();
  24.        try {
  25.            pageInfo = userDeliveryService.page(pageNum, pageSize, userDeliverySearch);
  26.            pageInfo.setPages(SUCCESS_CODE);
  27.            return pageInfo;
  28.        } catch (Exception e) {
  29.            e.printStackTrace();
  30.        }
  31.        pageInfo.setPages(ERROR_CODE);
  32.        return pageInfo;
  33.    }
  34.    @GetMapping(value = "/get")
  35.    @ResponseBody
  36.    public UserDelivery get(@RequestParam("id") Integer id) {
  37.        try {
  38.            UserDelivery userDelivery = userDeliveryService.getById(id);
  39.            return userDelivery;
  40.        } catch (Exception e) {
  41.        }
  42.        return new UserDelivery();
  43.    }
  44.    @PostMapping(value = "/edit")
  45.    @ResponseBody
  46.    public String edit(UserDelivery userDelivery) {
  47.        try {
  48.            userDeliveryService.edit(userDelivery);
  49.            return SUCCESS;
  50.        } catch (Exception e) {
  51.            e.printStackTrace();
  52.        }
  53.        return ERROR;
  54.    }
  55.    @RequestMapping(value = "/delete", method = RequestMethod.POST)
  56.    @ResponseBody
  57.    public String delete(@RequestParam("id") Integer id) {
  58.        try {
  59.            userDeliveryService.delete(id);
  60.            return SUCCESS;
  61.        } catch (Exception e) {
  62.            e.printStackTrace();
  63.        }
  64.        return ERROR;
  65.    }
  66. }

/list 是页面入口

/page 实现了搜索分页查询

/get 、 /edit 、 /delete 顾名思义

逻辑层代码如下:

  1. @Service
  2. public class UserDeliveryService {
  3.    @Autowired
  4.    private UserDeliveryMapper userDeliveryMapper;
  5.    public PageInfo<UserDelivery> page(Integer pageNum, Integer pageSize, UserDelivery userDeliverySearch) {
  6.        UserDeliveryExample userDeliveryExample = new UserDeliveryExample();
  7.        userDeliveryExample.setOrderByClause("id DESC");
  8.        UserDeliveryExample.Criteria criteria = userDeliveryExample.createCriteria();
  9.        if (!StringUtils.isEmpty(userDeliverySearch.getContact())) {
  10.            criteria.andContactLike("%" + userDeliverySearch.getContact() + "%");
  11.        }
  12.        criteria.andStatusEqualTo((byte) 0);
  13.        //  第几页, 多少条数据
  14.        PageHelper.startPage(pageNum, pageSize);
  15.        List<UserDelivery> userDeliveryList = userDeliveryMapper.selectByExample(userDeliveryExample);
  16.        PageInfo pageInfo = new PageInfo(userDeliveryList);
  17.        return pageInfo;
  18.    }
  19.    public UserDelivery getById(Integer id) {
  20.        return userDeliveryMapper.selectByPrimaryKey(id);
  21.    }
  22.    public void edit(UserDelivery userDelivery) {
  23.        // 保存或更新
  24.        if (userDelivery.getId().equals(0)) {
  25.            userDelivery.setStatus((byte) 0);
  26.            userDelivery.setCreateTime(new Date());
  27.            userDelivery.setUpdateTime(new Date());
  28.            userDeliveryMapper.insertSelective(userDelivery);
  29.        } else {
  30.            userDeliveryMapper.updateByPrimaryKeySelective(userDelivery);
  31.        }
  32.    }
  33.    public void delete(Integer id) {
  34.        userDeliveryMapper.deleteByPrimaryKey(id);
  35.    }
  36. }

运行工程方式很简单,使用 IDEA 右侧工具栏,点击 Maven Project Tab ,点击使用下 Maven 插件的 install 命令。或者使用命令行的形式,在工程根目录下,执行 Maven 清理和安装工程的指令:

  1. cd xxx 工程目录
  2. mvn clean install

在控制台中看到成功的输出:

  1. ... 省略
  2. [INFO] ------------------------------------------------------------------------
  3. [INFO] BUILD SUCCESS
  4. [INFO] ------------------------------------------------------------------------
  5. [INFO] Total time: 01:30 min
  6. [INFO] Finished at: 2017-10-15T10:00:54+08:00
  7. [INFO] Final Memory: 31M/174M
  8. [INFO] ------------------------------------------------------------------------

运行工程

在 IDEA 中执行 Application 类启动,任意正常模式或者 Debug 模式。可以在控制台看到成功运行的输出:

  1. ... 省略
  2. 2018-04-10 08:43:39.932  INFO 2052 --- [ctor-http-nio-1] r.ipc.netty.tcp.BlockingNettyContext     : Started HttpServer on /0:0:0:0:0:0:0:0:8080
  3. 2018-04-10 08:43:39.935  INFO 2052 --- [           main] o.s.b.web.embedded.netty.NettyWebServer  : Netty started on port(s): 8080
  4. 2018-04-10 08:43:39.960  INFO 2052 --- [           main] org.spring.springboot.Application        : Started Application in 6.547 seconds (JVM running for 9.851)

访问 http://localhost:8080/userDelivery/list ,可以看到如下页面:

点击创建,如图:

实现 OSS 文件上传

文件上传其实原理很简单,配合 uploadFile.js 工具,我们只需要在对应的 HTML 写上,对应的代码即可:

  1. <div class="layui-form-item" id="couponBlockHide2">
  2.        <label class="layui-form-label">图片</label>
  3.        <div class="layui-input-inline">
  4.          <button type="button" class="layui-btn" id="upload">
  5.            <i class="layui-icon">&#xe67c;</i>选择文件
  6.          </button>
  7.          <div class="layui-row" align="center" style="margin-top: 30px;">
  8.            <div class="layui-upload-list" id="imageView"></div>
  9.            <input id="image" name="image" type="hidden"/>
  10.          </div>
  11.        </div>
  12.      </div>

文件控制器代码很简单:

  1. @Controller
  2. @RequestMapping("file")
  3. public class FileController {
  4.    @Autowired
  5.    private FileService fileService;
  6.    @PostMapping(value = "/upload")
  7.    @ResponseBody
  8.    public FileResult uploadUEditorFile(
  9.            @RequestParam(value = "upFile") MultipartFile multipartFile) {
  10.        return fileService.uploadFile(multipartFile);
  11.    }
  12. }

OSS 封装参考其 SDK

总结

这里,探讨了后端开发 CMS 管理系统技术选型

  • Spring Boot – 内嵌 Web 容器,启动部署方便
  • Thymleaf – 推荐模板引擎
  • Layui – 后台管理系统模板框架(JQ、UEditor、treegrid )
  • MySQL
  • MyBatis – 外加两个神器分页插件和自动生成代码
  • FastJson
  • 云服务:七牛、OSS 随便挑

有些朋友告诉我使用 Spring Data REST 依赖会更快的实现 CRUD,确实如此。但是我认为那个版本还是很低,建议还是自己实现 ORM DAL 层。

人已赞赏
opencart

opencart插件-change the password into the edit account

2018-9-11 15:05:17

Java

Java如何优雅地实现接口数据校验

2020-12-10 22:46:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索