VUE项目实战

项目需求

利用VUE写一个维护文章信息的功能

列表层HTML相关代码

<template>
    <div>
        <el-table stripe border 
    :data="select_limit" 
    :height="tableHeight"
    size="mini" 
    header-cell-class-name="header-row" 
    @selection-change="handleSelectionChange" 
    @sort-change='tableChange'>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="标题">
              <span>{{ props.row.title }}</span>
            </el-form-item>
            <el-form-item label="内容">
              <span>{{ props.row.content }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column  sortable prop="id" label="序号"  width="100px" show-overflow-tooltip></el-table-column>
      <el-table-column sortable show-overflow-tooltip prop="title" label="标题" 
      width="150px"  header-align="center" 
      :filters="filter"
      :filter-method="filterHandler">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>标题: {{ scope.row.title }}</p>
          <p>内容: {{ scope.row.content }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.title }}</el-tag>
          </div>
        </el-popover>
      </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" width="150px"  header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" width="150px" label="时间" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="title" label="标题" width="150px"  header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="content" label="内容" width="150px"  header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" width="150px" label="时间" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="title" label="标题" width="150px"  header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="content" label="内容" width="150px"  header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" width="150px" label="时间" header-align="center" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <!-- 自己定义列头
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
        </template> 
        -->
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleEdit(scope.$index, scope.row)"> 编辑</el-button>
          <el-popconfirm title="确定要删除此数据吗?" @onConfirm="deleteActicle(scope.$index, scope.row)">
            <el-button slot="reference" size="small" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <el-row type="flex" justify="center">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5,10,15,20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="selectPage.total"
      />
    </el-row>
    </div>
</template>

数据绑定层相关代码

<script>

// 导入后台的增删改查   有多条就用逗号隔开
import { getDemand_taskList, acticle_limit, acticle_delete, acticle_update, acticle_insert,acticle_select} from '@/api/index.js'
// 导入组件，下面才可以调用
import ActicleEdit from './ActicleEdit'
// 导入组件
import DelUtil from './delete'
// import {acticle_insert} from "../../api";
export default {
  // name: 'ceshi',
  // 调用组件，就是ActicleEdit.vue
  components: { ActicleEdit },
  data () {
    return {
      //自动适应高度
      tableHeight: window.innerHeight - 365,
      //过滤时候使用
      filter:[
        {text: '2016-05-01', value: 'head'}, 
        {text: '2016-05-02', value: 'hea'}, 
        {text: 'head4', value: 'head1'}, 
        {text: 'head2', value: 'head2'}
      ],
      input:'',
      //主要数据
      select_limit: [
        {
          id:'1',title:'head1',content:'content1',createTime:'2020-01-02 12:22:22'
        },{
          id:'2',title:'head2',content:'content2',createTime:'2020-01-02 12:22:22'
        },{
          id:'3',title:'head3',content:'content3',createTime:'2020-01-02 12:22:22'
        },{
          id:'4',title:'head4',content:'content4',createTime:'2020-01-02 12:22:22'
        },{
          id:'5',title:'head5',content:'content5',createTime:'2020-01-02 12:22:22'
        },{
          id:'6',title:'head6',content:'content6',createTime:'2020-01-02 12:22:22'
        },{
          id:'7',title:'head7',content:'content7',createTime:'2020-01-02 12:22:22'
        },{
          id:'8',title:'head8',content:'content8',createTime:'2020-01-02 12:22:22'
        }
      ],
      //是否显示操作窗体
      displayDialog: false,
      //分页相关内容
      selectPage: {
        start: 1, // 第几页
        limit: 5, // 显示几条
         total:10,  //总条数
      },
      //窗体中的表单对象定义不一样的表单需要有不同的对象属性
      formData: {
        id: '',
        title: '',
        content: '',
        createTime: ''
      },
      
      // inputData:[],
      //窗体标题
      title: '',
      //对话框状态
      dialogStatus: '',
      //复选数组
      multipleSelection: []
    }
  },
  // 页面加载时调用分页
  created () {
    //渲染页面时调用这个方法创建列表
    this.ActicleList()
  },
  methods: {
    deleteData:function(obj){
      console.log("========")
      console.log(obj)
      console.log("========")
    },
    batchDel:function(rows){
      //批量删除时候需要调用
      DelUtil.deleteItem(rows,this.deleteData)
    },
    tableChange:function(column,prop,order){
      //排序时会调用这个事件
      console.log(column)
      console.log(prop)
      console.log(order)
    },
    filterHandler(value, row, column) {
      //过滤的时候使用
      console.log("过滤的时候使用===",row,value,column)
      const property = column['property'];
      return row[property] === value;
    },
    // 分页查询
    ActicleList () {
        //这里放分页查询逻辑需要和服务器接口联调
    },
    ceshiEditOk () {
      //关闭窗体时候使用此方法,以后会改名
      this.displayDialog = false
    },
    handleSelectionChange (val) {
      //批量选择时候会触发此方法
      this.multipleSelection = val;
    },
    ActicleCreate () {
      // 进入添加页面，添加界面数据给空值
      this.formData = {title: '', content: ''}
      // dislogStatus为create，表示进入的是添加界面
      this.dialogStatus = 'create'
      // displayDiglog为true，表示显示当前界面，上面默认为false，false表示不显示
      this.displayDialog = true
      // 进入当前页面后，上方显示的标题
      this.title = '添加文章'
    },
    handleEdit (index, row) {
      // 进入修改界面,回显数据信息,未来有可能需要和服务器API接口对应上,还得看具体需求
      this.formData = {
        index: index,
        // row.xxxx  就是这条数据的XXX字段   绑定页面该条数据
        id: row.id,
        title: row.title,
        content: row.content,
        createTime: row.createTime
      }
      // dialogStatus为edit，表示进入的是修改界面
      this.dialogStatus = 'edit'
      this.title = '编辑文章'
      this.displayDialog = true
    },
    // 删除也要绑定数据，一次删一条
    deleteActicle (index, row) {
      //单独删除一条数据,这里应该弹出来一个confirm对话框出来
      this.formData = {
        id: row.id,
        head: row.head,
        content: row.content
      }
      this.select_limit.splice(index,1);
    },
    updateData () {
      //编辑窗体中更新数据
      var formData = this.formData
      var index = formData.index
      for(var k in formData){
         this.select_limit[index][k] = formData[k]
      }
      this.$message('编辑数据成功!')
      this.ceshiEditOk()
    },

    createData () {
      //新增窗体中添加数据
      var formData = this.formData
      formData.id = 5
      formData.createTime = '2020-01-02 21:22:12'
      this.select_limit.push(formData)
      this.$message('添加数据成功!')
      this.ceshiEditOk()
    },


    selectLike(){
        //查询方法和API交互
        this.selectPage.start=1
        this.inputData=this.input
        this.selectPage.limit=5
        this.ActicleList()
    },

     handleSizeChange(val) {
       //分页方法和API交互
       this.selectPage.limit = val
       this.ActicleList()
       console.log(limit)
     },
     handleCurrentChange(val) {
       //分页方法和API交互
       this.selectPage.start=val
       this.ActicleList()
     }
  }
}

