前端补充

流式布局思想

页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想

1) 将标签宽高设置成百分比，就可以随屏幕(父集)缩放而缩放
2) 将标签宽高设置成视图百分比，就可以随屏幕缩放而缩放
3) 将子集字体设置成继承值，就可以通过父集统一控制子集

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>流式布局</title>
    <style>
        body{
            /*margin: 0;*/
        }
        .box{
            height: 200px ;
            width: 500px;
            background-color: orange;

            /*页面宽度缩放, 盒子始终居中*/
            margin-left: auto;
            margin-right: auto;

            width: 80%;

            /*vw: view width | vh: view height*/
            width: 80vw;
            width: 80vh;


        }
         /*em: 继承父级的字体大小,并且在父级的基础上进行修改 | rem*/
        .sup{
            font-size: 30px;
        }
        .sub{
            /*!*font-size: inherit;*!  inherit: 继承父级 */
            /*font-size: 2em;*/
            /*width: 5em;*/
            font-size:2rem;

        }
        html{
            font-size: 30px;
            /*calc() 自己算取*/
        }

    </style>

</head>
<body>
    <div class="box">
        <div class="sup">
            <div class="sub">字</div>
        </div>
    </div>
</body>
</html>

js函数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>js函数</title>

</head>
<body>
<h1>js函数</h1>

</body>
<script>
    // 参数: 你传你的,我收我的
    function fn1(a, b, c, d) {
        console.log(a, b, c, d);
        console.log('fn1 run')

    }

    fn1(1, 2, 3);

    let fn2 = function (...args) {
        console.log(args);
        console.log(args[1]);
        console.log('fn2 run')

    };
    fn2(1, 2, 3, 4);

    (function () {
        console.log('fn3 run')
    })();

    let fn4 = () => {
        console.log('fn4 run')
    };
    fn4();

    // 有参有返
    let fn5 = (a, b) => {
        console.log(a, b);
        console.log('fn5 run');
        return a + b
    };
    let res = fn5(1, 2);
    console.log(res);

    // 箭头函数函数体如果只有返回值, 可以简写
    let fn6 = (a, b) => a + b;
    let res1 = fn6(10, 20);
    console.log(res1);

    // 当形参只有一个, 可以省略小括号
    let fn7 = a => a * 2;
    let res2 = fn7(10);
    console.log(res2);

    // 当形参为空的简写方式
    let fn8 = () => 200;
    let res3 = fn8();
    console.log(res3);

</script>
</html>

面向对象js

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>面向对象js</title>

</head>
<body>
<h1>面向对象js</h1>

</body>

<script>
    // ES6
    class Student {
        constructor(name) {
            console.log('构造器调用了');
            this.name = name
        }

        study() {
            console.log(`${this.name}在学习`)
        }

    }

    let s1 = new Student('haha');
    console.log(s1.name);
    s1.study();

    // ES5
    function Teacher(name) {
        this.name = name;
        this.teach = function () {
            console.log(`${this.name}在教学`)

        };
        this.test = () => {
            console.log(`${this.name}test`)
        }
    }

    let t1 = new Teacher('heihei');
    console.log(t1.name);
    t1.teach();
    t1.test();

    // 可以理解为类属性, 所有对象共有
    Teacher.prototype.age = 10;
    Teacher.prototype.sleep = function(){
        console.log(`${this.name}sleep`)
    };
    console.log(t1.age);
    t1.sleep();
    
    let t2 = new Teacher('jerry');
    console.log(t2.age);
    t2.sleep();

    // function 与 箭头函数有本质的区别
    let h1 = document.querySelector('h1');
    // h1.onclick = function () {
    //     alert(this.innerText);
    //     console.log(this)
    // };
    h1.onclick = () => {
        alert(this.innerText)
    }


</script>

</html>

配置Bootstrap

安装jquery

cnpm install jquery

配置jquery

建一个vue.config.js文件

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

安装bootstrap

cnpm install bootstarp@3

配置main.js

//配置Bootstrap环境
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

需要认证信息的后台请求

main.js/home.vue

