iview-admin 1.3 + django 2.0 (一) 增删改查例子

以下为利用iview-admin + django 做的一个最基本的增删改查例子。

前端iview-admin

git clone https://github.com/iview/iview-admin.git
cd iview-admin

修改.eslintrc.json
17 "no-console": ["off"],
21"no-fallthrough": 0,

npm install
npm run dev

如果报错修改
build/webpack.dev.config.js
11 const buf = Buffer.from('export default "development";');
build/webpack.prod.config.js
15 const buf = Buffer.from('export default "development";');

src/main.js

import axios from 'axios';
Vue.prototype.axios = axios;

npm install axios

src/router/router.js

export const otherRouter = {
    path: '/',
    name: 'otherRouter',
    redirect: '/home',
    component: Main,
    children: [
        { path: 'asset-info/:id', title: '资产详情', name: 'asset-info', component: () => import('@/views/asset/asset-info.vue') },
        { path: 'asset-edit/:id', title: '资产编辑', name: 'asset-edit', component: () => import('@/views/asset/asset-edit.vue') },
    ]
};

export const appRouter = [
    {
        path: '/asset',
        icon: 'key',
        name: 'asset',
        title: '资产管理',
        component: Main,
        children: [
            { path: 'asset', title: '资产管理', name: 'asset-index', component: () => import('@/views/asset/asset.vue') },
            { path: 'asset-add', title: '资产添加', name: 'asset-add', component: () => import('@/views/asset/asset-add.vue') },

        ]
    },
]

src/views/asset/

asset.vue

asset-add.vue

asset-info.vue

asset-edit.vue

---

后端 Django

新建一个asset的app

pip install djangorestframework  django-cors-headers

settings.py
INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
]

# http://www.django-rest-framework.org/api-guide/permissions/#api-reference
# rest-framework    权限分类，现在是默认管理员可以访问
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
        'rest_framework.authentication.TokenAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.AllowAny',
        # 'rest_framework.permissions.IsAdminUser',
    ),
}

MIDDLEWARE = [
...
    'corsheaders.middleware.CorsMiddleware',  ##添加此项目
    'django.middleware.common.CommonMiddleware',
...
]

##允许跨域的地址
CORS_ORIGIN_WHITELIST = (
    "localhost:8080"
)
APPEND_SLASH=False

asset/models.py
class AssetLoginUser(models.Model):
    hostname = models.CharField(max_length=64, verbose_name='名称', unique=True)
    username = models.CharField(max_length=64, verbose_name="用户名", default='root', null=True, blank=True)
    password = models.CharField(max_length=256, blank=True, null=True, verbose_name='密码')
    ps = models.CharField(max_length=10240, verbose_name="备注", null=True, blank=True)
    ctime = models.DateTimeField(auto_now_add=True, null=True, verbose_name='创建时间', blank=True)
    utime = models.DateTimeField(auto_now=True, null=True, verbose_name='更新时间', blank=True)

class Meta:
    db_table = "AssetLoginUser"
    verbose_name = "资产用户"
    verbose_name_plural = '资产用户'

    def __str__(self):
        return self.hostname

urls.py
path('asset', api.AssetList.as_view(), name='asset_api_list'),
path('asset/', api.AssetDetail.as_view(), name='asset_api_detail'),

asset/serializers.py
from rest_framework import serializers
from .models import AssetLoginUser

class AssetSerializer(serializers.ModelSerializer):
    class Meta:
        model = AssetLoginUser
        fields = '__all__'

asset/api.py
from rest_framework import generics
from .models import AssetLoginUser
from .serializers import AssetSerializer
from rest_framework import permissions

class AssetList(generics.ListCreateAPIView):
    queryset = AssetLoginUser.objects.all()
    serializer_class = AssetSerializer
    permission_classes = (permissions.AllowAny,)

class AssetDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = AssetLoginUser.objects.all()
    serializer_class = AssetSerializer
    permission_classes = (permissions.AllowAny,)

转载于:https://blog.51cto.com/hequan/2126730