关键词：
| 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: '',网站开发（周二）：项目需求分析
...逐步向外扩展相关联的数据信息，由文章正文页可知，一篇文章有标题、分类、作者、浏览次数、发 查看详情
java之springboot入门到精通，springboot项目部署jar包方式，war包方式（一篇文章精通系列）(代码片段)
SpringBoot项目开发完毕后，支持两种方式部署到服务器:SpringBoot项目部署【jar包方式，war包方式】一、创建SpringBoot工程1、创建工程2、创建UserController二、jar包(官方推荐)1、打包2、运行jar包三、war包1、修改pom.xml的打包方式... 查看详情
java之mavenidea版入门到精通（一篇文章精通系列）(代码片段)
Java之Maven【IDEA版】入门到精通一、Maven简介1、传统项目管理状态分析2、Maven是什么3、Maven的作用二、下载与安装1、Maven下载2、Maven安装三、Maven基础概念1、仓库2、坐标3、本地仓库配置4、Maven阿里云(Aliyun)仓库5、全局setting与用... 查看详情
java之mavenidea版入门到精通（一篇文章精通系列）(代码片段)
Java之Maven【IDEA版】入门到精通一、Maven简介1、传统项目管理状态分析2、Maven是什么3、Maven的作用二、下载与安装1、Maven下载2、Maven安装三、Maven基础概念1、仓库2、坐标3、本地仓库配置4、Maven阿里云(Aliyun)仓库5、全局setting与用... 查看详情
一篇文章让你精通：java集合讲解（八，集合的解析与总结）
一，集合初步认识https://blog.csdn.net/weixin_47514459/article/details/120957581二，List中ArrayList讲解https://blog.csdn.net/weixin_47514459/article/details/120978680三，List中LinkList讲解https://blog.csdn.net/weixin_47514459/article/details/121046624 四，... 查看详情
博客主题simplememory与本地markdown文件直接上传
...的操蛋，广告倒不是最重要的，最难受的是，那上面的一篇文章会被一百个人转载一千次，最最离谱的是这篇文章本身就有一万个坑。相较于CSDN，博客园显然更加的简洁、干净，上面的随意转载情况没那么严重，文章内容的可... 查看详情
阅读记录（12月）
...文章的地址，可点击查看原网页。由于内容很多，放在一篇文章中显得太长，故每个月一篇。2016-12-30C++内嵌第三方EXE程序窗口C++内嵌第三方EXE程序窗口-笨师兄-博客频道-CSDN.NETVC可执行程序中打开另一个可执行程序并将其嵌入到... 查看详情
java刷csdn博客流量的思路
...三个不同的ip地址。并且在某段时间内，同以ip访问同一篇文章，只能算是一次访问量。同一ip在某个时间段内访问同一博客不同的文章，被访问到的文章次数+1。知道上诉简单的原理之后，接下来就想解决的办法了。首先，准备... 查看详情
精通系列）安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用(代码片段)
...录Java之Gradle【IDEA版】入门到精通（上）（一篇文章精通系列）【安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用】Java之Gradle【IDEA版】入门到精通（下）（一篇文章精... 查看详情
精通系列）安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用(代码片段)
...录Java之Gradle【IDEA版】入门到精通（上）（一篇文章精通系列）【安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用】Java之Gradle【IDEA版】入门到精通（下）（一篇文章精... 查看详情
精通系列）安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用(代码片段)
...录Java之Gradle【IDEA版】入门到精通（上）（一篇文章精通系列）【安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用】Java之Gradle【IDEA版】入门到精通（下）（一篇文章精... 查看详情
精通系列）创建springboot项目+基于ssm多模块项目案例+微服务实战(代码片段)
...录Java之Gradle【IDEA版】入门到精通（上）（一篇文章精通系列）【安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用】Java之Gradle【IDEA版】入门到精通（下）（一篇文章精... 查看详情
精通系列）创建springboot项目+基于ssm多模块项目案例+微服务实战(代码片段)
...录Java之Gradle【IDEA版】入门到精通（上）（一篇文章精通系列）【安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用】Java之Gradle【IDEA版】入门到精通（下）（一篇文章精... 查看详情
精通系列）创建springboot项目+基于ssm多模块项目案例+微服务实战(代码片段)
...录Java之Gradle【IDEA版】入门到精通（上）（一篇文章精通系列）【安装+基本使用+项目创建+项目部署+文件操作+依赖管理+插件使用】Java之Gradle【IDEA版】入门到精通（下）（一篇文章精... 查看详情
小技巧-怎样让你的csdn博客被更多人关注？
前言众所周知，想要自己的博客文章能够被更多人阅读、受益，最重要的当然是文章的内容了。但是除此以外，还有没有一些小技巧增加自己文章的曝光率呢？答案是肯定的！介绍答案是——借助百度、谷歌... 查看详情
csdn博客系统
...之间相互关注，当被关注放发布文章时，会将这篇文章推送给关注方，因为本身就是一个小项目，在实现方面就选择了适合小规模场景的RabbitMQ，为了保证系统的可用性，搭建了MQ镜像集群，HAmode设为All... 查看详情
csdn截止目前为止有多少的博客专家以及比例人数？
...数目，搜索不出来；于是就在CSDN博客里面查了一篇文章。截止到2017年3月8日，全网总的博客专家是：1387人。记得2011年CSDN数据泄露的时候，注册用户已经达到600万左右，经过6年的历程，保守估计CSDN的... 查看详情
如何csdn复制他人博客文章到自己博客下
...</p>CSDN是中文第一大互联网技术网站,上面有很多好的文章,有时候需要复制别人的文章到自己的文章下进行修改重新发布,这要怎样做呢?工具/原料一篇喜欢的博客属于自己的csdn账号chrome浏览器方法/步骤首先,在自己喜欢的博... 查看详情