所有功能实现

明梦爽

2022-03-02 1861d195f7f3a7364c1099356858c94a6c0741e2

所有功能实现

 src/api/api.js

@@ -20,69 +20,94 @@
export const getNewsList = data => {
  return request({
    method: 'POST',
    url:'/news/list',
    params:data,
    url: '/news/list',
    params: data,
  })
}
//获取只有一篇新闻
export const getnew = data => {
  return request({
    method: 'GET',
    url:`/news/main/${data}`
    url: `/news/main/${data}`
  })
}
//修改新闻
export const update = data => {
  return request({
    method:'POST',
    url:'/news/update',
    params:data,
    method: 'POST',
    url: '/news/update',
    params: data,
  })
}
//删除新闻
export const deleteNew = data => {
  return request({
    method:'POST',
    url:'/news/delete',
    params:data,
    method: 'POST',
    url: '/news/delete',
    params: data,
  })
}
//模糊查询
export const fuzzy = data => {
  return request({
    method:'POST',
    url:'/news/fuzzy',
    params:data,
    method: 'POST',
    url: '/news/fuzzy',
    params: data,
  })
}
//添加新闻
export const add = data => {
export const add = (data, fd) => {
  return request({
    method:'POST',
    url:'/news/add',
    params:data
    method: 'POST',
    url: '/news/add',
    params: data,
    data: fd
  })
}
//登录
export const login = data => {
  return request({
    method:'POST',
    url:'/login',
    params:data
    method: 'POST',
    url: '/login',
    params: data
  })
}
//获取普通管理员列表
export const getmain = () => {
  return request({
    method: 'GET',
    url:'/admin/list'
    url: '/admin/list'
  })
}
//超管修改普管账号密码
export const editAccount = data => {
  return request({
    method:'POST',
    url:'/admin/updatePassword',
    params:data
    method: 'POST',
    url: '/admin/updatePassword',
    params: data
  })
}
}
//删除普通管理员
export const deleteAd = data => {
  return request({
    method: 'POST',
    url: '/admin/delete',
    params: data
  })
}
//注册普通管理员
export const addAd = data => {
  return request({
    method: 'POST',
    url: '/admin/add',
    params: data
  })
}
//文件上传
export const fileUpload = fd => {
  return request({
    method: 'POST',
    url: '/uploading',
    data: fd
  })
}

 src/components/Administrator/AdEdit.vue

@@ -1,6 +1,7 @@
<template>
  <div>
    <el-card class="box-card">
      <el-button type="primary" @click="add()" icon="el-icon-circle-plus" class='add'>注册新的管理员账号</el-button>
      <!-- 新闻表格区域 -->
      <el-table 
        :data="tableData"
@@ -22,42 +23,187 @@
          <template slot-scope="scope">
            <!-- {{ scope.row.id }} -->
            <div>
              <el-button type="success" @click="look(scope.row.id)">添加</el-button>
              <el-button type="warning" @click="showEditDialog(scope.row.id)">修改</el-button>
              <el-button type="info" @click="deleteNews(scope.row.id)">删除</el-button>
              <el-button type="primary" @click="showEditDialog(scope.row.id)" icon="el-icon-edit"></el-button>
              <el-button type="danger" @click="deleteAds(scope.row.id)" icon="el-icon-delete"></el-button>
            </div>
          </template>
          
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改账户的对话框 -->
    <el-dialog
      title="修改普通管理员密码"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editClose">
      <!-- rules表单验证规则，ref当前表单的验证对象 -->
      <el-form ref="editFormRef" :model="editForm"  label-width="80px" status-icon>
        <el-form-item label="用户名:">
          <el-input v-model="editForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable=""></el-input>
        </el-form-item>
        <el-form-item label="旧密码:">
          <el-input v-model="editForm.oldPassword" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input v-model="editForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入新密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="subEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加管理员对话框 -->
    <el-dialog
      title="添加普通管理员"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addClose">
      <!-- rules表单验证规则，ref当前表单的验证对象 -->
      <el-form ref="addFormRef" :model="addForm"  label-width="80px" status-icon>
        <el-form-item label="用户名:">
          <el-input v-model="addForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable=""></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="addForm.password" prefix-icon="iconfont icon-3702mima" type="password" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canceladd">取 消</el-button>
        <el-button type="primary" @click="addEdit()">注 册</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getmain,editAccount } from '../../api/api'
