添加搜索文章名称

BlogBack/src/main/java/com/luobo/common/dto/PageDto.java

@@ -1,5 +1,6 @@
 package com.luobo.common.dto;
 
+import com.luobo.entity.Blog;
 import lombok.Data;
 
 /**
@@ -10,8 +11,15 @@
  * @Version 1.0
  **/
 @Data
-public class PageDto {
-    private Integer userId;
+public class PageDto  extends Blog {
     private Integer currentPage;
     private Integer pageSize;
+
+    @Override
+    public String getTitle() {
+        if(null == super.getTitle() || super.getTitle().isEmpty()){
+            return "";
+        }
+        return super.getTitle();
+    }
 }

BlogBack/src/main/java/com/luobo/controller/BlogController.java

@@ -9,7 +9,6 @@
 import com.luobo.common.dto.PageDto;
 import com.luobo.common.lang.Result;
 import com.luobo.entity.Blog;
-import com.luobo.entity.Vote;
 import com.luobo.service.BlogService;
 import com.luobo.service.CommentService;
 import com.luobo.service.UserService;
@@ -18,13 +17,11 @@
 import com.luobo.util.JwtUtils;
 import com.luobo.util.ShiroUtil;
 import io.jsonwebtoken.Claims;
-import org.apache.shiro.SecurityUtils;
 import org.apache.shiro.authz.annotation.RequiresAuthentication;
 import org.apache.shiro.util.Assert;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.*;
-import redis.clients.jedis.Jedis;
 
 import javax.servlet.ServletRequest;
 import javax.servlet.http.HttpServletRequest;
@@ -34,8 +31,6 @@
  * <p>
  *  前端控制器
  * </p>
- *
- * @author 关注公众号：MarkerHub
  * @since 2020-08-06
  */
 @RestController
@@ -102,7 +97,8 @@ public Result blogs(@RequestBody PageDto pageParams, ServletRequest servletReque
         if(null != claims){
             currentUserId =Long.parseLong(claims.get("sub").toString());
         }
-        IPage pageData =blogService.GetBlogsLeftInUser(page, new QueryWrapper<Blog>().orderByDesc("created"),currentUserId);
+
+        IPage pageData =blogService.GetBlogsLeftInUser(page, new QueryWrapper<Blog>().orderByDesc("created"),currentUserId,pageParams);
         return Result.succ(pageData);
     }
 
@@ -183,4 +179,5 @@ public Result getBlgs(@Validated @RequestBody PageDto pageParams){
     }
 
 
+
 }

BlogBack/src/main/java/com/luobo/mapper/BlogMapper.java

@@ -3,6 +3,7 @@
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Constants;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.luobo.common.dto.PageDto;
 import com.luobo.entity.Blog;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import org.apache.ibatis.annotations.Param;
@@ -26,7 +27,7 @@ public interface BlogMapper extends BaseMapper<Blog> {
      * @updateTime 2020/11/2 16:59
      * @return: java.util.List<com.luobo.entity.Blog>
      */
-    List<Blog> findBlogs(Page<Blog> page, @Param(Constants.WRAPPER) QueryWrapper<Blog> wrapper, Long currentUserId);
+    List<Blog> findBlogs(Page<Blog> page, @Param(Constants.WRAPPER) QueryWrapper<Blog> wrapper, Long currentUserId, String title);
 
     /**
      * @title findBlogsByUserId
@@ -37,5 +38,6 @@ public interface BlogMapper extends BaseMapper<Blog> {
      * @updateTime 2020/11/26 11:01
      * @return: java.util.List<com.luobo.entity.Blog>
      */
-    List<Blog> findBlogsByUserId(Page<Blog> page, Integer userId);
+    List<Blog> findBlogsByUserId(Page<Blog> page, Long userId);
+
 }

BlogBack/src/main/java/com/luobo/service/BlogService.java

@@ -2,6 +2,7 @@
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.luobo.common.dto.PageDto;
 import com.luobo.entity.Blog;
 import com.baomidou.mybatisplus.extension.service.IService;
 
