3-1-forum_django_vue用户管理demo(增删改查上传头像)

vue

<template>
    <div class="about">
       <Header/>
        <Sidebar/>

        <div class="content-box">
            <div class="content">

                <el-card>
                    <el-input clearable v-model="query.nickname"  placeholder="昵称" class="search-inp-cls"></el-input>
                    <el-input clearable v-model="query.phone"  placeholder="手机号" class="search-inp-cls"></el-input>
                    <el-select clearable v-model="query.state"  placeholder="状态" class="search-inp-cls">
                        <el-option label="启用" :value="'1'"></el-option>
                        <el-option label="禁用" :value="'0'"></el-option>
                    </el-select>
                    <el-button @click="serachHandle" type="primary" icon="el-icon-search">搜索</el-button>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px;">
                    <div slot="header" class="clearfix">
                        {{query.role=='pt'?'注册用户':''}}
                        {{query.role=='admin'?'管理员':''}}
                        管理（{{total}}）
                        <el-button @click="addHandle" style="float: right;" type="danger" icon="el-icon-plus">添加</el-button>
                    </div>

                    <el-table   :data="tableData"   style="width: 100%">
                        <el-table-column  align="center"  prop="id"   label="id"     width="70">   </el-table-column>
                        <el-table-column  align="center"  prop="faceimg"   label="头像"     width="100">
                            <template slot-scope="scope">
                                <img :src="FILE_URL+scope.row.faceimg" style="width: 50px;">
                            </template>
                        </el-table-column>
                        <el-table-column  align="center"  prop="nickname"   label="昵称"     width="120">   </el-table-column>
                        <el-table-column  align="center"  prop="age"   label="年龄"     width="100">   </el-table-column>
                        <el-table-column  align="center"  prop="sex"   label="性别"     width="100">   </el-table-column>
                        <el-table-column  align="center"  prop="phone"   label="手机号"     width="150">   </el-table-column>
                        <el-table-column  align="center"  prop="state"   label="状态"     width="100">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.state=='1'" type="success">启用</el-tag>
                                <el-tag v-if="scope.row.state=='0'" type="danger">禁用</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column  align="center"  prop="msg"   label="禁用原因"     width="150">   </el-table-column>
                        <el-table-column  align="center"  prop="school"   label="学校"     width="150">   </el-table-column>
                        <el-table-column  align="center"  prop="major"   label="专业"     width="100">   </el-table-column>
                        <el-table-column  align="center"  prop="email"   label="邮箱"     width="150">   </el-table-column>
                        <el-table-column  align="center"  prop="ulike"   label="兴趣爱好"     width="200">   </el-table-column>
                        <el-table-column  align="center"  prop="cts"   label="注册/添加时间"     width="180">   </el-table-column>
                        <el-table-column    fixed="right"  label="操作"    width="90">
                            <template slot-scope="scope">
                                <el-dropdown>
                                  <span class="el-dropdown-link" style="color: cornflowerblue;">
                                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="updateHandle(scope.row)">编辑</el-dropdown-item>
                                        <el-dropdown-item  @click.native="initpwdHandle(scope.row)">初始化密码</el-dropdown-item>
                                        <el-dropdown-item v-if="scope.row.role!='admin'"  @click.native="setroleHandle(scope.row,'admin')">设置成管理员</el-dropdown-item>
                                        <el-dropdown-item  v-if="scope.row.role!='pt'" @click.native="setroleHandle(scope.row,'pt')">设置成普通用户</el-dropdown-item>
                                        <el-dropdown-item v-if="scope.row.state=='0'"  @click.native="stateHandle(scope.row,1)">启用</el-dropdown-item>
                                        <el-dropdown-item v-if="scope.row.state=='1'"  @click.native="stateHandle(scope.row,0)">禁用</el-dropdown-item>
                                        <el-dropdown-item  @click.native="deleteHandle(scope.row)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="query.pageNo"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="query.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>

                </el-card>
            </div>







         </div>


        <el-dialog   width="1000px"    title="添加&编辑"   :visible.sync="open"  >
            <el-form  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
                <el-row>
                    <el-col :span="8">
                        <el-upload
                                :headers="uploadObjH"
                                :data="uploadObj"
                                accept="image/*"
                                :action="FILE_ACTION"
                                :show-file-list="false"
                                :on-success="handleUploadSuccess"
                                :before-upload="beforeUpload">
                            <img v-if="ruleForm.faceimg" :src="FILE_URL+ruleForm.faceimg" style="width: 100px;">
                            <p v-else>点击上传头像</p>
                        </el-upload>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item  prop="phone" label="手机号">
                            <el-input v-model="ruleForm.phone"></el-input>
                            <el-alert title="默认密码：123456" style="padding: 0px;"></el-alert>
                        </el-form-item>
                        <el-form-item  prop="nickname" label="昵称">
                            <el-input v-model="ruleForm.nickname"></el-input>
                        </el-form-item>
                        <el-form-item  prop="sex" label="性别">
                            <el-radio v-model="ruleForm.sex" label="男"></el-radio>
                            <el-radio v-model="ruleForm.sex" label="女"></el-radio>
                        </el-form-item>
                        <el-form-item  prop="age" label="年龄">
                            <el-input v-model="ruleForm.age" type="number"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item  prop="school" label="学校">
                            <el-input v-model="ruleForm.school"></el-input>
                        </el-form-item>
                        <el-form-item  prop="major" label="专业">
                            <el-input v-model="ruleForm.major"></el-input>
                        </el-form-item>
                        <el-form-item  prop="email" label="邮箱">
                            <el-input v-model="ruleForm.email"></el-input>
                        </el-form-item>
                        <el-form-item  prop="ulike" label="兴趣爱好">
                            <el-input v-model="ruleForm.ulike" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>






            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="submitForm( )">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>


