5.管理员登录功能的开发

管理员登录功能的开发

1.在后端的django项目NewCenter部分

1.在xadmin后台，新建一个用户admin，密码a13506587879

2.在apps/users/views.py中：

from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView
from random import choice
from .models import UserProfile
import datetime,json,time,hashlib
# Create your views here.


class RootLoginView(APIView):
    """管理员登录"""
    def post(self, request):
        pwd=request.data.get('pwd')

        if pwd:
            user = UserProfile.objects.filter(username='admin',password=pwd).first()
            if user:
                # 生成token
                now_time=str(int(time.time()))
                word=user.username+now_time
                token=hashlib.sha256(word.encode("utf-8")).hexdigest()
                # print(token)
                user.token=token
                user.save()
                result = {"status": "200", "data": {'msg': '登录成功。','token':token}}
            else:
                result = {"status": "403", "data": {'msg': '密码错误。'}}
        else:
            result = {"status": "404", "data": {'msg': '请输入管理员密码。'}}
        return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")

3.在apps/users目录下新建urls.py：

from django.urls import path
from .views import RootLoginView

urlpatterns = [
    path('rlogin/',RootLoginView.as_view()),#管理员登录

]

4.在NewCenter/urls.py中：

from django.contrib import admin
from django.urls import path,include
from django.views.static import serve
from NewCenter.settings import MEDIA_ROOT
import xadmin

urlpatterns = [
    #path('admin/', admin.site.urls),
    path('xadmin/', xadmin.site.urls),
    path('media/<path:path>',serve,{'document_root':MEDIA_ROOT}),
    path('users/',include('users.urls')),
]

2.在前端vue项目newpc的部分

1.在src/api/api.js中增加：

//登录
export function tologin(params2) {
    return post(host+'/users/rlogin/', {pwd:params2});
}

2.在src/components/Login.vue中：

<template>
    <div class="login">
      <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box">
          <div class="inform">
            <label for="pass">
              管理员密码：
            </label>
            <el-input placeholder="请输入管理员密码" v-model="pwd" show-password style="200px" id="pass"></el-input>
            <el-button type="primary" @click="login()">登录</el-button>
          </div>
        </div>
      </transition>
        
    </div>
</template>
<script>
import storage from "@/storage.js";
import { tologin } from "@/api/api.js";
export default {
  name: 'login',
  data () {
    return {
      msg:'登录组件',
      show2: false,
      pwd:'',
      
    }
  },
  methods:{
    // 页面动画
    do(){
      this.show2=true
    },
    //登录
    login(){
      // ----向后端发送数据开始----
      tologin(this.pwd).then(res => {
          if(res.status==200){
            //console.log(res.data.token)
            storage.set('roottoken',res.data.token)
            this.$router.push({path:'/index.html'})
          }else{
            alert(res.data.msg)
          }
      }).catch(error => {console.log(error);});
      // -----向后端发送数据结束-----
        
    }
  },
  mounted(){
    this.do()
  },
  components:{

  }
}
</script>
<style scoped>
.transition-box{
  width: 600px;
  height: 500px;
  margin: 0 auto;
  background-color: #409EFF;
  margin-top: 200px;
  overflow: hidden;
  border-radius:5px;
}
.inform{
  width: 500px;
  height: 400px;
  margin-top: 50px;
  margin-left: 50px;
  background: #fff;
  padding: 50px;
  border-radius:5px;
}
</style>

3.在src/components/Index.vue中：

<template>
  <div id="index">
    
      <div class="content">
            <el-carousel :interval="3000" type="card" height="600px">
                <el-carousel-item v-for="(item,index) in data" :key="index" >
                    <img :src="item.img" :alt="item.title" @click="ToLou(index)">
                </el-carousel-item>
            </el-carousel>
      </div>

  </div>
</template>
<script>
// 引入模块
import storage from '@/storage.js';
export default {
  name: 'index',
  data () {
    return {
      msg:'首页',
      data:[
          {img:'../../static/1.jpg',title:'旗医院片区'},
          {img:'../../static/2.jpg',title:'实验小学片区'},
          {img:'../../static/3.jpg',title:'武安小区片区'},
          {img:'../../static/4.jpg',title:'武安小区西片区'}
      ]
    }
  },
  methods:{
    //跳转到楼列表页
    ToLou(e){
          console.log(e)
      },
    //查看是否登录
    me_init(){
      if(storage.get('roottoken')){
        return true
      }else{
        this.$router.push({path:'/login.html'})
      }
    },
    //登出
    logout(){
      storage.remove('roottoken')
    },
    //获取片区列表信息
    getPian(){
      console.log('获取片区列表')
    }
  },
  
  mounted(){
    this.me_init()
  }
}
</script>
<style scoped>
.content{
    /*  80%;
    margin: 0 auto; */
    margin-top: 60px;
    margin-bottom: 60px;
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  img{
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: inherit;
  }
</style>