@@ -23,7 +24,7 @@ public interface BlogService extends IService<Blog> {
      * @updateTime 2020/11/26 11:02
      * @return: com.baomidou.mybatisplus.extension.plugins.pagination.Page<com.luobo.entity.Blog>
      */
-    Page<Blog> GetBlogsLeftInUser (Page<Blog> page, QueryWrapper<Blog> wrapper,Long currentuserId);
+    Page<Blog> GetBlogsLeftInUser (Page<Blog> page, QueryWrapper<Blog> wrapper, Long currentuserId, PageDto pageParams);
 
     /**
      * @title GetBlogsByuUserId
@@ -34,5 +35,7 @@ public interface BlogService extends IService<Blog> {
      * @updateTime 2020/11/26 11:03
      * @return: com.baomidou.mybatisplus.extension.plugins.pagination.Page<com.luobo.entity.Blog>
      */
-    Page<Blog> GetBlogsByuUserId (Page<Blog> page, Integer userId);
+    Page<Blog> GetBlogsByuUserId (Page<Blog> page, Long userId);
+
+
 }

BlogBack/src/main/java/com/luobo/service/impl/BlogServiceImpl.java

@@ -2,6 +2,7 @@
 
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.luobo.common.dto.PageDto;
 import com.luobo.entity.Blog;
 import com.luobo.mapper.BlogMapper;
 import com.luobo.service.BlogService;
@@ -33,8 +34,8 @@ public class BlogServiceImpl extends ServiceImpl<BlogMapper, Blog> implements Bl
      * @return: com.baomidou.mybatisplus.extension.plugins.pagination.Page<com.luobo.entity.Blog>
      */
     @Override
