Java之Spring Boot+Vue+Element UI前后端分离项目（下-功能完善-发布文章-文章搜索） 【博客论坛项目高仿CSDN】（一篇文章精通系列）

转x33g5p2x  于2022-03-28 转载在 Java  
字(21.4k)|赞(0)|评价(0)|浏览(547)
Java 之 Spring Boot + Vue + Element UI 前后端分离项目（上-项目搭建）
Java之Spring Boot+Vue+Element UI前后端分离项目（中-功能完善-实现查询）
Java之Spring Boot+Vue+Element UI前后端分离项目（下-功能完善-发布文章-文章搜索）

源代码下载：https://download.csdn.net/download/qq_44757034/85045367
Java SpringBoot 前后端分离项目高仿CSDN项目源代码（前端Vue+Element UI 后端Java的SpringBoot+Myabtis，数据库Mysql）

一、实现文章发布需要使用富文本编辑框

安装富文本编辑框

1、npm安装

  1. npm install vue-quill-editor     //富文本编辑器

  1. npm install quill           //依赖项

2、创建Write.vue

  1. <template>
  3.   <div style="width: 90%; background-color: #99a9bf;margin: auto;top: 0px;left: 0px">
  5.     <div style="width:80%;background-color: white;margin: auto;">
  7.       <div style="clear: both"></div>
  8.       <el-input style="margin-top: 50px;width: 80%" v-model="title" placeholder="请输入文章标题"></el-input>
  10.       <div style="text-align: left;width: 80%;margin: auto;margin-top: 30px ">
  11.         上传文章缩略图：
  12.         <el-upload
  13.           class="avatar-uploader"
  14.           action="http://localhost:9090/image"
  15.           :show-file-list="false"
  16.           :on-success="handleAvatarSuccess"
  17.           :before-upload="beforeAvatarUpload">
  18.           <img v-if="imageUrl" :src="imageUrl" class="avatar">
  19.           <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
  20.         </el-upload>
  21.       </div>
  22.       <div style="clear: both"></div>
  23.       <div style="margin-top: 20px;float:left; margin-left: 130px ">
  24.         是否原创：
  25.         <el-switch
  26.           v-model="checked"
  27.           active-color="#13ce66"
  28.           inactive-color="#ff4949">
  29.         </el-switch>
  30.       </div>
  31.       <div style="clear: both"></div>
  33.       <el-input style="margin-top: 50px; margin-bottom: 50px;width: 80%"
  34.                 type="textarea"
  35.                 :rows="10"
  36.                 placeholder="文章摘要"
  37.                 v-model="abstract_text">
  38.       </el-input>
  39.       <div style="width: 80%;margin: auto">
  40.         <span style="text-align: left;display: block">文章内容：</span>
  41.         <quill-editor
  42.           ref="myQuillEditor"
  43.           v-model="content"
  44.           :options="editorOption"
  45.           style="height: 500px"
  46.         />
  47.       </div>
  48.       <el-button type="primary" @click="submit" style="margin-top:150px">提交</el-button>
  49.     </div>
  51.     <div style="margin-top: 100px"></div>
  53.   </div>
  55. </template>
  57. <script>
  58.   import 'quill/dist/quill.core.css'  //引入富文本
  59.   import 'quill/dist/quill.snow.css'  //引入富文本
  60.   import 'quill/dist/quill.bubble.css'  //引入富文本
  61.   import {quillEditor} from 'vue-quill-editor'  //引入富文本
  62.  
  63.   export default {
  64.     components: {
  65.       quillEditor
  66.     },
  67.     name: "Write",
  68.     data() {
  69.       return {
  70.         abstract_text: '',
  71.         title: "",
  72.         checked: false,
  73.         is_original: this.checked ? "是" : "否",
  74.         imageUrl: "",
  75.         thumbnail: "",
  76.         content: '<h2>请输入文章内容</h2>',
  77.         //富文本编辑器配置
  78.         editorOption: {},
  79.         blogType : "",
  80.         typeName: "选择文章类型",
  81.         typeId : ""
  82.       }
  83.     },
  84.     created() {//编写构造函数
  86.       this.$axios.get("http://localhost:9090/verify/")
  87.         .then((res) => {
  88.         }).catch(() => {
  89.         this.$router.push({path: "/Login"})
  90.         this.$message.error("没有登录请登录后发布文章！");
  91.       });
  92.       //获取顶部分类信息
  93.       this.$axios.get('http://localhost:9090/blogType/queryBlogType')
  94.         .then(response => (
  95.           this.blogType = response.data
  96.         )).catch(function (error) { // 请求失败处理
  97.         console.log(error);
  98.       });
  99.     },
  100.     methods: {
  101.       submit() {
  102.         this.$axios.post('http://localhost:9090/blogging/save', {
  103.           title: this.title,
  104.           abstract_text: this.abstract_text,
  105.           thumbnail: this.thumbnail,
  106.           context: this.content,
  107.           is_original: this.checked ? "是" : "否",
  108.           typeId : this.typeId,
  110.         }).then((res) => {
  111.           this.$router.push("/");
  112.           this.$message.success("文章发布成功！");
  113.         }).catch(() => {
  114.           this.$message.error("文章发布失败！");
  115.         });
  117.       },
  119.       handleAvatarSuccess(res, file) {
  120.         this.imageUrl = URL.createObjectURL(file.raw);
  121.         this.thumbnail = "http://localhost:9090/img/" + res;
  122.       },
  123.       selectType(typename,id) {
  124.         this.typeName = typename;
  125.         this.typeId = id;
  126.       },
  127.       beforeAvatarUpload(file) {
  128.         const isJPG = file.type === 'image/jpeg';
  129.         const isLt2M = file.size / 1024 / 1024 < 2;
  130.         if (!isJPG) {
  131.           this.$message.error('上传头像图片只能是 JPG 格式!');
  132.         }
  133.         if (!isLt2M) {
  134.           this.$message.error('上传头像图片大小不能超过 2MB!');
  135.         }
  136.         return isJPG && isLt2M;
  137.       }
  138.     }
  139.   }
  140. </script>
  142. <style scoped>
  143.   .avatar-uploader .el-upload {
  144.     border: 1px dashed #d9d9d9;
  145.     border-radius: 6px;
  146.     cursor: pointer;
  147.     position: relative;
  148.     overflow: hidden;
  149.   }
  151.   .avatar-uploader .el-upload:hover {
  152.     border-color: #409EFF;
  153.   }
  155.   .avatar-uploader-icon {
  156.     font-size: 28px;
  157.     color: #8c939d;
  158.     width: 178px;
  159.     height: 178px;
  160.     line-height: 178px;
  161.     text-align: center;
  162.   }
  164.   .avatar {
  165.     width: 178px;
  166.     height: 178px;
  167.     display: block;
  168.   }
  169. </style>

