前端补充
流式布局思想
页面的尺寸改变动态改变页面布局,或是通过父集标签控制多个子标签,这种布局思想就称之为 - 流式布局思想
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>
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}), ]
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})