-    public Page<Blog> GetBlogsLeftInUser(Page<Blog> page, QueryWrapper<Blog> wrapper,Long currentuserId) {
-        return page.setRecords(blogMapper.findBlogs(page,wrapper,currentuserId));
+    public Page<Blog> GetBlogsLeftInUser(Page<Blog> page, QueryWrapper<Blog> wrapper, Long currentuserId, PageDto pageParams) {
+        return page.setRecords(blogMapper.findBlogs(page,wrapper,currentuserId,pageParams.getTitle()));
     }
 
     /**
@@ -47,7 +48,9 @@ public Page<Blog> GetBlogsLeftInUser(Page<Blog> page, QueryWrapper<Blog> wrapper
      * @return: com.baomidou.mybatisplus.extension.plugins.pagination.Page<com.luobo.entity.Blog>
      */
     @Override
-    public Page<Blog> GetBlogsByuUserId(Page<Blog> page, Integer userId) {
+    public Page<Blog> GetBlogsByuUserId(Page<Blog> page, Long userId) {
         return page.setRecords(blogMapper.findBlogsByUserId(page,userId));
     }
+
+
 }

BlogBack/src/main/resources/mapper/BlogMapper.xml

@@ -12,7 +12,7 @@
         SELECT b.*, u.username ,m.id as is_vote  FROM m_blog b
             LEFT JOIN m_user u on b.user_id = u.id
             LEFT JOIN (SELECT * from m_vote v
-        WHERE v.user_id = #{currentUserId}) m on m.voteable_id = b.id ${ew.customSqlSegment}
+        WHERE v.user_id = #{currentUserId}) m on m.voteable_id = b.id where b.title like concat(#{title},'%') ${ew.customSqlSegment}
     </select>
 
     <!--  根据用户ID获取文章  -->

BlogBack/target/classes/mapper/BlogMapper.xml

@@ -12,7 +12,7 @@
         SELECT b.*, u.username ,m.id as is_vote  FROM m_blog b
             LEFT JOIN m_user u on b.user_id = u.id
             LEFT JOIN (SELECT * from m_vote v
-        WHERE v.user_id = #{currentUserId}) m on m.voteable_id = b.id ${ew.customSqlSegment}
+        WHERE v.user_id = #{currentUserId}) m on m.voteable_id = b.id where b.title like concat(#{title},'%') ${ew.customSqlSegment}
     </select>
 
     <!--  根据用户ID获取文章  -->

BlogVue/src/components/Header.vue

@@ -227,7 +227,7 @@
           </li> -->
           <li class="m-person-theme-default nav-item search">
             <div class="search-form-theme-default ">
-              <searchbtn></searchbtn>
+              <searchbtn @matrix-input-value="searchBlog"></searchbtn>
             </div>
           </li>
           <li
@@ -345,6 +345,17 @@ export default {
     }
   },
   methods: {
+    /**
+     * @description: 组件函数回调 搜索按钮被点击
+     * @param {*}
+     * @return {*}
+     * @Date: 2021-05-16 15:06:07
+     * @Author: David
+     */
+
+    searchBlog(keyword) {
+      this.$emit("matrix-search", keyword);
+    },
     /**
      * @description: 点击回到主页
      * @param {*}

BlogVue/src/components/bloglist/BlogList.vue

@@ -221,15 +221,17 @@ export default {
     /**
      * @description: 获得文章
      * @param {Object} category  文章的分类 推荐、关注。。。。。
+     * @param {String} keyword  文章的标题。。。。。
      * @return {*}
      * @Date: 2020-10-31 15:31:00
      * @Author: David
      */
-    articles(category) {
+    articles(category, keyword) {
       const _this = this;
       let params = {
         currentPage: this.currentPage,
-        pageSize: this.pageSize
+        pageSize: this.pageSize,
+        title: keyword
       };
       this.$axios.post(APIConfig.Base.Blogs, params).then(res => {
         let resp = res.resp;
@@ -244,6 +246,12 @@ export default {
       });
     },
 
+    searchByKeyword(keyword) {
+      this.currentPage = 1;
+      this.aritcleList = [];
+      this.articles("", keyword);
+    },
+
     /**
      * @description: 文章点赞
      * @param {Object} blog 文章ID

BlogVue/src/components/input/Input.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: David
  * @Date: 2020-10-27 21:51:10
- * @LastEditTime: 2021-03-03 20:57:07
+ * @LastEditTime: 2021-05-16 15:17:40
  * @LastEditors: David
  * @Description: 搜索输入框
  * @FilePath: /BlogVue/src/components/input/Input.vue
@@ -11,14 +11,38 @@
 <template>
   <div class="input-theme-default">
     <form role="search" class="search-form">
-      <input type="search" placeholder="搜索摘要/标签" class="search-input" />
-      <i class="fa fa-search"></i>
+      <input
+        type="search"
+        placeholder="搜索文章名"
+        v-model="keyword"
+        class="search-input"
+      />
+      <i class="fa fa-search" @click="searchBlogByKeyword()"></i>
     </form>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      keyword: ""
+    };
+  },
+  methods: {
+    /**
+     * @description: 根据关键字搜索博客
+     * @param {*}
+     * @return {*}
+     * @Date: 2021-05-16 15:03:00
+     * @Author: David
+     */
+
+    searchBlogByKeyword() {
+      this.$emit("matrix-input-value", this.keyword);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

BlogVue/src/components/userInfoComponents/Article.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: David
  * @Date: 2020-11-07 10:05:11
- * @LastEditTime: 2021-04-26 17:15:28
+ * @LastEditTime: 2021-05-15 10:01:28
  * @LastEditors: David
  * @Description: 用户自己的文章列表界面
  * @FilePath: /BlogVue/src/components/userInfoComponents/Article.vue

BlogVue/src/page/blogs/Blogs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-container">
-    <Header></Header>
+    <Header @matrix-search="searchBlogs"></Header>
     <!-- <nav role="navigation" class="view-nav" v-show="showBlogList"> -->
     <!-- <ul class="nav-list left"> -->
     <!-- <li class="nav-item active" @click="searchParams($event)">推荐</li> -->
@@ -16,7 +16,7 @@
         </li> -->
     <!-- </ul> -->
     <!-- </nav> -->
-    <blog-list v-show="showBlogList"></blog-list>
+    <blog-list v-show="showBlogList" ref="blogList"></blog-list>
     <router-view v-show="!showBlogList"></router-view>
   </div>
 </template>
@@ -67,6 +67,19 @@ export default {
         }
       }
       e.target.classList.add("active");
+    },
+
+    /**
+     * @description: 搜索关键字
+     * @param {*} keyword
+     * @return {*}
+     * @Date: 2021-05-16 15:13:47
+     * @Author: David
+     */
+
+    searchBlogs(keyword) {
+      console.log(12);
+      this.$refs.blogList.searchByKeyword(keyword);
     }
   },
   mounted() {}

BlogVue3/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

BlogVue3/README.md

@@ -0,0 +1,27 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
+
+### If Using `<script setup>`
+
+[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur).
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following:
+
+### If Using Volar
+
+Run `Volar: Switch TS Plugin on/off` from VSCode command palette.
+
+### If Using Vetur
+
+1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json`
+2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript
+3. Open `src/main.ts` in VSCode
+4. Open the VSCode command palette
+5. Search and run "Select TypeScript version" -> "Use workspace version"

BlogVue3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>