import { getmain,editAccount,deleteAd,addAd } from '../../api/api'
export default {
  data() {
    return {
      tableData:[], //普通管理员列表
      editDialogVisible:false,
      addDialogVisible:false,
      editForm:{ username:'',oldPassword:'',password:'' },  //修改表单对象
      addForm:{ username:'',password:'' }  //添加管理对象
    }
  },
  created(){
    this.ready()
  },
  methods:{
    //获取铺管列表
    ready(){
      getmain().then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          this.tableData = res.data
        }
      })
    },
    //展示编辑对话框
    showEditDialog(){
      this.editDialogVisible = true
    },
    editClose(){
      this.editForm.username = '';
      this.editForm.oldPassword = '';
      this.editForm.password = '';
    },
    cancel(){
      this.editForm.username = '';
      this.editForm.oldPassword = '';
      this.editForm.password = '';
      this.editDialogVisible = false
    },
    //编辑确定事件
    subEdit(){
      const data = {
        username:this.editForm.username,
        oldPassword:this.editForm.oldPassword,
        password:this.editForm.password
      }
      editAccount(data).then(res => {
        // console.log(res);
        if(res.code == 200){
          this.$message.success('账户修改成功')
          this.editDialogVisible = false
          this.ready()
        }else{
          this.$message.error('账户修改失败')
        }
      })
    },
    //删除普通管理员
    async deleteAds(id){
      // console.log(id);
      const res = await this.$confirm('此操作将永久删除该管理账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        return err
      })
      //如果用户点击确定则返回confirm
      //如果用户点击取消则返回cancel
      console.log(res);
      if(res !== 'confirm'){
        return this.$message.info('已取消删除~')
      }else{
        // console.log(id);
        const data = {
          id:id
        }
        //参数data 要以对象的形式传入
        deleteAd(data).then(res => {
          // console.log('>>>'+res);
          if(res.code == 200){
            this.$message.success('删除成功！')
            this.ready()
          }else{
            return this.$message.error('删除失败！')
          }
        })
      }
    },
    add(){
      this.addDialogVisible = true
    },
    //注册取消清空
    canceladd(){
      this.addForm.username = '';
      this.addForm.password = '';
      this.addDialogVisible = false
    },
    addClose(){
      this.addForm.username = '';
      this.addForm.password = '';
    },
    //注册提交
    addEdit(){
      const data = {
        username:this.addForm.username,
        password:this.addForm.password
      }
      addAd(data).then(res => {
        if(res.code == 200){
          this.$message.success('注册成功')
          this.addDialogVisible = false
          this.ready()
        }else{
          this.$message.error('注册失败')
        }
      })

    }
  }
}
</script>

<style lang="less" scoped>
.add{
  margin-bottom: 10px;
}

</style>

 src/components/Administrator/Edit.vue

@@ -3,31 +3,27 @@
    <el-row><h3 style="margin-top: 0px">{{ $route.query.title }}</h3></el-row>
    新闻标题：<el-input v-model="title" placeholder="请输入新闻标题"></el-input><br/><br/>
    发布日期：<el-date-picker  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="releaseTime" placeholder="请选择新闻发布日期"></el-date-picker><br/><br/>
    <!-- <el-upload
      class="upload-demo"
      ref="upload"
      drag
      action
      :auto-upload="false"
      :http-request="httpRequest"
      multiple
      :file-list="fileList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload><br/> -->
    新闻内容：<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
    <el-row style="margin-top:50px;">
      <el-button  type="success" @click="submit">发布</el-button>
      <!-- <input type="file" @change="chooseFile"/><br/><br/>
      <el-button  type="success" @click="tijiao">提交</el-button><br/><br/>
      <img :src="'http://localhost:7070/'+this.photo" style="width: 400px"> -->
    </el-row>
  </div>
</template>
<script>
import { add } from '../../api/api'
import { quillEditor } from 'vue-quill-editor'
import axios from 'axios'

