more

明梦爽

2022-01-25 546c0df2c7d278cb2a3e6fa6fc2ff730d410fdbd

more

 src/assets/css/my_style.css

@@ -68,4 +68,23 @@
/* 变小手 */
.cursor{
  cursor: pointer;
}
.hr{
  margin: 2px 0;
  height: 1px;
  border: none;
  border-top: 1px;
}
.name {
  font-family: STHeiti;
  font-size: 30px;
  margin-top: 0px;
  margin-bottom: 20px;
  text-align: center;
}
.namehr{
  /* border: 3px solid blue; */
  height: 2px;
  background-color: rgb(10, 10, 175);
  margin-bottom: 20px;
}

 src/components/Administrator/AdminHome.vue

@@ -55,9 +55,9 @@
    }
  }
}
.el-main {
  background-color: rgb(233, 237, 240);
}
// .el-main {
//   // background-color: rgb(233, 237, 240);
// }

.iconfont {
  margin-right: 10px;

 src/components/Administrator/Edit copy.vue

New file
@@ -0,0 +1,79 @@
<template>
  <div class="box">
    <el-row>{{ $route.query.title }}</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/>
    新闻内容：<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 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components:{ quillEditor },
  data(){
    return {
      title:'', //标题内容
      releaseTime:'', //发布日期
      content: '',  //新闻内容
      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'  // 可选 可上传的图片格式
      } ,  //编辑器新闻对象
      fileList:[],
    }
  },
  created(){
    // console.log('>>>>>>>',this.$route.query.id);
    this.newsCategoryId = this.$route.query.id
  },
  methods:{
    submit(){
      const data = {
        newsCategoryId:this.newsCategoryId,
        content:this.content,
        title:this.title,
        releaseTime:this.releaseTime
      }
      add(data).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)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  width: 1200px;
  margin: 0 auto;
}
.myQuillEditor{
  height: 350px;
}
.btn{
  position: absolute;
  bottom: 20px;
  left: 168px;
}
</style>

 src/components/Administrator/Edit.vue

@@ -1,11 +1,25 @@
<template>
  <div class="box">
    <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 v-model="releaseTime" placeholder="请选择新闻发布日期"></el-date-picker><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" />
    <div class="btn">
    <el-row style="margin-top:50px;">
      <el-button  type="success" @click="submit">发布</el-button>
    </div>
    </el-row>
  </div>
