1.导航页创建 创建这个页面主要是因为想记录和分享一下平时用到的软件，网站等。 2.原型图 3.数据库设计 首先要设计好两个数据库，一个是类型数据库，他的字段有： id,name,description,order,status,create_time,update_time 这个数据库就是具体的某一个软件的信息，他的字段有： id,name,cover,category_id,url,view_count,create_time,update_time 4.后台代码编写 4.1 导航分类 4.1.1 实体类编写 这个实体类和文章的分类基本上是一模一样，所以很好写。 package net.sunofbeach.blog.pojo; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import java.util.Date; @Entity @Table( name ="tb_navigation_categories" ) public class NavigationCategory { @Id private String id; @Column(name = "name" ) private String name; @Column(name = "pinyin" ) private String pinyin; @Column(name = "description" ) private String description; @Column(name = "`order`" ) private long order = 1; @Column(name = "status" ) private String status; @Column(name = "create_time" ) private Date createTime; @Column(name = "update_time" ) private Date updateTime; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPinyin() { return pinyin; } public void setPinyin(String pinyin) { this.pinyin = pinyin; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public long getOrder() { return order; } public void setOrder(long order) { this.order = order; } public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public Date getCreateTime() { return createTime; } public void setCreateTime(Date createTime) { this.createTime = createTime; } public Date getUpdateTime() { return updateTime; } public void setUpdateTime(Date updateTime) { this.updateTime = updateTime; } } 4.1.2 接口编写 总共有5个业务逻辑，增删改查，以及查询。 public interface INavigationCategoryService { ResponseResult addNavigationCategory(NavigationCategory navigationCategory); ResponseResult getNavigationCategory(String navigationCategoryId); ResponseResult listNavigationCategories(); ResponseResult updateNavigationCategory(String navigationCategoryId, NavigationCategory navigationCategory); ResponseResult deleteNavigationCategory(String navigationCategoryId); } 4.1.3 Dao层编写 首先就是增删改查 NavigationCategory findOneById(String id); @Modifying int deleteAllById(String navigationCateryId); @Modifying @Query(nativeQuery = true,value = "UPDATE `tb_navigation_categories` SET `status` = 0 WHERE `id` = ?") int deleteNavigationCategoryByUpdateState(String navigationCategoryId); @Query(nativeQuery = true,value = "select * from `tb_navigation_categories` WHERE `status` = ? order by `order` ASC") List listNavigationCategoriesByState(String status); 4.1.4 实现类编写 public ResponseResult addNavigationCategory(NavigationCategory navigationCategory) { } @Override public ResponseResult getNavigationCategory(String navigationCategoryId) { } @Override public ResponseResult listNavigationCategories() { } @Override public ResponseResult updateNavigationCategory(String navigationCategoryId, NavigationCategory navigationCategory) { } @Override public ResponseResult deleteNavigationCategory(String navigationCategoryId) { } 4.15 API接口编写 @Autowired private INavigationCategoryService navigationCategoryService; /** * 添加分类 * 需要管理员权限 */ @CheckTooFrequentCommit @PreAuthorize("@permission.admin()") @PostMapping public ResponseResult addNavigationCategory(@RequestBody NavigationCategory navigationCategory){ return navigationCategoryService.addNavigationCategory(navigationCategory); } /** * 删除分类 */ @PreAuthorize("@permission.admin()") @DeleteMapping("/{navigation_categoryId}") public ResponseResult deleteNavigationCategory(@PathVariable("navigation_categoryId") String navigationCategoryId){ return navigationCategoryService.deleteNavigationCategory(navigationCategoryId); } /** * 更新分类 */ @CheckTooFrequentCommit @PreAuthorize("@permission.admin()") @PutMapping("/{navigation_categoryId}") public ResponseResult updateNavigationCategory(@PathVariable("navigation_categoryId") String navigationCategoryId,@RequestBody NavigationCategory navigationCategory){ return navigationCategoryService.updateNavigationCategory(navigationCategoryId,navigationCategory); } /** * 获取分类 * * 什么时候会用到这个？修改的时候，获取一下，填充弹窗 * 不获取也行，从列表获取数据 * * 权限：管理员权限 */ @PreAuthorize("@permission.admin()") @GetMapping("/{navigation_categoryId}") public ResponseResult getNavigationCategory(@PathVariable("navigation_categoryId") String navigationCategoryId){ return navigationCategoryService.getNavigationCategory(navigationCategoryId); } /** * 获取分类列表 * * 权限：管理员权限 */ @PreAuthorize("@permission.admin()") @GetMapping("/list") public ResponseResult listNavigationCategories(){ return navigationCategoryService.listNavigationCategories(); } 4.2具体的导航 4.2.1实体类编写 package net.sunofbeach.blog.pojo; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Id; import javax.persistence.Table; import java.util.Date; @Entity @Table( name ="tb_navigation" ) public class Navigation { @Id private String id; @Column(name = "name") private String name; @Column(name = "cover") private String cover; @Column(name = "category_id") private String categoryId; @Column(name = "url") private String url; @Column(name = "view_count") private long viewCount = 0L; @Column(name = "create_time") private Date createTime; @Column(name = "update_time") private Date updateTime; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCover() { return cover; } public void setCover(String cover) { this.cover = cover; } public String getCategoryId() { return categoryId; } public void setCategoryId(String categoryId) { this.categoryId = categoryId; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public long getViewCount() { return viewCount; } public void setViewCount(long viewCount) { this.viewCount = viewCount; } public Date getCreateTime() { return createTime; } public void setCreateTime(Date createTime) { this.createTime = createTime; } public Date getUpdateTime() { return updateTime; } public void setUpdateTime(Date updateTime) { this.updateTime = updateTime; } } 4.2.2接口编写 首先我们要把业务需要的方法都罗列出来。首先最基础的肯定是 ResponseResult postNavigation(Navigation navigation); ResponseResult listNavigations(int page, int size, String keyword, String categoryId, String state); ResponseResult getNavigationById(String navigationId); ResponseResult updateNavigation(String navigationId, Navigation navigation); ResponseResult deleteNavigationByUpdateState(String navigationId); ResponseResult topNavigation(String navigationId); ResponseResult getNavigationByIdForAdmin(String navigationId); ResponseResult listNavigationByCategoryId(int page, int size, String navigationId); ResponseResult getNavigationCount(); 4.2.3Dao层编写 Navigation findOneById(String id); @Modifying int deleteAllById(String navigationId); @Modifying @Query(nativeQuery = true, value = "UPDATE `tb_navigation` SET `state` = '0' WHERE id = ?") int deleteNavigationByState(String navigationId); 4.2.4实现类编写 @Override public ResponseResult postNavigation(Navigation navigation) { } @Override public ResponseResult listNavigations(int page, int size, String keyword, String categoryId, String state) { } @Override public ResponseResult getNavigationById(String navigationId) { } @Override public ResponseResult updateNavigation(String navigationId, Navigation navigation) { } @Override public ResponseResult deleteNavigationById(String navigationId) { } @Override public ResponseResult topNavigation(String navigationId) { } @Override public ResponseResult getNavigationByIdForAdmin(String navigationId) { } @Override public ResponseResult listNavigationByCategoryId(int page, int size, String navigationCategoryId) {} 4.2.5API接口编写 public ResponseResult postNavigation(@RequestBody Navigation navigation) { return navigationService.postNavigation(navigation); } public ResponseResult listArticles(@PathVariable("page") int page, @PathVariable("size") int size, @RequestParam(value = "state",required = false)String state, @RequestParam(value = "keyword",required = false) String keyword, @RequestParam(value = "categoryId" ,required = false) String categoryId ) { return navigationService.listNavigations(page,size,keyword,categoryId,state); } public ResponseResult getNavigationById(@PathVariable("navigationId") String navigationId) { return navigationService.getNavigationById(navigationId); } public ResponseResult updateNavigation(@PathVariable("navigationId") String navigationId, @RequestBody Navigation navigation) { return navigationService.updateNavigation(navigationId,navigation); } public ResponseResult deleteNavigationById(@PathVariable("navigationId") String navigationId) { return navigationService.deleteNavigationById(navigationId); } public ResponseResult topNavigation(@PathVariable("navigationId") String navigationId) { return navigationService.topNavigation(navigationId); } 5.后台管理代码编写 这些就不写在这里了。无非就是页面的堆砌与接口的调用。 6.前端页面编写 这些就不写在这里了。