Springboot＋Vue实现网页内容生成图片功能

      @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="文章分页列表")  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);  }}

  @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);}

import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);import $ from 'jquery'
axios.defaults.baseURL = 'http://127.0.0.1:8080';Vue.prototype.HOST='/email'
Vue.config.productionTip = falseVue.prototype.$axios = axios
/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: ''})

<template>  <div class="wrap">    <div class="top">      <h1>文章列表h1>      <el-button type="primary" @click="goToEdit">添加文章el-button>    div>
    <div class="card-wrap">      <div v-for="(item, index) in art" :key="index" class="box-card" @click="goToDetail(item)">        <el-card>          <div class="title">{{ item.title }}div>          <div class="des">{{ item.description }}div>          <div class="time">{{ item.createdatetime }}div>        el-card>      div>    div>  div>template>
<script>import axios from 'axios'export default {  components: {},  props: {},  data() {    return {      art: []    }  },  computed: {},  watch: {},  created() {},  mounted() {    axios      .post('http://139.159.147.237:8080/yxyz/article/loadPage')      .then((res) => {        console.log(res.data, 'res')        if (res.data && res.data.data && res.data.data.list) {          console.log(res.data.data.list, this, 'res')          const list = res.data.data.list          this.art = list        }      })      .catch(function(error) {        console.log(error)      })  },  methods: {    goToEdit() {      this.$router.push('/about')    },    goToDetail(item) {      console.log(123)      this.$router.push({        name: 'detail',        params: {          item: item        }      })    }  }}script>
<style scoped lang="scss">.wrap {  margin-top: 50px;}.top {  display: flex;  justify-content: center;  align-items: center;  position: relative;  button {    position: absolute;    right: 0;  }}.card-wrap {  display: flex;  flex-wrap: wrap;}.box-card {  margin-bottom: 20px;  margin-right: 20px;  width: 30%;  .title {    font-weight: bold;    font-size: 16px;    text-align: left;    margin-bottom: 10px;  }  .des {    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 class="time">{{ detail.createdatetime }}div>    el-card>  div>template>
<script>export default {  components: {},  props: {},  data() {    return {      detail: {}    }  },  computed: {},  watch: {},  created() {    console.log(this.$route)    const item = this.$route.params.item
    this.detail = item  },  mounted() {},  methods: {}}script>
<style scoped lang="scss">.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数据源    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## 该配置节点为独立的节点mybatis:  mapper-locations: classpath:mapping/*Mapper.xml #注意：一定要对应mapper映射xml文件的所在路径  type-aliases-package: com.yxyz.vo # 注意：对应实体类的路径#打印sql最终填充的参数值  log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for t_article-- ----------------------------DROP TABLE IF EXISTS `t_article`;CREATE TABLE `t_article` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `title` varchar(255) NOT NULL,  `description` varchar(512) NOT NULL,  `content` text NOT NULL,  `articletype` varchar(16) DEFAULT NULL,  `createdatetime` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP,  `createuserid` varchar(32) DEFAULT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=59 DEFAULT CHARSET=utf8;