<script>
import Header from "./Header";
import Sidebar from "./Sidebar";
import {users_save, users_managepage,users_del,users_initpwd,users_change_state,users_updateRole} from '../../api'
import {validatePhone} from '../../api/validator'
    export default {
        components: {
            Header,
            Sidebar

        },
        data() {

            return {
                uploadObjH:{token:JSON.parse(localStorage.loginUser).token},
                uploadObj:{},
                FILE_ACTION:'',
                open:false,
                ruleForm: {
                    phone: '',
                    nickname:'',
                    sex:'',
                    age:'',
                    school:'',
                    email:'',
                    ulike:'',
                    major:'',
                    faceimg:'',
                },
                rules: {
                    phone: [  { required: true, message: '必填', trigger: 'blur' },{ validator: validatePhone,   trigger: 'blur' }   ],
                    nickname: [  { required: true, message: '必填', trigger: 'blur' }   ],
                },

                FILE_URL:process.env.VUE_APP_API_ROOT,
                query:{
                   pageNo:1,
                   pageSize:10,
                   nickname:'',
                   phone:'',
                   state:'',
                   role:'pt',
                },
                tableData: [ ],
                total:0,
            };
        },
        methods:{
            handleUploadSuccess(res, file) {
                 console.log(res)
                if(res.status==1){
                    this.$message.success(res.msg);
                    this.ruleForm.faceimg=res.obj;
                    this.getpage();
                }else{
                    this.$message.error(res.msg);
                }
            },
            beforeUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10 MB!');
                }
                return   isLt2M;
            },


        
            updateHandle(row){

                this.ruleForm.id=row.id

                this.ruleForm.phone=row.phone
                this.ruleForm.nickname=row.nickname
                this.ruleForm.sex=row.sex
                this.ruleForm.age=row.age
                this.ruleForm.school=row.school
                this.ruleForm.email=row.email
                this.ruleForm.ulike=row.ulike
                this.ruleForm.major=row.major
                this.ruleForm.faceimg=row.faceimg
                this.open=true;

                this.uploadObj={id:row.id}


            },
            addHandle(){
                this.ruleForm= {
                    phone: '',
                    nickname:'',
                    sex:'',
                    age:'',
                    school:'',
                    email:'',
                    ulike:'',
                    major:'',
                    faceimg:'',
                    role:this.query.role
                }
                this.open=true;
                this.uploadObj={};

            },
            submitForm( ) {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        users_save(this.ruleForm).then((res)=>{
                            if(res.data.status==1){
                                this.$message.success(res.data.msg);
                                this.getpage();
                                this.open=false;

                            }else{
                                this.$message.error(res.data.msg);
                            }

                        })
                    } else {
                        this.$message.info("请按要求填写表格");
                    }
                });
            },
            setroleHandle(row,role){
                this.$confirm('是否修改    id='+row.id+'   的角色', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    users_updateRole({id:row.id,role:role}).then((res)=>{
                        if(res.data.status==1){
                            this.$message.success(res.data.msg);
                            this.getpage();
                        }else{
                            this.$message.error(res.data.msg);
                        }

                    })
                }).catch(() => {

                });
            },
            stateHandle(row,state){
                if(state==1){
                    users_change_state({id:row.id,state:state,msg:'-'}).then((res)=>{
                        if(res.data.status==1){
                            this.$message.success(res.data.msg);
                            this.getpage();
                        }else{
                            this.$message.error(res.data.msg);
                        }

                    })
                }else{
                    this.$prompt('请输入禁用原因', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        users_change_state({id:row.id,state:state,msg:value}).then((res)=>{
                            if(res.data.status==1){
                                this.$message.success(res.data.msg);
                                this.getpage();
                            }else{
                                this.$message.error(res.data.msg);
                            }

                        })
                    }).catch(() => {

                    });
                }
            },
            initpwdHandle(row){
                this.$confirm('是否初始化    id='+row.id+'   的密码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    users_initpwd({id:row.id}).then((res)=>{
                        if(res.data.status==1){
                            this.$message.success(res.data.msg);
                            this.getpage();
                        }else{
                            this.$message.error(res.data.msg);
                        }

                    })
                }).catch(() => {

                });
            },
            deleteHandle(row){
                this.$confirm('是否删除    id='+row.id+'   的记录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    users_del({id:row.id}).then((res)=>{
                        if(res.data.status==1){
                            this.$message.success(res.data.msg);
                            this.getpage();
                        }else{
                            this.$message.error(res.data.msg);
                        }

                    })
                }).catch(() => {

                });
            },
            handleSizeChange(val) {
                this.query.pageNo=1;
                this.query.pageSize=val;
                this.getpage();
            },
            handleCurrentChange(val) {
                this.query.pageNo=val;
                this.getpage();
            },
            getpage(){
                users_managepage(this.query).then((res)=> {
                    if (res.data.status == 1) {

                        this.tableData = res.data.obj.list
                        this.total = res.data.obj.total

                    } else {
                        this.$message.info(res.data.msg);
                    }
                })
            },
            serachHandle(){
                this.query.pageNo=1;
                this.getpage();
            }

        },mounted() {
            this.query.role= this.$route.query.role;
            this.FILE_ACTION=process.env.VUE_APP_API_ROOT+"/users/upfaceimg";
            this.getpage();

        },
         watch:{
             $route:function(value){
                 this.query.role=value.query.role ;
                 this.query.pageNo=1
                 this.getpage();

             }
         }
    };
