Springboot＋Vue實(shí)現(xiàn)發(fā)表文章功能

@RestController@RequestMapping("/article")@CrossOriginpublic class ArticleCtrler {  @Autowired??private?ArticleService?articleService;  @ApiOperation(value="添加文章")  @PostMapping("/addarticle")  public Object addarticle(@Valid Article vo)  {    try     {??????articleService.insert(vo);?      return Result.success(null);    }    catch (Exception e)     {      e.printStackTrace();    }     return Result.error(CodeMsg.SERVER_ERROR);??}  @PostMapping("/loadPage")  @ApiOperation(value="文章分頁(yè)列表")  public Object loadPage(@Valid Article_Condit vo)  {    try     {??????PageInfo
?loadPage?=?articleService.loadPage(vo);      return Result.success(loadPage);    }    catch (Exception e)     {      e.printStackTrace();    }     return Result.error(CodeMsg.SERVER_ERROR);  }}

public interface ArticleService {??void?insert(Article?vo);  PageInfo
 loadPage(Article_Condit vo);}

@Service@Transactionalpublic class ArticleServiceImpl implements ArticleService {  @Autowired  private ArticleDao articleDao;  @Override  public void insert(Article vo) {    vo.setCreatedatetime(new Timestamp(new Date().getTime()));    vo.setCreateuserid("system");    articleDao.save(vo);??}  @Override  public PageInfo
 loadPage(Article_Condit vo) {????PageHelper.startPage(vo.getPageIndex()==null?0:vo.getPageIndex(),?vo.getPageSize()==null?0:vo.getPageSize());????List
?findByCondit?=?articleDao.findByCondit(vo);    return new PageInfo
(findByCondit);??}}

@Repositorypublic interface ArticleDao {??void?save(Article?vo);  List
 findByCondit(Article_Condit vo);}

@ApiModel(value="發(fā)布文章", description="發(fā)布文章")public class Article implements Serializable{??private?static?final?long?serialVersionUID?=?1L;  @ApiModelProperty(value = "文章編號(hào)",hidden = true)??private?Long?id;  @ApiModelProperty(value = "文章標(biāo)題",required = true)  @NotBlank(message = "標(biāo)題不能為空")??private?String?title;  @ApiModelProperty(value = "文章描述",required = true)  @NotBlank(message = "文章描述不能為空")??private?String?description;  @ApiModelProperty(value = "文章內(nèi)容",required = true)  @NotBlank(message = "文章內(nèi)容不能為空")??private?String?content;  @ApiModelProperty(value = "文章類(lèi)型",required = false)??private?String?articletype;  @ApiModelProperty(value = "創(chuàng)建時(shí)間",hidden = true)  @JsonFormat(pattern="yyyy-MM-dd HH:mm", timezone="GMT+8")??private?Timestamp?createdatetime;  @ApiModelProperty(value = "創(chuàng)建人",hidden = true)??private?String?createuserid;  public Long getId() {    return id;??}  public void setId(Long id) {    this.id = id;??}  public String getTitle() {    return title;??}  public void setTitle(String title) {    this.title = title;??}  public String getDescription() {    return description;??}  public void setDescription(String description) {    this.description = description;??}  public String getContent() {    return content;??}  public void setContent(String content) {    this.content = content;??}  public Timestamp getCreatedatetime() {    return createdatetime;??}  public void setCreatedatetime(Timestamp createdatetime) {    this.createdatetime = createdatetime;??}  public String getCreateuserid() {    return createuserid;??}  public void setCreateuserid(String createuserid) {    this.createuserid = createuserid;??}  public String getArticletype() {    return articletype;??}  public void setArticletype(String articletype) {    this.articletype = articletype;??}  @Override  public String toString() {    return "Article [id=" + id + ", title=" + title + ", description=" + description + ", content=" + content        + ", articletype=" + articletype + ", createdatetime=" + createdatetime + ", createuserid="        + createuserid + "]";??}}

<mapper namespace="com.yxyz.dao.ArticleDao">  <insert id="save" parameterType="com.yxyz.vo.Article">    insert       into t_article(title,description,content,articletype,createdatetime,createuserid)    values    (      #{title,jdbcType=VARCHAR},#{description,jdbcType=VARCHAR},#{content,jdbcType=LONGVARCHAR},      #{articletype,jdbcType=VARCHAR},#{createdatetime,jdbcType=TIMESTAMP},#{createuserid,jdbcType=VARCHAR}    )  insert>  <select id="findByCondit" parameterType="com.yxyz.condit.Article_Condit" resultType="com.yxyz.vo.Article">    select t1.* from t_article t1 where 1=1    <if test="articletype != null and articletype !=''">      and t1.articletype like concat('%',#{articletype},'%')    if>    <if test="createuserid != null and createuserid !=''">      and t1.createuserid = #{createuserid}    if>  select>mapper>

import Vue from 'vue'import App from './App.vue'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)Vue.config.productionTip = false
new Vue({  router,  render: (h) => h(App),}).$mount('#app')

