目录
日考总结
- http与https
- http是基于传输层作用于应用层的协议, 也有三次握手四次挥手, 而tcp是传输层的协议
- 基于请求响应的协议, 一次请求对应一次响应
- 无状态: 不保存客户端状态
- 无连接: 只在发送一次请求与响应一次请求时存在连接, 不同于TCP协议的藕断丝连状态
- https: 在http协议之上增加ssl安全认证
- 前端布局
- 流式布局, 一种布局思想,
- 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变
- 响应式布局, 一种布局思想,
- 有media标识符, 分别为不同的屏幕分辨率定义布局，
- 在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配
- 盒模型布局, margin, 一般调整top和left
- 浮动布局, 清除浮动影响
- 定位布局, 默认static, 还有absolute, relative和fixed
- 流式布局, 一种布局思想,
- django组件
- 请求组件
- 路由组件: 1.x和2.x区别
- 响应组件: render, httpresponse, redirect, jsonresponse
- orm---数据库交互
- templates---模板层交互
- 模板语法, 过滤器, 标签, 自定义标签及过滤器, 模板的继承
- 视图函数与模板之间的传参: render的第三个参数
- 模板层将数据传入后端: forms组件,
- 用auth模块完成登录注册的功能
- 二次封装model扩展user表字段
- views---逻辑层交互
- request: wsgi协议解释的到的数据结果
- 设计模式: MCV
- MTV: 基于MVC基础上的三个文件夹models, templates, views
- model: orm, 数据库迁移命令完成对象关系映射
课程安排
Vues
基础: 指令, 实例成员, 组件(组件间传参)
项目: 基于组件开发, 插件: vue-router(路由), vuex(仓库), axios(ajax), vue-cookies), jq + bs, element-ui
DRF
全称: django-rest-framework: 完成前后端分离式django项目, 采用ajax交互数据
知识点:
- 请求, 响应, 渲染, 解析, 异常,
- 序列化组件, 三大认证, 视图家族(CBV)
- 数据处理: 分页, 筛选, 搜索, 排序
Luffy
目的: 了解前后端分离项目(主流, 可重构), 了解公司开发项目的模式
知识点: git(团队开发), 多方式登录, 调用第三方API, 二次封装包, 上线
Vue框架及其实例
三大前端框架
react, vue, angular
vue优点: 中文API, 单页面开发, 基于组件开发, 数据双向绑定, 虚拟DOM, 数据驱动
Vue实例
- 一个vue实例只能有一个挂载点
- 挂载点通常使用id选择器(唯一性)
- html标签与body标签不能作为挂载点
- 在实例内部, this就指代当前实例本身, 进行实例间交互时需要用变量接收实例
'''
# Vue_test.html
<style>
body {
user-select: none; # 用户无法选中内容
}
</style>
<div id="d1">
<p v-on:click="pClick" v-bind:style="pStyle">{{msg}}</p>
</div>
<script src="js/vue.js"></script> // 引入vue.js文件
<script>
console.log(Vue);
let app = new Vue({
el: '#d1', // 挂载点, vue实例与页面标签建立关联
data: { // data为挂载点提供数据
msg: '信息',
pStyle: {
color: 'blue',
}
},
methods: {
pClick: function () {
app.pStyle.color = 'aqua';
}
}
});
</script>
'''插值表达式
'''
<body>
<div id="app">
<p>{{msg + 10}}</p> # 信息10
<p>{{msg[0]}}</p> # 信
<p>{{msg.split('')}}</p> # [ "信", "息" ]
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '信息',
num: 10,
},
});
</script>
'''文本指令
'''
<body>
<div id="app">
<p>{{msg.split('')}}</p> # [ "蔡", "启", "龙" ]
<p v-text="msg.split('')">12345</p> # [ "蔡", "启", "龙" ]
<p v-text="info"></p> # <i>i标签</i>
<p v-html="info"></p> # i标签
<p v-once v-on:click="pClick">{{msg}}</p> # 信息 # 标签只能被渲染一次
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '信息',
info: '<i>i标签</i>'
},
methods: {
pClick: function () {
this.msg = '蔡启龙'
},
},
});
</script>
'''js面向对象
js基本数据类型
undefined, null, string, number, boolean, object(Array), function
'''
<script>
function f1() { // 定义函数
console.log('f1');
}
f1(); // 1
// 构造函数 == 类
function F1(name) { // 定义类
this.name = name;
this.eat = function (food) { // 类中的方法
console.log(this.name + '在吃' + food);
};
}
let f1oo = new F1('蔡启龙');
console.log(f1oo.name); // 蔡启龙
f1oo.eat('苹果'); // 蔡启龙在吃苹果
// js中的函数传参可少传也可多传, 少的参数用undefined替代, 多的参数不接收也不报错
</script>
'''四种定义变量的方式及箭头函数
var, let, const, 不写
'''
<script>
function f1() {
var a = 10;
let b = 20;
const c = 30;
d = 40;
}
f1(); // 40
// console.log(a); // 报错, 函数外部无法访问
// console.log(b); // 报错, 函数外部无法访问
// console.log(c); // 报错, 函数外部无法访问
console.log(d); // 40, 不加任何声明定义的变量为全局变量
const e = 50;
// e = 60; // 报错, 常量不能被修改
// const e = 70; // 报错: 'e' has already been declared
var f = 80;
var f = 90;
let g = 100;
// let g = 110; // 报错: 'g' has already been declared;
for (let i = 0; i < 5; i++) {
console.log(i);
}
console.log(i); // undefined
for (var i = 0; i < 5; i++) {
console.log(i);
}
console.log(i); // 5
/*
let, const定义的变量不能重复定义,
let, const定义的变量具有块级作用域, 出块级作用域则失效
局部作用域是块级作用域的一种特殊情况
块级作用域可以避免变量污染,
python只有局部作用没有块级作用域, 但python有垃圾回收机制
*/
let f2 = function () { // 函数定义方式二
console.log('f2')
};
f2(); // f2
let f3 = (n1, n2) => n1 + n2; // 箭头函数, 参数为多个或0个, 没有函数体时的写法
console.log(f3(120, 130)); // 250
let f4 = n3 => n3 * 140; // 箭头函数只有一个参数, 没有函数体时的写法
console.log(f4(150)); // 21000
let f5 = () => { // 箭头函数, 有函数体时的写法
console.log('f5'); // f5
return 160
};
console.log(f5()); // 160
</script>
'''箭头函数的应用
'''
<script>
let obj = { // 直接写大括号为创建对象
name: 'Nick',
// desc: function (attr) {
// console.log(this.name + attr)
// },
desc() { // 字典对象中方法的标准写法, 不需要键值对形式
console.log(this)
},
test: () => {
console.log(this);
},
};
console.log(obj.name); // Nick
obj.desc(); // {name: "Nick", desc: ƒ}
obj.test() // Window {parent: Window, …}, 箭头函数引用的为外层的this
</script>
'''事件指令
事件指令: v-on: 事件名="方法变量"
简写: @事件名="方法变量"
鼠标事件
'''
<body>
<div id="app">
<p v-on:click="f1">{{msg}}</p>
<p @mouseover="f2" @mouseout="f3" @mousedown="f4">{{action1}}</p>
<p @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{action2}}</p>
</div>
</body>
<script>
new Vue({
el: app,
data: {
msg: '点击切换',
action1: '鼠标事件',
action2: '鼠标事件续',
},
methods: {
f1() {
this.msg = '切换成了奥特曼';
},
f2() {
this.action1 = '鼠标悬浮';
},
f3() {
this.action1 = '鼠标离开';
},
f4() {
this.action1 = '鼠标点击';
},
f5() {
this.action2 = '鼠标抬起';
},
f6() {
this.action2 = '鼠标移动';
},
f7() {
this.action2 = '右击菜单'
}
}
});
</script>
'''事件对象
'''
<body>
<div id="app">
<p @click="f1">{{info}}</p>
<p @click="f2(1, $event, 3)">{{info}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '事件传参'
},
methods: {
f1(ev, x, y) {
this.info = '验证默认情况下是否传参';
console.log(ev, x); // MouseEvent {..., clientX: 41, clientY: 28, …}, undefined
},
f2(a, b, c) {
this.info = '尝试主动传参的情况';
console.log(a, b, c) // 1 MouseEvent ... 3
},
},
// 事件变量, 不加(), 默认会传事件对象; 添加()代表自定义传参, 系统不再传入事件对象, 但可以手动传事件对象$event
})
</script>
'''属性指令
属性指令: v-bind:属性名="变量"
简写: :属性名="变量"
普通属性
'''
<body>
<div id="app">
<p v-bind:title="pTitle">汉字</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '鼠标悬浮提示',
},
methods: {
},
})
</script>
'''class属性
'''
<head>
...
<style>
.c1 {
width: 200px;
height: 200px;
background-color: orange;
}
.c2 {
border-radius: 50%;
}
.c3 {
border-radius: 25%;
}
</style>
...
<body>
<div id="app">
<p :class="[x1, x2]"></p> # <p :class="c1 c2"></p>, []可以控制多个类名值
# []内可以为常量值, 也可以为布尔类型属性值, isTrue为true时, 则有c3属性值, 否则没有
<p :class="['c1', {c3: isTrue}]" @click="isTrue = !isTrue"></p> # <p :class="c1 c3"></p>,
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
x1: 'c1',
x2: 'c2',
isTrue: 1,
},
methods: {},
})
</script>
'''style属性
'''
<p :style="myStyle">样式属性</p> # 统一设置样式
<p :style="{width: w, height: h, backgroundColor: bgc,}">样式属性</p> # 细分每个样式
new Vue({
el: '#app',
data: {
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red',
},
w: '200px',
h: '200px',
bgc: 'green',
},
methods: {},
})
'''