本人前端爛，文章展示部分現在還弄的不好。
效果：

很想實現點擊查看詳情然后進入查看具體的文章內容，但還不知道怎么弄，有知道的兄弟可以教我一下。

首先npm下載：
cnpm install vue-quill-editor
發表日志模塊：

<template><div class="nn"><p id="p2" style="background-color:red;"><Icon type="md-paw" />發表長日志</p><el-form ref="form" :model="form" label-width="80px"><el-form-item label="標題"><Icon type="md-water" /><el-input v-model="form.title"></el-input></el-form-item><el-form-item label="描述"><Icon type="md-text" /><el-input v-model="form.description"></el-input></el-form-item><el-form-item label="正文" style="color: #bd2c00;font-size: 10px"><Icon type="md-walk" /><quill-editorref="myQuillEditor"class="editor"v-model="form.content":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@ready="onEditorReady($event)"/></el-form-item><Button type="primary" shape="circle" @click="submit"><Icon type="md-checkbox" />提交</Button></el-form></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' import axios from 'axios'export default {components: { quillEditor },props: {},name: "About",data() {return {form: {title: '',description: '',content: '',},editorOption: {modules: {toolbar: [['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下劃線，刪除線['blockquote', 'code-block'], //引用，代碼塊[{ header: 1 }, { header: 2 }], // 標題，鍵值對的形式；1、2表示字體大小[{ list: 'ordered' }, { list: 'bullet' }], //列表[{ script: 'sub' }, { script: 'super' }], // 上下標[{ indent: '-1' }, { indent: '+1' }], // 縮進[{ direction: 'rtl' }], // 文本方向[{ size: ['small', false, 'large', 'huge'] }], // 字體大小[{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級標題[{ color: [] }, { background: [] }], // 字體顏色，字體背景顏色[{ font: [] }], //字體[{ align: [] }], //對齊方式['clean'], //清除字體樣式// ['image', 'video'], //上傳圖片、上傳視頻],},theme: 'snow',},}},methods:{submit() {if (!this.form.title) {this.$message('請輸入標題')}if (!this.form.description) {this.$message('請輸入描述')}if (!this.form.content) {this.$message('請輸入正文')}this.$refs.form.validate(async valid => {const {data: res} = await this.$http.post("addarticle", this.form);if (res != "ok") {return this.$message.error("操作失敗！！！");}this.$message.success("操作成功！！！");})}, },} </script><style scoped>#p2{font-style:italic;color: #03FCA1; margin-left: 440px; height: 70px; width: 100px} .editor {height: 500px; } .btn {margin-top: 100px; } .nn{background-color: #b2dba1; } </style>

文章詳情：