<template>  <div class>    <h3>編輯頁(yè)面h3>    <el-form ref="form" :model="form" label-width="80px">      <el-form-item label="標(biāo)題">        <el-input v-model="form.title">el-input>      el-form-item>      <el-form-item label="描述">        <el-input v-model="form.description">el-input>      el-form-item>      <el-form-item label="正文">        <quill-editor          ref="myQuillEditor"          class="editor"          v-model="form.content"          :options="editorOption"          @blur="onEditorBlur($event)"          @focus="onEditorFocus($event)"          @ready="onEditorReady($event)"        />      el-form-item>      <el-button class="btn" block type="primary" @click="submit">提交el-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: {},  data() {    return {      form: {        title: '',        description: '',        content: '',      },      editorOption: {        modules: {          toolbar: [            ['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下劃線(xiàn)，刪除線(xiàn)            ['blockquote', 'code-block'], //引用，代碼塊
            [{ header: 1 }, { header: 2 }], // 標(biāo)題，鍵值對(duì)的形式；1、2表示字體大小            [{ list: 'ordered' }, { list: 'bullet' }], //列表            [{ script: 'sub' }, { script: 'super' }], // 上下標(biāo)            [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['small', false, 'large', 'huge'] }], // 字體大小            [{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級(jí)標(biāo)題
            [{ color: [] }, { background: [] }], // 字體顏色，字體背景顏色            [{ font: [] }], //字體            [{ align: [] }], //對(duì)齊方式
            ['clean'], //清除字體樣式            // ['image', 'video'], //上傳圖片、上傳視頻          ],        },        theme: 'snow',      },    }  },  computed: {},  created() {},  mounted() {},  watch: {},  methods: {    onEditorBlur(quill) {      console.log('editor blur!', quill)    },    onEditorFocus(quill) {      console.log('editor focus!', quill)    },    onEditorReady(quill) {      console.log('editor ready!', quill)    },    submit() {      if (!this.form.title) {        this.$message('請(qǐng)輸入標(biāo)題')      }      if (!this.form.description) {        this.$message('請(qǐng)輸入描述')      }      if (!this.form.content) {        this.$message('請(qǐng)輸入正文')      }
      let formData = new FormData()      formData.append('title', this.form.title)      formData.append('description', this.form.description)      formData.append('content', this.form.content)      // 發(fā)送 POST 請(qǐng)求      axios({        method: 'post',        url: 'http://139.159.147.237:8080/yxyz/article/addarticle',        data: formData,        headers: {          'Content-Type': 'application/x-www-form-urlencoded',        },      })        .then(function(response) {          if (res.code === 0) {            this.$message('提交成功')          }          // this.form = {          //   title: '',          //   description: '',          //   content: '',          // }          this.$router.goBack()        })        .catch(function(error) {          console.log(error)        })    },  },}script>
<style scoped lang="less">.editor {  height: 500px;}.btn {  margin-top: 100px;}style>

<template>  <div class="">    <h2>文章詳情h2>    <el-card>      <div class="title">{{ detail.title }}div>      <div class="des">{{ detail.description }}div>      <div class="con" v-html="detail.content">div>      <div class="time">{{ detail.createdatetime }}div>    el-card>  div>template>
<script>export default {  components: {},  props: {},  data() {    return {      detail: {},    }  },  computed: {},  created() {    console.log(this.$route)    let item = this.$route.params.item
    this.detail = item  },  mounted() {},  watch: {},  methods: {},}script>
<style scoped lang="less">.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>

<template>  <div class="">    <h2>文章詳情h2>    <el-card>      <div class="title">{{ detail.title }}div>      <div class="des">{{ detail.description }}div>      <div class="con" v-html="detail.content">div>      <div class="time">{{ detail.createdatetime }}div>    el-card>  div>template>
<script>export default {  components: {},  props: {},  data() {    return {      detail: {},    }  },  computed: {},  created() {    console.log(this.$route)    let item = this.$route.params.item
    this.detail = item  },  mounted() {},  watch: {},  methods: {},}script>
<style scoped lang="less">.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>

spring:  profiles:    active: dev

server:  port: 8080  servlet:    context-path: /yxyzspring:  datasource:    name: yxyz    url: jdbc:mysql://localhost/test?serverTimezone=GMT%2b8&characterEncoding=UTF8    username: root    password: 123 # 使用druid數(shù)據(jù)源    type: com.alibaba.druid.pool.DruidDataSource    driver-class-name: com.mysql.cj.jdbc.Driver    filters: stat    maxActive: 20    initialSize: 1    maxWait: 60000    minIdle: 1    timeBetweenEvictionRunsMillis: 60000    minEvictableIdleTimeMillis: 300000    validationQuery: select 'x'    testWhileIdle: true    testOnBorrow: false    testOnReturn: false    poolPreparedStatements: true    maxOpenPreparedStatements: 20## 該配置節(jié)點(diǎn)為獨(dú)立的節(jié)點(diǎn)mybatis:  mapper-locations: classpath:mapping/*Mapper.xml #注意：一定要對(duì)應(yīng)mapper映射xml文件的所在路徑  type-aliases-package: com.yxyz.vo # 注意：對(duì)應(yīng)實(shí)體類(lèi)的路徑#打印sql最終填充的參數(shù)值  log-impl: org.apache.ibatis.logging.stdout.StdOutImpl