vue+springboot富文本编辑

最新推荐文章于 2024-05-31 11:41:47 发布
最新推荐文章于 2024-05-31 11:41:47 发布
阅读量321 收藏 2
点赞数 8
文章标签： vue.js spring boot 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74924621/article/details/138844458
版权

①本地数据库新建一个news表

CREATE TABLE `news` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '标题',
  `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '简介',
  `content` text COLLATE utf8mb4_unicode_ci COMMENT '内容',
  `authorid` int(11) DEFAULT NULL COMMENT '发布人id',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '发布时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='新闻信息';

②创建实体类

 

News:

package com.example.springboot.entity;

import cn.hutool.core.annotation.Alias;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

@Data
public class News {
    @TableId(type= IdType.AUTO)
    @Alias("序号")
    private Integer id;
    private String title;
    private String description;
    private String content;
    private Integer authorid;
    private String time;
}

 ③创建对应的Mapper Service Controller

NewsController：

package com.example.springboot.controller;

import cn.hutool.core.date.DateUnit;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.springboot.common.Result;
import com.example.springboot.entity.News;
import com.example.springboot.entity.User;
import com.example.springboot.service.NewsService;
import com.example.springboot.service.UserService;
import com.example.springboot.utils.TokenUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DuplicateKeyException;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/news")
public class NewsController {

    @Autowired
    NewsService newsService;

    @Autowired
    UserService userService;

    /**
     * 新增信息
     */
    @PostMapping("/add")
    public Result add(@RequestBody News news) {
        User currentUser= TokenUtils.getCurrentUser();
        news.setAuthorid(currentUser.getId());
        news.setTime(DateUtil.now());
        newsService.save(news);
        return Result.success();
    }

    /**
     * 修改信息
     */
    @PutMapping("/update")
    public Result update(@RequestBody News news) {
        newsService.updateById(news);
        return Result.success();
    }

    /**
     * 删除信息
     */
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable Integer id) {
        newsService.removeById(id);
        return Result.success();
    }


    /**
     * 批量删除信息
     */
    @DeleteMapping("/delete/batch")
    public Result batchDelete(@RequestBody List<Integer> ids) {
        newsService.removeBatchByIds(ids);
        return Result.success();
    }

    /**
     * 查询全部信息
     */
    @GetMapping("/selectAll")
    public Result selectAll() {
        List<News> userList = newsService.list(new QueryWrapper<News>().orderByDesc("id"));
        return Result.success(userList);
    }

    /**
     * 根据ID查询信息
     */
    @GetMapping("/selectById/{id}")
    public Result selectById(@PathVariable Integer id) {
        News news = newsService.getById(id);
        User user=userService.getById(news.getAuthorid());
        if(user!=null){
            news.setAuthor(user.getName());
        }
        return Result.success(news);
    }


    /**
     * 多条件模糊查询信息
     * pageNum 当前的页码
     * pageSize 每页查询的个数
     */
    @GetMapping("/selectByPage")
    public Result selectByPage(@RequestParam Integer pageNum,
                               @RequestParam Integer pageSize,
                               @RequestParam String title) {
        QueryWrapper<News> queryWrapper = new QueryWrapper<News>().orderByDesc("id");  // 默认倒序，让最新的数据在最上面
        queryWrapper.like(StrUtil.isNotBlank(title), "title", title);
        Page<News> page = newsService.page(new Page<>(pageNum, pageSize), queryWrapper);
        List<News> records=page.getRecords();
        List<User> list=userService.list();
        for(News record:records){
            Integer authorid=record.getAuthorid();
            User user=userService.getById(authorid);
//            String author=list.stream().filter(u->u.getId().equals(authorid)).findFirst().map(User::getName).orElse("");
            if(user!=null){
                record.setAuthor(user.getName());
            }
        }
        return Result.success(page);
    }


}

NewsMapper：

package com.example.springboot.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.springboot.entity.News;
public interface NewsMapper extends BaseMapper<News> {

}

NewsService：

package com.example.springboot.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.springboot.entity.News;
import com.example.springboot.mapper.NewsMapper;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;

@Service
public class NewsService extends ServiceImpl<NewsMapper, News> {
    @Resource
    NewsMapper newsMapper;
}

④前端配置修改

修改路由index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Manager from '../views/Manager.vue'
// 解决导航栏或者底部导航tabBar中的vue-router在3.0版本以上频繁点击菜单报错的问题。
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'manager',
    component: Manager,
    children:[
      {path:'news',name:'News',meta:{name:'新闻信息'},component:()=>import('../views/manager/News.vue')},
      {path:'home',name:'Home',meta:{ name:'系统首页' },component:()=>import('../views/manager/Home.vue')},
      {
        path:'user',name:'User',meta:{ name:'用户信息' },component:()=>import('../views/manager/User.vue')
      },
      {
        path:'403',name:'Auth',meta:{ name:'无权限' },component:()=>import('../views/Auth.vue')
      },
      {
        path:'Person',name:'person',meta:{ name:'个人信息' },component:()=>import('../views/manager/Person.vue')
      },
      {
        path:'Password',name:'password',meta:{ name:'修改密码' },component:()=>import('../views/manager/Password.vue')
      }
    ],
    redirect:'/home'
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/login',
    name:'login',
    meta:{ name:'登录' },
    component: ()=>import('../views/login.vue')
  },
  {
    path:'/register',
    name:'register',
    meta:{ name:'注册' },
    component: ()=>import('../views/register.vue')
  },
  {
    path:'*',
    name:'404',
    meta:{ name:'无法访问' },
    component: ()=>import('../views/404.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to,from,next)=>{
  let adminPaths=['/user']
  let user=JSON.parse(localStorage.getItem('honey-user')||'{}')
  if(user.role !== '管理员' && adminPaths.includes(to.path)){
    next('/403')
  }else{
    next()
  }
})
export default router

新建一个News.vue：

<template>
  <div>
    <div>
      <el-input style="width: 200px" placeholder="查询标题" v-model="title"></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
    </div>
    <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" width="70" align="center"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="description" label="简介"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="author" label="发布人"></el-table-column>
      <el-table-column prop="time" label="发布时间"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="新闻信息" :visible.sync="fromVisible" width="30%">
      <el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="content">
          <el-input v-model="form.description" placeholder="简介"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" placeholder="内容"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 5,  // 每页显示的个数
      username: '',
      title: '',
      total: 0,
      fromVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ]
      },
      ids: []
    }
  },
  created() {
    this.load()
  },
  methods: {
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/news/delete/batch', { data: this.ids }).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    del(id) {
      this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/news/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true   // 打开弹窗
    },
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request({
            url: this.form.id ? '/news/update': '/news/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
        }
      })
    },
    reset() {
      this.title = ''
      this.load()
    },
    load(pageNum) {  // 分页查询
      if (pageNum)  this.pageNum = pageNum
      this.$request.get('/news/selectByPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  }
}
</script>

<style scoped>

</style>

修改Manager.vue：

<template>
  <div>
    <el-container>
      <!--    侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          <img src="@/assets/logo1.png" alt="" style="width: 40px; height: 40px">
          <span class="logo-title" v-show="!isCollapse">honey2024</span>
        </div>

        <el-menu :default-openeds="['info']" :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none" :default-active="$route.path">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-submenu index="info" v-if="user.role === '管理员'">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/user">用户信息</el-menu-item>
            <el-menu-item index="/news">新闻信息</el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>

      <el-container>
        <!--        头部区域-->
        <el-header>

          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>
            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: default">
                <img :src="user.avatar||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="" style="width: 40px; height: 40px; margin: 0 5px;border-radius: 50%">
                <span>{{user.name}}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="$router.push('/person')">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </el-header>

        <!--        主体区域-->
        <el-main>
          <router-view @update:user="updateUser"></router-view>
        </el-main>

      </el-container>


    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import request from '@/utils/request'

export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,  // 不收缩
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      user:JSON.parse(localStorage.getItem('honey-user')||'{}'),
    }
  },
  mounted() {
    if(!this.user.id){
      this.$router.push('/login')
    }
    // axios.get('http://localhost:9090/user/selectall').then(res=>{
    //   console.log(res.data);
    //   this.users=res.data.data
    // })

    // request.get('/user/selectall').then(res => {
    //   this.users = res.data
    // })
  },
  methods: {
    updateUser(user){
      this.user=JSON.parse(JSON.stringify(user))
    },
    handleFileUpload(response,file,fileList){
      this.fileList=fileList
      console.log(response,file,fileList)
    },
    logout() {
      localStorage.removeItem("honey-user")
      this.$router.push('/login')
    },
    handleFull() {
      document.documentElement.requestFullscreen()
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    }
  }
}
</script>

<style>
.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-menu-item:hover, .el-submenu__title:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}

.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip {
  margin-left: -4px;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}

/*.el-submenu__icon-arrow {*/
/*  margin-top: -5px;*/
/*}*/

.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s; /* 0.3s */
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}
</style>

⑤在vue项目中，安装下列依赖

npm i wangeditor --save
npm install highlight.js -S

 修改main.js：

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';
import request from "@/utils/request";
import 'highlight.js/styles/monokai-sublime.css'
Vue.config.productionTip = false
Vue.use(ElementUI,{size:'small'});
Vue.prototype.$request=request //引入request
Vue.prototype.$baseUrl=process.env.VUE_APP_BASEURL
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

修改News.vue：

<template>
  <div>
    <div>
      <el-input style="width: 200px" placeholder="查询标题" v-model="title"></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="load(1)">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="primary" plain @click="handleAdd">新增</el-button>
      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
    </div>
    <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" width="70" align="center"></el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="description" label="简介"></el-table-column>
      <el-table-column prop="content" label="内容">
        <template v-slot="scope">
          <el-button @click="showContent(scope.row.content)" size="mini">显示内容</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="详情页">
        <template v-slot="scope">
          <el-button @click="$router.push('/newsDetail?id=' + scope.row.id)" size="mini">在详情页显示</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="author" label="发布人"></el-table-column>
      <el-table-column prop="time" label="发布时间"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="新闻信息" :visible.sync="fromVisible" width="60%" @close="closeDialog" :close-on-click-modal="false">
      <el-form :model="form" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="content">
          <el-input v-model="form.description" placeholder="简介"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div id="editor"></div>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="fromVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="内容" :visible.sync="formVisible1" width="60%">
      <div class="w-e-text">
        <div v-html="content"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="formVisible1=false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import E from "wangeditor"
import hljs from 'highlight.js'
export default {
  name: "News",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 5,  // 每页显示的个数
      username: '',
      title: '',
      total: 0,
      fromVisible: false,
      form: {},
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ]
      },
      ids: [],
      editor:null,
      content:'',
      formVisible1:false
    }
  },
  created() {
    this.load()
  },
  methods: {
    setRichText(){
      this.$nextTick(()=>{
        this.editor=new E("#editor")
        this.editor.highlight=hljs
        this.editor.config.uploadImgServer = this.$baseUrl + '/file/editor/upload'
        this.editor.config.uploadFileName = 'file'
        this.editor.config.uploadImgHeaders = {
          token: this.user.token
        }
        this.editor.config.uploadImgParams={
          type:"img"
        }
        this.editor.config.uploadVideoServer=this.$baseUrl+'/file/editor/upload'
        this.editor.config.uploadVideoName='file'
        this.editor.config.uploadVideoHeaders={
          token:this.user.token
        }
        this.editor.config.uploadVideoParams={
          type:"video"
        }
        this.editor.create()
      })
    },
    showContent(content){
      this.content=content
      this.formVisible1=true
    },
    closeDialog(){
      this.editor.destroy()
      this.editor=null
    },
    delBatch() {
      if (!this.ids.length) {
        this.$message.warning('请选择数据')
        return
      }
      this.$confirm('您确认批量删除这些数据吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/news/delete/batch', { data: this.ids }).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)
    },
    del(id) {
      this.$confirm('您确认删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/news/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.load(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {})
    },
    handleEdit(row) {   // 编辑数据
      this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
      this.fromVisible = true   // 打开弹窗
      this.setRichText()
      setTimeout(()=>{
        this.editor.txt.html(row.content)
      },0)
    },
    handleAdd() {   // 新增数据
      this.form = {}  // 新增数据的时候清空数据
      this.fromVisible = true   // 打开弹窗
      this.setRichText()
    },
    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          let content=this.editor.txt.html()
          this.form.content=content
          this.$request({
            url: this.form.id ? '/news/update': '/news/add',
            method: this.form.id ? 'PUT' : 'POST',
            data: this.form
          }).then(res => {
            if (res.code === '200') {  // 表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              this.fromVisible = false
            } else {
              this.$message.error(res.msg)  // 弹出错误的信息
            }
          })
        }
      })
    },
    reset() {
      this.title = ''
      this.load()
    },
    load(pageNum) {  // 分页查询
      if (pageNum)  this.pageNum = pageNum
      this.$request.get('/news/selectByPage', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.title
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  }
}
</script>

<style scoped>

</style>

 ⑥后端配置新接口

修改FileController：

package com.example.springboot.controller;

import cn.hutool.core.collection.CollUtil;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.lang.Dict;
import com.example.springboot.common.AuthAccess;
import com.example.springboot.common.Result;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.net.URLEncoder;

@RestController
@RequestMapping("/file")
public class FileController {
    @Value("${ip:localhost}")
    String ip;

    @Value("${server.port}")
    String port;

    private static final String ROOT_PATH=System.getProperty("user.dir")+File.separator+"files";
    @PostMapping("/upload")
    public Result upload(MultipartFile file) throws IOException{
        String originFilename= file.getOriginalFilename();
        String mainName= FileUtil.mainName(originFilename);
        String extName=FileUtil.extName(originFilename);
        if(!FileUtil.exist(ROOT_PATH)){
            FileUtil.mkdir(ROOT_PATH);
        }
        if(FileUtil.exist(ROOT_PATH+File.separator+originFilename)){
            originFilename=System.currentTimeMillis()+"_"+mainName+"."+extName;
        }
        File saveFile=new File(ROOT_PATH+File.separator+originFilename);
        file.transferTo(saveFile);
        String url="http://"+ip+":"+port+"/file/download/"+originFilename;
        return Result.success(url);
    }

    @AuthAccess
    @GetMapping("/download/{filename}")
    public void download(@PathVariable String filename,HttpServletResponse response) throws IOException {
//        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "UTF-8")); // 附件下载
        response.addHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(filename, "UTF-8")); // 预览
        String filePath=ROOT_PATH+File.separator+filename;
        if(!FileUtil.exist(filePath)){
            return;
        }
        byte[] bytes=FileUtil.readBytes(filePath);
        ServletOutputStream outputStream=response.getOutputStream();
        outputStream.write(bytes);
        outputStream.flush();
        outputStream.close();
    }

    @PostMapping("/editor/upload")
    public Dict editorUpload(@RequestParam MultipartFile file,@RequestParam String type) throws IOException{
        String originFilename= file.getOriginalFilename();
        String mainName= FileUtil.mainName(originFilename);
        String extName=FileUtil.extName(originFilename);
        if(!FileUtil.exist(ROOT_PATH)){
            FileUtil.mkdir(ROOT_PATH);
        }
        if(FileUtil.exist(ROOT_PATH+File.separator+originFilename)){
            originFilename=System.currentTimeMillis()+"_"+mainName+"."+extName;
        }
        File saveFile=new File(ROOT_PATH+File.separator+originFilename);
        file.transferTo(saveFile);
        String url="http://"+ip+":"+port+"/file/download/"+originFilename;
        if("img".equals(type)){
            return Dict.create().set("errno",0).set("data", CollUtil.newArrayList(Dict.create().set("url",url)));
        }else if("video".equals(type)){
            return Dict.create().set("errno",0).set("data", Dict.create().set("url",url));
        }
        return Dict.create().set("errno",0);
    }
}

⑦前端配置详情页

NewsDetail.vue:

<template>
<div>
  <div style="margin: 10px 0 20px 0;font-size: 30px;font-weight: bold">{{ news.title }}</div>
  <div style="margin: 10px 0;font-size: 13px;color: #666">{{ news.author }} <span style="margin-left: 20px">{{ news.time }}</span></div>
  <div style="box-shadow: 0 2px 4px rgba(0,0,0.12);padding: 10px">
    <div v-html="news.content"></div>
  </div>
</div>
</template>
<script>
export default{
  data(){
    return{
      news:{}
    }
  },
  created() {
    let id=this.$route.query.id
    if(!id){
      return
    }
    this.$request.get('/news/selectById/'+id).then(res=>{
      this.news=res.data
    })
  }
}
</script>

<style scoped>

</style>

路由的index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Manager from '../views/Manager.vue'
// 解决导航栏或者底部导航tabBar中的vue-router在3.0版本以上频繁点击菜单报错的问题。
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'manager',
    component: Manager,
    children:[
      {path:'news',name:'News',meta:{name:'新闻信息'},component:()=>import('../views/manager/News.vue')},
      {path:'newsDetail',name:'NewsDetail',meta:{name:'新闻详情页'},component:()=>import('../views/manager/NewsDetail.vue')},
      {path:'home',name:'Home',meta:{ name:'系统首页' },component:()=>import('../views/manager/Home.vue')},
      {
        path:'user',name:'User',meta:{ name:'用户信息' },component:()=>import('../views/manager/User.vue')
      },
      {
        path:'403',name:'Auth',meta:{ name:'无权限' },component:()=>import('../views/Auth.vue')
      },
      {
        path:'Person',name:'person',meta:{ name:'个人信息' },component:()=>import('../views/manager/Person.vue')
      },
      {
        path:'Password',name:'password',meta:{ name:'修改密码' },component:()=>import('../views/manager/Password.vue')
      }
    ],
    redirect:'/home'
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/login',
    name:'login',
    meta:{ name:'登录' },
    component: ()=>import('../views/login.vue')
  },
  {
    path:'/register',
    name:'register',
    meta:{ name:'注册' },
    component: ()=>import('../views/register.vue')
  },
  {
    path:'*',
    name:'404',
    meta:{ name:'无法访问' },
    component: ()=>import('../views/404.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to,from,next)=>{
  let adminPaths=['/user']
  let user=JSON.parse(localStorage.getItem('honey-user')||'{}')
  if(user.role !== '管理员' && adminPaths.includes(to.path)){
    next('/403')
  }else{
    next()
  }
})
export default router

 

 

 

别问我，我什么都不知道
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+SpringBoot+UEditor.zip
10-18
Vue2整合百度UEditor富文本编辑器包括了图片上传
Neo4j-KGBuilder:Neo4j+springboot+vue+d3.js知识图谱构建和可视化
05-02
初衷 这是一个知识图谱构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具，知识图谱可视化，仅供做知识图谱的小伙伴参考 技术栈 小工具是前台是基于vue + d3.js ,后台是springboot配合Neo4j. 演示 demo地址：. 实现的基本功能: 新增节点,添加连线,快速添加节点和关系 节点的颜色和大小可修改 节点和关系的编辑,删除 导出成图片 csv导入 导出csv 添加图片和富文本 节点之间多个关系 增加直接执行cypher功能 后续优化: 新建单节点,节点的位置能指定(或者和鼠标点下的位置一致) over 2018-11-16 做出的图谱能够导出成图片 over 2018-11-16 支持导入功能,同时支持导出关系和节点 over 2018-11-17 输入一段文本,通过自然语言等手段,抽出实体和关系,编辑后
vue+springboot图片上传和显示的示例代码
11-21
一、前言 在使用spring boot做后台系统，vue做前端系统，给客户开发一套系统时候，其中用到了图片上传和显示的功能。 二、环境 前端：vue 前端组件：tinymce 后台：spring boot:2.2.3 三、正文 在客户开发一套门户管理系统时，集成了tinymce组件，用于编辑内容，springboot不同于其他项目。  是集成tomcat的，文件和图片是不能直接访问的。所以我在做集成富文本编辑器时，需要处理图片的问题。 这个问题跟上传头像等显示图片的功能是类似的。下面记录详情步骤代码。 第一步：集成tinymce组件 <!--引入tinymce组件-
Filted-Blog:前后端分离的简易博客项目（Vue+SpringBoot）
04-20
BLOG 基于Vue + SpringBoot实现前后端分离,带有全站敏感词过滤的极简个人博客系统。敏感词过滤是每个带有用户输入的系统都需要构建的一个功能，当用户提交了一句话或是一篇博客，都需要在后端进行敏感词过滤。当检测到敏感词后，要么提示用户输入包含敏感词要求重新输入，要么把敏感词替换为 “×” 这种特殊字符。 主要技术： 前端 : 核心框架：Vue 数据请求和响应：Axios 富文本编辑器：mavon-editor 后端 : 核心框架：SpringBoot 2.2.6 数据校验：Hibernate validatior 持久层框架：Mybatis 数据库：MySQL 5.7 密码加密：MD5 功能 全站敏感词过滤 登录验证 注册验证 文章展示 文章添加 文章删除 文章修改 敏感词过滤的方案 关于敏感词库 构建敏感词过滤系统的第一步是需要有一个敏感词库。一般企业都会构建自己的敏感词库，
HotelManagement:酒店管理系统（vue + springboot）
03-11
酒店管理 基于Vue + Element UI的酒店管理系统解决方案。前端仓库地址（ ） fontend-manage（Vue + Element UI）+后端（springboot）的版本正在开发中，仓库地址： 前言 酒店管理系统，基于vue.js，使用vue-cli3脚手架，引用Element UI组件库，方便开发快速简洁好看的组件。 功能模块 登录/订阅 员工管理 客房信息 安置信息 创新进行 客房服务 富文本编辑器 财务管理 安装步骤 git clone https://github.com/mynameisly/HotelManagement.git or download zip // 把模板下载到本地 cd hotelManagement // 进入模板目录 npm install // 安装项目依赖，等待安装完成之后，安装失败可用
富文本编辑存储及显示 vue+springBoot
别再捏我脸了的博客
06-28 5983
1.前言 最近项目中需要实现对资讯文章等的编辑与存储 前端语言：vue，组件：element，富文本编辑器（vue-ueditor-wrap） 后端语言：springBoot 2.项目需求 需求：前端通过富文本编辑器对文章资讯进行编辑，保存在数据库中，显示时原样式显示。 3.实现 3.1前端 3.1.1安装依赖vue-ueditor-wrap npm i vue-ueditor-wrap 3.1.2下载ueditor并将其复制到public目录下 下载链接 vue-ue...
Vue + Element UI+springboot使用富文本编辑器
tpf1070527713的博客
05-26 1214
1、下载vue-quill-editor组件 npm install vue-quill-editor 2、组件引入· 富文本组件 import { quillEditor } from "vue-quill-editor"; 3、引入相关css import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; 4、注册组件 created()
【项目实战】vue+springboot项目使用富文本编辑器实现长文章发表和展示
qq_41358574的博客
05-21 1543
本人前端烂，文章展示部分现在还弄的不好。 效果： 很想实现点击查看详情然后进入查看具体的文章内容，但还不知道怎么弄，有知道的兄弟可以教我一下。 首先npm下载： cnpm install vue-quill-editor 发表日志模块： <template> <div class="nn"> <p id="p2" style="background-color:red;"><Icon type="md-paw" />发表长日志</p&g
vue+springboot 图片文件上传及回显
wssy_day的博客
03-11 1206
Vue+SpringBoot 实现图片上传及回显
Spring Boot + Vue3前后端分离实战wiki知识库系统＜十＞--文档管理功能开发二
webor2006的博客
07-08 650
接下来则需要来开发文档的内容生成的功能了，发表一篇文章很明显需要有一个富文本的输入框，这里则使用wangEditor开源的wangeditor插件进行搭建：其中可以看到它的github的star的数量：非常知名了。
Vue & 百度富文本编辑器Ueditor & Spring Boot 前后台整合示例（附带完整源码）
草堂三师兄
07-23 5204
前端 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module export default { name: 'Ueditor', components: { VueUeditorWrap }, data () { return {
SpringBoot+Vue 09--wangEditor富文本编辑器
AMWICD的博客
04-26 2155
一般应用于新闻、博客 wangEditor 官网https://www.wangeditor.com/ 引入依赖 cnpm i wangeditor --save 数据库创建新表 创建对应的文件 复制粘贴改一改 News.java NewsMapper.java NewsController.java News.vue 把下面的接口也改了 路由 Aside.vue 运行 把wangEditor引入界面 让editor成为全局变量，有些功能就能用了，否则有些功能可能获取不到edit
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1058
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 295
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 200
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 379
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
基于Java+SpringBoot+Mybaties-plus+Vue+elememt + uniapp 新闻资讯 的设计与实现
qq_28917403的博客
05-27 694
本系统分为 后端 和 小程序端后端：点击登录按钮设置个人中心、管理员账号数据维护、基础数据维护、论坛维护(增删改查帖子信息，包括查看论坛的内容回复)、公告信息维护、用户信息维护、小程序的轮播图维护小程序端：登录、注册、忘记密码首页(查看新闻展示、短视频信息展示、公告信息展示)短视频信息(根据类型检索)、公告信息(根据类型检索)、论坛信息(根据名称检索)、
对于vsc中的vue命令 vue.json
最新发布
F2297468264的博客
05-31 307
打开vsc 然后在左下角有一个设置。将此代码粘贴 （我的不一定都适合）3.输入 vue.json回车。2.点击用户代码片段。
vue3 springboot富文本
04-09
编辑器如何实现文件上传和图片预览功能？ 对于您的问题，我可以为您提供一些思路。您可以使用vue3与springboot结合的方式来开发富文本编辑器。对于文件上传和图片预览功能，您可以使用一些前端框架如element-ui或者iview等，来实现文件上传的功能。同时，您也可以使用后端技术，如springboot的fileupload，以及前端技术，如axios，来实现文件上传的功能。至于图片预览的功能，您可以使用前端技术，如vue-preview或者swiper等来实现预览功能。希望这些思路能够对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值