新闻查询功能完毕

明梦爽

2022-01-22 ddfc75ed45d427bb8b407133b5e2bde0e6ec581a

新闻查询功能完毕

 src/api/api.js

@@ -30,4 +30,28 @@
    method: 'GET',
    url:`/news/main/${data}`
  })
}
//修改新闻
export const update = data => {
  return request({
    method:'POST',
    url:'/news/update',
    params:data,
  })
}
//删除新闻
export const deleteNew = data => {
  return request({
    method:'POST',
    url:'/news/delete',
    params:data,
  })
}
//模糊查询
export const fuzzy = data => {
  return request({
    method:'POST',
    url:'/news/fuzzy',
    params:data,
  })
}

 src/components/Administrator/AdminHome.vue

@@ -3,7 +3,7 @@
    <el-header>
      <div>
        <img src="../../assets/head.png" alt="" />
        <span>后台管理系统</span>
        <span>新闻后台管理系统</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>

 src/components/Administrator/Edit.vue

@@ -1,7 +1,10 @@
<template>
  <div>
    <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
    <el-button type="primary" @click="submit">提交</el-button>
  <div class="box">
    新闻标题：<el-input v-model="title" placeholder="请输入新闻标题"></el-input><br/><br/>
    发布日期：<el-input v-model="releaseTime" placeholder="请输入新闻发布日期"></el-input>
    新闻内容：<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
    <el-button type="primary" @click="submit">确定</el-button>
    <el-button type="success">提交</el-button>
  </div>
</template>
<script>
@@ -9,25 +12,31 @@
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components:{ quillEditor },
  data () {
  data(){
    return {
      content: '',
      editorOption: {} ,
      title:'', //标题内容
      releaseTime:'', //发布日期
      content: '',  //新闻内容
      editorOption: {
        placeholder: "请输入正文",
      } ,  //编辑器新闻对象
    }
  },
  methods: {
  created(){
  },
  methods:{
    submit () {
      console.log(this.$refs.text.value)
    }
  }
}
</script>
<style lang="less" scoped>
// .myQuillEditor{
//   height: 400px;
// }

<style lang="less" scoped>
.box{
  width: 1200px;
  margin: 0 auto;
}
</style>

 src/components/Administrator/Main.vue

@@ -1,5 +1,6 @@
<template>
  <div>
    <!-- 级联选择器 -->
     <div class="block">
      <el-cascader
        v-model="value"
@@ -11,7 +12,19 @@
    </div>
    <div>
      <el-card class="box-card">
        <el-button class="add" type="success" icon="el-icon-plus" @click="goEdit()">点击在该列表下添加一条新闻</el-button>
        <el-row :gutter="40">
          <el-col :span="4">
            <!-- 添加新闻按钮 -->
            <el-button el-button class="add" type="success" icon="el-icon-plus" @click="goEdit()">点击在该列表下添加一条新闻</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 :data="tableData" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
        >
          <!-- :header-cell-style="{textAlign: 'center'}"设置头部居中： -->
@@ -30,23 +43,16 @@
              <!-- {{ scope.row.id }} -->
              <div>
                <el-button type="success" @click="look(scope.row.id)">查看</el-button>
                <el-button type="warning" @click="amend(scope.row.id)">修改</el-button>&nbsp
                <el-popconfirm
                  confirm-button-text='是的'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除该条新闻？"
                >
                  <el-button slot="reference">删除</el-button>
                </el-popconfirm>
                <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 class="fenye">
          <!-- 获取新闻列表分页 -->
          <div class="get">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
@@ -57,24 +63,62 @@
              :total="total">
            </el-pagination>
          </div>
          <!-- 模糊新闻列表分页 -->
          <div class="fuzzy">
            <el-pagination
              @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>
      </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-input v-model="editForm.releaseTime"></el-input>
          </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 } from '../../api/api'
