温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-19 03:14:24 来源:网络 阅读:25731 作者:295631788 栏目:web开发

以下为利用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


<template>
    <div>
        <Row>
            <Card>
                <h5 slot="title">
                    <Icon type="android-archive"></Icon>
                    资产管理
                </h5>
                <Row>
                    <Col span="24">
                        <Table border ref="selection"   :columns="columns1" :data="data1"  ></Table>
                        <Button @click="handleSelectAll(true)">Set all selected</Button>
                        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
                    </Col>
                </Row>
            </Card>
        </Row>

    </div>
</template>

<script>
    export default {
        name: 'exportable-table',
        data () {
            return {
                columns1: [
                    {
                        type: 'selection',
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: 'hostname',
                        key: 'hostname'
                    },
                    {
                        title: 'username',
                        key: 'username'
                    },
                    {
                        title: 'password',
                        key: 'password'
                    },
                    {
                        title: '详情',
                        key: 'show_more',
                        align: 'center',
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        let argu = { id: params.row.id };
                                        this.$router.push({
                                            name: 'asset-info',
                                            params: argu
                                        });
                                    }
                                }
                            }, '了解详情');
                        }
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            let argu = { id: params.row.id };
                                            this.$router.push({
                                                name: 'asset-edit',
                                                params: argu
                                            });
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$ajax.delete('http://localhost:8000/asset/' + params.row.id)
                                                .then(response => {
                                                    this.$Message.success('提交成功');
                                                    this.remove(params.index);
                                                })
                                                .catch(error => {
                                                    this.e = JSON.stringify(error.response.data);
                                                });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data1: []
            };
        },
        created () {
            this.aget();
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            aget: function () {
                this.$ajax.get('http://localhost:8000/asset')
                    .then(response => {
                        this.data1 = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            remove (index) {
                this.data1.splice(index, 1);
            },
            handleDel (val, index) {
                this.$Message.success('删除了第' + (index + 1) + '行数据');
            }
        }

    };
</script>

asset-add.vue

<template>
    <div>
        <Row>
            <Card>
                <Row>
                    <Col span="12">

                        <Alert v-show="isshow" type="error" show-icon closable>
                            提交错误
                            <span slot="desc">{{ e }} </span>
                        </Alert>

                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="名字" prop="hostname">
                                <Input v-model="formValidate.hostname" placeholder="Enter your hostname"></Input>
                            </FormItem>
                            <FormItem label="账号" prop="username">
                                <Input v-model="formValidate.username" placeholder="Enter your username"></Input>
                            </FormItem>
                            <FormItem label="密码" prop="password">
                                <Input v-model="formValidate.password" placeholder="Enter your password"></Input>
                            </FormItem>

                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" >
                                    Reset
                                </Button>
                            </FormItem>
                        </Form>

                    </Col>
                </Row>
            </Card>
        </Row>

    </div>
</template>

<script>
    export default {
        data () {
            return {
                formValidate: {
                    hostname: '',
                    username: '',
                    password: ''
                },
                ruleValidate: {
                    hostname: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ]
                },
                e: '',
                isshow: false
            };
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$ajax.post('http://localhost:8000/asset', this.formValidate, {emulateJSON: true})
                            .then(response => {
                                this.$Message.success('提交成功');
                                this.isshow = false;
                                // this.$Message.success(response.statusText);
                            })
                            .catch(error => {
                                // this.$Message.error(JSON.stringify(error.response.data));
                                this.isshow = true;
                                this.e = JSON.stringify(error.response.data);
                            });
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    };
</script>

asset-info.vue

<style lang="less" scoped>
    @import '../../styles/common.less';
    @import './components/table.less';
</style>

<template>

    <div>
        <Row>
            <Card>
                <h5 slot="title">
                    <Icon type="android-archive"></Icon>
                    资产详情
                </h5>
                <Row>
                    <Col span="24">
                        <div  v-bind:content='item' v-for="(item,key)  of data1" >
                           {{ key }} {{ item }}
                        </div>
                    </Col>
                </Row>
            </Card>
        </Row>

    </div>
</template>

<script>
    export default {
        name: 'exportable-table',
        data () {
            return {
                columns1: [
                    {
                        type: 'selection',
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: 'id',
                        key: 'id'
                    },
                    {
                        title: 'hostname',
                        key: 'hostname'
                    },
                    {
                        title: 'username',
                        key: 'username'
                    },
                    {
                        title: 'password',
                        key: 'password'
                    },
                    {
                        title: 'ps',
                        key: 'ps'
                    }
                ],
                data1: '',
                ids: ''
            };
        },
        created () {
            this.aget();
        },
        methods: {
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            aget: function () {
                let ids = this.$route.params.id;
                this.$ajax.get('http://localhost:8000/asset/' + ids)
                    .then(response => {
                        this.data1 = response.data;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }

    };
</script>

asset-edit.vue

<template>
    <div>
        <Row>
            <Card>
                <Row>
                    <Col span="12">

                        <Alert v-show="isshow" type="error" show-icon closable>
                            提交错误
                            <span slot="desc">{{ e }} </span>
                        </Alert>

                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="名字" prop="hostname">
                                <Input v-model="formValidate.hostname" placeholder="Enter your hostname"></Input>
                            </FormItem>
                            <FormItem label="账号" prop="username">
                                <Input v-model="formValidate.username" placeholder="Enter your username"></Input>
                            </FormItem>
                            <FormItem label="密码" prop="password">
                                <Input v-model="formValidate.password" placeholder="Enter your password"></Input>
                            </FormItem>

                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" >
                                    Reset
                                </Button>
                            </FormItem>
                        </Form>

                    </Col>
                </Row>
            </Card>
        </Row>

    </div>
</template>

<script>
    export default {
        data () {
            return {
                formValidate: {
                    hostname: '',
                    username: '',
                    password: ''
                },
                ruleValidate: {
                    hostname: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ]
                },
                e: '',
                isshow: false,
                ids: ''
            };
        },
        methods: {
            aget: function () {
                let ids = this.$route.params.id;
                this.$ajax.get('http://localhost:8000/asset/' + ids)
                    .then(response => {
                        this.formValidate.hostname = response.data.hostname;
                        this.formValidate.username = response.data.username;
                        this.formValidate.password = response.data.password;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    let ids = this.$route.params.id;
                    if (valid) {
                        this.$ajax.put('http://localhost:8000/asset/' + ids, this.formValidate)
                            .then(response => {
                                this.$Message.success('提交成功');
                                this.isshow = false;
                                // this.$Message.success(response.statusText);
                            })
                            .catch(error => {
                                // this.$Message.error(JSON.stringify(error.response.data));
                                this.isshow = true;
                                this.e = JSON.stringify(error.response.data);
                            });
                    } else {
                        this.$Message.error('Fail!');
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        },
        created () {
            this.aget();
        }
    };
</script>

后端 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/<int:pk>', 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,)
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI