利用Postman和Chrome的開發(fā)者功能探究項目(畢業(yè)設計項目)

更新時間：2020年12月01日 14:27:36 作者：歡迎！

這篇文章主要介紹了利用Postman和Chrome的開發(fā)者功能探究項目(畢業(yè)設計項目),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

　　前兩天忙著寫開題報告，沒有來得及做項目，今天繼續(xù)研究一下這個項目。

　　上次研究到后端的DAO層，研究了一下后端和數(shù)據(jù)庫交互的過程，service層封裝了一些DAO層的函數(shù)，沒有什么太多的東西，今天研究一下controller層和前端的代碼。

　　首先，一個典型的controller層代碼是這樣的：

package...

import ...
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class LibraryController {
 @Autowired
 BookService bookService;

 @CrossOrigin
 @GetMapping("/api/books")
 public List<Book> list() throws Exception {
  return bookService.list();
 }

 ...
}

　　按照慣例，首先看一下各個注解：

　　@RestController：相當于@ResponseBody+@Controller注解

　　@ResponseBody：@ResponseBody的作用其實是將java對象轉(zhuǎn)為json格式的數(shù)據(jù)。將controller的方法返回的對象通過適當?shù)霓D(zhuǎn)換器轉(zhuǎn)換為指定的格式之后，寫入到response對象的body區(qū)。

　　@Controller：用于標記在一個類上，使用它標記的類就是一個SpringMVC Controller對象。分發(fā)處理器將會掃描使用了該注解的類的方法，并檢測該方法是否使用了@RequestMapping注解。@Controller只是定義了一個控制器類，而使用@RequestMapping注解的方法才是真正處理請求的處理器。

　　@Autowired：自動裝配，和控制反轉(zhuǎn)什么的有關系，這個這里不展開了。

　　@CrossOrigin：跨域，這個問題大概就是說前后端不用一個服務器，瀏覽器對這種行為會出于安全考慮不允許跨域訪問，所以需要設置一下，具體細節(jié)比較瑣碎，這里不展開了。

　　@GetMapping：SpringMVC以前版本的@RequestMapping，到了新版本被下面新注釋替代，相當于增加的選項：@GetMapping、@PostMapping、@PutMapping、@DeleteMapping、@PatchMapping，從命名約定我們可以看到每個注釋都是為了處理各自的傳入請求方法類型，即@GetMapping用于處理請求方法的GET類型，@PostMapping用于處理請求方法的POST類型等。如果我們想使用傳統(tǒng)的@RequestMapping注釋實現(xiàn)URL處理程序，那么它應該是這樣的：@RequestMapping(value = "/get/{id}", method = RequestMethod.GET)，新方法可以簡化為：@GetMapping("/get/{id}")。

　　后面的函數(shù)中還有一些其他的注解，一起看一下：

@CrossOrigin
 @PostMapping("/api/books")
 public Book addOrUpdate(@RequestBody Book book) throws Exception {
  bookService.addOrUpdate(book);
  return book;
 }

 @CrossOrigin
 @PostMapping("/api/delete")
 public void delete(@RequestBody Book book) throws Exception {
  bookService.deleteById(book.getId());
 }

 @CrossOrigin
 @GetMapping("/api/categories/{cid}/books")
 public List<Book> listByCategory(@PathVariable("cid") int cid) throws Exception {
  if (0 != cid) {
   return bookService.listByCategory(cid);
  } else {
   return list();
  }
 }

 @CrossOrigin
 @GetMapping("/api/search")
 public List<Book> searchResult(@RequestParam("keywords") String keywords) {
  // 關鍵詞為空時查詢出所有書籍
  if ("".equals(keywords)) {
   return bookService.list();
  } else {
   return bookService.Search(keywords);
  }
 }

　　@RequestBody：@RequestBody主要用來接收前端傳遞給后端的json字符串中的數(shù)據(jù)的(請求體中的數(shù)據(jù)的)；GET方式無請求體，所以使用@RequestBody接收數(shù)據(jù)時，前端不能使用GET方式提交數(shù)據(jù)，而是用POST方式進行提交。

　　@PathVariable是spring3.0的一個新功能：接收請求路徑中占位符的值

　　@RequestParam：@RequestParam有三個配置參數(shù)：required表示是否必須，默認為true，必須。defaultValue可設置請求參數(shù)的默認值。value為接收url的參數(shù)名（相當于key值。這個好像用法比較復雜，之后再仔細看一下。

Postman和chrome測試

　　首先我們登錄進入系統(tǒng)，我這里前后端交互使用的8443端口，后續(xù)測試也在8443端口上進行。

　　可以看到發(fā)送了一個請求報文，收到了一個回復報文，回復報文的內(nèi)容是一些json鍵值對，下面放了一個樣例：

{
  "id": 69,
  "category": {
   "id": 1,
   "name": "文學"
  },
  "cover": "https://i.loli.net/2019/04/10/5cad63931ce27.jpg",
  "title": "謀殺狄更斯",
  "author": "[美] 丹·西蒙斯 ",
  "date": "2019-4",
  "press": "上海文藝出版社",
  "abs": "“狄更斯的那場意外災難發(fā)生在1865年6月9日，那列搭載他的成功、平靜、理智、手稿與情婦的火車一路飛馳，迎向鐵道上的裂隙，突然觸目驚心地墜落了?！?
 }

　　與Pojo中的book和category完全對應，這里放一下代碼。

public class Book {
 @Id
 @GeneratedValue(strategy = GenerationType.IDENTITY)
 @Column(name = "id")
 int id;

 //把 category 對象的 id 屬性作為 cid 進行了查詢
 @ManyToOne
 @JoinColumn(name="cid")
 private Category category;

 String cover;
 String title;
 String author;
 String date;
 String press;
 String abs;
 ...
}

public class Category {
 @Id
 @GeneratedValue(strategy = GenerationType.IDENTITY)
 @Column(name = "id")
 int id;

 String name;
 ...
}

　　前端的EditForm.vue中有這么一段代碼顯然是和這個相對應的，這里我們先不去管這個：