import { getNewsList,getnew,update,deleteNew,fuzzy } from '../../api/api'
import axios from 'axios'
export default {
  data() {
    return {
      visible: false,
      editDialogVisible:false,  //控制修改对话框的布尔值
      editForm:{},  //查询到的新闻对象，目前仅供修改使用
      newsCategoryId:1, //先存一个小标题id
      tableData:[],   //新闻列表对象
      pageSize:6,     //每页条数
      pageSize:3,     //每页条数
      currentPage:1,  //当前页
      newsList:[],
      total:0,        //新闻总条数
      fuzzyForm:{ fuzzytitle:'',fuzzytotal:0,fuzzycurrent:1,fuzzysize:6 },  //模糊查询列表对象
      value: [],
      options: [{
        value: 1,
@@ -162,26 +206,21 @@
  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(value){
    //   const data = {
    //     current:this.currentPage,
    //     newsCategoryId:value[1],
    //     size:this.pageSize
    //   };
    //   getNewsList(data).then(res=>{
    //     console.log(res);
    //     this.tableData = res.data.records
    //     this.total = res.data.total
    //   }).catch(err => {
    //     console.log(err);
    //   })
    // },
    query(newsCategoryId){
      const data = {
        current:this.currentPage,
@@ -200,10 +239,98 @@
        console.log(err);
      })
    },
    //修改
    amend(id){
      alert('爱你呦');
      console.log('>>>'+id);
    //展示修改对话框
    showEditDialog(id){
      getnew(id).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.editForm = res.data
        }     
      })
      this.editDialogVisible = true;
    },
    //确定修改表单提交，验证发起请求
    editNew(){
      // console.log(typeof(this.editForm.releaseTime)); 
      // console.log(this.editForm.releaseTime);
      let arr = this.editForm.releaseTime.split('')
      if(arr[4] !== '/' || arr[7] !== '/'){
        return this.$message.error('请按照“XXXX/XX/XX”的格式填写日期')
      }else{
        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('请先输入查询新闻标题！')
      }
      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.tableData = res.data.records
          this.fuzzyForm.fuzzytotal = res.data.total
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //清空查询列表内容
    qingKong(){
      this.tableData = []
      this.fuzzyForm.fuzzytotal = 0
    },
    //根据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){
@@ -218,6 +345,14 @@
      // 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(){
@@ -244,4 +379,8 @@
.el-pagination{
  margin-top: 10px;
}
.fenye{
  display: flex;
  justify-content: space-between;
}
</style>

 src/components/Administrator/Update.vue

New file
@@ -0,0 +1,46 @@
<template>
  <div class="box">
    新闻标题：<el-input v-model="input" placeholder="请输入新闻标题"></el-input><br/><br/>
    发布日期：<el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker><br/><br/>
    新闻内容：<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />
    <el-button type="primary" @click="submit">确定</el-button>
    <el-button type="success">提交</el-button>
  </div>
</template>
<script>
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 {
      input:'', //标题内容
      value1:'',  //日期
      content: '',  //新闻内容
      editorOption: {
        placeholder: "请输入正文",
      } ,  //编辑器新闻对象
    }
  },
  created(){
  },
  methods:{
    submit () {
      console.log(this.$refs.text.value)
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  width: 1200px;
  margin: 0 auto;
}
</style>

 src/components/page/News.vue

@@ -40,7 +40,7 @@
    // queryAll(){
    //   this.content = ``
    // }
  }
  },
}
</script>
<style>

 src/components/page/introduce.vue

@@ -15,12 +15,7 @@
       <!-- 新闻内容 -->
      <el-card class="box-card">
        <el-col :span="18">
          <!-- <div v-if="newsList.length > 0">
            <el-row class="marb10" :key="index" v-for="(item, index) in newsList">
              {{ item.title }}
            </el-row>
          </div> -->
          <div>{{ content }}</div>
          <div>{{ this.new.content }}</div>
        </el-col>
      </el-card>
    </el-row>
@@ -40,7 +35,7 @@
      cont: '',
      menuList: [],
      newsList:[],
      content:'',
      new:{}  //新闻对象
    }
  },
  created() {
@@ -51,15 +46,15 @@
  watch: {
    menuList(n,o){
      this.cont =  this.menuList[0].name;
      this.getnews(this.menuList[0]);
      this.getalone(this.newsList);
      this.getnews(this.menuList[0]); //改变对象，菜单栏的东西要写到监听属性里边
    }
  },
  methods: {
    //获取小标题的id
    getTitle(){
      const data = Number(this.$route.query.id);
      getMinTitle(data).then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          this.menuList = res.data
        }
@@ -67,10 +62,12 @@
        console.log(err);
      })
    },
    //小标题菜单的球切换
    changeMenu(val) {
      this.cont = val.name;
      this.getnews(val)
    },
    //获取到了新闻列表，里边只有一个对象
    getnews(item){
      const data = {
        current:1,
@@ -78,26 +75,25 @@
        size:5
      };
      getNewsList(data).then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          // if(res.data.records.length == 1){
            this.newsList = [];
            this.getalone(res.data.records[0]);
          // }else{
          //   this.content = '';
          //   this.newsList = res.data.records
          // }
          this.newsList = res.data.records
          this.getalone(this.newsList[0].id)
        }
      }).catch(error => {
        console.log(error);
      })
    },
    getalone(item){
      const data = item.id;
    //获取新闻内容,得到一个新闻对象
    getalone(id){
      const data = id;
      getnew(data).then(res => {
        console.log(">>>>",res);
        this.content = res.data.content;
        this.data = res.data;
        // console.log(res);
        if(res.code == 200){
          this.new = res.data;
        }
      }).catch(error => {
        console.log(error);
      })
    }
  }

 src/main.js