3、设置访问路径

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import ElementUI from 'element-ui'
  5. import 'element-ui/lib/theme-chalk/index.css'
  6. import 'default-passive-events'
  7. import './http';
  8. Vue.config.productionTip = false
  9. Vue.use(ElementUI)
  10. /* eslint-disable no-new */
  12. new Vue({
  13.   el: '#app',
  14.   router,
  15.   components: { App },
  16.   template: '<App/>'
  17. })

4、访问

访问：http://localhost:8080/#/Write

二、实现上传图片

1、实现上传图片的接口

在BlogController当中创建对应的上传图片的接口

  1. @PostMapping("image")
  2.     public ResponseEntity<String> uploadImage(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws IOException {
  3.         String name = file.getOriginalFilename();
  4.         IdWorker idWorker = new IdWorker(new Random().nextInt(10), 1);
  5.         long l = idWorker.nextId();
  6.         name = l+name;
  7.         String property = System.getProperty("user.dir");
  8.         file.transferTo(new File(System.getProperty("user.dir")+"\\src\\main\\webapp\\img\\"+name));
  9.         return ResponseEntity.ok(name);
  10.     }

2、修改前端上传图片的路径

  1. <el-upload
  2.           class="avatar-uploader"
  3.           action="http://localhost:9090/blog/image"
  4.           :show-file-list="false"
  5.           :on-success="handleAvatarSuccess"
  6.           :before-upload="beforeAvatarUpload">
  7.           <img v-if="imageUrl" :src="imageUrl" class="avatar">
  8.           <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
  9.         </el-upload>

3、重新运行后端程序测试上传图片的功能

上传图片成功

4、发表文章页面的全部代码

  1. <template>
  3.   <div style="width: 90%; background-color: #99a9bf;margin: auto;top: 0px;left: 0px">
  5.     <div style="width:80%;background-color: white;margin: auto;">
  7.       <div style="clear: both"></div>
  8.       <el-input style="margin-top: 50px;width: 80%" v-model="title" placeholder="请输入文章标题"></el-input>
  10.       <div style="text-align: left;width: 80%;margin: auto;margin-top: 30px ">
  11.         上传文章缩略图：
  12.         <el-upload
  13.           class="avatar-uploader"
  14.           action="http://localhost:9090/blog/image"
  15.           :show-file-list="false"
  16.           :on-success="handleAvatarSuccess"
  17.           :before-upload="beforeAvatarUpload">
  18.           <img v-if="imageUrl" :src="imageUrl" class="avatar">
  19.           <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
  20.         </el-upload>
  21.       </div>
  23.       <div style="clear: both"></div>
  24.       <div style="margin-top: 20px;float:left; margin-left: 130px ">
  25.         是否原创：
  26.         <el-switch
  27.           v-model="checked"
  28.           active-color="#13ce66"
  29.           inactive-color="#ff4949">
  30.         </el-switch>
  31.       </div>
  32.       <div style="clear: both"></div>
  34.       <el-input style="margin-top: 50px; margin-bottom: 50px;width: 80%"
  35.                 type="textarea"
  36.                 :rows="10"
  37.                 placeholder="文章摘要"
  38.                 v-model="abstract_text">
  39.       </el-input>
  40.       <div style="width: 80%;margin: auto">
  41.         <span style="text-align: left;display: block">文章内容：</span>
  42.         <quill-editor
  43.           ref="myQuillEditor"
  44.           v-model="content"
  45.           :options="editorOption"
  46.           style="height: 500px"
  47.         />
  48.       </div>
  49.       <el-button type="primary" @click="submit" style="margin-top:150px">提交</el-button>
  50.     </div>
  52.     <div style="margin-top: 100px"></div>
  54.   </div>
  56. </template>
  58. <script>
  59.   import 'quill/dist/quill.core.css'
  60.   import 'quill/dist/quill.snow.css'
  61.   import 'quill/dist/quill.bubble.css'
  62.   import {quillEditor} from 'vue-quill-editor'
  64.   export default {
  65.     components: {
  66.       quillEditor
  67.     },
  68.     name: "Write",
  69.     data() {
  70.       return {
  71.         abstract_text: '',
  72.         title: "",
  73.         checked: false,
  74.         is_original: this.checked ? "是" : "否",
  75.         imageUrl: "",
  76.         thumbnail: "",
  77.         content: '<h2>请输入文章内容</h2>',
  78.         //富文本编辑器配置
  79.         editorOption: {},
  80.         blogType : "",
  81.         typeName: "选择文章类型",
  82.         typeId : ""
  83.       }
  84.     },
  85.     created() {//编写构造函数
  87.     },
  88.     methods: {
  89.       submit() {
  90.         this.$http.post('/blog/save', {
  91.           title: this.title,
  92.           abstract_text: this.abstract_text,
  93.           thumbnail: this.thumbnail,
  94.           context: this.content,
  95.           is_original: this.checked ? "是" : "否",
  96.           typeId : this.typeId,
  98.         }).then((res) => {
  99.           this.$router.push("/");
  100.           this.$message.success("文章发布成功！");
  101.         }).catch(() => {
  102.           this.$message.error("文章发布失败！");
  103.         });
  105.       },
  107.       handleAvatarSuccess(res, file) {
  108.         this.imageUrl = URL.createObjectURL(file.raw);
  109.         this.thumbnail = "http://localhost:9090/img/" + res;
  110.       },
  111.       selectType(typename,id) {
  112.         this.typeName = typename;
  113.         this.typeId = id;
  114.       },
  115.       beforeAvatarUpload(file) {
  116.         const isJPG = file.type === 'image/jpeg';
  117.         const isLt2M = file.size / 1024 / 1024 < 2;
  118.         if (!isJPG) {
  119.           this.$message.error('上传头像图片只能是 JPG 格式!');
  120.         }
  121.         if (!isLt2M) {
  122.           this.$message.error('上传头像图片大小不能超过 2MB!');
  123.         }
  124.         return isJPG && isLt2M;
  125.       }
  126.     }
  127.   }
  128. </script>
  130. <style scoped>
  131.   .avatar-uploader .el-upload {
  132.     border: 1px dashed #d9d9d9;
  133.     border-radius: 6px;
  134.     cursor: pointer;
  135.     position: relative;
  136.     overflow: hidden;
  137.   }
  139.   .avatar-uploader .el-upload:hover {
  140.     border-color: #409EFF;
  141.   }
  143.   .avatar-uploader-icon {
  144.     font-size: 28px;
  145.     color: #8c939d;
  146.     width: 178px;
  147.     height: 178px;
  148.     line-height: 178px;
  149.     text-align: center;
  150.   }
  152.   .avatar {
  153.     width: 178px;
  154.     height: 178px;
  155.     display: block;
  156.   }
  157. </style>

三、设置Axios发起请求统一前缀的路径

https://code100.blog.csdn.net/article/details/123302546

1、HelloWorld.vue

  1. getInfo() {
  2.         this.$http.get('blog/queryBlogByPage?title=' + this.title + '&page=' + this.page + '&rows=' + this.rows)
  3.           .then(response => (
  4.             this.info = response.data,
  5.               this.total = this.info.total,
  6.               this.totalPage = this.info.totalPage,
  7.               this.items = this.info.items
  8.           )).catch(function (error) { // 请求失败处理
  9.           console.log(error);
  10.         });
  11.       },

2、Article.vue

  1. getInfo() {
  2.             this.$http.get('/blog/queryBlogArticleById?id=' + this.id )
  3.               .then(response => (
  4.                 this.info = response.data,
  5.                   this.title = this.info.title
  6.               )).catch(function (error) { // 请求失败处理
  7.               console.log(error);
  8.             });
  9.           },
  10.           selectBlog() {
  11.             this.page = 1;
  12.             this.rows = 10;
  13.             let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
  14.             let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
  15.             this.startBlogTime = startTime;
  16.             this.endBlogTime = endTime;
  17.             this.getInfo();
  18.           },
  19.           like(){
  20.             this.$http.get('blog/blogLikeId?id=' + this.id );
  21.             this.getInfo();
  22.           },

四、实现登录功能

1、创建ConsumerService

  1. package cn.itbluebox.springbootcsdn.service.Impl;
  3. import cn.itbluebox.springbootcsdn.domain.Consumer;
  4. import cn.itbluebox.springbootcsdn.enums.ExceptionEnum;
  5. import cn.itbluebox.springbootcsdn.exception.BlException;
  6. import cn.itbluebox.springbootcsdn.mapper.ConsumerMapper;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Service;
  9. import org.springframework.transaction.annotation.Propagation;
  10. import org.springframework.transaction.annotation.Transactional;
  12. @Service
  13. @Transactional(propagation = Propagation.REQUIRED)
  14. public class ConsumerService {
  16.     @Autowired
  17.     private ConsumerMapper consumerMapper;
  19.     public Boolean checkData(String data, Integer type) {
  21.         Consumer consumer = new Consumer();
  22.         //判断数据类型
  23.         switch (type) {
  24.             case 1:
  25.                 consumer.setEmail(data);
  26.                 break;
  27.             case 2:
  28.                 consumer.setPhone(Long.parseLong(data));
  29.                 break;
  30.             default:
  31.                 return null;
  32.         }
  33.         return consumerMapper.selectCount(consumer) == 0;
  35.     }
  37.     public Consumer queryUser(String email, String password) {
  38.         // 查询
  39.         Consumer consumer = new Consumer();
  40.         consumer.setEmail(email);
  41.         consumer.setPassword(password);
  42.         Consumer consumer1 = this.consumerMapper.selectOne(consumer);
  43.         // 校验用户名
  44.         if (consumer1 == null) {
  45.             return null;
  46.         }
  47.         // 用户名密码都正确
  48.         return consumer1;
  49.     }
  51.     public String saveConsumer(Consumer consumer) {
  52.         int insert = consumerMapper.insert(consumer);
  53.         if (insert != 1) {
  54.             throw new BlException(ExceptionEnum.CONSUMER_SAVE_ERROR);
  55.         }
  56.         return insert + "";
  57.     }
  59.     public Consumer queryConsumerById(Long id) {
  60.         Consumer consumer = new Consumer();
  61.         consumer.setId(id);
  62.         Consumer consumer1 = consumerMapper.selectOne(consumer);
  63.         consumer1.setPassword("");
  64.         return consumer1;
  65.     }
  66. }

2、创建AuthService

  1. package cn.itbluebox.springbootcsdn.properties;
  3. import cn.itbluebox.springbootcsdn.utils.RsaUtils;
  4. import lombok.Data;
  5. import lombok.extern.slf4j.Slf4j;
  6. import org.springframework.boot.context.properties.ConfigurationProperties;
  8. import javax.annotation.PostConstruct;
  9. import java.io.File;
  10. import java.security.PrivateKey;
  11. import java.security.PublicKey;
  13. @ConfigurationProperties(prefix = "sc.jwt")
  14. @Data
  15. @Slf4j
  16. public class JwtProperties {
  18.     private String secret; // 密钥
  20.     private String pubKeyPath;// 公钥
  22.     private String priKeyPath;// 私钥
  24.     private int expire;// token过期时间
  26.     private PublicKey publicKey; // 公钥
  28.     private PrivateKey privateKey; // 私钥
  30.     private String cookieName;
  32.     private Integer cookieMaxAge;
  34. //    private static final Logger logger = LoggerFactory.getLogger(JwtProperties.class);
  36.     /**
  37.      * @PostContruct：在构造方法执行之后执行该方法
  38.      */
  39.     @PostConstruct
  40.     public void init(){
  41.         try {
  42.             File pubKey = new File(pubKeyPath);
  43.             File priKey = new File(priKeyPath);
  44.             if (!pubKey.exists() || !priKey.exists()) {
  45.                 // 生成公钥和私钥
  46.                 RsaUtils.generateKey(pubKeyPath, priKeyPath, secret);
  47.             }
  48.             // 获取公钥和私钥
  49.             this.publicKey = RsaUtils.getPublicKey(pubKeyPath);
  50.             this.privateKey = RsaUtils.getPrivateKey(priKeyPath);
  51.         } catch (Exception e) {
  52.             log.error("初始化公钥和私钥失败！", e);
  53.             throw new RuntimeException();
  54.         }
  55.     }
  57. }

3、创建AuthController

  1. package cn.itbluebox.springbootcsdn.web;
  3. import cn.itbluebox.springbootcsdn.enums.ExceptionEnum;
  4. import cn.itbluebox.springbootcsdn.exception.BlException;
  5. import cn.itbluebox.springbootcsdn.properties.JwtProperties;
  6. import cn.itbluebox.springbootcsdn.service.Impl.AuthService;
  7. import cn.itbluebox.springbootcsdn.utils.CookieUtils;
  8. import cn.itbluebox.springbootcsdn.utils.JwtUtils;
  9. import cn.itbluebox.springbootcsdn.utils.UserInfo;
  10. import lombok.extern.slf4j.Slf4j;
  11. import org.apache.commons.lang3.StringUtils;
  12. import org.springframework.beans.factory.annotation.Autowired;
  13. import org.springframework.boot.context.properties.EnableConfigurationProperties;
  14. import org.springframework.http.HttpStatus;
  15. import org.springframework.http.ResponseEntity;
  16. import org.springframework.web.bind.annotation.CookieValue;
  17. import org.springframework.web.bind.annotation.GetMapping;
  18. import org.springframework.web.bind.annotation.RequestParam;
  19. import org.springframework.web.bind.annotation.RestController;
  21. import javax.servlet.http.Cookie;
  22. import javax.servlet.http.HttpServletRequest;
  23. import javax.servlet.http.HttpServletResponse;
  25. @RestController
  26. @EnableConfigurationProperties(JwtProperties.class)
  27. @Slf4j
  28. public class AuthController {
  30.     @Autowired
  31.     private AuthService authService;
  33.     @Autowired
  34.     private JwtProperties prop;
  36.     /**
  37.      * 登录授权
  38.      *
  39.      * @return
  40.      */
  41.     @GetMapping("accredit")
  42.     public ResponseEntity<Cookie> authentication(
  43.             @RequestParam("email") String email,
  44.             @RequestParam("password") String password,
  45.             HttpServletRequest request,
  46.             HttpServletResponse response) {
  47.         // 登录校验
  48.         System.out.println(" 登录校验 登录校验 登录校验 登录校验");
  49.         String token = authService.authentication(email, password);
  50.         if (StringUtils.isBlank(token)) {
  51.             log.info("用户授权失败");
  52.             return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
  53.         }
  54.         Cookie cookie = CookieUtils.setGetCookie(request, response, prop.getCookieName(), token, prop.getCookieMaxAge(), true);
  55.         return ResponseEntity.ok(cookie);
  56.     }
  58.     @GetMapping("verify")
  59.     public ResponseEntity<UserInfo> verify(
  60.             @CookieValue("SC_TOKEN") String token,
  61.             HttpServletRequest request,
  62.             HttpServletResponse response
  63.     ) {
  64.         //解析token
  65.         System.out.println("解析token解析token解析token解析token解析token");
  66.         try {
  67.             UserInfo userInfo = JwtUtils.getUserInfo(prop.getPublicKey(), token);
  69.             //刷新token，重新生成token
  70.             String newToken = JwtUtils.generateToken(userInfo, prop.getPrivateKey(), prop.getExpire());
  71.             //写回cookie
  72.             CookieUtils.setCookie(request, response, prop.getCookieName(), newToken, prop.getCookieMaxAge(), true);
  73.             //返回用户信息
  74.             return ResponseEntity.ok(userInfo);
  75.         } catch (Exception e) {
  76.             //token以过期,或者token篡改
  77.             throw new BlException(ExceptionEnum.UN_AUTHORIZED);
  78.         }
  79.     }
  80. }

5、创建Login.vue

  1. <template>
  2.   <div>
  3.     <el-card class="box-card" style="width:30%;margin: auto;height: 550px;margin-top: 100px">
  4.       <div slot="header" class="clearfix">
  5.         <span>登录博客</span>
  6.       </div>
  7.       <div>
  8.         <el-input v-model="email" placeholder="邮箱" style="margin-top: 50px"></el-input>
  9.         <el-input v-model="password" placeholder="密码" style="margin-top: 50px"></el-input>
  10.         <el-button type="primary" @click="login" style="margin-top: 80px">登录</el-button>
  11.       </div>
  12.       <div style="float: right">
  13.         <el-button @click="register" style="margin-top: 80px">注册账号</el-button>
  14.       </div>
  15.     </el-card>
  16.   </div>
  17. </template>
  18. <script>
  19.   export default {
  20.     name: "Login",
  21.     data() {
  22.       return {
  23.         email: "",
  24.         password: "",
  25.         users: {
  26.           id: "",
  27.           name: "",
  28.           image: "",
  29.           email: "",
  30.         }
  31.       }
  32.     },
  33.     created() {//编写构造函数
  34.       this.$http.get("/verify/")
  35.         .then((res) => {
  36.           this.$router.push({path: "/"})
  37.           this.$message.success("已经登录成功请执行其他操作！");
  38.         }).catch(() => {
  39.       });
  40.     },
  41.     methods: {
  42.       login() {
  43.         this.$http.get("/accredit?email=" + this.email + "&password=" + this.password)
  44.           .then((res) => {
  45.             console.log(res.data.value);
  46.             this.$http.get("/verify/")
  47.               .then(({data}) => {
  48.                 this.users = data;
  49.                 sessionStorage.setItem('userId',this.users.id);
  50.               });
  51.             this.$message.success("登录成功！");
  52.             this.$router.push("/");
  53.           }).catch(() => {
  54.           this.$message.error("登录失败！");
  55.         });
  56.       },
  57.       register() {
  58.         this.$router.push("/Register");
  59.       },
  60.     },
  61.     watch: {
  62.       page: function () {
  63.         this.getInfo();
  64.       }
  65.     }
  66.   }
  67. </script>
  69. <style scoped>
  71. </style>

6、设置访问路径

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Article from '@/components/Article'
  5. import Write from '@/components/Write'
  6. import Login from '@/components/Login'
  8. Vue.use(Router)
  10. export default new Router({
  11.   routes: [
  12.     {
  13.       path: '/',
  14.       name: 'HelloWorld',
  15.       component: HelloWorld
  16.     },
  17.     {
  18.       path: '/Article',
  19.       name: 'Article',
  20.       component: Article
  21.     },
  22.     {
  23.       path: '/Write',
  24.       name: 'Write',
  25.       component: Write
  26.     },
  27.     {
  28.       path: '/Login',
  29.       name: 'Login',
  30.       component: Login
  31.     },
  32.   ]
  33. })

访问页面：http://localhost:8080/#/Login

五、实现发布文章的功能

1、在HelloWorld.vue 节目添加跳转写文章的功能

  1. <el-button @click="goToWrite">写文章</el-button>

  1. goToWrite() {
  2.         this.$router.push("/Write");
  3.       },

2、在Write.vue设置初始化的时候校验是否登录

没有登录跳转回登录页面

  1. created() {//编写构造函数
  2.       this.$http.get("verify/")
  3.         .then((res) => {
  4.         }).catch(() => {
  5.         this.$router.push({path: "/Login"})
  6.         this.$message.error("没有登录请登录后发布文章！");
  7.       });
  8.     },

3、实现文章保存功能

（1）修改Blog实体类用于接收参数

  1. package cn.itbluebox.springbootcsdn.domain;
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  7. import javax.persistence.Table;
  8. import javax.persistence.Transient;
  9. import java.util.Date;
  11. @Data
  12. @NoArgsConstructor
  13. @AllArgsConstructor
  14. @Table(name = "blog")
  15. public class Blog {
  16.     private Long id;              //文章id
  17.     private String title;         //文章标题
  18.     private String abstract_text;       //文章内容
  19.     private String thumbnail;       //缩略图
  20.     private Date create_time;      //创建时间
  21.     private Long like_count;              //点赞数量
  22.     private Long view_count;     //浏览量
  23.     private Long consumer_id;     //用户ID
  24.     private String type_id;       //类型
  25.     private Long blog_article_id;     //博客文章ID
  26.     @Transient
  27.     private String context;
  28.     @Transient
  29.     private Date last_update_time;      //更新时间
  30.     @Transient
  31.     private Character is_original;
  32.     @Transient //Transient声明当前字段不是数据对应的字段
  33.     private Long[] typeId;
  34. }
（2）在BlogController当中创建保存的接口

  1. @PostMapping("save")
  2.     public ResponseEntity<String> saveBlogging(
  3.             @RequestBody Blog blog,
  4.             @CookieValue("SC_TOKEN") String token,
  5.             HttpServletRequest request, HttpServletResponse response
  6.     ){
  7.         UserInfo userInfo = JwtUtils.getUserInfo(prop.getPublicKey(), token);
  8.         //刷新token，重新生成token
  9.         String newToken = JwtUtils.generateToken(userInfo, prop.getPrivateKey(), prop.getExpire());
  10.         //写回cookie
  11.         CookieUtils.setCookie(request, response, prop.getCookieName(), newToken, prop.getCookieMaxAge(), true);
  12.         //返回用户信息
  13.         blog.setConsumer_id(userInfo.getId());
  14.         String blog_code = blogService.saveBlogging(blog);
  15.         return ResponseEntity.ok(blog_code);
  16.     }
（3）在blogService和对应实现类当中创建对应的方法

  1. String saveBlogging(Blog blog);

实现类当中的方法

（4）实现BlogServiceImpl和对应的Mapper
  1. ```java
  2.  @Transactional
  3.     @Override
  4.     public String saveBlogging(Blog blog) {
  5.         //先插入博客的文章部分
  6.         long l = new IdWorker(new Random().nextInt(10), 1).nextId();
  7.         String ls = (l + "");
  8.         ls = ls.substring(5, ls.length());
  9.         BlogArticle blogArticle = new BlogArticle();
  10.         blogArticle.setId(Long.parseLong(ls));
  11.         blogArticle.setContext(blog.getContext());
  12.         blogArticle.setLast_update_time(new Date());
  13.         blogArticle.setIs_original(blog.getIs_original());
  14.         //插入博客文章的代码
  15.         int insert2 = blogArticleMapper.insertSql(blogArticle);
  16.         if (insert2 != 1) {
  17.             throw new BlException(ExceptionEnum.BLOG_SAVE_ERROR);
  18.         }
  19.         //插入博客
  20.         blog.setCreate_time(new Date());
  21.         blog.setLike_count(1L);
  22.         blog.setView_count(1L);
  23.         blog.setBlog_article_id(blogArticle.getId());
  24.         int insert1 = blogMapper.insert(blog);
  25.         if (insert1 != 1) {
  26.             throw new BlException(ExceptionEnum.BLOG_SAVE_ERROR);
  27.         }
  28.         return "success";
  29.     }

  1. @Insert("insert into blog_article  VALUES (#{id},#{context},#{last_update_time},#{is_original})")
  2.     int insertSql(BlogArticle blogArticle);

运行测试

六、实现文章搜索

1、 在首页设置文章搜索框

  1. <el-row >
  2.       <el-col :span="16" style="padding-left: 200px;padding-right: 200px;">
  3.         <div>
  4.           <el-input v-model="title" placeholder="请输入内容"></el-input>
  5.         </div>
  6.       </el-col>
  7.       <el-col :span="8">
  8.         <div>
  9.           <el-button type="primary" round @click="getInfo()"  style="margin-left: -550px;" >搜索</el-button>
  10.         </div>
  11.       </el-col>
  12.     </el-row>

输入内容

七、项目源代码

https://download.csdn.net/download/qq_44757034/85045367

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://code100.blog.csdn.net/article/details/123456044

内容来源于网络，如有侵权，请联系作者删除！

Javaxml开发语言全栈开发项目源代码

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多

    目录

    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com