完善博客系统前端

.gitignore

@@ -13,6 +13,10 @@
 **/.idea/**
 **/target/**
 
+**/node_modules/**
+
+**/*.iml
+
 *.iml
 
 # Package Files #

vueblog-java/pom.xml

@@ -55,6 +55,12 @@
             <version>3.2.0</version>
         </dependency>
 
+        <!-- 为了代码生成 -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-freemarker</artifactId>
+        </dependency>
+
         <!-- shiro-redis -->
         <dependency>
             <groupId>org.crazycake</groupId>
@@ -76,12 +82,6 @@
             <version>0.9.1</version>
         </dependency>
 
-        <!-- 为了代码生成 -->
-        <dependency>
-            <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-freemarker</artifactId>
-        </dependency>
-
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-test</artifactId>

vueblog-java/src/main/java/com/markerhub/config/ShiroConfig.java

@@ -97,7 +97,7 @@ public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityMan
     }
 
 
-    // 注解代理
+    // 开启注解代理
     @Bean
     public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor(SecurityManager securityManager){
         AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor = new AuthorizationAttributeSourceAdvisor();

vueblog-java/src/main/java/com/markerhub/controller/AccountController.java

@@ -9,12 +9,12 @@
 import com.markerhub.entity.User;
 import com.markerhub.service.UserService;
 import com.markerhub.util.JwtUtils;
+import com.markerhub.util.ShiroUtil;
+import org.apache.shiro.SecurityUtils;
+import org.apache.shiro.authz.annotation.RequiresAuthentication;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
-import org.springframework.web.bind.annotation.CrossOrigin;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.bind.annotation.*;
 
 import javax.servlet.http.HttpServletResponse;
 
@@ -31,7 +31,6 @@ public class AccountController {
      * 默认账号密码：markerhub / 111111
      *
      */
-    @CrossOrigin
     @PostMapping("/login")
     public Result login(@Validated @RequestBody LoginDto loginDto, HttpServletResponse response) {
 
@@ -57,4 +56,11 @@ public Result login(@Validated @RequestBody LoginDto loginDto, HttpServletRespon
         );
     }
 
+    @GetMapping("/logout")
+    @RequiresAuthentication
+    public Result logout() {
+        SecurityUtils.getSubject().logout();
+        return Result.succ(null);
+    }
+
 }

vueblog-java/src/main/java/com/markerhub/controller/BlogController.java

@@ -1,16 +1,20 @@
 package com.markerhub.controller;
 
+import cn.hutool.core.bean.BeanUtil;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.markerhub.common.lang.Result;
 import com.markerhub.entity.Blog;
 import com.markerhub.service.BlogService;
+import com.markerhub.util.ShiroUtil;
 import org.apache.shiro.authz.annotation.RequiresAuthentication;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.util.Assert;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RestController;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import java.time.LocalDateTime;
 
 @RestController
 public class BlogController {
@@ -19,24 +23,46 @@ public class BlogController {
     BlogService blogService;
 
     @GetMapping("/blogs")
-    @RequiresAuthentication
     public Result blogs(Integer currentPage) {
 
         if(currentPage == null || currentPage < 1) currentPage = 1;
 
         Page page = new Page(currentPage, 10);
-        IPage pageData = blogService.page(page);
+        IPage pageData = blogService.page(page, new QueryWrapper<Blog>().orderByDesc("created"));
 
         return Result.succ(pageData);
     }
 
     @GetMapping("/blog/{id}")
-    @RequiresAuthentication
     public Result detail(@PathVariable(name = "id") Long id) {
 
         Blog blog = blogService.getById(id);
         Assert.notNull(blog, "该博客已删除！");
 
         return Result.succ(blog);
     }
+
+    @RequiresAuthentication
+    @PostMapping("/blog/edit")
+    public Result edit(@Validated @RequestBody Blog blog) {
+
+        System.out.println(blog.toString());
+
+        Blog temp = null;
+        if(blog.getId() != null) {
+            temp = blogService.getById(blog.getId());
+            Assert.isTrue(temp.getUserId() == ShiroUtil.getProfile().getId(), "没有权限编辑");
+        } else {
+            temp = new Blog();
+            temp.setUserId(ShiroUtil.getProfile().getId());
+            temp.setCreated(LocalDateTime.now());
+            temp.setStatus(0);
+        }
+
+        BeanUtil.copyProperties(blog, temp, "id", "userId", "created", "status");
+
+        blogService.saveOrUpdate(temp);
+
+        return Result.succ("操作成功", null);
+    }
 }

vueblog-java/src/main/java/com/markerhub/controller/UserController.java

@@ -0,0 +1,32 @@
+package com.markerhub.controller;
+
+import com.markerhub.entity.User;
+import com.markerhub.service.UserService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+@RestController
+@RequestMapping("/user")
+public class UserController {
+
+    @Autowired
+    UserService userService;
+
+    @GetMapping("/{id}")
+    public Object test(@PathVariable("id") Long id) {
+        return userService.getById(id);
+    }
+
+
+    /**
+     * 测试实体校验
+     * @param user
+     * @return
+     */
+    @PostMapping("/save")
+    public Object testUser(@Validated @RequestBody User user) {
+        return user.toString();
+    }
+
+}

vueblog-java/src/main/java/com/markerhub/entity/Blog.java

@@ -5,10 +5,14 @@
 import com.baomidou.mybatisplus.annotation.TableId;
 import java.time.LocalDateTime;
 import java.io.Serializable;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.experimental.Accessors;
 
+import javax.validation.constraints.NotBlank;
+
 /**
  * <p>
  * 
@@ -28,12 +32,18 @@ public class Blog implements Serializable {
     @TableId(value = "id", type = IdType.AUTO)
     private Long id;
 
+    private Long userId;
+
+    @NotBlank(message = "标题不能为空")
     private String title;
 
+    @NotBlank(message = "摘要不能为空")
     private String description;
 
+    @NotBlank(message = "内容不能为空")
     private String content;
 
+    @JsonFormat(pattern = "yyyy-MM-dd")
     private LocalDateTime created;
 
     private Integer status;

vueblog-java/src/main/java/com/markerhub/shiro/AccountProfile.java

@@ -9,5 +9,6 @@ public class AccountProfile implements Serializable {
 
     private Long id;
     private String username;
+    private String avatar;
 
 }

vueblog-java/src/main/java/com/markerhub/shiro/JwtFilter.java

@@ -1,8 +1,6 @@
 package com.markerhub.shiro;
 
-import cn.hutool.http.HttpStatus;
 import cn.hutool.json.JSONUtil;
-import com.baomidou.mybatisplus.extension.api.R;
 import com.markerhub.common.lang.Result;
 import com.markerhub.util.JwtUtils;
 import io.jsonwebtoken.Claims;

vueblog-java/src/main/java/com/markerhub/util/ShiroUtil.java

@@ -0,0 +1,12 @@
+package com.markerhub.util;
+
+import com.markerhub.shiro.AccountProfile;
+import org.apache.shiro.SecurityUtils;
+
+public class ShiroUtil {
+
+    public static AccountProfile getProfile() {
+        return (AccountProfile)SecurityUtils.getSubject().getPrincipal();
+    }
+
+}

vueblog-java/src/main/resources/application.yml

@@ -4,7 +4,7 @@ server:
 spring:
   datasource:
     driver-class-name: com.mysql.cj.jdbc.Driver
-    url: jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=UTC
+    url: jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
     username: root
     password: admin
 mybatis-plus:

vueblog-vue/package.json

@@ -10,6 +10,8 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.1",
+    "markdown-it": "^11.0.0",
+    "mavon-editor": "^2.9.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"

vueblog-vue/src/components/Header.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="m-content">
+
+    <h3>欢迎来到MarkerHub的博客</h3>
+    <div class="block">
+      <el-avatar :size="50" :src="user.avatar"></el-avatar>
+      <div>{{ user.username }}</div>
+    </div>
+    <div class="maction">
+      <el-link href="/blogs">主页</el-link>
+      <el-divider direction="vertical"></el-divider>
+      <span>
+          <el-link type="success" href="/blog/add" :disabled="!hasLogin">发表文章</el-link>
+        </span>
+      <el-divider direction="vertical"></el-divider>
+
+      <span v-show="!hasLogin">
+          <el-link type="primary" href="/login">登陆</el-link>
+        </span>
+      <span v-show="hasLogin">
+          <el-link type="danger" @click="logout">退出</el-link>
+        </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Header",
+    data() {
+      return {
+        hasLogin: false,
+        user: {
+          username: '请先登录',
+          avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
+        },
+        blogs: {},
+        currentPage: 1,
+        total: 0
+      }
+    },
+    methods: {
+      logout() {
+        const _this = this
+        this.$axios.get('http://localhost:8081/logout', {
+          headers: {
+            "Authorization": localStorage.getItem("token")
+          }
+        }).then((res) => {
+          _this.$store.commit('REMOVE_INFO')
+          _this.$router.push('/login')
+
+        });
+      }
+    },
+    created() {
+      if(this.$store.getters.getUser.username) {
+        this.user.username = this.$store.getters.getUser.username
+        this.user.avatar = this.$store.getters.getUser.avatar
+
+        this.hasLogin = true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .m-container {
+    width: 960px;
+    margin: 0 auto;
+  }
+
+  .m-content {
+    text-align: center;
+  }
+
+  .maction {
+    margin: 10px 0;
+  }
+</style>