@@ -9,7 +9,6 @@
import './assets/css/my_style.css'



import axios from 'axios'
// 配置请求的跟路径
// axios.defaults.baseURL = 'http://8.140.68.52:8181'

 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 Update from './components/Administrator/Update.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:'update',component:Update }] 
    },
    { 
      path: '/home', 

 src/views/homePage/moreMessage.vue

@@ -17,14 +17,14 @@
            </li>
          </ul>
          <!-- 分页 -->
          <div class="fenye">
          <div>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              @current-change="handleCurrentChange1"
              :current-page="currentPagenotice"
              :page-size="pageSize"
              layout="prev, pager, next,total"
              :total="total">
              :total="totalnotice">
            </el-pagination>
          </div>
        </el-card>
@@ -43,14 +43,14 @@
              </li>
            </ul>
            <!-- 分页 -->
            <div class="fenye">
            <div>
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange2"
                :current-page.sync="currentPageschool"
                :page-size="pageSize"
                layout="prev, pager, next,total"
                :total="total">
                :total="totalschool">
              </el-pagination>
            </div>
        </el-card>
@@ -70,14 +70,14 @@
              </li>
            </ul>
            <!-- 分页 -->
            <div class="fenye">
            <div>
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange3"
                :current-page.sync="currentPagework"
                :page-size="pageSize"
                layout="prev, pager, next,total"
                :total="total">
                :total="totalwork">
              </el-pagination>
            </div>
           </el-card>
@@ -95,9 +95,13 @@
      noticeList: [],
      schoolList: [],
      workList: [],
      currentPage:1,
      currentPagenotice:1,  //通知公告的当前页
      currentPageschool:1,  //学院动态的当前页
      currentPagework:1,  //工作动态的当前页
      pageSize:4,
      total:0,
      totalnotice:0,  //通知公告新闻的总条数
      totalschool:0,  //学院动态新闻的总条数
      totalwork:0,  //工作动态新闻的总条数
    }
  },
  mounted(){
@@ -106,24 +110,36 @@
    this.getschool();
  },
  methods: {
    handleCurrentChange(val){
      console.log(`当前页: ${val}`);
    //通知公告的分页切换
    handleCurrentChange1(val){
      // console.log(`当前页: ${val}`);
      this.currentPagenotice = val;
      this.getnotice();
      this.getwork();
    },
    //学院动态的分页切换
    handleCurrentChange2(val){
      // console.log(`当前页: ${val}`);
      this.currentPageschool = val;
      this.getschool();
    },
    //工作动态的分页切换
    handleCurrentChange3(val){
      // console.log(`当前页: ${val}`);
      this.currentPagework = val;
      this.getwork();
    },
    //获取新闻列表
    getnotice(){
      const data = {
        current:this.currentPage,
        current:this.currentPagenotice,
        newsCategoryId:42,
        size:this.pageSize
      }
      getNewsList(data).then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          this.noticeList = res.data.records
          this.total =  Number(res.data.total)
          this.totalnotice =  res.data.total
        }
      }).catch(error => {
        console.log(error);
@@ -131,15 +147,15 @@
    },
    getwork(){
      const data = {
        current:this.currentPage,
        current:this.currentPagework,
        newsCategoryId:43,
        size:this.pageSize
      }
      getNewsList(data).then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          this.workList = res.data.records
          this.total =  Number(res.data.total)
          this.totalwork =  Number(res.data.total)
        }
      }).catch(error => {
        console.log(error);
@@ -147,15 +163,15 @@
    },
    getschool(){
      const data = {
        current:this.currentPage,
        current:this.currentPageschool,
        newsCategoryId:44,
        size:this.pageSize
      }
      getNewsList(data).then(res => {
        console.log(res);
        // console.log(res);
        if(res.code == 200){
          this.schoolList = res.data.records
          this.total =  Number(res.data.total)
          this.totalschool =  Number(res.data.total)
        }
      }).catch(error => {
        console.log(error);