import { add,fileUpload, login } from '../../api/api'
import {quillEditor,Quill} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { container, ImageExtend,QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
axios.defaults.withCredentials = true;

export default {
  components:{ quillEditor },
  data(){
@@ -35,16 +31,58 @@
      title:'', //标题内容
      releaseTime:'', //发布日期
      content: '',  //新闻内容
      picture:null,
      photo:'',
      newsCategoryId:2,
      editorOption: {
        placeholder: "请输入正文",
        // editorOption里是放图片上传配置参数用的，例如：
        action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
        methods: 'POST',  // 必填参数 图片上传方式
        token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        name: 'upload_file',  // 必填参数 文件的参数名
        size: 10000000,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
        modules: {
            ImageExtend: {  // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入 
                name: 'file',  // 图片参数名
                loading: true,
                size: 10,  // 可选参数 图片大小，单位为M，1M = 1024kb
                action:'http://localhost:7070/uploading',
                response: (res) => {
                  console.log(res);
                    return 'http://localhost:7070/'+res.data
                },
                headers: (xhr) => {
                  // axios.defaults.withCredentials = true;
                  // xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288')
                },  // 可选参数 设置请求头部
                sizeError: () => {},  // 图片超过大小的回调
                start: () => {},  // 可选参数 自定义开始上传触发事件
                end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                error: () => {},  // 可选参数 上传失败触发的事件
                success: () => {},  // 可选参数  上传成功触发的事件
                change: (xhr, formData) => {
                // formData.append('token', 'myToken')
                } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
            },
            toolbar:{
                container:[
                    ['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']        //上传图片、上传视频
                ],
                handlers: {
                    'image': function () {  // 劫持原来的图片点击按钮事件
                        QuillWatch.emit(this.quill.id)
                    }
                }
            },
        },
      } ,  //编辑器新闻对象
      fileList:[],
    }
@@ -53,40 +91,34 @@
    // console.log('>>>>>>>',this.$route.query.id);
    this.newsCategoryId = this.$route.query.id
  },
  mounted(){
  },
  methods:{
    // jsonData(formData){ var jsonData = {}; formData.forEach((value, key) => jsonData[key] = value); return jsonData },
    // httpRequest(params){
    //   const pictureFile = params.file;
    //   const newsCategoryId = this.newsCategoryId;
    //   const content = this.content;
    //   const title = this.title;
    //   const releaseTime = this.releaseTime;
    //   var formData = new FormData();
    //   formData.append("pictureFile",pictureFile)
    //   formData.append("newsCategoryId",newsCategoryId)
    //   formData.append("content",content)
    //   formData.append("title",title)
    //   formData.append("releaseTime",releaseTime)
    //   console.log(this.jsonData(formData));
    //   add(this.jsonData(formData)).then(res => {
    //     console.log(res);
    //     if(res.code !== 200){
    //       return this.$message.error('发布新闻失败，请重试！')
    //     }else{
    //       this.$message.success('新闻发布成功！')
    //       console.log(this.content);
    //       this.$router.go(-1)
    // chooseFile(file){
    //   this.picture = file.target.files[0];
    //   console.log(this.picture)
    //   return false;
    // },
    // tijiao(){
    //   const fd = new FormData()
    //   fd.append('file',this.picture)
    //   fileUpload(fd).then(res => {
    //     console.log(res)
    //     if(res.code == 200){
    //       this.photo = res.data
    //       console.log(this.photo);
    //     }
    //   })
    // },
    submit(){
      // this.$refs.upload.submit();
      const data = {
        newsCategoryId:this.newsCategoryId,
        content:this.content,
        title:this.title,
        releaseTime:this.releaseTime
      }
      console.log(this.content);
      // console.log(this.newsCategoryId);
      add(data).then(res => {
        console.log(res);
        if(res.code !== 200){
@@ -97,7 +129,7 @@
          this.$router.go(-1)
        }
      })
    }
    },
  }
}
</script>
@@ -115,4 +147,8 @@
  bottom: 20px;
  left: 168px;
}
.ql-editor img{
  width: 100px !important;
  height: 100px !important;
}
</style>

 src/components/Administrator/EditLunBo.vue

