vue2 + iview-admin 1.3 + django 2.0 一個最簡單的增刪改查例子
阿新 • • 發佈:2018-06-09
iview-admin axios django 前後端分離 api 以下為利用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> <h4 slot="title"> <Icon type="android-archive"></Icon> 資產管理 </h4> <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‘)" style="margin-left: 8px">
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>
<h4 slot="title">
<Icon type="android-archive"></Icon>
資產詳情
</h4>
<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‘)" style="margin-left: 8px">
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,)
vue2 + iview-admin 1.3 + django 2.0 一個最簡單的增刪改查例子