</script>

axios 访问服务器代码

// 导入request包
import request from '../utils/request'
// api的request_api.js负责和服务器接口进行交互
export function getDemand_taskList() {
  return request({
    url: '/workflow/base_table_wzlrs',
    method: 'get'

  })
}
//分页           //前台页面需要导入一下才可以用
export function acticle_limit(data) {
  return request({
    //controller里的路径
    url: '/acticle/selectLimit?'+data,
    //请求方式
    method: 'get',
    data
  })
}
//查询
export function acticle_select(data) {
  return request({
    //controller里的路径
    url: '/acticle/select',
    //请求方式
    method: 'post',
    data
  })
}
//删除
export function acticle_delete(data) {
  console.log(data)
  return request({
    url: '/acticle/delete/'+data,
    method: 'delete',
  })
}
//修改
export function acticle_update(data) {
  return request({
    url: '/acticle/update/',
    method: 'put',
    data
  })
}
//添加
export  function acticle_insert(data){
  return request({
    url:'/acticle/create/',
    method:'post',
    data
  })
}

组件层窗体代码

<template>
  <el-dialog :visible="visible" :title="name" width="450px" @close="handleClose('form')">
    <el-form ref="dataForm" status-icon label-position="left" :model="obj" :rules="rule">
      <el-form-item label="标题" prop="title">
        <el-input v-model="obj.title" size="small"  placeholder="请输入标题!" maxlength="10" show-word-limit/>
      </el-form-item>
      <el-form-item label="内容" size="small"  prop="content" placeholder="请输入内容!">
        <el-input v-model="obj.content" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitClick('dataForm')">确定</el-button>
      <el-button @click="handleClose()">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name:'acticle-edit',
  data() {
      return {
        rule:{
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
            {
              required: true,
              pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              message: '标题不支持特殊字符',
              trigger: 'blur'
            }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
            {
              required: true,
              pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              message: '内容不支持特殊字符',
              trigger: 'blur'
            }
          ]
        }
      }
  },
  props: {
    // 窗体里面必须要的属性
    visible: {
      type: Boolean,
      required: false,
      default: false
    },
    obj:{
      type: Object,
      required: true
    },
    status:{
      type:String,
      required:true
    },
    name:{ 
      type:String,
      required:true
    }
  },
  methods:{
    handleClose(){
      //   $emit 出发当前实例上的事件
      this.$emit('ceshiEditOk')
    },
    submitClick(form){
      //判断index.vue里点击后dialogStatus的值,
      //进入create就执行createData进行添加
      this.$refs[form].validate(valid => {
          // 校验表单是否通过
          if(valid){
            if (this.status==='create'){
              this.$emit('createData',this.obj)
            }else{
              //JSON.stringify  json转对象
              console.log(JSON.stringify(this.obj))
              this.$emit('updateData',this.obj)
            }
          }
      });
    }
  }
}
</script>

删除组件代码

import { MessageBox } from 'element-ui';
import { Message } from 'element-ui';
import { acticle_delete } from '@/api/index.js'
let article = {
  deleteItem(rows,call){
    if (rows.length===0) {
       Message.info({message: '请选择数据进行删除!'})
       return
    }
    //这里编写删除确认对话框
    MessageBox.confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       //这里写要删除的逻辑,接口调用成功后,将本地数据移出成功!
       let ids = [] 
       for(var val of rows){
           ids.push(val.id)
       }
       // 根据id 查询上级id 如果上级id为 0 或1  不可以被删除 弹框提示
       call && call(ids)
       
     }).catch((e) => {
       console.error(e)
       Message.info({message: '已取消删除!'});      
     });
 }
}
export default article