<template>
    <div class="home">
        <div class="header">
            <h1>主页</h1>
            <span v-if="token">
            <b>{{ username }}</b>
            |
            <b @click="logout">注销</b>
            </span>
            <span v-else>
                <b>请登录</b>
            </span>
        </div>
        <hr>
        <div class="contents">
            <p>
                <button @click="changeInfo('/phone/')">phone</button>
                <button @click="changeInfo('/tv/')">tv</button>
            </p>
            <div v-for="info in infos" :key="info.url">
                <img width="200" :src="info.url" alt="">
                <p>{{ info.title }}</p>

            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'home',
        data() {
            return {
                token: localStorage.token ? localStorage.token : '',
                username: localStorage.username ? localStorage.username : '',
                infos:[]

            }
        },
        components: {},
        beforeCreate() {
            // 查看localStorage中是否存在token(是否登录)，未登录跳转登录页面
            let token = localStorage.token;
            if (!token) {
                this.$router.push('/login')
            }
        },
        methods: {
            logout() {
                // 丢弃登录状态，就可以完成注销（不需要后台参与）
                localStorage.clear();
                this.token = '';
                this.username = '';
            },
            changeInfo(path){
                this.$axios({
                url:`http://localhost:8000${path}`,
                method:'get',
                headers:{
                    authorization: this.token
                }
            }).then( response =>{
                console.log(response.data);
                this.infos = response.data.result
            } )

            }
            // _checkToken() {
            //     let token = localStorage.token;
            //     if (!token) {
            //         this.$router.push('/login')
            //     }
            // }
        },
        watch: {
            token() {
                let token = localStorage.token;
                if (!token) {
                    this.$router.push('/login')
                }
            }
        },
        created(){
            this.$axios({
                url:'http://localhost:8000/phone/',
                method:'get',
                headers:{
                    authorization: this.token
                }
            }).then( response =>{
                console.log(response.data);
                this.infos = response.data.result
            } )
        }
    }
</script>
<style scoped>
    h1 {
        float: left;
    }

    span {
        float: right;
    }

    .header:after {
        content: '';
        display: block;
        clear: both;
    }

    .header {
        line-height: 80px;
    }

</style>

home

main.js/Login.vue

<template>
    <div class="login">
        <h1>登录页面</h1>
        <hr>
        <form action="">
            <p>
                <label for="username">账号</label>
                <input type="text" name="username" id="username" v-model="username">
            </p>
            <p>
                <label for="password">账号</label>
                <input type="password" name="password" id="password" v-model="password">
            </p>
            <button type="button" @click="login">登录</button>
        </form>
    </div>
</template>

<script>
    export default {
        name: "login",
         data () {
            return{
                username:'',
                password:''
            }
        },
        methods:{
          login(){
              let username = this.username;
              let password = this.password;
              if (!(username && password)){
                  alert('信息有误');
                  return false
              }

              this.$axios({
                  url:'http://127.0.0.1:8000/login/',
                  method:'post',
                  params:{
                      username,
                      password
                  }
              }).then( response => {
                  let status = response.data.status;
                  if (status == 0){
                      alert('登录成功');
                      // 记录登录状态
                      localStorage.token = response.data.token;
                      localStorage.username = response.data.username;
                      // 跳转主页response.data
                      this.$router.push('/');
                  }else{
                      alert('登录失败')
                  }
              }).catch(() => {
                  alert('登录异常')
              });
              // 清空输入框
              this.username = '';
              this.password = '';
          }
        },
        beforeCreate() {
            // 查看localStorage中是否存在token(是否登录),登录跳转主页
            let token = localStorage.token;
            if (token) {
                this.$router.push('/')
            }
        }
    }
</script>

<style scoped>
    .login{
        text-align: center;
    }
    button{
        /*display: block;*/
        width: 200px;
    }
</style>

后台django

"""dg_proj URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import serve
from django.conf import settings
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/$', views.login),
    url(r'^tv/$', views.tv),
    url(r'^phone/$', views.phone),
    url(r'^media/(?P<path>.*)$', serve,{'document_root': settings.MEDIA_ROOT}),
]

url

from django.http import JsonResponse


def login(request):
    username = request.GET.get('username')
    password = request.GET.get('password')
    # 固定账号 abc 密码 123
    if username == 'abc' and password == '123':
        return JsonResponse({
            'status':0,
            'msg':'登录成功',
            'token':'token.abc.123',
            'username':username
        })
    return JsonResponse({
        'status': 1,
        'msg': '登录失败',
    })


def tv(request):
    token = request.META.get('HTTP_AUTHORIZATION')
    if not token:
        return JsonResponse({
            'status':1,
            'msg':'没有权限'
        },json_dumps_params={'ensure_ascii':False})
    return JsonResponse({
        'status': 0,
        'msg': 'ok',
        'result': [
            {
                'url':'http://127.0.0.1:8000/media/img/003.jpg',
                'title':'电视一号'
            },
            {
                'url': 'http://127.0.0.1:8000/media/img/004.jpg',
                'title': '电视二号'
            },

        ]
    },json_dumps_params={'ensure_ascii':False})


def phone(request):
    token = request.META.get('HTTP_AUTHORIZATION')
    if not token:
        return JsonResponse({
            'status': 1,
            'msg': '没有权限'
        },json_dumps_params={'ensure_ascii':False})
    return JsonResponse({
        'status': 0,
        'msg': 'ok',
        'result': [
            {
                'url': 'http://127.0.0.1:8000/media/img/001.jpg',
                'title': '手机一号'
            },
            {
                'url': 'http://127.0.0.1:8000/media/img/002.jpg',
                'title': '手机二号'
            },

        ]
    },json_dumps_params={'ensure_ascii':False})

views

posted @ 2019-10-13 21:43 Yzy~Yolo 阅读(135) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Yolo