</script>

<style scoped>
    .search-inp-cls{
        width: 150px;
    }
    /*滚动条的宽度*/
    /deep/ .el-table__body-wrapper::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    /*滚动条滑块*/
    /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
        background-color: #409eff;
        /*border-radius: 3px;*/
    }
</style>

django

from django.http import JsonResponse
from jf3qApp.models import Users
from jf3qApp.utils import md5Util
from jf3qApp.utils import pageUtil
from jf3qApp.utils import dateUtil
from jf3qApp.utils import jwtUtil
from jf3qApp.utils import uploadUtil
from django.forms.models import  model_to_dict
from rest_framework import  serializers

class UsersSerializer(serializers.ModelSerializer):
    class Meta:
        model=Users
        fields='__all__'

def login(request):
    phone=request.POST.get('phone')
    upass=md5Util.calc_md5(request.POST.get('upass'))
    lu=Users.objects.filter(phone=phone,upass=upass).first()
    if lu:
        if lu.state != '1':
            data={'status':0,'msg':'该账号被禁用（'+lu.msg+'）'}
            return JsonResponse(data)
        lu_d=model_to_dict(lu)
        token=jwtUtil.generate_token(lu)
        lu_d['token']=token
        data={'status':1,'msg':'登陆成功','obj':lu_d}
        return JsonResponse(data)
    else:
        data={'status':0,'msg':'账号或者密码错误'}
        return JsonResponse(data)

def managepage(request):
    query_data={}
    pageNo=request.POST.get('pageNo')
    pageSize=request.POST.get('pageSize')
    nickname=request.POST.get('nickname')
    phone=request.POST.get('phone')
    state=request.POST.get('state')
    role=request.POST.get('role')
    if nickname:
        query_data['nickname__icontains']=nickname
    if phone:
        query_data['phone__icontains']=phone
    if state:
        query_data['state']=state
    if role:
        query_data['role']=role
    all=Users.objects.filter(**query_data).all().order_by('-id')
    page_info=pageUtil.getpage(all,page_no=pageNo,page_size=pageSize)
    serializer=UsersSerializer(page_info['list'],many=True)
    page_info['list']=serializer.data
    data={'status':1,'msg':'操作成功','obj':page_info}
    return JsonResponse(data)

def savemyinfo(request):
    token=request.META.get('HTTP_TOKEN', '')
    lu=jwtUtil.verify_token(token)
    user_id =lu['user_id']
    return   savecommon(request,user_id)

def save(request):
    id=request.POST.get('id')
    return   savecommon(request,id)

