iView学习笔记(二)：Table行编辑操作

1.前端准备工作

首先新建一个项目，然后引入iView插件，配置好router

npm安装iView

npm install iview --save
cnpm install iview --save

src/main.js文件内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(iView);

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

src/router.js文件内容

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/table1',
            component: () => import('./views/table1.vue')
        },
        {
            path: '/table2',
            component: () => import('./views/table2.vue')
        },
        {
            path:'/',
            redirect:'/table1'
        }
    ]
})

2.后端准备工作

环境说明

python版本：3.6.6
Django版本：1.11.8
数据库：MariaDB 5.5.60

新建Django项目，在项目中新建app，配置好数据库
api_test/app01/models.py文件内容

from django.db import models

class UserProfile(models.Model):
    name = models.CharField("用户名", max_length=32)
    email = models.EmailField(max_length=32)
    status = models.IntegerField(default=1)

    def to_dic(self):
        return dict([(attr, getattr(self, attr)) for attr in [f.name for f in self._meta.fields]])

api_test/urls.py文件内容

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^update_user/$',views.update_user),
    url(r'^get_user/$',views.get_user_list),
]

api_test/app01/views.py文件内容

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

from .models import UserProfile


@csrf_exempt
def update_user(request):
    request_dict = json.loads(request.body)
    user_id = request_dict.get("user_id")
    name = request_dict.get("name")
    email = request_dict.get("email")
    status = request_dict.get("status")
    try:
        UserProfile.objects.filter(id=int(user_id)).update(name=name, email=email, status=status)
        return JsonResponse({"result": True})
    except Exception as e:
        return JsonResponse({"result": False})


def get_user_list(request):
    # for i in range(1, 1001):              // 向数据库创建1000条记录
    #     name = "user" + str(i)
    #     email = "user%s@qq.com" % str(i)
    #     status = random.randint(1, 3)
    #     user_obj = UserProfile(name=name, email=email, status=status)
    #     user_obj.save()
    current = request.GET.get("current", 1)
    size = request.GET.get("size", 0)
    sortType = request.GET.get("sortType")
    filterType = request.GET.get("filterType")
    res_list = []

    try:
        user_list = UserProfile.objects.all()
        if filterType and filterType != "undefined":
            user_list = user_list.filter(status=int(filterType))
        total = user_list.count()
        if current and size:
            end = int(current) * int(size)
            start = (int(current) - 1) * int(size)
            user_list = user_list[start:end]
    except Exception as e:
        print(e)
        return JsonResponse({"result": False}, safe=False)
    for user in user_list:
        res_list.append(user.to_dic())

    if sortType == "desc":
        res_list = sorted(res_list, key=lambda x: x["id"], reverse=True)
    else:
        res_list = sorted(res_list, key=lambda x: x["id"], reverse=False)
    res = {
        "data": {
            "list": res_list,
            "total": total
        },
        "result": True
    }
    return JsonResponse(res, safe=False)

这里前端向后端发送POST请求时，后端没有执行csrftoken验证，前端获取csrftoken,后端进行csrftoken验证不在本文示例之内

3.可编辑单元格

src/views/table1.vue文件内容

分别启动前后端，用浏览器打开URL：http://localhost:8080/#/table1，页面渲染如下

点击某一行用户名后面的修改按钮，用户名原有数据会成input框，让用户输入修改数据

当用户修改完成，点击保存，则会把修改后的用户名发送到后端接口，保存到数据库中

再次刷新浏览器，会看到用户名已经修改了

3.可编辑行

src/views/table2.vue文件内容

用浏览器打开URL：http://localhost:8080/#/table2，页面渲染如下

点击某一行操作栏中的修改按钮，用户名和邮箱原有数据会成input框，input框中数据为原数据，等级原有数据处会变成select下拉框让用户选择

当用户修改完成，点击保存，则会把修改后的用户信息通过POST请求发送到后端接口，保存到数据库中

再次刷新浏览器，会看到用户名已经修改了