码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-11 10:42:42      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:box   template   framework   function   fir   cut   item   ack   als   

管理员登录功能的开发

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

1.在xadmin后台,新建一个用户admin,密码a0123456789

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="width: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{
    /* width: 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>

 

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

标签:box   template   framework   function   fir   cut   item   ack   als   

原文地址:https://www.cnblogs.com/xuepangzi/p/13091625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!