</template>
<script>
@@ -32,6 +46,7 @@
        size: 10000000,  // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
        accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg'  // 可选 可上传的图片格式
      } ,  //编辑器新闻对象
      fileList:[],
    }
  },
  created(){
@@ -39,7 +54,33 @@
    this.newsCategoryId = this.$route.query.id
  },
  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)
    //     }
    //   })
    // },
    submit(){
      // this.$refs.upload.submit();
      const data = {
        newsCategoryId:this.newsCategoryId,
        content:this.content,

 src/components/Administrator/EditLunBo.vue

New file
@@ -0,0 +1,88 @@
<template>
  <div class="box">
    <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="https://jsonplaceholder.typicode.com/posts/"
      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/>
    新闻内容：<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 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components:{ quillEditor },
  data(){
    return {
      title:'', //标题内容
      releaseTime:'', //发布日期
      content: '',  //新闻内容
      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'  // 可选 可上传的图片格式
      } ,  //编辑器新闻对象
    }
  },
  created(){
    // console.log('>>>>>>>',this.$route.query.id);
    this.newsCategoryId = this.$route.query.id
  },
  methods:{
    submit(){
      const data = {
        newsCategoryId:this.newsCategoryId,
        content:this.content,
        title:this.title,
        releaseTime:this.releaseTime
      }
      add(data).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)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  width: 1200px;
  margin: 0 auto;
}
.myQuillEditor{
  height: 350px;
}
.btn{
  position: absolute;
  bottom: 20px;
  left: 168px;
}
</style>

 src/components/Administrator/Main copy.vue

New file
@@ -0,0 +1,424 @@
<template>
  <div>
    <!-- 级联选择器 -->
     <div class="block">
      <el-cascader
        v-model="value"
        :options="options"
        clearable
        filterable
        @change="handleChange">
      </el-cascader>
    </div>
    <div>
      <el-card class="box-card">
        <el-row :gutter="40">
          <el-col :span="4">
            <!-- 添加新闻按钮 -->
            <el-button el-button class="add" type="success" icon="el-icon-plus" @click="goEdit(newsCategoryId)">点击在该列表下添加一条新闻</el-button>
          </el-col>
          <el-col :span="10">
            <!-- 新闻搜索 -->
            <el-input clearable @clear="qingKong()" placeholder="请输入所要查询的新闻标题" v-model="fuzzyForm.fuzzytitle" class="input-with-select">
              <el-button class="btn" slot="append" icon="el-icon-search" @click="fuzzyList(fuzzyForm.fuzzytitle)"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <!-- 新闻表格区域 -->
        <el-table v-show="gettable" :data="tableData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
        >
          <!-- :header-cell-style="{textAlign: 'center'}"设置头部居中： -->
          <!-- :cell-style="{ textAlign: 'center' }"设置整个表格内容水平居中： -->
          <!-- 问题：怎么获取数组中每个对象的key值（每条新闻的id）?
               解决：通过作用域插槽 slot-scope 获取每个对象 -->
          <el-table-column type="index">
            <template slot-scope="scope">
              <span>{{ (currentPage-1)*pageSize+scope.$index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="releaseTime" label="日期" width="" >
          </el-table-column>
          <el-table-column prop="title" label="新闻标题" width="">
          </el-table-column>
          <el-table-column prop="id" label="id" width="">
          </el-table-column>
          <el-table-column label="操作" width="">
            <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>
              </div>
            </template>
            
          </el-table-column>
        </el-table>
        <!-- 模糊查询的表格显示 -->
        <el-table v-show="fuzzytable" :data="fuzzytableData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
          <el-table-column type="index">
            <template slot-scope="scope">
              <span>{{ (fuzzyForm.fuzzycurrent-1)*fuzzyForm.fuzzysize+scope.$index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="releaseTime" label="日期" width="" >
          </el-table-column>
          <el-table-column prop="title" label="新闻标题" width="">
          </el-table-column>
          <el-table-column prop="id" label="id" width="">
          </el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope="scope">
              <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>
              </div>
            </template>
            
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <!-- 获取新闻列表分页 -->
          <div>
            <el-pagination
              v-show="getShow"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[6,12, 18,]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <!-- 模糊新闻列表分页 -->
          <div>
            <el-pagination
              v-show="fuzzyShow"
              @size-change="handleSizeChangefuzzy"
              @current-change="handleCurrentChangefuzzy"
              :current-page="fuzzyForm.fuzzycurrent"
              :page-sizes="[6,10, 18,]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fuzzyForm.fuzzytotal">
            </el-pagination>
          </div>
        </div>
      </el-card>
      <!-- 修改新闻的对话框 -->
      <el-dialog
        title="修改新闻"
        :visible.sync="editDialogVisible"
        width="50%"
        :before-close="handleClose">
        <!-- rules表单验证规则，ref当前表单的验证对象 -->
        <el-form ref="editFormRef" :model="editForm"  label-width="80px" status-icon>
          <el-form-item label="id:">
            <el-input v-model="editForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="新闻标题:">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="发布日期:">
            <el-date-picker v-model="editForm.releaseTime" type="date" placeholder="请选择发布日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editNew()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getNewsList,getnew,update,deleteNew,fuzzy } from '../../api/api'
export default {
  data() {
    return {
      getShow:true, //获取分页的显示(布尔值)
      gettable:true,  //获取表格的显示
      visible: false,
      editDialogVisible:false,  //控制修改对话框的布尔值
      editForm:{},  //查询到的新闻对象，目前仅供修改使用
      newsCategoryId:1, //先存一个小标题id
      tableData:[],   //新闻列表对象
      fuzzytableData:[],  //模糊查询列表对象
      pageSize:6,     //每页条数
      currentPage:1,  //当前页
      total:0,        //新闻总条数
      fuzzyShow:false,  //模糊查询分页的显示(布尔值)
      fuzzytable:false, //模糊查询表格的显示
      fuzzyForm:{ fuzzytitle:'',fuzzytotal:0,fuzzycurrent:1,fuzzysize:6 },  //模糊查询列表对象
      value: [],
      options: [{
        value: 1,
        label: '首页',
        children: [{
          value:42,
          label: '通知公告',
        }, 
        {
          value:43,
          label: '工作动态',
        },
        {
          value:44,
          label: '学院动态',
        }],
      },{
          value: 22,
          label: '科协概况',
          children: [{
            value:27,
            label: '简介',
          }, 
          {
            value:28,
            label: '章程',
          },
          {
            value:29,
            label: '组织结构',
          },
          {
            value:30,
            label: '工作职责',
          },
          {
            value:31,
            label: '专职人员',
          }],
        },
        {
          value: 23,
          label: '政策法规',
          children: [{
            value:35,
            label: '中国科协政策文件',
          }, 
          {
            value:36,
            label: '地方科协政策文件',
          },
          {
            value:37,
            label: '社团管理文件',
          }],
        },
        {
          value: 25,
          label: '学术交流',
          children: [{
            value:38,
            label: '学术信息',
          }, 
          {
            value:39,
            label: '科技竞赛',
          }],
        },
        {
          value: 27,
          label: '科普风采',
          children: [{
            value:40,
            label: '平顶山学院科普活动',
          }, 
          {
            value:41,
            label: '平顶山市政协科普活动',
          }],
      }]
    }
  },
  created(){
  },
  mounted(){
  },
  methods: {
    //修改对话框关闭的方法
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //级联选择器的方法
    handleChange(value) {
      // console.log(value);
      // console.log(value[1]);
      this.newsCategoryId = value[1]; //将得到的小标题id存放起来
      this.query(this.newsCategoryId);
    },
    query(newsCategoryId){
      const data = {
        current:this.currentPage,
        newsCategoryId:newsCategoryId,
        size:this.pageSize
      };
      getNewsList(data).then(res=>{
        // console.log(res);
        if (res.code !== 200) {
          return this.$message.error('获取新闻列表失败')
        }else{
          this.tableData = res.data.records
          this.total = res.data.total
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //展示修改对话框
    showEditDialog(id){
      getnew(id).then(res => {
        // console.log(res);
        if (res.code == 200) {
          this.editForm = res.data
        }     
      })
      this.editDialogVisible = true;
    },
    //确定修改表单提交，验证发起请求
    editNew(){
      const data = {
        id: this.editForm.id,
        releaseTime: this.editForm.releaseTime,
        title:this.editForm.title
      }
      update(data).then(res=>{
        // console.log('dsadasas',res);
        if (res.code == 200) {
          this.editDialogVisible =false;
          this.$message.success('修改新闻成功！')
          this.query(this.newsCategoryId);
        }
      })
    },
    //模糊查询
    fuzzyList(title){
      // console.log(title);
      if(title == ''){
        return  this.$message.error('请先输入查询新闻标题！')
      }
      this.fuzzyShow = true //模糊分页显示
      this.getShow = false  //获取分页隐藏
      this.gettable = false
      this.fuzzytable = true
      const data = {
        current: this.fuzzyForm.fuzzycurrent,
        size: this.fuzzyForm.fuzzysize,
        title:title
      }
      fuzzy(data).then(res => {
        // console.log(res);
        if (res.code !== 200) {
          return this.$message.error('查询新闻列表失败')
        }else{
          this.fuzzytableData = res.data.records
          this.fuzzyForm.fuzzytotal = res.data.total
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //清空查询列表内容
    qingKong(){
      this.tableData = []
      this.fuzzytableData = []
      this.fuzzyForm.fuzzytotal = 0
      this.fuzzyShow = false
      this.getShow = true
      this.fuzzytable = false
      this.gettable = true
    },
    //根据id删除新闻
    async deleteNews(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 要以对象的形式传入
        deleteNew(data).then(res => {
          console.log('>>>'+res);
          if(res.code == 200){
            this.$message.success('删除新闻成功！')
            this.query(this.newsCategoryId);
          }else{
            return this.$message.error('删除新闻失败！')
          }
        })
      }
    },
    //查看
    look(id){
      this.$router.push({path:'news',query:{id:id}})
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.query(this.newsCategoryId)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.query(this.newsCategoryId)
    },
    handleCurrentChangefuzzy(val){
      this.fuzzyForm.fuzzycurrent = val
      this.fuzzyList(this.fuzzyForm.fuzzytitle) //模糊查询
    },
    handleSizeChangefuzzy(val){
      this.fuzzyForm.fuzzysize = val
      this.fuzzyList(this.fuzzyForm.fuzzytitle) //模糊查询
    },
    //去往添加编辑页面
    goEdit(id){
      if (this.newsCategoryId==27&&this.total==1||this.newsCategoryId==28&&this.total==1||this.newsCategoryId==29&&this.total==1||
      this.newsCategoryId==30&&this.total==1||this.newsCategoryId==31&&this.total==1) {
        this.$message.error('该新闻标题下只能存在一篇新闻')
      }else if(this.newsCategoryId==27||this.newsCategoryId==28||this.newsCategoryId==29||this.newsCategoryId==30||
      this.newsCategoryId==31||this.newsCategoryId == 35||this.newsCategoryId==36||this.newsCategoryId==37||
      this.newsCategoryId==38||this.newsCategoryId==39||this.newsCategoryId==40||
      this.newsCategoryId==41||this.newsCategoryId==42||this.newsCategoryId==43||
      this.newsCategoryId==44){
        this.$router.push({path:'/administrator/edit',query:{id:id}})
        console.log(this.newsCategoryId);
      }else{
        this.$message.error('请先选择新闻标题')
      } 
    }
  },
}
</script>

<style lang="less">
.add{
  margin-bottom: 10px !important;
}
.block{
  margin-bottom: 10px;
}
.el-pagination{
  margin-top: 10px;
}
</style>

 src/components/Administrator/Main.vue

@@ -1,12 +1,13 @@
<template>
  <div>
    <!-- 级联选择器 -->
     <div class="block">
    <div class="block">
      <el-cascader
        v-model="value"
        :options="options"
        clearable
        filterable
        :getCheckedNodes="true"
        @change="handleChange">
      </el-cascader>
    </div>
@@ -19,19 +20,23 @@
          </el-col>
          <el-col :span="10">
            <!-- 新闻搜索 -->
            <el-input clearable @clear="qingKong()" placeholder="请输入所要查询的新闻标题" v-model="fuzzyForm.fuzzytitle" class="input-with-select">
              <el-button class="btn" slot="append" icon="el-icon-search" @click="fuzzyList(fuzzyForm.fuzzytitle)"></el-button>
            <el-input clearable placeholder="请输入所要查询的新闻标题" v-model="search" class="input-with-select">
            </el-input>
          </el-col>
        </el-row>
        <!-- 新闻表格区域 -->
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
        <el-table 
          :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
          border 
          style="width: 100%" 
          :header-cell-style="{textAlign: 'center'}" 
          :cell-style="{ textAlign: 'center' }"
        >
          <!-- :header-cell-style="{textAlign: 'center'}"设置头部居中： -->
          <!-- :cell-style="{ textAlign: 'center' }"设置整个表格内容水平居中： -->
          <!-- 问题：怎么获取数组中每个对象的key值（每条新闻的id）?
               解决：通过作用域插槽 slot-scope 获取每个对象 -->
          <el-table-column type="index"></el-table-column>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ (currentPage-1)*pageSize+scope.$index+1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="releaseTime" label="日期" width="" >
          </el-table-column>
          <el-table-column prop="title" label="新闻标题" width="">
@@ -55,7 +60,6 @@
          <!-- 获取新闻列表分页 -->
          <div>
            <el-pagination
              v-show="getShow"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
@@ -63,19 +67,6 @@
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <!-- 模糊新闻列表分页 -->
          <div>
            <el-pagination
              v-show="fuzzyShow"
              @size-change="handleSizeChangefuzzy"
              @current-change="handleCurrentChangefuzzy"
              :current-page="fuzzyForm.fuzzycurrent"
              :page-sizes="[6,12, 18,]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fuzzyForm.fuzzytotal">
            </el-pagination>
          </div>
        </div>
@@ -95,8 +86,13 @@
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="发布日期:">
            <!-- <el-input v-model="editForm.releaseTime"></el-input> -->
            <el-date-picker v-model="editForm.releaseTime" type="date" placeholder="请选择发布日期"></el-date-picker>
            <el-date-picker 
              v-model="editForm.releaseTime" 
              type="date" 
              placeholder="请选择发布日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
@@ -113,16 +109,20 @@
export default {
  data() {
    return {
      fuzzyShow:false,  //模糊查询分页的显示(布尔值)
      search:'',
      getShow:true, //获取分页的显示(布尔值)
      gettable:true,  //获取表格的显示
      visible: false,
      editDialogVisible:false,  //控制修改对话框的布尔值
      editForm:{},  //查询到的新闻对象，目前仅供修改使用
      newsCategoryId:1, //先存一个小标题id
      tableData:[],   //新闻列表对象
      fuzzytableData:[],  //模糊查询列表对象
      pageSize:6,     //每页条数
      currentPage:1,  //当前页
      total:0,        //新闻总条数
      fuzzyShow:false,  //模糊查询分页的显示(布尔值)
      fuzzytable:false, //模糊查询表格的显示
      fuzzyForm:{ fuzzytitle:'',fuzzytotal:0,fuzzycurrent:1,fuzzysize:6 },  //模糊查询列表对象
      value: [],
      options: [{
@@ -139,6 +139,10 @@
        {
          value:44,
          label: '学院动态',
        },
        {
          value:45,
          label: '轮播图',
        }],
      },{
          value: 22,
@@ -223,6 +227,7 @@
    handleChange(value) {
      // console.log(value);
      // console.log(value[1]);
      this.currentPage = 1;
      this.newsCategoryId = value[1]; //将得到的小标题id存放起来
      this.query(this.newsCategoryId);
    },
@@ -278,6 +283,8 @@
      }
      this.fuzzyShow = true //模糊分页显示
      this.getShow = false  //获取分页隐藏
      this.gettable = false
      this.fuzzytable = true
      const data = {
        current: this.fuzzyForm.fuzzycurrent,
        size: this.fuzzyForm.fuzzysize,
@@ -288,7 +295,7 @@
        if (res.code !== 200) {
          return this.$message.error('查询新闻列表失败')
        }else{
          this.tableData = res.data.records
          this.fuzzytableData = res.data.records
          this.fuzzyForm.fuzzytotal = res.data.total
        }
      }).catch(err => {
@@ -298,9 +305,12 @@
    //清空查询列表内容
    qingKong(){
      this.tableData = []
      this.fuzzytableData = []
      this.fuzzyForm.fuzzytotal = 0
      this.fuzzyShow = false
      this.getShow = true
      this.fuzzytable = false
      this.gettable = true
    },
    //根据id删除新闻
    async deleteNews(id){
@@ -358,6 +368,20 @@
    },
    //去往添加编辑页面
    goEdit(id){
      let title = '';
      console.log(this.value);
      if (this.value.length = 2) {
        let t = this.value[0];
        let i = this.value[1];
        this.options.forEach( item => {
          if(item.value == t){
            title += item.label+'/'
            item.children.forEach( e => {
              if(e.value == i) title += e.label;
            })
          }
        })
      }
      if (this.newsCategoryId==27&&this.total==1||this.newsCategoryId==28&&this.total==1||this.newsCategoryId==29&&this.total==1||
      this.newsCategoryId==30&&this.total==1||this.newsCategoryId==31&&this.total==1) {
        this.$message.error('该新闻标题下只能存在一篇新闻')
@@ -366,11 +390,15 @@
      this.newsCategoryId==38||this.newsCategoryId==39||this.newsCategoryId==40||
      this.newsCategoryId==41||this.newsCategoryId==42||this.newsCategoryId==43||
      this.newsCategoryId==44){
        this.$router.push({path:'/administrator/edit',query:{id:id}})
        this.$router.push({path:'/administrator/edit',query:{id:id,title:title}})
        console.log(this.newsCategoryId);
      }else if(this.newsCategoryId==45){
        this.$router.push({path:'/administrator/editlunbo',query:{id:id,title:title}})
        // console.log(this.newsCategoryId);
      }else{
        this.$message.error('请先选择新闻标题')
      } 
      }
 
    }
  },
}

 src/components/page/News.vue

@@ -6,7 +6,7 @@
      <p>发布日期：{{ releaseTime }} 点击量：[ {{hits}} ]</p>
    </div>
    <hr>
    <div v-html="content"></div>
    <div v-html="content" class="content"></div>
  </div>
</template>
<script>
@@ -40,6 +40,10 @@
}
</script>
<style>
.box {
  width: 1200px;
  margin: 0 auto;
}
.header h2{
  color: rgb(3, 73, 144);
  text-align: center;
@@ -50,8 +54,7 @@
  height: 35px;
  line-height: 35px;
}
.box {
  width: 1200px;
  margin: 0 auto;
}
/* .content span{
  background-color: rgb(0, 0, 0);
} */
</style>

 src/components/page/index.vue

@@ -5,8 +5,8 @@
        <div class="block marr10">
          <el-carousel height="460px"  arrow="always" :interval="3000">
            <el-carousel-item v-for="(item,index) in imgList" :key="index">
              <div>
                <img :src="item.path"  alt="" style="width:105%;">
              <div @click="gonew(item.id)" class="cursor">
                <img :src="'http://localhost:8080/'+item.picturePath"  alt="" style="width:105%;">
              </div>
            </el-carousel-item>
          </el-carousel>
@@ -35,16 +35,42 @@
import school from '../../views/school.vue'
import other from '../../views/other.vue'

import {getNewsList} from '../../api/api'

export default {
  components: { notice, work, school, other },
  name: 'index',
  data(){
    return{
      imgList:[
        { path:require('../../assets/1.jpg'),index: 1},
        { path:require('../../assets/2.jpg'),index: 2},
        { path:require('../../assets/3.jpg'),index: 3},
      ]
      // imgList:[
      //   { path:require('../../assets/1.jpg'),index: 1},
      //   { path:require('../../assets/2.jpg'),index: 2},
      //   { path:require('../../assets/3.jpg'),index: 3},
      // ],
      imgList:[],
    }
  },
  created(){
    this.getnews()
  },
  methods:{
    getnews(){
      const data ={
        current:1,
        newsCategoryId:45,
        size:3
      }
      getNewsList(data).then(res => {
        console.log(res);
        if(res.code == 200){
          this.imgList = res.data.records
        }
      }).catch(err => {
        console.log(err);
      })
    },
    gonew(id){
      this.$router.push({path:'/home/news',query:{id:id}})
    }
  }
}

 src/components/page/introduce.vue

@@ -91,6 +91,7 @@
        // console.log(res);
        if(res.code == 200){
          this.new = res.data;
          console.log(this.new.content);
        }
      }).catch(error => {
        console.log(error);
@@ -108,9 +109,6 @@
    line-height: 50px;
    text-align: center;
  }
}
.box-card{
  // background-color: rgb(131, 212, 115);
}
.ft-blue {
  color: rgb(9, 143, 252);

 src/components/page/kePuFengCai.vue

@@ -14,13 +14,16 @@
      </el-col>
       <!-- 新闻内容 -->
      <el-card class="box-card">
        <el-col :span="18">
        <p class="name">{{this.cont}}</p>
        <hr class="namehr">
        <el-col :span="24">
          <div>
            <el-row class="marb10" :key="index" v-for="(item, index) in newsList">
              <div class="flex-v flex-between marb5 cursor" @click="show(item)">
                <div>{{ item.title }}</div>
                <div>{{ item.releaseTime }}</div>
              </div>
              <el-divider class="hr"></el-divider>
            </el-row>
          </div>
          <!-- 分页 -->
@@ -51,7 +54,7 @@
      cont: '',
      menuList: [],
      newsList:[],
      pageSize:2,
      pageSize:5,
      currentPage:1,
      total:0,
      item:{},
@@ -65,6 +68,7 @@
  watch: {
    menuList(n,o){
      this.cont =  this.menuList[0].name
      this.item = this.menuList[0];
      this.getnews(this.menuList[0]);
    }
  },
@@ -131,11 +135,11 @@
  color: #000;
}
.box-card{
  height: 600px;
  height: 500px;
  position: relative;
  .fenye{
    position: absolute;
    bottom: 2px;
    bottom: 10px;
  }
} 
</style>

 src/components/page/xueShuJiaoLiu.vue

@@ -14,13 +14,16 @@
      </el-col>
       <!-- 新闻内容 -->
      <el-card class="box-card">
        <el-col :span="18">
        <p class="name">{{this.cont}}</p>
        <hr class="namehr">
        <el-col :span="24">
          <div>
            <el-row class="marb10" :key="index" v-for="(item, index) in newsList">
              <div class="flex-v flex-between marb5 cursor" @click="show(item)">
                <div>{{ item.title }}</div>
                <div>{{ item.releaseTime }}</div>
              </div>
              <el-divider class="hr"></el-divider>
            </el-row>
          </div>
          <!-- 分页 -->
@@ -51,7 +54,7 @@
      cont: '',
      menuList: [],
      newsList:[],
      pageSize:2,
      pageSize:5,
      currentPage:1,
      total:0,
      item:{},
@@ -65,6 +68,7 @@
  watch: {
    menuList(n,o){
      this.cont =  this.menuList[0].name
      this.item = this.menuList[0];
      this.getnews(this.menuList[0]);
    }
  },
@@ -132,11 +136,11 @@
  color: #000;
}
.box-card{
  height: 600px;
  height: 500px;
  position: relative;
  .fenye{
    position: absolute;
    bottom: 2px;
    bottom: 10px;
  }
} 
</style>

 src/components/page/zhengce.vue

@@ -13,13 +13,16 @@
        </ul>
      </el-col>
      <el-card class="box-card">
        <el-col :span="18">
        <p class="name">{{this.cont}}</p>
        <hr class="namehr">
        <el-col :span="24">
          <div>
            <el-row class="marb10" :key="index" v-for="(item, index) in newsList">
              <div class="flex-v flex-between marb5 cursor" @click="show(item)">
                <div>{{ item.title }}</div>
                <div>{{ item.releaseTime }}</div>
              </div>
              <el-divider class="hr"></el-divider>
            </el-row>
          </div>
          <!-- 分页 -->
@@ -49,10 +52,10 @@
  },
  data() {
    return {
      cont: '',
      cont: '', //小标题变色
      menuList: [],
      newsList:[],
      pageSize:2,
      pageSize:5,
      currentPage:1,
      total:0,
      item:{},
@@ -66,14 +69,11 @@
  watch: {
    menuList(n,o){
      this.cont =  this.menuList[0].name;
      this.item = this.menuList[0];
      this.getnews(this.menuList[0]);
    }
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getnews(this.item);
    },
    getTitle(){
      const data = Number(this.$route.query.id);
      getMinTitle(data).then(res => {
@@ -107,6 +107,11 @@
        console.log(error);
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // this.currentPage = val
      this.getnews(this.item);
    },
    // 跳转到新闻展示页面
    show(item){
      // console.log(item.id);
@@ -118,7 +123,7 @@

<style lang="less" scoped>
ul {
  width: 200px;
  // width: 200px;
  li {
    background-color: rgb(242, 243, 245);
    height: 50px;
@@ -133,11 +138,11 @@
  color: #000;
}
.box-card{
  height: 600px;
  height: 500px;
  position: relative;
  .fenye{
    position: absolute;
    bottom: 2px;
    bottom: 10px;
  }
} 
</style>

 src/router.js

@@ -18,6 +18,7 @@
import Welcome from './components/Administrator/Welcome.vue'
import Main from './components/Administrator/Main.vue'
import Edit from './components/Administrator/Edit.vue'
import EditLunBo from './components/Administrator/EditLunBo.vue'


Vue.use(Router)
@@ -31,7 +32,8 @@
      children: [{ path:'welcome',component:Welcome },
                { path:'main',component:Main },
                { path:'edit',component:Edit },
                { path:'news',component:News },] 
                { path:'news',component:News },
                { path:'editlunbo',component:EditLunBo }] 
    },
    { 
      path: '/home',