首先说一下,我为什么会写这个案例,话不多说,上图:
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.zishenmanong</groupId> <artifactId>zishenmanong</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>zishenmanong</name> <description>Demo project for Spring Boot</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.0.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-thymeleaf</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> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc14</artifactId> <version>11.2.0.1.0</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
解释一下:
<artifactId>spring-boot-starter-parent</artifactId>
这个spring boot的超父类坐标可以省很多事:在下面的坐标可以不写版本信息,能够自动识别下面引用的插件,能够识别application.properties和application.yml类型的配置信息
<artifactId>spring-boot-starter-thymeleaf</artifactId>
这个主要是html要使用thymeleat模板标签。因为不使用jsp,不熟悉的话取值会有点小麻烦。
<artifactId>ojdbc14</artifactId>
为什么要使用oracle,其实这里我想应该考察的maven的命令,因为这个坐标是不能自动依赖的。需要install:
mvn install:install-file -DgroupId=com.oracle -DartifactId=ojdbc14 -Dversion=11.2.0.1.0 -Dpackaging=jar -Dfile=d:\oracle_jdbc6.jar
application.properties:
spring.resources.static-locations=classpath:/static/,classpath:/templates/ spring.datasource.driver-class-name=oracle.jdbc.OracleDriver spring.datasource.url=jdbc:oracle:thin:@localhost:1521:orcl spring.datasource.username=zsmn spring.datasource.password=zsmn spring.jpa.hibernate.ddl-auto=update spring.jpa.hibernate.show-sql=true spring.datasource.max-active=20 spring.datasource.max-idle=8 spring.datasource.min-idle=8 spring.datasource.initial-size=10 #MVC配置 spring.mvc.view.prefix = classpath:/static/ spring.mvc.view.suffix = .html spring.mvc.date-format=yyyy-MM-dd HH:mm:ss #槿板配置 spring.thymeleaf.mode = HTML5 spring.thymeleaf.cache = false spring.thymeleaf.encoding = UTF-8
如何使用layui:
关键点:
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.all.js" charset="utf-8"></script>
这里踩过一个坑,当时引的不是layui.all.js 这个脚本,使用的是迷你版本。结果导致一些动态效果不会出来,因为:
layui.use('element', function(){ var $ = layui.jquery ,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
需要依赖element模块,是自动依赖的。只要js有这句话
整体的布局细节也很简单,文件太长,打包发给你,布局是copy官网的
后台启动类:
@SpringBootApplication public class ZishenmanongApplication extends SpringBootServletInitializer { @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(ZishenmanongApplication.class); } public static void main(String[] args) { SpringApplication.run(ZishenmanongApplication.class, args); } }
sql:
-- Create the user create user zsmn identified by zsmn default tablespace USERS temporary tablespace TEMP profile DEFAULT; -- Grant/Revoke role privileges grant dba to zsmn; grant connect to zsmn; grant resource to zsmn; -- Create table create table GOODS ( id NUMBER not null, goods_name VARCHAR2(20), goods_brand VARCHAR2(20), goods_price NUMBER, goods_place VARCHAR2(20) ) tablespace USERS pctfree 10 initrans 1 maxtrans 255; -- Add comments to the columns comment on column GOODS.id is '商品编号'; comment on column GOODS.goods_name is '商品名称'; comment on column GOODS.goods_brand is '品牌'; comment on column GOODS.goods_price is '价格'; comment on column GOODS.goods_place is '产地';
alter table GOODS add constraint ID primary key (ID) using index tablespace USERS pctfree 10 initrans 2 maxtrans 255;
实体类:
@Entity public class Goods { @Id @GeneratedValue @Column(name="ID") private Integer id; @Column(name="GOODS_NAME") private String goodsName; @Column(name="GOODS_BRAND") private String goodsBrand; @Column(name="GOODS_PRICE") private String goodsPrice; @Column(name="GOODS_PLACE") private String goodsPlace; public Goods() { }get..
set...}
JPA:
public interface GoodsRepository extends CrudRepository<Goods,Integer> { }
只要继承CrudRepository,里面封装了增删改查的方法
service:
public interface GoodsService { public List<Goods> getGoodsList(); public void deletete(Integer id); public void add(Goods goo); public Goods getGoodsByid(Integer id); public Goods editGoodsById(Integer id); }
impl:
@Service public class GoodsServiceImpl implements GoodsService { @Autowired private GoodsRepository goodsRepository; @Override public List<Goods> getGoodsList() { List<Goods> list = (List<Goods>) goodsRepository.findAll(); return list; } @Override public void deletete(Integer id) { goodsRepository.deleteById(id); } @Override public void add(Goods goods) { goodsRepository.save(goods); } @Override public Goods getGoodsByid(Integer id) { Goods goods = goodsRepository.findById(id).get(); return goods; } @Override public Goods editGoodsById(Integer id) { Goods goods = goodsRepository.findById(id).get(); return goods; } }
Controller:
@Controller public class GoodsController { @Autowired private GoodsService goodsService; @RequestMapping("/") public String index() { return "redirect:/list"; } @RequestMapping("/list") public String list(Model m){ m.addAttribute("goods",goodsService.getGoodsList()); return "index"; } @RequestMapping("/add") public ModelAndView add(HttpServletRequest req , Model m){ Goods goo1 = new Goods(); String goodsName = req.getParameter("name"); String brand = req.getParameter("brand"); String price = req.getParameter("price"); String place = req.getParameter("place"); goo1.setGoodsName(goodsName); goo1.setGoodsBrand(brand); goo1.setGoodsPrice(price); goo1.setGoodsPlace(place); goodsService.add(goo1); return new ModelAndView("redirect:/list"); } @RequestMapping("/deletete") public ModelAndView delete(Integer id, Model m){ System.out.println(id); goodsService.deletete(id); return new ModelAndView("redirect:/list"); } @RequestMapping("/allGoods") public ModelAndView allGoods(Integer id, Model m){ Goods goods = goodsService.getGoodsByid(id); System.out.println(goods); m.addAttribute("goods",goods); return new ModelAndView("allGoods"); } @RequestMapping("/eidtGoodsAll") public ModelAndView eidtGoodsAll(Integer id, Model m){ Goods goods = goodsService.getGoodsByid(id); System.out.println(goods); m.addAttribute("goods",goods); return new ModelAndView("editGoods"); } @RequestMapping("/editGoods") public ModelAndView editGoods(HttpServletRequest req ,Integer id, Model m){ Goods goods = goodsService.getGoodsByid(id); /* Goods goods = new Goods();*/ System.out.println(goods); goods.setGoodsName(req.getParameter("name")); goods.setGoodsPrice(req.getParameter("price")); goods.setGoodsPlace(req.getParameter("place")); goods.setGoodsBrand(req.getParameter("brand")); m.addAttribute("goods",goods); goodsService.add(goods); return new ModelAndView("redirect:/list"); } }
是不是看起来挺简单的,没错,就是这么简单
说一下thymeleaf取值:
需要引入他的规范:
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org">
<tr th:each="goods:${goods}"> <td th:text="${goods.goodsName}"></td> <td th:text="${goods.goodsBrand}"> </td> <td th:text="${goods.goodsPrice}"></td> <td th:text="${goods.goodsPlace}"> </td> <td class="layui-my-right"> <a th:href="@{/eidtGoodsAll(id=${goods.id})}"> <button class="layui-btn layui-btn-normal">修改</button></a> <a th:href="@{/deletete(id=${goods.id})}"><button class="layui-btn layui-btn-warm">删除</button></a> <a th:href="@{/allGoods(id=${goods.id})}"> <button class="layui-btn layui-btn-danger">明细</button></a> </td> </tr>
运行启动类看一下整体效果:
项目目录结构: