近期完成了一个前后端分离的项目,所思所想,分享一哈!
第一次做前后端分离项目时,我想大家对此肯定有很多疑问:
(1)前端是做界面,后端是做接口,那到底什么是接口呢?
(2)我以前做Java项目时候,前端界面也是我写的啊,现在分离开来,我后端的数据怎么给前端呢?
其实不管你是前端人员还是后端人员,要想在互联网行业中如鱼得水,你几乎得啥都会一点,然后精于一门技术。对于接口,我有一个通俗的解释:前端把精美的界面呈现在大家面前,但是,那只是一个vase,没有任何实际数据,后端对数据库进行处理后,就会把数据传上来,那怎么传呢?利用链接来与前端对接。熟悉Spring boot的同学应该知道,controller层中有各种各样的映射,我们在浏览器中输入你设置好的映射,你就可以访问这些数据了;不熟悉spring boot的同学可以看看浏览器中的链接,如CSDN网址“https://www.csdn.net/”,我现在所处页面网址“https://mp.csdn.net/postedit”,后面是不是多了一个“/postedit”?我们把这种可以来访问数据的url称之为接口。前端页面通过ajax就可以之间访问,实现前后端分离啦!
理解原理之后,我们试着来做一下后端是如何从数据库读取数据变成接口的。
(1)创建Spring boot项目。并创建controller、dao和pojo文件夹。项目目录结构如下:
2.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>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.6.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.gang</groupId>
<artifactId>study_boot_demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>study_boot_demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<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-web-services</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
3.创建数据,mysql语句如下:
USE `how2java`;
CREATE TABLE `hero` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(30) DEFAULT NULL,
`hp` float DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6194 DEFAULT CHARSET=utf8;
INSERT INTO `hero` VALUES (6094,'name0',0);
INSERT INTO `hero` VALUES (6095,'name1',1);
INSERT INTO `hero` VALUES (6096,'name2',2);
INSERT INTO `hero` VALUES (6097,'name3',3);
INSERT INTO `hero` VALUES (6098,'name4',4);
INSERT INTO `hero` VALUES (6099,'name5',5);
INSERT INTO `hero` VALUES (6100,'name6',6);
往下之前,先解释一下创建的每一个文件夹有什么用。pojo是实体层用来定义数据库中表以及表的属性。dao层定义数据库访问接口;本次实践我们用JpaRepository来对数据库进行操作;最后controller层定义数据访问接口,也许你现在有点懵,没关系,继续往下看!
4.编辑pojo层代码。Hero.java
package com.gang.study_boot_demo.pojo;
import javax.persistence.*;
@Entity
@Table(name= "hero")//数据库表名
public class Hero {
@Id//定义主键,该注解下面的属性即为主键
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name= "id")
private int id;
@Column(name="name")//定义表中的每一列,即每一个属性
private String name;
@Column(name="hp")
private String hp;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getHp() {
return hp;
}
public void setHp(String hp) {
this.hp = hp;
}
}
5.编辑DAO层代码。HeroDao.java
package com.gang.study_boot_demo.dao;
import com.gang.study_boot_demo.pojo.Hero;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import java.util.List;
import java.util.Optional;
public interface HeroDAO extends JpaRepository<Hero,Integer>{
List<Hero> findAll();
/*
找到表中所有数据。以这样的类型定义,数据将会以.json格式输出
*/
}
6.编辑Controller层代码。HeroController.java
package com.gang.study_boot_demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import com.gang.study_boot_demo.dao.HeroDAO;
import com.gang.study_boot_demo.pojo.Hero;
import java.util.List;
import java.util.Optional;
@RestController//标注此为Controller层
@RequestMapping("/hero")//映射地址
public class HeroController {
@Autowired HeroDAO heroDAO;
@RequestMapping("/all")//映射次地址
public List<Hero> findAll()
{
List<Hero> tp = heroDAO.findAll();
return tp;
}
}
7.回到主程序运行。
8.在浏览器中输入localhost:8088/hero/all。因为链接定义了两层,所以我们也要输入两层地址。
为什么端口号是8088而不是8080呢?因为我在application.properties中进行了修改!默认为8080哦。
最后补充一下,如果我要对数据库进行筛选后才显示数据,该怎么操作呢?那就直接在代码中调用sql语句,sql基础很重要!
话不多说,上实例,还是刚才的数据库。
1.对DAO层进行修改,添加一个功能,按照id进行查询。
package com.gang.study_boot_demo.dao;
import com.gang.study_boot_demo.pojo.Hero;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.data.repository.query.Param;
import java.util.List;
import java.util.Optional;
public interface HeroDAO extends JpaRepository<Hero,Integer>{
Optional<Hero> findById(Long id);
List<Hero> findAll();
@Query(name="findByID",nativeQuery = true,value = "select * from hero where id=:id")
List<Hero> findByID(@Param("id") int id); //引用id,对数据库进行查询
}
2.修改controller层。
package com.gang.study_boot_demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import com.gang.study_boot_demo.dao.HeroDAO;
import com.gang.study_boot_demo.pojo.Hero;
import java.util.List;
import java.util.Optional;
@RestController
@RequestMapping("/hero")
public class HeroController {
@Autowired HeroDAO heroDAO;
@RequestMapping("/all")
public List<Hero> findAll()
{
List<Hero> tp = heroDAO.findAll();
return tp;
}
@GetMapping("/get/{id}")//注意上下两个方法的标签不一样
public List<Hero> findByID(@PathVariable("id") int id)
{
List<Hero> tp = heroDAO.findByID(id);
return tp;
}
}
3.运行主项目。在浏览器中输入locahost:8088l/hero/get/6100