流式布局思想 js函数的几种简写方式面向对象 js vue引入bootstrap和jQuery环境

流式布局思想:

"""
页面的尺寸改变动态改变页面布局，或是通过父集标签控制多个子标签，这种布局思想就称之为 - 流式布局思想
1) 将标签宽高设置成 百分比，就可以随屏幕(父集)缩放而缩放
2) 将标签宽高设置成 视图百分比，就可以随屏幕缩放而缩放
3) 将子集字体设置成 继承值，就可以通过父集统一控制子集
"""

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

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

            width: 80%;

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

        }

        /*em、rem em表示父类的font-size的大小,rem表示根标签字体大小与父标签无关*/
        .sup {
            font-size: 40px;
        }
        .sub {
            /*font-size: inherit;*/
            /*font-size: 1.5em;*/
            /*width: 5em;*/
            font-size: 2rem;
        }
        html {
            font-size: 30px;
        }

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

常见的应用

JS函数的声明方式

<!DOCTYPE html>
<html lang="zh">
<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[0]);
        console.log('fn2 run');
    };
    fn2(1, 2, 3, 4);

    //匿名函数的声明()生成实例
    (function () {
        console.log('fn3 run');
    })();

    //箭头函数省略function
    let fn4 = () => {
        console.log('fn4 run');
    };
    fn4();

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

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

    // 当形参只有一个，可以省略()
    let fn7 = a => a * 2;
    res = fn7(10);
    console.log(res);

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

</script>
</html>

JS面向对象:

<!DOCTYPE html>
<html lang="zh">
<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('Bob');
    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('Tom');
    console.log(t1.name);
    t1.teach();
    t1.test();

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

    // 根组件、局部组件、全局组件都是Vue的对象，所以给Vue原型设置的变量，所有组件的this都可以访问该变量
    Vue.prototype.abc = 123;
    let localTag = {};
    Vue.component('',{});
    new Vue({
        components: {
           localTag
        }
    });
    

    // function 与 箭头函数 是有本质区别的:
    // function在类外使用this依然指向调用该方法的对象,
    // 箭头函数会丢失this指向,箭头函数声明的就只是个函数.
    let h1 = document.querySelector('h1');
    h1.onclick = function () {
        // alert(this.innerText);
        console.log(this);
    };

    h1.onclick = () => {
        // alert(this.innerText);
        console.log(this);
    }
</script>
</html>

登录注册练习:

前台代码:

<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="ctx">
            <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(是否登录)，未登录跳转登录页面
            this.$options.methods._checkToken();
        },
        methods: {
            logout() {
                // 丢弃登录状态，就可以完成注销（不需要后台参与）
                localStorage.clear();
                this.token = '';
                this.username = '';
            },
            _checkToken() {
                let token = localStorage.token;
                if (!token) {
                    this.$router.push('/login')
                }
            },
            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.results;
                })
            }
        },
        watch: {
            token() {
                this._checkToken();
            }
        },
        created() {
            this.$axios({
                url: 'http://localhost:8000/phone/',
                method: 'get',
                headers: {
                    authorization: this.token
                }
            }).then(response => {
                console.log(response.data);
                this.infos = response.data.results;
            })
        }
    }
</script>
<style scoped>
    h1 {
        float: left;
    }
    span {
        float: right;
    }
    .header:after {
        content: '';
        display: block;
        clear: both;
    }
    .header {
        line-height: 80px;
    }

</style>

Home.vue

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

<script>
    export default {
        name: "Login.vue",
        data () {
            return {
                username: '',
                password: '',
            }
        },
        beforeCreate() {
            // 查看localStorage中是否存在token(是否登录)，登录跳转主页
            let token = localStorage.token;
            if (token) {
                this.$router.push('/')
            }
        },
        methods: {
            login () {
                let username = this.username;
                let password = this.password;
                if (!(username && password)) {
                    alert('信息有误');
                    return false
                }

                this.$axios({
                    url: 'http://localhost: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;
                        // 跳转主页
                        this.$router.push('/');
                    } else {
                        alert('登录失败')
                    }
                }).catch(() => {
                    alert('登录异常')
                });

                // 清空输入框
                this.username = '';
                this.password = '';
            }
        }
    }
</script>

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

后台代码:

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': '登录失败',
    })

views.py

vue引入bootstrap和jQuery环境:

// 安装bootstrap
cnpm install bootstrap@3
// main.js配置bootstrap环境
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

// 安装jQuery
cnpm install 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中有大量的$代表jquery,所以要手动进行指定,让$,jQuery,window.jQuery,都指向安装的node_moudles中的jquery

后台资源暴露给前台的配置:

settings.py中:

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

url中配置:

from django.views.static import serve
from django.conf import settings

url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),

前台请求头中携带数据:

        created() {
            this.$axios({
                url: 'http://localhost:8000/phone/',
                method: 'get',
                headers: {
                    authorization: this.token
                }
            }).then(response => {
                console.log(response.data);
                this.infos = response.data.results;
            })
        }

posted @ 2021-01-25 08:47 1640808365 阅读(199) 评论(0) 编辑收藏举报

刷新页面返回顶部

Loading

YYJ-Blog | 业精于勤，荒于嬉。

流式布局思想 js函数的几种简写方式面向对象 js vue引入bootstrap和jQuery环境

流式布局思想:

JS函数的声明方式

JS面向对象:

登录注册练习:

前台代码:

后台代码:

vue引入bootstrap和jQuery环境:

后台资源暴露给前台的配置:

settings.py中:

url中配置:

前台请求头中携带数据:

公告

Loading

YYJ-Blog | 业精于勤，荒于嬉。

流式布局思想 js函数的几种简写方式 面向对象 js vue引入bootstrap和jQuery环境

流式布局思想:

JS函数的声明方式

JS面向对象:

登录注册练习:

前台代码:

后台代码:

vue引入bootstrap和jQuery环境:

后台资源暴露给前台的配置:

settings.py中:

url中配置:

前台请求头中携带数据:

公告

流式布局思想 js函数的几种简写方式面向对象 js vue引入bootstrap和jQuery环境