@@ -3,29 +3,23 @@
    <el-row><h3 style="margin-top: 0px">{{ $route.query.title }}</h3></el-row>
    新闻标题：<el-input v-model="title" placeholder="请输入新闻标题"></el-input><br/><br/>
    发布日期：<el-date-picker  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="releaseTime" placeholder="请选择新闻发布日期"></el-date-picker><br/><br/>
    <el-upload
      class="upload-demo"
      drag
      action="http://localhost:8080//news/add"
      :on-remove="handleRemove"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload><br/>
    <input type="file" @change="chooseFile"/><br/><br/>
    新闻内容：<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
    <el-row style="margin-top:50px;">
      <el-button  type="success" @click="submit">发布</el-button>
    </el-row>
    轮播图
  </div>
</template>
<script>
import { add } from '../../api/api'
import { quillEditor } from 'vue-quill-editor'
import { add,fileUpload, login } from '../../api/api'
import {quillEditor,Quill} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { container, ImageExtend,QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
// axios.defaults.withCredentials = true;

export default {
  components:{ quillEditor },
  data(){
@@ -33,17 +27,58 @@
      title:'', //标题内容
      releaseTime:'', //发布日期
      content: '',  //新闻内容
      newsCategoryId:2,
      newsCategoryId:45,
      editorOption: {
        placeholder: "请输入正文",
        // editorOption里是放图片上传配置参数用的，例如：
        action:  '/api/product/richtext_img_upload.do',  // 必填参数 图片上传地址
        methods: 'POST',  // 必填参数 图片上传方式
        token: '',  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
        name: 'upload_file',  // 必填参数 文件的参数名
        size: 10000000,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
        modules: {
            ImageExtend: {  // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入 
                name: 'file',  // 图片参数名
                loading: true,
                size: 10,  // 可选参数 图片大小，单位为M，1M = 1024kb
                action:'http://localhost:7070/uploading',
                response: (res) => {
                  console.log(res);
                    return 'http://localhost:7070/'+res.data
                },
                headers: (xhr) => {
                  // axios.defaults.withCredentials = true;
                  // xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288')
                },  // 可选参数 设置请求头部
                sizeError: () => {},  // 图片超过大小的回调
                start: () => {},  // 可选参数 自定义开始上传触发事件
                end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
                error: () => {},  // 可选参数 上传失败触发的事件
                success: () => {},  // 可选参数  上传成功触发的事件
                change: (xhr, formData) => {
                // formData.append('token', 'myToken')
                } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
            },
            toolbar:{
                container:[
                    ['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']        //上传图片、上传视频
                ],
                handlers: {
                    'image': function () {  // 劫持原来的图片点击按钮事件
                        QuillWatch.emit(this.quill.id)
                    }
                }
            },
        },
      } ,  //编辑器新闻对象
      fileList:[],
    }
  },
  created(){
@@ -51,20 +86,26 @@
    this.newsCategoryId = this.$route.query.id
  },
  methods:{
    handleRemove(file,fileList){
      console.log(file,fileList);
    chooseFile(file) {
      this.pictureFile = file.target.files[0];
      console.log(this.pictureFile)
      console.log(file);
      return false;
    },
    submit(){
      const fd = new FormData();
      fd.append('pictureFile',this.pictureFile);
      const data = {
        newsCategoryId:this.newsCategoryId,
        content:this.content,
        title:this.title,
        releaseTime:this.releaseTime,
        pictureFile:this.file,
        title:this.title
      }
      add(data).then(res => {
      // console.log(999)
      add(data,fd).then(res => {
        console.log(res);
        if(res.code !== 200){
        console.log(this.newsCategoryId);
        if (res.code != 200) {
          return this.$message.error('发布新闻失败，请重试！')
        }else{
          this.$message.success('新闻发布成功！')

 src/components/Administrator/Welcome.vue

@@ -1,14 +1,74 @@
<template>
  <div>
    <h2>欢迎进入后台管理系统</h2>

    <el-upload
      ref="upload"
      action
      accept="image/*"
      :limit= 3
      :file-list='filelist'   
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request='upload'>
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button @click="save">保存</el-button>
  </div>

</template>

<script>


import {fileUpload, update} from '../../api/api'
export default {
  data() {
    return {
      // fileList: []
      imageUrl:'',
      filelist:[],
      delList:[],
      dialogVisible:false,
      dialogImageUrl:'',
    }
  },
  methods:{
    save(){
      //取到图片集合
      let uploadImglist = this.$refs.upload.uploadFiles
      console.log(uploadImglist);
      let formData = new FormData();
      uploadImglist.forEach(item => {
        //ready状态的是未上传的 success是已经上传成功的，只需要添加未上传的即可
        if(item.status == "ready"){
          formData.append('file', item.raw);
        }
      });
      formData.get('file')
      fileUpload(formData).then(res=>{
        //上传接口
        console.log(res);
      })
    },
    // 预览图片
    handlePictureCardPreview(file){
      this.dialogVisible = true
      this.dialogImageUrl=file.url
      console.log(this.dialogImageUrl);
    },
    // 删除图片
    handleRemove(file){
      //判断状态，如果是上传成功的 需要把id加到删除id集合里面
      if(file.status == 'success'){
        this.delList.push(file.id)
      }
    },
    upload(){
    }
  }
}
</script>


 src/components/Home.vue

@@ -45,7 +45,7 @@
    // this.getNavArr();
  },
  mounted() {
    let api3 = 'http://localhost:8080/news_type/all'
    let api3 = 'http://localhost:7070/news_type/all'
    axios.get(api3).then((res)=>{
      // console.log(res);
      this.menuList2 = res.data.data

 src/components/page/News.vue

@@ -3,10 +3,10 @@
    <!-- <p>{{ this.$route.query.id }}</p> -->
    <div class="header">
      <h2>{{ title }}</h2>
      <p>发布日期：{{ releaseTime }} 点击量：[ {{hits}} ]</p>
      <p>发布日期：{{ releaseTime }} 点击量：[ {{(hits+1)/2}} ]</p>
    </div>
    <hr>
    <div v-html="content"></div>
    <div v-html="content" class="ql-editor"></div>
  </div>
</template>
<script>
@@ -54,4 +54,11 @@
  height: 35px;
  line-height: 35px;
}
.ql-editor{
  padding: 12px 0px !important;
}
.ql-editor img{
  width: 600px;
  height: 400px;
}
</style>

 src/components/page/index.vue

@@ -3,10 +3,10 @@
    <!-- 首页上半部分 -->
    <el-row type="flex" class="row-bg" justify="space-between">
        <div class="block marr10">
          <el-carousel height="460px"  arrow="always" :interval="3000">
          <el-carousel height="450px"  arrow="always" :interval="3000">
            <el-carousel-item v-for="(item,index) in imgList" :key="index">
              <div @click="gonew(item.id)" class="cursor">
                <img :src="'http://localhost:8080/'+item.picturePath"  alt="" style="width:105%;">
              <div @click="gonew(item.id)" class="cursor" style="width:590px; height:450px">
                <img :src="'http://localhost:7070/'+item.picturePath"  alt="" style="width:100%; height:90%">
              </div>
            </el-carousel-item>
          </el-carousel>

 src/components/page/introduce.vue

@@ -15,7 +15,7 @@
       <!-- 新闻内容 -->
      <el-card class="box-card">
        <el-col>
          <div v-html="this.new.content"></div>
          <div v-html="this.new.content" class="ql-editor"></div>
        </el-col>
      </el-card>
    </el-row>
@@ -116,4 +116,7 @@
.ft-black {
  color: #000;
}
.ql-editor{
  padding: 12px 0px !important;
}
</style>

 src/main.js

@@ -13,7 +13,7 @@
// 配置请求的跟路径
// axios.defaults.baseURL = 'http://8.140.68.52:8181'
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'
axios.defaults.baseURL = 'http://localhost:8080/'
axios.defaults.baseURL = 'http://localhost:7070/'
axios.defaults.withCredentials = true;
axios.interceptors.request.use(config => {
  // console.log(config)

 src/utils/request.js

@@ -1,9 +1,10 @@
//对axios的封装
import axios from 'axios'
let is_baseURL = 'http://localhost:8080/'//测试环境
let is_baseURL = 'http://localhost:7070/'//测试环境
//创建axios实例
const request = axios.create({
  baseURL: is_baseURL
  baseURL: is_baseURL,
  headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
//response服务器响应拦截器
request.interceptors.response.use(