以下为利用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
提交错误
{{ e }}
asset-info.vue
资产详情
{{ key }} {{ item }}
asset-edit.vue
提交错误
{{ e }}
后端 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,)