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

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

转载作者：知者更新时间：2024-03-13 03:26:43

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安装

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

npm install quill           //依赖项

2、创建Write.vue

<template>

  <div style="width: 90%; background-color: #99a9bf;margin: auto;top: 0px;left: 0px">

    <div style="width:80%;background-color: white;margin: auto;">

      <div style="clear: both"></div>
      <el-input style="margin-top: 50px;width: 80%" v-model="title" placeholder="请输入文章标题"></el-input>

      <div style="text-align: left;width: 80%;margin: auto;margin-top: 30px ">
        上传文章缩略图：
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9090/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
        </el-upload>
      </div>
      <div style="clear: both"></div>
      <div style="margin-top: 20px;float:left; margin-left: 130px ">
        是否原创：
        <el-switch
          v-model="checked"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </div>
      <div style="clear: both"></div>

      <el-input style="margin-top: 50px; margin-bottom: 50px;width: 80%"
                type="textarea"
                :rows="10"
                placeholder="文章摘要"
                v-model="abstract_text">
      </el-input>
      <div style="width: 80%;margin: auto">
        <span style="text-align: left;display: block">文章内容：</span>
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          style="height: 500px"
        />
      </div>
      <el-button type="primary" @click="submit" style="margin-top:150px">提交</el-button>
    </div>

    <div style="margin-top: 100px"></div>

  </div>

</template>