<template><div class=""><h1 style="margin-left: 300px"><Icon type="md-bookmarks" />文章詳情</h1><div><Icon type="md-bookmarks" />{{total}}條</div><el-col v-for="(item, index) in detail" :key="index" :span="4" style="min-width:250px"><div class="grid-content bg-purple"><el-card class="box-card"><div class="title" style="padding: 14px;"><Icon type="md-cube" />標題{{item.title}}</div><div class="des"><Icon type="ios-fastforward" />描述{{ item.description }}</div><Icon type="ios-ice-cream-outline" />內容：<div class="con" v-html="item.content"></div><div>{{look[index]}}</div><el-button @click="active(index)">查看詳情</el-button><div>{{look[index]}}</div><div class="time" style="color: #DD4A68"><Icon type="logo-octocat" />創建時間：{{ item.createdatetime }}</div></el-card></div></el-col></div> </template><script> export default { name: "Detail",data() {return {look:['0','0','0'],total:'',detail: [],pagination: { //分頁后的留言列表current: 1, //當前頁total: null, //記錄條數size: 10 //每頁條數},}},created() {this.getMsg()},methods: {handleSizeChange(newSize) {this.queryInfo.pageSize = newSize;this.getMsg(); // 數據發生改變重新申請數據},// 監聽pageNum改變的事件handleCurrentChange(newPage) {this.queryInfo.pageNum = newPage;this.getMsg(); // 數據發生改變重新申請數據},async getMsg() {const { data: res } = await this.$http.get("AllPage");console.log(res.data)this.detail = res.data; // 將返回數據賦值this.total = res.numbers; // 總個數},active(index){console.log(index)this.look[index]='1'}} } </script><style scoped> .title {font-weight: bold;font-size: 16px;text-align: left;margin-bottom: 10px; } .des {font-size: 14px;text-align: left;margin-bottom: 10px; } .con {font-size: 14px;text-align: left;margin-bottom: 10px; } .time {font-size: 14px;text-align: left; }</style>

后端：

DROP TABLE IF EXISTS `t_article`; CREATE TABLE `t_article` (`Id` int(11) NOT NULL AUTO_INCREMENT,`title` varchar(255) DEFAULT NULL,`description` varchar(255) DEFAULT NULL,`content` varchar(4550) DEFAULT NULL,`createdatetime` timestamp NULL DEFAULT NULL,PRIMARY KEY (`Id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Java文件：
Controller

@RestController@CrossOrigin public class ArticleEditController {@Autowired private ArticleService articleService;@ApiOperation(value="添加文章")@PostMapping("/addarticle")public String addarticle(@RequestBody Article vo){System.out.println("添加文字");try{ articleService.insert(vo);ApiResult apiResultHandler = new ApiResult();apiResultHandler.setCode(200);return "ok";}catch (Exception e){e.printStackTrace();}return "no";}@PostMapping("/loadPage")public Object loadPage(String title){System.out.println("按照內容查找文章");List<Article>articles = articleService.findByCondit(title);HashMap<String, Object> res = new HashMap<>();int numbers = articles.size();res.put("numbers",numbers);res.put("data",articles);String users_json = JSON.toJSONString(res);return users_json;}@GetMapping("/AllPage")public Object AllPage(QueryInfo queryInfo){System.out.println("查所有文章");ApiResult apiResult;System.out.println(queryInfo);int numbers = articleService.findAll().size();// 獲取數據總數int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();// Page<Article> articlePage = new Page<>(page,size);List<Article> all = articleService.findAll();apiResult = ApiResultHandler.buildApiResult(200, "請求成功！", all);HashMap<String, Object> res = new HashMap<>(); ;res.put("numbers",numbers);res.put("data",all);return res;}}

實體類：

@Data @ApiModel(value="發布文章", description="發布文章") public class Article implements Serializable {private static final long serialVersionUID = 1L;private int Id;private String title;private String description;private String content;@JsonFormat(pattern="yyyy-MM-dd HH:mm", timezone="GMT+8")private Timestamp createdatetime;@Overridepublic String toString() {return "Article [id=" + Id + ", title=" + title + ", description=" + description + ", content=" + content+ ", articletype=" + ", createdatetime=" + createdatetime + "]";} }

用注解的方式寫Sql：

package com.naughty.userlogin02.dao;import com.naughty.userlogin02.bean.Article; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Options; import org.apache.ibatis.annotations.Select; import org.springframework.stereotype.Repository;import java.util.List;@Mapper public interface ArticleDao {@Options(useGeneratedKeys = true,keyProperty = "Id")@Insert("insert into t_article(title,description,content,createdatetime)\n" +" values (#{title},#{description},#{content},#{createdatetime}) ") void save(Article vo);@Select("select title,description,content,createdatetime from t_article where title=#{title}")List<Article> findByCondit(String title);@Select("select title,description,content,createdatetime from t_article")List<Article> findAll();}

service:

import java.util.List;public interface ArticleService {void insert(Article vo);List<Article> findByCondit(String title);List<Article> findAll();} import java.util.Date; import java.util.List;@Service @Transactional public class ArticleServiceImpl implements ArticleService {@Autowiredprivate ArticleDao articleDao;@Overridepublic void insert(Article vo) {vo.setCreatedatetime(new Timestamp(new Date().getTime()));articleDao.save(vo);}@Overridepublic List<Article> findAll(){List<Article> articles2 = articleDao.findAll();return articles2;};@Overridepublic List<Article> findByCondit(String title) {List<Article> articles = articleDao.findByCondit(title);return articles;} }

注：關于注解@Transactional
事務管理對于企業應用來說是至關重要的，即使出現異常情況，它也可以保證數據的一致性。
Spring Framework對事務管理提供了一致的抽象，其特點如下：

為不同的事務API提供一致的編程模型，比如JTA(Java Transaction API), JDBC, Hibernate, JPA(Java Persistence API和JDO(Java Data Objects)
支持聲明式事務管理，特別是基于注解的聲明式事務管理，簡單易用
提供比其他事務API如JTA更簡單的編程式事務管理API
與spring數據訪問抽象的完美集成
事務管理方式

spring支持編程式事務管理和聲明式事務管理兩種方式。

編程式事務管理使用TransactionTemplate或者直接使用底層的PlatformTransactionManager。對于編程式事務管理，spring推薦使用TransactionTemplate。

聲明式事務管理建立在AOP之上的。其本質是對方法前后進行攔截，然后在目標方法開始之前創建或者加入一個事務，在執行完目標方法之后根據執行情況提交或者回滾事務。聲明式事務最大的優點就是不需要通過編程的方式管理事務，這樣就不需要在業務邏輯代碼中摻雜事務管理的代碼，只需在配置文件中做相關的事務規則聲明(或通過基于@Transactional注解的方式)，便可以將事務規則應用到業務邏輯中。

顯然聲明式事務管理要優于編程式事務管理，這正是spring倡導的非侵入式的開發方式。聲明式事務管理使業務代碼不受污染，一個普通的POJO對象，只要加上注解就可以獲得完全的事務支持。和編程式事務相比，聲明式事務唯一不足地方是，后者的最細粒度只能作用到方法級別，無法做到像編程式事務那樣可以作用到代碼塊級別。但是即便有這樣的需求，也存在很多變通的方法，比如，可以將需要進行事務管理的代碼塊獨立為方法等等。

聲明式事務管理也有兩種常用的方式，一種是基于tx和aop名字空間的xml配置文件，另一種就是基于@Transactional注解。顯然基于注解的方式更簡單易用，更清爽。

總結

以上是生活随笔為你收集整理的【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。