def savecommon(request,id):
    nickname=request.POST.get('nickname')
    phone=request.POST.get('phone')
    sex=request.POST.get('sex')
    age=request.POST.get('age')
    if age=='':
        age=None
    school=request.POST.get('school')
    email=request.POST.get('email')
    ulike=request.POST.get('ulike')
    major=request.POST.get('major')
    cts=dateUtil.get_now_ts()
    upass=md5Util.get_default_pwd()

    faceimg=request.POST.get('faceimg')
    if faceimg=='':
        faceimg=uploadUtil.get_default_img()

    lu=Users.objects.filter(phone=phone).first()
    if id:
        if lu and lu.id != int(id):
            data={'status':0,'msg':'手机号已存在，操作失败'}
            return JsonResponse(data)
        Users.objects.filter(id=id).update(nickname=nickname,phone=phone,sex=sex,age=age,school=school,email=email,ulike=ulike,major=major,faceimg=faceimg)
        data={'status':1,'msg':'更新成功'}
        return JsonResponse(data)
    else:
        if lu:
            data={'status':0,'msg':'手机号已存在，操作失败'}
            return JsonResponse(data)
        role=request.POST.get('role')
        Users.objects.create(nickname=nickname,phone=phone,sex=sex,age=age,school=school,email=email,ulike=ulike,major=major,cts=cts,upass=upass,state='1',role=role,faceimg=faceimg)
        data={'status':1,'msg':'添加成功'}
        return JsonResponse(data)

def upfaceimg(request):
    id=request.POST.get('id')
    return upfaceimg_common(request,id)

def upmyfaceimg(request):
    token=request.META.get('HTTP_TOKEN', '')
    lu=jwtUtil.verify_token(token)
    user_id =lu['user_id']
    return upfaceimg_common(request,user_id)

def upfaceimg_common(request,id):
    file=request.FILES.get('file')
    if file:
        faceimg=uploadUtil.upload(file,'faceimg')
        if id:
            lu=Users.objects.filter(id=id).first()
            Users.objects.filter(id=id).update(faceimg=faceimg)
            uploadUtil.delfile(lu.faceimg)
        data={'status':1,'msg':'上传成功','obj':faceimg}
        return JsonResponse(data)
    data={'status':0,'msg':'上传失败' }
    return JsonResponse(data)

def del_one(request):
    id=request.POST.get('id')
    if id:
        lu=Users.objects.filter(id=id).first()
        if lu:
            Users.objects.filter(id=id).delete()
            uploadUtil.delfile(lu.faceimg)
        data={'status':1,'msg':'删除成功' }
        return JsonResponse(data)
    data={'status':0,'msg':'删除失败' }
    return JsonResponse(data)

def initpwd(request):
    id=request.POST.get('id')
    if id:
        p=md5Util.get_default_pwd()
        Users.objects.filter(id=id).update(upass=p)
        data={'status':1,'msg':'密码已初始化:123456' }
        return JsonResponse(data)
    data={'status':0,'msg':'操作失败' }
    return JsonResponse(data)



def change_state(request):
    id=request.POST.get('id')
    state=request.POST.get('state')
    msg=request.POST.get('msg')
    if id:
        Users.objects.filter(id=id).update(state=state,msg=msg)
        data={'status':1,'msg':'操作成功' }
        return JsonResponse(data)
    data={'status':0,'msg':'操作失败' }
    return JsonResponse(data)

def updateRole(request):
    id=request.POST.get('id')
    role=request.POST.get('role')
    if id:
        Users.objects.filter(id=id).update(role=role )
        data={'status':1,'msg':'操作成功' }
        return JsonResponse(data)
    data={'status':0,'msg':'操作失败' }
    return JsonResponse(data)


def reg(request):
    nickname=request.POST.get('nickname')
    phone=request.POST.get('phone')
    upass=request.POST.get('upass')
    upass2=request.POST.get('upass2')
    cts=dateUtil.get_now_ts()
    faceimg=uploadUtil.get_default_img()
    if upass!=upass2:
        data={'status':0,'msg':'密码不一致'}
        return JsonResponse(data)

    lu=Users.objects.filter(phone=phone).first()
    if lu:
        data={'status':0,'msg':'手机号已注册，请登录'}
        return JsonResponse(data)
    upass=md5Util.calc_md5(upass)
    Users.objects.create(nickname=nickname,phone=phone, upass=upass  ,cts=cts ,state='1',role='pt',faceimg=faceimg)
    data={'status':1,'msg':'注册成功，请登录'}
    return JsonResponse(data)

def upupass(request):
    token=request.META.get('HTTP_TOKEN', '')
    lu=jwtUtil.verify_token(token)
    id =lu['user_id']

    oldp=request.POST.get('oldp')
    newp=request.POST.get('newp')
    newp2=request.POST.get('newp2')
    if newp!=newp2:
        data={'status':0,'msg':'密码不一致'}
        return JsonResponse(data)
    if id:
        oldu=Users.objects.filter(id=id).first()
        oldp_jm=md5Util.calc_md5(oldp)
        if oldp_jm!=oldu.upass:
            data={'status':0,'msg':'原密码错误'}
            return JsonResponse(data)
        newp_jm=md5Util.calc_md5(newp)
        Users.objects.filter(id=id).update(upass=newp_jm )
        data={'status':1,'msg':'修改成功' }
        return JsonResponse(data)
    data={'status':0,'msg':'修改失败' }
    return JsonResponse(data)