<script>
  import 'quill/dist/quill.core.css'  //引入富文本
  import 'quill/dist/quill.snow.css'  //引入富文本
  import 'quill/dist/quill.bubble.css'  //引入富文本
  import {quillEditor} from 'vue-quill-editor'  //引入富文本
 
  export default {
    components: {
      quillEditor
    },
    name: "Write",
    data() {
      return {
        abstract_text: '',
        title: "",
        checked: false,
        is_original: this.checked ? "是" : "否",
        imageUrl: "",
        thumbnail: "",
        content: '<h2>请输入文章内容</h2>',
        //富文本编辑器配置
        editorOption: {},
        blogType : "",
        typeName: "选择文章类型",
        typeId : ""
      }
    },
    created() {//编写构造函数

      this.$axios.get("http://localhost:9090/verify/")
        .then((res) => {
        }).catch(() => {
        this.$router.push({path: "/Login"})
        this.$message.error("没有登录请登录后发布文章！");
      });
      //获取顶部分类信息
      this.$axios.get('http://localhost:9090/blogType/queryBlogType')
        .then(response => (
          this.blogType = response.data
        )).catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    methods: {
      submit() {
        this.$axios.post('http://localhost:9090/blogging/save', {
          title: this.title,
          abstract_text: this.abstract_text,
          thumbnail: this.thumbnail,
          context: this.content,
          is_original: this.checked ? "是" : "否",
          typeId : this.typeId,

        }).then((res) => {
          this.$router.push("/");
          this.$message.success("文章发布成功！");
        }).catch(() => {
          this.$message.error("文章发布失败！");
        });

      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.thumbnail = "http://localhost:9090/img/" + res;
      },
      selectType(typename,id) {
        this.typeName = typename;
        this.typeId = id;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

3、设置访问路径

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'default-passive-events'
import './http';
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4、访问

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

二、实现上传图片

1、实现上传图片的接口

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

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

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

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

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

上传图片成功

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

<template>

  <div style="width: 90%; background-color: #99a9bf;margin: auto;top: 0px;left: 0px">

    <div style="width:80%;background-color: white;margin: auto;">

      <div style="clear: both"></div>
      <el-input style="margin-top: 50px;width: 80%" v-model="title" placeholder="请输入文章标题"></el-input>

      <div style="text-align: left;width: 80%;margin: auto;margin-top: 30px ">
        上传文章缩略图：
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9090/blog/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" style="border-style: solid;border-radius: 15px"></i>
        </el-upload>
      </div>

      <div style="clear: both"></div>
      <div style="margin-top: 20px;float:left; margin-left: 130px ">
        是否原创：
        <el-switch
          v-model="checked"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </div>
      <div style="clear: both"></div>

      <el-input style="margin-top: 50px; margin-bottom: 50px;width: 80%"
                type="textarea"
                :rows="10"
                placeholder="文章摘要"
                v-model="abstract_text">
      </el-input>
      <div style="width: 80%;margin: auto">
        <span style="text-align: left;display: block">文章内容：</span>
        <quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          style="height: 500px"
        />
      </div>
      <el-button type="primary" @click="submit" style="margin-top:150px">提交</el-button>
    </div>

    <div style="margin-top: 100px"></div>

  </div>

</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor} from 'vue-quill-editor'

  export default {
    components: {
      quillEditor
    },
    name: "Write",
    data() {
      return {
        abstract_text: '',
        title: "",
        checked: false,
        is_original: this.checked ? "是" : "否",
        imageUrl: "",
        thumbnail: "",
        content: '<h2>请输入文章内容</h2>',
        //富文本编辑器配置
        editorOption: {},
        blogType : "",
        typeName: "选择文章类型",
        typeId : ""
      }
    },
    created() {//编写构造函数

    },
    methods: {
      submit() {
        this.$http.post('/blog/save', {
          title: this.title,
          abstract_text: this.abstract_text,
          thumbnail: this.thumbnail,
          context: this.content,
          is_original: this.checked ? "是" : "否",
          typeId : this.typeId,

        }).then((res) => {
          this.$router.push("/");
          this.$message.success("文章发布成功！");
        }).catch(() => {
          this.$message.error("文章发布失败！");
        });

      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.thumbnail = "http://localhost:9090/img/" + res;
      },
      selectType(typename,id) {
        this.typeName = typename;
        this.typeId = id;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

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

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

1、HelloWorld.vue

getInfo() {
        this.$http.get('blog/queryBlogByPage?title=' + this.title + '&page=' + this.page + '&rows=' + this.rows)
          .then(response => (
            this.info = response.data,
              this.total = this.info.total,
              this.totalPage = this.info.totalPage,
              this.items = this.info.items
          )).catch(function (error) { // 请求失败处理
          console.log(error);
        });
      },

2、Article.vue

getInfo() {
            this.$http.get('/blog/queryBlogArticleById?id=' + this.id )
              .then(response => (
                this.info = response.data,
                  this.title = this.info.title
              )).catch(function (error) { // 请求失败处理
              console.log(error);
            });
          },
          selectBlog() {
            this.page = 1;
            this.rows = 10;
            let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
            let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
            this.startBlogTime = startTime;
            this.endBlogTime = endTime;
            this.getInfo();
          },
          like(){
            this.$http.get('blog/blogLikeId?id=' + this.id );
            this.getInfo();
          },

四、实现登录功能

1、创建ConsumerService

package cn.itbluebox.springbootcsdn.service.Impl;

import cn.itbluebox.springbootcsdn.domain.Consumer;
import cn.itbluebox.springbootcsdn.enums.ExceptionEnum;
import cn.itbluebox.springbootcsdn.exception.BlException;
import cn.itbluebox.springbootcsdn.mapper.ConsumerMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional(propagation = Propagation.REQUIRED)
public class ConsumerService {

    @Autowired
    private ConsumerMapper consumerMapper;

    public Boolean checkData(String data, Integer type) {

        Consumer consumer = new Consumer();
        //判断数据类型
        switch (type) {
            case 1:
                consumer.setEmail(data);
                break;
            case 2:
                consumer.setPhone(Long.parseLong(data));
                break;
            default:
                return null;
        }
        return consumerMapper.selectCount(consumer) == 0;

    }

    public Consumer queryUser(String email, String password) {
        // 查询
        Consumer consumer = new Consumer();
        consumer.setEmail(email);
        consumer.setPassword(password);
        Consumer consumer1 = this.consumerMapper.selectOne(consumer);
        // 校验用户名
        if (consumer1 == null) {
            return null;
        }
        // 用户名密码都正确
        return consumer1;
    }

    public String saveConsumer(Consumer consumer) {
        int insert = consumerMapper.insert(consumer);
        if (insert != 1) {
            throw new BlException(ExceptionEnum.CONSUMER_SAVE_ERROR);
        }
        return insert + "";
    }

    public Consumer queryConsumerById(Long id) {
        Consumer consumer = new Consumer();
        consumer.setId(id);
        Consumer consumer1 = consumerMapper.selectOne(consumer);
        consumer1.setPassword("");
        return consumer1;
    }
}

2、创建AuthService

package cn.itbluebox.springbootcsdn.properties;

import cn.itbluebox.springbootcsdn.utils.RsaUtils;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.context.properties.ConfigurationProperties;

import javax.annotation.PostConstruct;
import java.io.File;
import java.security.PrivateKey;
import java.security.PublicKey;

@ConfigurationProperties(prefix = "sc.jwt")
@Data
@Slf4j
public class JwtProperties {

    private String secret; // 密钥

    private String pubKeyPath;// 公钥

    private String priKeyPath;// 私钥

    private int expire;// token过期时间

    private PublicKey publicKey; // 公钥

    private PrivateKey privateKey; // 私钥

    private String cookieName;

    private Integer cookieMaxAge;

//    private static final Logger logger = LoggerFactory.getLogger(JwtProperties.class);

    /**
     * @PostContruct：在构造方法执行之后执行该方法
     */
    @PostConstruct
    public void init(){
        try {
            File pubKey = new File(pubKeyPath);
            File priKey = new File(priKeyPath);
            if (!pubKey.exists() || !priKey.exists()) {
                // 生成公钥和私钥
                RsaUtils.generateKey(pubKeyPath, priKeyPath, secret);
            }
            // 获取公钥和私钥
            this.publicKey = RsaUtils.getPublicKey(pubKeyPath);
            this.privateKey = RsaUtils.getPrivateKey(priKeyPath);
        } catch (Exception e) {
            log.error("初始化公钥和私钥失败！", e);
            throw new RuntimeException();
        }
    }

}

3、创建AuthController

package cn.itbluebox.springbootcsdn.web;

import cn.itbluebox.springbootcsdn.enums.ExceptionEnum;
import cn.itbluebox.springbootcsdn.exception.BlException;
import cn.itbluebox.springbootcsdn.properties.JwtProperties;
import cn.itbluebox.springbootcsdn.service.Impl.AuthService;
import cn.itbluebox.springbootcsdn.utils.CookieUtils;
import cn.itbluebox.springbootcsdn.utils.JwtUtils;
import cn.itbluebox.springbootcsdn.utils.UserInfo;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@RestController
@EnableConfigurationProperties(JwtProperties.class)
@Slf4j
public class AuthController {

    @Autowired
    private AuthService authService;

    @Autowired
    private JwtProperties prop;

    /**
     * 登录授权
     *
     * @return
     */
    @GetMapping("accredit")
    public ResponseEntity<Cookie> authentication(
            @RequestParam("email") String email,
            @RequestParam("password") String password,
            HttpServletRequest request,
            HttpServletResponse response) {
        // 登录校验
        System.out.println(" 登录校验 登录校验 登录校验 登录校验");
        String token = authService.authentication(email, password);
        if (StringUtils.isBlank(token)) {
            log.info("用户授权失败");
            return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
        }
        Cookie cookie = CookieUtils.setGetCookie(request, response, prop.getCookieName(), token, prop.getCookieMaxAge(), true);
        return ResponseEntity.ok(cookie);
    }

    @GetMapping("verify")
    public ResponseEntity<UserInfo> verify(
            @CookieValue("SC_TOKEN") String token,
            HttpServletRequest request,
            HttpServletResponse response
    ) {
        //解析token
        System.out.println("解析token解析token解析token解析token解析token");
        try {
            UserInfo userInfo = JwtUtils.getUserInfo(prop.getPublicKey(), token);

            //刷新token，重新生成token
            String newToken = JwtUtils.generateToken(userInfo, prop.getPrivateKey(), prop.getExpire());
            //写回cookie
            CookieUtils.setCookie(request, response, prop.getCookieName(), newToken, prop.getCookieMaxAge(), true);
            //返回用户信息
            return ResponseEntity.ok(userInfo);
        } catch (Exception e) {
            //token以过期,或者token篡改
            throw new BlException(ExceptionEnum.UN_AUTHORIZED);
        }
    }
}

5、创建Login.vue

<template>
  <div>
    <el-card class="box-card" style="width:30%;margin: auto;height: 550px;margin-top: 100px">
      <div slot="header" class="clearfix">
        <span>登录博客</span>
      </div>
      <div>
        <el-input v-model="email" placeholder="邮箱" style="margin-top: 50px"></el-input>
        <el-input v-model="password" placeholder="密码" style="margin-top: 50px"></el-input>
        <el-button type="primary" @click="login" style="margin-top: 80px">登录</el-button>
      </div>
      <div style="float: right">
        <el-button @click="register" style="margin-top: 80px">注册账号</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    name: "Login",
    data() {
      return {
        email: "",
        password: "",
        users: {
          id: "",
          name: "",
          image: "",
          email: "",
        }
      }
    },
    created() {//编写构造函数
      this.$http.get("/verify/")
        .then((res) => {
          this.$router.push({path: "/"})
          this.$message.success("已经登录成功请执行其他操作！");
        }).catch(() => {
      });
    },
    methods: {
      login() {
        this.$http.get("/accredit?email=" + this.email + "&password=" + this.password)
          .then((res) => {
            console.log(res.data.value);
            this.$http.get("/verify/")
              .then(({data}) => {
                this.users = data;
                sessionStorage.setItem('userId',this.users.id);
              });
            this.$message.success("登录成功！");
            this.$router.push("/");
          }).catch(() => {
          this.$message.error("登录失败！");
        });
      },
      register() {
        this.$router.push("/Register");
      },
    },
    watch: {
      page: function () {
        this.getInfo();
      }
    }
  }
</script>

<style scoped>

</style>

6、设置访问路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Article from '@/components/Article'
import Write from '@/components/Write'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Article',
      name: 'Article',
      component: Article
    },
    {
      path: '/Write',
      name: 'Write',
      component: Write
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
  ]
})

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

五、实现发布文章的功能

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

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

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

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

没有登录跳转回登录页面

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

3、实现文章保存功能

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

package cn.itbluebox.springbootcsdn.domain;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import javax.persistence.Table;
import javax.persistence.Transient;
import java.util.Date;

@Data
@NoArgsConstructor
@AllArgsConstructor
@Table(name = "blog")
public class Blog {
    private Long id;              //文章id
    private String title;         //文章标题
    private String abstract_text;       //文章内容
    private String thumbnail;       //缩略图
    private Date create_time;      //创建时间
    private Long like_count;              //点赞数量
    private Long view_count;     //浏览量
    private Long consumer_id;     //用户ID
    private String type_id;       //类型
    private Long blog_article_id;     //博客文章ID
    @Transient
    private String context;
    @Transient
    private Date last_update_time;      //更新时间
    @Transient
    private Character is_original;
    @Transient //Transient声明当前字段不是数据对应的字段
    private Long[] typeId;
}

（2）在BlogController当中创建保存的接口

@PostMapping("save")
    public ResponseEntity<String> saveBlogging(
            @RequestBody Blog blog,
            @CookieValue("SC_TOKEN") String token,
            HttpServletRequest request, HttpServletResponse response
    ){
        UserInfo userInfo = JwtUtils.getUserInfo(prop.getPublicKey(), token);
        //刷新token，重新生成token
        String newToken = JwtUtils.generateToken(userInfo, prop.getPrivateKey(), prop.getExpire());
        //写回cookie
        CookieUtils.setCookie(request, response, prop.getCookieName(), newToken, prop.getCookieMaxAge(), true);
        //返回用户信息
        blog.setConsumer_id(userInfo.getId());
        String blog_code = blogService.saveBlogging(blog);
        return ResponseEntity.ok(blog_code);
    }

（3）在blogService和对应实现类当中创建对应的方法

String saveBlogging(Blog blog);

实现类当中的方法

（4）实现BlogServiceImpl和对应的Mapper

```java
 @Transactional
    @Override
    public String saveBlogging(Blog blog) {
        //先插入博客的文章部分
        long l = new IdWorker(new Random().nextInt(10), 1).nextId();
        String ls = (l + "");
        ls = ls.substring(5, ls.length());
        BlogArticle blogArticle = new BlogArticle();
        blogArticle.setId(Long.parseLong(ls));
        blogArticle.setContext(blog.getContext());
        blogArticle.setLast_update_time(new Date());
        blogArticle.setIs_original(blog.getIs_original());
        //插入博客文章的代码
        int insert2 = blogArticleMapper.insertSql(blogArticle);
        if (insert2 != 1) {
            throw new BlException(ExceptionEnum.BLOG_SAVE_ERROR);
        }
        //插入博客
        blog.setCreate_time(new Date());
        blog.setLike_count(1L);
        blog.setView_count(1L);
        blog.setBlog_article_id(blogArticle.getId());
        int insert1 = blogMapper.insert(blog);
        if (insert1 != 1) {
            throw new BlException(ExceptionEnum.BLOG_SAVE_ERROR);
        }
        return "success";
    }

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

运行测试

六、实现文章搜索

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

<el-row >
      <el-col :span="16" style="padding-left: 200px;padding-right: 200px;">
        <div>
          <el-input v-model="title" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-button type="primary" round @click="getInfo()"  style="margin-left: -550px;" >搜索</el-button>
        </div>
      </el-col>
    </el-row>

输入内容

七、项目源代码

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

文章推荐：移动盒子问题

文章推荐： tensorrt动态输入分辨率尺寸

文章推荐： Qt—对象树与拥有权

jquery-ui - Angular-UI 从 ui-date 中的日期减去一天
情况我想使用 ui-date 在我的应用程序中设置/编辑日期。我使用最新稳定版本的 Angular、Angular-UI、JQuery-UI 等。问题一旦使用日期选择器选择了日期，我的模型中的日期将
jquery-ui - 触发 jQuery UI 事件 : ui-selectable
编辑: jQuery UI 可选择小部件内置了一个回调，stop，我需要知道如何以编程方式触发此事件。 (措辞不佳)我已将事件监听器附加到 jQuery UI Selectable Widget 。如
How to use Tailwind UI (headless ui) components with Next JS server components?(如何将TailWind UI(Headless UI)组件与Next JS服务器组件配合使用？)
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。。默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的
How to use Tailwind UI (headless ui) components with Next JS server components?(如何将TailWind UI(Headless UI)组件与Next JS服务器组件配合使用？)
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。。默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的
jquery-ui - jQuery UI 主题冲突 : SlickGrid and jQuery UI Tabs
我正在尝试应用这个 SlickGrid 示例: http://mleibman.github.com/SlickGrid/examples/example4-model.html 到我自己的网络项目。
swagger-ui - 如何在 Swagger-ui SpringDoc open ui 上对模式进行排序
我想整理我的 Schemas为我的实体类生成，DTO 类位于 Springdoc ui . 我可以对 tags 进行排序和 operations通过以下配置 yml文件，但我的模式不是按排序顺序排列的
angular-ui-router - UI-ROUTER - 阻止 ui-sref 改变状态
有谁知道阻止 ui-sref 重新加载状态的方法吗？我无法通过“$stateChangeStart”事件执行此操作，因为 ui-sref 仅更改参数而不更改状态名称。我的左边是书单，左边是书的详细
jquery-ui - 模态 ui 对话框内的 jquery UI 自动完成 - 建议未显示？
我正在 jquery ui 对话框中使用 jquery ui 自动完成小部件。当我输入搜索文本时，文本框缩进(ui-autocomplet-loading)但不显示任何建议。 var availabl
kendo-ui - Kendo UI MVVM 与 Kendo UI 拖放
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但我很难找到如何将数据从 draggable 对象中删除。我的代码是这样的...... var viewMode
kendo-ui - Kendo UI Core 与 Kendo UI Web
Kendo UI Web 和 Kendo UI Core 之间有什么区别 https://www.nuget.org/packages/KendoUIWeb http://www.nuget.org/
kendo-ui - Kendo UI MVVM 与 Kendo UI 拖放
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但是我很难找到如何从 draggable 对象中删除数据。我的代码是这样的…… var viewModel =
angularjs - Angular UI - UI-Router - 在子 ui-view 上传递数据和调用函数
使用 Angular JS - UI 路由器，我需要从我的父 View project.details 到我的 subview project.details.tasks 进行通信。我的 subvie
kendo-ui - Kendo UI Flatcolorpicker 在 Kendo UI 窗口中无法正确呈现
KendoUI 版本 2013.3.1119使用 Kendo MVVM 我有一个我构建的颜色选择器，它使用平面颜色选择器和使用调色板的颜色选择器。它们都可以正常运行，但平面颜色选择器的布局已关闭， s
c# - 如何从非 UI 线程获取 UI SynchronizationContext 并且没有表单或 UI 创建的任何对象
我在非 UI 线程上，我需要创建并显示一个 SaveDialog。但是当我尝试显示它时:.ShowDialog() 我得到: "An unhandled exception of type 'Syst
css - 为什么 .ui-widget 匹配 .ui-widget .ui-widget
我正在试验 jquery-ui 并查看和克隆一些示例。在一个示例(自动完成的组合框)中，我看到一个带有 ui-widget 类的 anchor (a) 元素，它与包含的 css 文件中的 .ui-wi
angular - 类型 'Observable>' 不可分配给类型 'Observable' 。类型 'UI[] | Promise' 不可分配给类型 'UI[]'
我需要返回一个 UI 列表，我用这个方法: getList(): Observable { return this.httpClient.get("/api/listui").pipe
angular-ui-bootstrap - ui-grid 在 angular-ui-tab 中消失
我有 ui-grids在 angular-ui-tabs ，它们位于 ng-if 中以避免呈现问题。如果有更多数据并且网格进入滚动模式，则单击选项卡时数据会完全消失。我相信这是一个 ui-grids-
reactjs - material-ui lab@material-ui/lab/和material-ui core中组件的区别
这似乎是一个通用的问题，与其他几个 React 开源框架相比，我真的很喜欢 Material ui 的可扩展性。问题 “@material-ui/core”和“@material-ui/lab”中的
javascript - Angular UI Router - 根据另一个 ui-view 更改子菜单 ui-view
我有一个根页面(index.html)，带有侧边栏(“菜单”)和主要内容 div(“主”)，因此有两个 ui-view div - 一个称为“菜单”，一个称为“主”。当主要内容区域有网站列表 (/s
jquery-ui - 如何在 Angular 中从一种 ui-sortable 迁移到另一种 ui-sortable？
有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。如何在两

知者

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

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

1、npm安装

2、创建Write.vue

3、设置访问路径

4、访问

二、实现上传图片

1、实现上传图片的接口

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

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

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

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

1、HelloWorld.vue

2、Article.vue

四、实现登录功能

1、创建ConsumerService

2、创建AuthService

3、创建AuthController

5、创建Login.vue

6、设置访问路径

五、实现发布文章的功能

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

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

3、实现文章保存功能

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

（2）在BlogController当中创建保存的接口

（3）在blogService和对应实现类当中创建对应的方法

（4）实现BlogServiceImpl和对应的Mapper

六、实现文章搜索

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

七、项目源代码

首页

博学

6Ren·AI

商城

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

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

1、npm安装

2、创建Write.vue

3、设置访问路径

4、访问

二、实现上传图片

1、实现上传图片的接口

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

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

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

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

1、HelloWorld.vue

2、Article.vue

四、实现登录功能

1、创建ConsumerService

2、创建AuthService

3、创建AuthController

5、创建Login.vue

6、设置访问路径

五、实现发布文章的功能

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

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

3、实现文章保存功能

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

（2）在BlogController当中创建保存的接口

（3）在blogService和对应实现类当中创建对应的方法

（4）实现BlogServiceImpl和对应的Mapper

六、实现文章搜索

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

七、项目源代码

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

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