手把手撸一个前后端分离Demo -- 页面开发篇

一、概述

通过前面的基础配置，拿到后端的数据就可以将页面显示具体的数据了，这次将记录一个页面最基础的CURD功能以及常用的一些开发数据处理。

二、实际开发

（1）在次前端框架中，页面的存放位置是 src / views 文件夹下，在vue中只能有一个Div容器，所以页面的布局都是在一个div下进行布局

（2）页面代码：这是一个待办管理系统的一个页面该页面包含了ElementUI的使用以及Echarts的使用，代码略长(代码质量不好的话勿喷)，需要注意的和常用的会在下面记录出来

（3）组件的使用

Table列表组件

<div id="todo">
    <el-table
              :data="todoList"
              style="width: 100%"
              height="420"
              :key="todoList.Todo_id"
              border
              stripe:true
              >
        <el-table-column
                         prop="Todo_createTime"
                         label="日期"
                         header-align="center"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column
                         prop="Todo_name"
                         label="待办事项"
                         header-align="center"
                         width="auto">
        </el-table-column>
        <el-table-column
                         prop="Todo_typeId"
                         label="类型"
                         header-align="center"
                         width="70"
                         align="center">
            <template slot-scope="{row}">
            <el-tag :type="row.Todo_typeId | statusFilter">
                {{ row.Todo_typeId }}
             </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                         label="操作"
                         header-align="center"
                         width="120"
                         align="center">
            <template slot-scope="scope">
            <template>
                <el-button type="success" size="small" icon="el-icon-check" circle @click="completeTodo(scope.row)"></el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteTodo(scope.row)"></el-button>
                        </template>
            </template>
        </el-table-column>
    </el-table>
</div>

对应的方法:
//获取待办列表
    _getTodoList(){
        let params = {
            Todo_name : this.searchTodoText.trim()
        }
        getTodoList(params).then((res)=>{
        const formatData = [];
        res.data.forEach(element => {
            element.Todo_createTime = moment(Number(element.Todo_createTime)).format('YYYY-MM-DD HH:MM');
            if(element.Todo_typeId == '1'){
                element.Todo_typeId = '紧急';
            }
            if(element.Todo_typeId == '2'){
                element.Todo_typeId = '重要';
            }
            if(element.Todo_typeId == '3'){
                element.Todo_typeId = '一般';
            }
            if(element.Todo_typeId == '4'){
                element.Todo_typeId = '普通';
            }
            formatData.push(element);
        });
        this.todoList = formatData;
        })
    },

（4）注意点

存放数据的data是一个函数

data(){
    return {
        str:'',
        Arr:[],
        num:0
    }
}

存放方法的methods是一个对象

methods:{
    getList(){},
    submit(){}
}

要显示的数据在created生命周期函数中调用

created(){
      this._getTodoList();
      this._getFinishedList();
  },

Echarts图标生成放在mounted生命周期函数中调用

import * as echarts from 'echarts' //引入Echarts

mounted(){
      this.initTodayOverviewCharts();
      this.initStateOverviewCharts();
  },
//此外说明 Echart的使用方法是在页面中创建一个div，然后将这个div用方法将数据渲染到这个div上 div里面无需些任何代码

filters用于过滤数据：比如接口返回的是时间戳，要显示的是具体日期，这个时候就可以在过滤器filters中定义过滤函数，最后使用管道符 | 在页面过滤数据后显示

filters: {
    //过滤状态
    statusFilter(status) {
      const statusMap = {
        紧急: 'danger',
        重要: 'warning',
        一般: 'success',
        普通: 'info'
      }
      return statusMap[status]
    }
  }

处理时间戳与日期可以使用moment.js库来解决二者的转化问题

npm install moment //安装moment.js库

import moment from 'moment' //引入JS库

ElementUI列表插槽的使用：在列表中对某一列数据进行操作的时候会使用到插槽

<template slot-scope="{row}">
    <el-tag :type="row.Todo_typeId | statusFilter">
        {{ row.Todo_typeId }}
            </el-tag>
</template>

==================================================================================

<template slot-scope="scope">
<template>
    <el-button type="success" size="small" icon="el-icon-check" circle @click="completeTodo(scope.row)"></el-button>
    <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteTodo(scope.row)"></el-button>
</template>
</template>

completeTodo(row){
        updateState(row.Todo_id).then((res)=>{
            if(res.data.affectedRows){
                this.$message({
                    type: 'success',
                    message: `"${row.Todo_name}"已完成`
                });
                this._getTodoList();
                this._getFinishedList();
                this.initTodayOverviewCharts();
            }
        })
    },

导入接口方法 (src / api)

import {
  getTodoList,
  getFinishedList,
  addTodo,
  deleteTodo,
  updateState,
  getTodayOverviewData,
  getStateOverviewData,
  getTodayData,
  getTodayTodo_Finished,
  getTodayStateDistribution
} from "@/api/todo";

代码太多基础的会使就够用了对于框架的使用还是大致上可以了的