目录

DAY65

课堂笔记

在day65代码文件夹下—》新建js文件,然后导入在官网下载好的Vue.js文件

​```python
"""
1、http与https
http vs tcp:应用层,传输层,http协议传输层采用的是tcp
http特点:无状态,无连接,先客户端发出请求,服务器端一定做出响应
https:在http协议之上增加ssl安全认证 2、前端布局
流式布局
响应式布局
盒模型布局
浮动布局
定位布局 3、ORM
"""
​``` ## 课程安排 ​```python
"""
Vue:
基础:指令、实例成员、组件(组件间传参)
项目:基于组件开发、插件(vue-router、vuex、axios、vue-cookies、jq+bs、element-ui) DRF:
全称:django-restframework:完成前后台 分离式 django项目
知识点:
请求、响应、渲染、解析、异常
序列化组件、三大认证、视图家族(CBV)
分页、筛选、搜索、排序 Luffy:
目的:了解前后台分离项目,了解公司开发项目的模式
知识点:git、多方式登录、第三方短信认证、支付宝、上线
"""
​``` ## Vue ​```python
"""
前台框架:angular、react、vue
vue:有前两大框架优点,摈弃缺点;没有前两个框架健全
vue优点:中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动) """
​``` ## 知识总结 ​```python
"""
1、vue框架的优势 2、vue如何在页面中引入
1)通过script标签引入vue.js环境
2)创建vue实例
3)通过el进行挂载 3、插值表达式
{{ 变量以及变量的简单运算 }} 4、文本指令
{{ }} | v-text | v-html | v-once 5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)" 6、属性指令
v-bind:属性="变量" | :属性="变量" :title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量,c1和f1变量分别控制字体颜色和大小 7、js补充
function可以作为类,内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法: 方法名(){}
"""
​```

1、vue实例

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<style>
body {
user-select: none;
}
</style>
</head>
<body>
<section>
<div id="d1">
{{ msg }}
<p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
</div>
<hr>
<div class="d2">
{{ }}
</div>
<hr>
<div class="d2">
{{ }}
</div>
</section>
</body>
<script src="js/vue.js"></script>
<script>
`
console.log(Vue);
let app = new Vue({
el: '#d1', // 挂载点:vue实例与页面标签建立关联
}); new Vue({
el: '.d2', // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
});
`;
// 总结:
// 1、通常挂载点都采用id选择器(唯一性)
// 2、html与body标签不能作为挂载点(组件知识点解释) // new Vue({
// el: 'body'
// })
let app = new Vue({
el: 'section',
data: { // data为挂载点内部提供数据
msg: 'message',
info: '信息',
pStyle: {
color: 'yellowgreen'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'yellowgreen') {
app.pStyle.color = 'yellowgreen'
} else {
app.pStyle.color = 'red'
}
console.log(app.msg);
console.log(app.pClick);
console.log(this.msg);
console.log(this.pClick);
}
}
}); // 声明的实例是否用一个变量接收
// 1、在实例内部不需要,用this就代表当前vue实例本身
// 2、在实例外部或其他实例内部需要,定义一个变量接收new Vue()产生的实例
console.log(app.msg) </script>
</html>

2、插值表达式

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ num * 10 }}</p>
<p>{{ msg + num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.split('') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'msg',
num: 10
}
})
</script>
</html>

3、文本指令

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--
文本指令:
1、{{ }}
2、v-text:不能解析html语法的文本,会原样输出
3、v-html:能解析html语法的文本
4、v-once:处理的标签的内容只能被解析一次
-->
<p>{{ msg.split('') }}</p>
<p v-text="msg.split('')">12345</p>
<p v-text="info"></p>
<p v-html="info"></p> <hr>
<p v-on:click="pClick" v-once>{{ msg + info }}</p>
<p>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
info: '<i>info</i>'
},
methods: {
pClick: function () {
this.msg = '信息'
}
}
})
</script>
</html>

4、面向对象js

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>面向对象js</title>
</head>
<body>
<h1>面向对象js</h1>
</body>
<script>
// undefined、null、string、number、boolean、object(Array)、function
// var、let、const、不写 // object(Array)、function function f1() {
console.log('f1 run')
}
f1(); // 构造函数 == 类
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
}
let ff1 = new F2("Bob");
console.log(ff1.name); let ff2 = new F2("Tom");
console.log(ff2.name); ff1.eat('饺子');
ff2.eat('sao子面'); let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的语法
console.log(this.name + '在' + food)
}
};
console.log(obj.name);
obj.eat('hotdog');
</script>
</html>

5、js函数补充

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>函数补充</title>
</head>
<body>
<h1>函数补充</h1>
</body>
<script>
// ES5 ES6 function f() {
d = 40; // 全局变量
}
f(); console.log(d); const c = 30; // 常量
console.log(c); if (1) {
var a = 10;
let b = 20; // let、const定义的变量不能重复定义,且具备块级作用域
}
console.log(a);
// console.log(b); for (let i = 0; i < 5; i++) {
console.log(i);
}
// console.log(i);
// console.log(i);
// console.log(i); function f1() {
console.log('f1 run');
}
let f2 = function () {
console.log('f2 run');
};
f2(); let f3 = () => {
console.log('f3 run');
};
f3(); // 如果箭头函数没有函数体,只有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res); // 如果箭头函数参数列表只有一个,可以省略()
let f5 = num => num * 10;
res = f5(10);
console.log(res); // 重点:function、箭头函数、方法都具有本质区别
let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this);
// console.log(this.name + '在吃' + food)
// },
// eat: food => {
// console.log(this);
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的语法
console.log(this);
console.log(this.name + '在' + food)
}
};
obj.eat('food'); new Vue({
data: {
res: ''
},
methods: {
fn () {
// axios插件
let _this = this;
this.$axios({
url: '',
method: 'get',
data: { },
}).then(function (response) {
_this.res = response.data;
})
},
fn1 () {
// axios插件
this.$axios({
url: '',
method: 'get',
data: { },
}).then(response => {
//this指的是axios插件
this.res = response.data;
})
}
}
})
</script>
</html>

6、事件指令

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--
事件指令: v-on:事件名="方法变量"
简写: @事件名="方法变量"
-->
<p v-on:click="f1">{{ msg }}</p>
<p @click="f1">{{ msg }}</p>
<hr>
<!--mouseover mouseenter | mouseout mouseleave-->
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
<hr> <!-- 事件变量,不添加(),默认会传事件对象: $event -->
<!-- 事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象 -->
<p @click="f8($event, '第一个')">{{ info }}</p>
<p @click="f8($event, '第二个')">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '点击切换',
action: '鼠标事件',
info: '确定点击者'
},
methods: {
f1 () {
this.msg = '点击了'
},
f2 () {
this.action = '悬浮';
console.log('悬浮')
},
f3 () {
this.action = '离开'
},
f4 () {
this.action = '按下'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移动';
console.log('移动')
},
f7 () {
this.action = '右键';
},
f8 (ev, argv) {
console.log(ev, argv);
this.info = argv + '点击了';
}
}
})
</script>
</html>

7、属性指令

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<!--属性指令: v-bind:属性名="变量"
简写: :属性名="变量"
-->
<p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p> <!--1、简单使用-->
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
<!--<img :src="img_src" alt="">--> <!--2、class属性绑定-->
<!--c1变量的值就是类名-->
<p :class="c1"></p> <!--多类名可以用[]语法,采用多个变量来控制-->
<p :class="[c2, c3]"></p>
<!--选择器位可以设置为变量,也可以设置为常量-->
<p :class="['d1', c4]"></p> <!--{类名: 布尔值}控制某类名是否起作用-->
<!--<p :class="{x1: false}"></p>-->
<!--多种语法混用-->
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p> <!--3、style属性绑定(了解)-->
<p :style="myStyle">样式属性</p>
<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '简单使用',
def: '自定义属性',
img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1: 'd1 d2',
c2: 'd1',
c3: 'd3',
c4: 'd3',
is_true: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods: {
changeImg() {
this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
</script>
</html> //今日日考:
1.简述一下vue框架的优点
2.vue实例通过什么与页面结构建立关联?有哪些要注意的点
3.写出文本,属性与事件指令

DAY66

课堂笔记

## 复习

​```python
"""
1、vue框架的优势
中文API
单一面应用 - 提升移动端app运行速度
数据的双向绑定 - 变量全局通用
数据驱动 - 只用考虑数据,不需要在意DOM结构
虚拟DOM - 缓存机制 2、vue如何在页面中引入
1)通过script标签引入vue.js环境
2)创建vue实例
3)通过el进行挂载 new Vue({
el: '#app', // css3选择器,唯一,html、body不能作为挂载点,一个页面可以有多个实例对应多个挂载点
}) 3、插值表达式
{{ 变量以及变量的简单运算 }}
{{ ((num * 10) + 'string').split('')[0] }} 4、文本指令
{{ }} | v-text | v-html | v-once 5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)" @click='btnClick'
btnClick(ev) {} @click='btnClick(1, 2, $event)'
btnClick(n1, n2, ev) {}
btnClick(...args) {} 6、属性指令
v-bind:属性="变量" | :属性="变量" :title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量,c1和f1变量分别控制字体颜色和大小 7、js补充
function可以作为类,内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法: 方法名(){} function Fn(name){this.name = name}
let f1 = new Fn('Bob') let f2 = ()=>{} {
f3(){}
}
"""
​``` ## 课堂内容 ​```python
"""
1、表单指令:
v-model="变量" 变量与value有关
普通:变量就代表value值
单选框:变量为多个单选框中的某一个value值
单一复选框:变量为布尔,代表是否选中
多复选框:变量为数组,存放选中的选项value 2、条件指令:
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else 3、循环指令:
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic" 4、sessionStorage | localStorage 5、分隔符:delimiters: ['{{', '}}'], 6、过滤器:
{{ n1, n2 | f1(30) | f2 }} filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
} 7、计算属性:
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
} 8、监听属性:
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
} 9、冒泡排序:
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
} """
​``` ## A作业(必做) ​```python
"""
1、按照上方 知识点总结 模块,总结今天所学知识点;
2、先有一下成绩单数据
scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
]
用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分; 3、还是采用上方相同的数据,采用相同的渲染规则,只渲染所有科目都及格了的学生。
"""
​``` ## B作业(选做) ​```python
"""
1、还是采用上方相同的数据,添加筛选规则:
i)有三个按钮:语文、数学、外语,点击谁谁高亮,且当前筛选规则采用哪门学科
ii)两个输入框,【】~【】,前面天最小分数,后面填最大分数,全部设置完毕后,表格的数据会被更新只渲染满足所有条件的结果
举例:点击语文,输入【86】~【87】,那就只会渲染Jerry和Ben两条数据
"""
​```

1、表单指令

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<!--表单指令: v-model="变量" 变量值与表单标签的value相关
v-model可以实现数据的双向绑定:v-model绑定的变量值可以影响表单标签的值,反过来单标签的值也可以影响变量的值
-->
<form action="">
<!--重点-->
<input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }} <hr> <!--1.单选框-->
男:<input type="radio" name="sex" value="male" v-model="v2">
女:<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }} <hr> <!--2.单一复选框-->
卖身契:同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }} <hr> <!--3.多复选框-->
爱好:<br>
男:<input type="checkbox" name="hobbies" value="male" v-model="v4">
女:<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞:<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}
<hr> <button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '123',
v2: 'male',
v3: false,
v4: ['male', 'female']
}
})
</script>
</html>

2、条件指令

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak] { display: none; } .box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green} .active {
background-color: deeppink;
}
</style> </head>
<body>
<div id="app" v-cloak>
<!--条件指令:
v-show="布尔变量" 隐藏时,采用display:none进行渲染
v-if="布尔变量" 隐藏时,不再页面中渲染(保证不渲染的数据泄露)
-----------------------------
v-if | v-else-if | v-else
-->
<div class="box r" v-show="is_show"></div>
<div class="box b" v-if="is_show"></div>
<hr> <div class="wrap">
<div>
<button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
</div>
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
</div> </div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_show: false,
page: 'r_page'
}
})
</script>
</html> <!--今日日考:
1.条件质量一共有哪些?有两个相似功能的指令区别在哪?
2.循环指令怎么处理字符串,数组和对象
3.简述计算属性和监听属性
4.简述过滤器-->

3、循环指令

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="app">
<!--循环指令:
v-for="ele in string|array|obj"
-->
<span>{{ info }}</span>
<hr>
<i v-for="c in info">{{ c }} </i>
<hr>
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
<hr> <div v-for="e in stus">{{ e }}</div>
<hr>
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
<hr> <div v-for="v in people">{{ v }}</div>
<hr>
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<hr> <div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: 'good good study',
stus: ['Bob', 'Tom', 'Jerry'],
people: {
name: '猴子',
age: 36.7,
sex: '女',
},
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
</html>

4、循环指令案例

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todo list 案例</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], },
methods: {
send_msg() {
// 将comment添加到msgs数组中:unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment); // 数组操作最全方法:splice(begin_index, count, ...args)
// this.msgs.splice(0, 2); if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = ''; localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
})
</script>
<script>
// 前台数据库
// localStorage: 永久存储
// sessionStorage:临时存储(所属页面标签被关闭后,清空) // 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20; // 取
// console.log(localStorage.n1);
// console.log(sessionStorage.n2); // 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(JSON.parse(localStorage.arr)); // 清空数据库
// localStorage.clear();
</script>
</html>

5、分隔符(了解)

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg }}
[{ msg }]
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['[{', '}]'], // 修改插值表达式符号
})
</script>
</html>

6、过滤器

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<!--
总结:
1、在filters成员中定义过滤器方法
2、可以对多个值进行过滤,过滤时还可以额外传入辅助参数
3、过滤的结果可以再进行下一次过滤(过滤的串联)
-->
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件,返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
</script>
</html>

7、计算属性

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
n1: '',
n2: '',
// result: 0,
},
/**
* 总结:
* 1、computed计算属性可以声明 方法属性(方法属性一定不能在data中重复声明)
* 2、方法属性 必须在页面中渲染,才会启用绑定的方法,方法属性的值就是绑定方法的返回值
* 3、绑定的方法中出现的所有变量都会被监听,任何一个变化发生值更新都会重新出发绑定方法,从而更新方法属性的值
*
* 一般用来解决的问题:一个变量值依赖于多个变量
*/
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
})
</script>
</html>

8、监听属性

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>姓名:<input type="text" v-model="full_name"></p>
<p>姓:{{ first_name }}</p>
<p>名:{{ last_name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
// n是监听的属性当前值,o是其上一次的值,监听的属性值每次更新都会回调监听方法 /**
* 总结:
* 1、监听的属性需要在data中声明,监听方法不需要返回值
* 2、监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
* 3、监听方法有两个回调参数:当前值,上一次值
*
* 解决的问题:多个变量值依赖于一个变量值
*/
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})
</script>
</html>

9、冒泡排序

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { }
})
</script>
<script> let arr = [3, 2, 5, 4, 1];
console.log(arr); // 冒泡排序
// 3, 2, 5, 4, 1 // 2, 3, 4, 1, 5
// 2, 3, 1, 4
// 2, 1, 3
// 1, 2
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr); stus = [
{
name: 'Bob',
grade: 98
},
{
name: 'Tom',
grade: 87
},
{
name: 'Jerry',
grade: 92
},
];
// 按照分数进行排名
for (let i=0; i<stus.length-1; i++) {
for (let j=0; j<stus.length-1-i; j++) {
// 处理条件即可
if (stus[j].grade > stus[j + 1].grade) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
} console.log(stus); </script>
</html>

模板

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"> </div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { }
})
</script>
</html>

作业1

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<div>
<!--需求:当前点击者高亮-->
<button @click="changeColor('red')">红</button>
<button @click="changeColor('yellow')">黄</button>
<button @click="changeColor('blue')">蓝</button>
</div>
<div class="box" :style="{backgroundColor: bgColor}"></div>
<!--(div>button*3)+.box-->
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
bgColor: 'black'
},
methods: {
changeColor(color) {
this.bgColor = color;
}
}
})
</script>
</html>

作业2

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
width: 200px;
height: 200px;
/*background-color: black;*/
color: white;
font: bold 50px/200px 'STSong';
text-align: center;
user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
bgColor: 'black',
colorArr: ['cyan', 'pink', 'green']
},
methods: {
actionFn() {
this.count ++;
this.bgColor = this.colorArr[this.count % 3]
}
}
})
</script>
</html>

作业3

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap {
border: 3px solid black;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 50px auto 0;
position: relative;
}
.red, .green {
width: 100px;
height: 200px;
position: absolute;
}
.red { background-color: red; }
.green { background-color: green; } .l {
width: 100px;
height: 200px;
left: 0;
}
.t {
width: 200px;
height: 100px;
top: 0;
}
.r {
width: 100px;
height: 200px;
right: 0;
}
.b {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="actionFn">
<div class="red" :class="red_class"></div>
<div class="green" :class="green_class"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
red_class: 'l',
green_class: 'r',
red_arr: ['l', 't', 'r', 'b'],
green_arr: ['r', 'b', 'l', 't'],
},
methods: {
actionFn() {
this.count ++;
this.red_class = this.red_arr[this.count % 4];
this.green_class = this.green_arr[this.count % 4];
}
}
})
</script>
</html>

DAY67

课堂笔记

## 课堂内容

​```python
"""
1、表单指令:
v-model="变量" 变量与value有关
普通:变量就代表value值
单选框:变量为多个单选框中的某一个value值
单一复选框:变量为布尔,代表是否选中
多复选框:变量为数组,存放选中的选项value 2、条件指令:
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else
前者条件成立,就不管之后分支,当所有条件都不成功,才执行v-else分支 3、循环指令:
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
v:值 k:键 i:索引 4、sessionStorage | localStorage
sessionStorage:生命周期同所属标签(标签关闭被销毁)
localStorage:永久保存
localStorage.key = value
localStorage.clear() 5、分隔符:delimiters: ['[{', '}]'], 6、过滤器:
{{ n1, n2 | f1(30) | f2 }} filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
} 7、计算属性:
result必须渲染;绑定的方法内部出现的变量更新方法被调用;方法返回值是result的值;result不能在data中重复定义
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
} 8、监听属性:
监听属性属性更新方法被调用;方法参数为被监听属性当前值,上一次值;多个变量依赖一个变量
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
} 9、冒泡排序:
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
"""
​``` ## Vue基础知识 ​```python
"""
组件:
组件概念:vue实例就是组件
根组件、局部组件、全局组件
组件传参:
父传子:自定义组件属性
子传父:自定义组件事件 实例成员:
el、data、methods、computed、watch、filters、delimiters、props、template、components 指令:
{{}}、v-text、v-html、v-once、v-on、v-model、v-bind、v-if、v-show、v-else-if、v-else、v-for、v-cloak
"""
​``` ## Vue项目环境 ​```python
"""
vue ~~ Django node ~~ Python npm ~~ pip
"""
​``` ## A作业(必做) ​```python
"""
1、按照上方 知识点总结 模块,总结今天所学知识点;
2、有以下广告数据(实际数据命名可以略做调整)
ad_data = {
tv: [
{img: 'img/tv/001.png', title: 'tv1'},
{img: 'img/tv/002.png', title: 'tv2'},
{img: 'img/tv/003.png', title: 'tv3'},
{img: 'img/tv/004.png', title: 'tv4'},
],
phone: [
{img: 'img/phone/001.png', title: 'phone1'},
{img: 'img/phone/002.png', title: 'phone2'},
{img: 'img/phone/003.png', title: 'phone3'},
{img: 'img/phone/004.png', title: 'phone4'},
]
} i) 有两个大标题,电视和手机,点击对应的标题,渲染对应的数据
ii) 一个字典作为一个显示单位,定义一个子组件进行渲染(涉及父子组件传参) 3、在第2题基础上,页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)
i)当没有点击任何广告,h2 标签显示:未选中任何广告
ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中
"""
​``` ## B作业(选做) ​```python
"""
1、给自己电脑中配置好vue环境,创建一个vue项目,可以参考课件中的 vue项目创建.md 2、预习视频, 尝试在项目基础上完成A作业(利用vue文件,创建视图组件,页面小组件,组件的导入、渲染以及传参)
"""
​```

vue创建项目

## Vue项目环境搭建

​```python
"""
node ~~ python:node是用c++编写用来运行js代码的
npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm
vue ~~ django:vue是用来搭建vue前端项目的 1) 安装node
官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org 3) 安装vue项目脚手架
>: cnpm install -g @vue/cli 注:2或3终端安装失败时,可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
""" ​``` ## Vue项目创建 ​```
1) 进入存放项目的目录
>: cd *** 2) 创建项目
>: vue create 项目名 3) 项目初始化
​``` ![](img/vue项目创建.png) ## pycharm配置并启动vue项目 ​```
1) 用pycharm打开vue项目
2) 添加配置npm启动
​``` ![](img/配置vue启动.png) ## vue项目目录结构分析 ​```
├── v-proj
| ├── node_modules // 当前项目所有依赖,一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件(项目的入口)
| | ├── router
| | | └── index.js// 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
| | └── store
| | | └── index.js// 仓库脚本文件(vuex插件的配置文件,数据仓库)
| ├── README.md
└ └── package.json等配置文件
​``` ## vue组件(.vue文件) ​```python
# 1) template:有且只有一个根标签
# 2) script:必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性,代表该样式只在组件内部起作用(样式的组件化)
​``` ​```vue
<template>
<div class="test"> </div>
</template> <script>
export default {
name: "Test"
}
</script> <style scoped> </style>
​``` ## 全局脚本文件main.js(项目入口) ​```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app') ​```
##### 改写 ​```js
import Vue from 'vue' // 加载vue环境
import App from './App.vue' // 加载根组件
import router from './router' // 加载路由环境
import store from './store' // 加载数据仓库环境 Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: function (readFn) {
return readFn(App);
},
}); ​```

1、组件

## 复习

​```python
"""
1、vue框架的优势
中文API
单一面应用 - 提升移动端app运行速度
数据的双向绑定 - 变量全局通用
数据驱动 - 只用考虑数据,不需要在意DOM结构
虚拟DOM - 缓存机制 2、vue如何在页面中引入
1)通过script标签引入vue.js环境
2)创建vue实例
3)通过el进行挂载 new Vue({
el: '#app', // css3选择器,唯一,html、body不能作为挂载点,一个页面可以有多个实例对应多个挂载点
}) 3、插值表达式
{{ 变量以及变量的简单运算 }}
{{ ((num * 10) + 'string').split('')[0] }} 4、文本指令
{{ }} | v-text | v-html | v-once 5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)" @click='btnClick'
btnClick(ev) {} @click='btnClick(1, 2, $event)'
btnClick(n1, n2, ev) {}
btnClick(...args) {} 6、属性指令
v-bind:属性="变量" | :属性="变量" :title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量,c1和f1变量分别控制字体颜色和大小 7、js补充
function可以作为类,内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法: 方法名(){} function Fn(name){this.name = name}
let f1 = new Fn('Bob') let f2 = ()=>{} {
f3(){}
}
"""
​``` ## 课堂内容 ​```python
"""
1、表单指令:
v-model="变量" 变量与value有关
普通:变量就代表value值
单选框:变量为多个单选框中的某一个value值
单一复选框:变量为布尔,代表是否选中
多复选框:变量为数组,存放选中的选项value 2、条件指令:
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else 3、循环指令:
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic" 4、sessionStorage | localStorage 5、分隔符:delimiters: ['{{', '}}'], 6、过滤器:
{{ n1, n2 | f1(30) | f2 }} filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
} 7、计算属性:
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
} 8、监听属性:
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
} 9、冒泡排序:
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
} """
​``` ## A作业(必做) ​```python
"""
1、按照上方 知识点总结 模块,总结今天所学知识点;
2、先有一下成绩单数据
scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
]
用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分; 3、还是采用上方相同的数据,采用相同的渲染规则,只渲染所有科目都及格了的学生。
"""
​``` ## B作业(选做) ​```python
"""
1、还是采用上方相同的数据,添加筛选规则:
i)有三个按钮:语文、数学、外语,点击谁谁高亮,且当前筛选规则采用哪门学科
ii)两个输入框,【】~【】,前面天最小分数,后面填最大分数,全部设置完毕后,表格的数据会被更新只渲染满足所有条件的结果
举例:点击语文,输入【86】~【87】,那就只会渲染Jerry和Ben两条数据
"""
​```

2、子组件

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子组件</title>
<style>
body, h2 {
margin: 0;
} .wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
} .box img {
width: 100%;
} .box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag> <global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script> // 声明局部组件:局部组件要在其父组件中注册才能使用
// 1、声明组件 2、注册组件 3、渲染组件 => 全局组件不需要注册
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/phone/001.jpg" alt="">
<h2>美女</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
}; Vue.component('global-tag', {
template: `
<div class="box" @click="fn">
<img src="img/phone/002.jpg" alt="">
<h2>大长腿</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
}); new Vue({
el: '#app',
data: {},
components: { // 注册组件
localTag,
}
})
</script>
</html>

3、组件化

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>组件化</title>
<style>
body, h2 {
margin: 0;
} .wrap {
width: 880px;
margin: 0 auto;
} .wrap:after {
content: '';
display: block;
clear: both;
} .box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
} .box img {
width: 100%;
} .box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div> </body>
<script src="js/vue.js"></script>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/phone/001.jpg" alt="">
<h2>捶了美女{{ count }}下</h2>
</div>
`,
data() { // 局部或全局取件,一个组件可能会被复用多次,每个组件都应该有自己独立的变量名称空间
return {
count: 0,
}
}, // 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域)
methods: {
fn() {
console.log(this);
this.count++;
}
}
}; new Vue({
el: '#app',
data: {},
components: {
localTag,
}
}); `
class A:
name = 'Owen'
def __init__(self, name):
self.name = name a1 = A('1')
a2 = A('2')
a1.name
a2.name
`;
</script>
</html>

4、组件传参—父传子

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>父传子</title>
<style>
body, h2 {
margin: 0;
} .wrap {
width: 880px;
margin: 0 auto;
} .wrap:after {
content: '';
display: block;
clear: both;
} .box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
} .box img {
width: 200px;
height: 240px;
} .box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag v-for="dog in dogs" :dog="dog" def="12345" :xyz="dog.name"></local-tag>
</div>
</div> </body>
<script src="js/vue.js"></script>
<script>
let dogs = [
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
},
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
}
]; // 1)子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
// 2)子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件
let localTag = {
props: ['dog', 'def', 'xyz'], template: `
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>捶{{ dog.name }}{{ count}}下</h2>
<!--<h3>{{ abc }}</h3>-->
<!--<h3>{{ def }}</h3>-->
<!--<h3>{{ xyz }}</h3>-->
</div>
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this.dog);
this.count++;
}
}
}; new Vue({
el: '#app',
data: {
dogs,
},
components: {
localTag,
}
}); </script>
</html>

5、组件传参—子传父

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3> <!--自定义组件标签的事件
自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法由父组件来实现
子组件如何触发自定义事件:this.$emit('自定义事件名', 触发事件回调的参数们) 子组件触发自定义事件,携带出子组件的内容,在父组件中实现自定义事件的方法,拿到子组件传递给父组件的消息
-->
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
}; let tag2 = {
template: `
<div>
主标题内容:<input type="text" v-model="t1" @input="t1Fn">
子标题内容:<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2 () {
this.$emit('h3a', this.t2);
}
}
}; new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
</html>

作业1

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人,就循环渲染几行-->
<tr v-for="(score, i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功,从后台获取操作的数据
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
// 补充:for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores); new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同,可以简写省略值
scores,
}
})
</script>
</html>

作业2

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人,就循环渲染几行-->
<tr v-for="(score, i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功,从后台获取操作的数据
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
// 补充:for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores); new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同,可以简写省略值
scores,
}
})
</script>
</html>

作业3

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3</title>
<style>
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div style="width: 400px; margin: 20px auto">
<button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>
<button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>
<button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>
<input type="number" min="0" max="100" v-model="min">
~
<input type="number" min="0" max="100" v-model="max">
</div> <table width="400" border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tbody v-if="subject === 'math'">
<tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject === 'chinese'">
<tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject === 'english'">
<tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else>
<tr v-for="(score, i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功,从后台获取操作的数据
let scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
];
// 补充:for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores); new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同,可以简写省略值
scores,
min: '',
max: '',
subject: '',
}
})
</script>
</html>

DAY68

课堂笔记

## 复习

​```python
"""
1、组件:
html、css、js的集合体
vue实例就代表组件
组件用template实例成员管理html结构,有且只有一个根标签
子组件可以复用,所以数据要组件化处理,data的值由方法的返回值提供 2、分类:
根组件:new Vue({}),顶级组件
全局组件: Vue.component('组件名', {}),不用注册可以在任何地方使用
局部组件:let 组件名 = {},只有在注册的父组件中才能使用 3、组件间传参:
父传子:自定义属性
<tag :info="msg"></tag> let tag = {
props: ['info'],
}
new Vue({
data: {msg: 12345}
components: {
tag,
}
}) 子传父:自定义事件
<tag @action="fn"></tag> let tag = {
data: {msg: 12345},
methods: {
tag_fn() {
this.$emit('action', this.msg)
}
}
}
new Vue({
components: {
tag,
},
methods: {
fn(info) {}
}
}) 4、vue项目环境
官网下载安装node => 将npm换源为cnpm => cnpm install -g @vue/cli => vue项目创建...
"""
​``` ## 知识点总结 ​```python
"""
1、创建项目:vue create 项目名 - babel、vue-router、vuex 2、项目目录:
node_modules依赖(不同电脑依赖需要重新构建)
views:页面组件
components:小组件
router/index.js:路由配置文件 - 路径与页面组件对应关系
App.vue:根组件,固定五行话(看代码)
main.js:项目总脚本文件 - 配置所有环境,加载根组件 3、vue请求生命周期:
浏览器请求/user => router插件映射User.vue组件 => User.vue组件替换App.vue中的<router-view />占位符
注: i) 可以用 <router-link to="/user">用户页</router-link>完成标签跳转
ii) this.$router.push('/user')完成逻辑跳转 4、vue组件的生命周期钩子:组件 创建 到 销毁 中的时间节点回调的方法
created(){} | mounted(){} 5、路由跳转
this.$router.push({name: '路由名', query: {拼接的参数}})
this.$router.go(number) 6、路由配置
{
path: '/course/detail',
name: 'course-detail',
component: CourseDetail
}
{
path: '/detail',
redirect: '/course/detail'
}
this.$router.push('/course/detail'); == this.$router.push('/detail');
this.$router.push('/course/detail?pk=1'); => this.$route.query.pk ​```````````````````````````````````````````````````````````````````````
{
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}
this.$router.push('/course/detail/10'); => this.$route.params.pk 7、js类的原型:类属性 8、配置全局css样式
import '@/assets/css/global.css'
require('@/assets/css/global.css'); 路由知识点概况:
1)路由配置:router/index.js
2)路由跳转与路由渲染:router-link、router-view、$router.push、$router.go
3)路由传参:两种传参
"""
​``` ## A作业(必做) ​```python
"""
1、按照上方 知识点总结 模块,总结今天所学知识点;
2、
Home.vue页面组件显示基本信息:欢迎来到汽车系统
Car.vue页面组件,完成Cars的列表数据渲染
Nav.vue小组件,完成Home与Car页面的导航跳转 3、
CarDetail页面组件,完成某一个汽车详细信息的渲染
(Car页面点击具体的car进入详情页,把点击的car的主键传入到详情页)
"""
​``` ## B作业(选做) ​```python
"""
1、预习vue前后台交互插件:axios
"""
​```

作业

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style>
body, h2 {
margin: 0;
} .wrap {
width: 880px;
margin: 0 auto;
} .wrap:after {
content: '';
display: block;
clear: both;
} .box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
} .box img {
width: 100%;
height: 240px;
} .box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
.nav, h2 {
text-align: center;
}
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<button @click="page = 'tv'" :class="{active: page === 'tv'}">tv</button>
<button @click="page = 'phone'" :class="{active: page === 'phone'}">phone</button>
</div>
<div class="wrap" v-if="page === 'tv'">
<tag v-for="tv in ad_data.tv" :ad="tv" :key="tv.title" @action="change_select"></tag>
</div>
<!-- v-for指令,需要给循环的标签或组件添加 key 属性,完成缓存的建立 -->
<div class="wrap" v-else-if="page === 'phone'">
<tag v-for="phone in ad_data.phone" :ad="phone" :key="phone.title" @action="change_select"></tag>
</div>
<h2 class="footer">{{ select_ad }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script> ad_data = {
tv: [
{img: 'img/tv/001.jpg', title: 'tv1'},
{img: 'img/tv/002.jpg', title: 'tv2'},
{img: 'img/tv/003.jpg', title: 'tv3'},
{img: 'img/tv/004.jpg', title: 'tv4'},
],
phone: [
{img: 'img/phone/100.jpg', title: 'phone1'},
{img: 'img/phone/200.jpg', title: 'phone2'},
{img: 'img/phone/300.jpg', title: 'phone3'},
{img: 'img/phone/400.jpg', title: 'phone4'},
]
}; let tag = {
props: ['ad'],
template: `
<div class="box" @click="send_ad(ad)">
<img :src="ad.img" alt="">
<h2>{{ ad.title }}</h2>
</div>
`,
methods: {
send_ad(ad) {
this.$emit('action', ad);
}
}
}; new Vue({
el: '#app',
data: {
ad_data,
page: 'tv',
select_ad: '未选中'
},
components: {
tag,
},
methods: {
change_select(ad) {
// this.select_ad = ad.title + '被选中';
this.select_ad = `${ad.title}被选中`;
}
}
})
</script>
</html>

js原型补充

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { }
})
</script>
<script> function A() {} let a1 = new A();
let a2 = new A(); // 为A类添加原型 => 类似于类属性
A.prototype.num = 100; console.log(a1.num);
console.log(a2.num); // ES6语法下类
class B {
constructor(name) {
this.name = name;
}
}
let b1 = new B('Tom');
let b2 = new B('Ben');
B.prototype.count = 666;
console.log(b1.count);
console.log(b2.count); console.log(b1.name);
console.log(b2.name); // 推导
Vue.prototype.$ajax = 12345;
// this.$ajax </script>
</html>

router——index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Course from '../views/Course'
import CourseDetail from '../views/CourseDetail' Vue.use(VueRouter); const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/', // 路由的重定向
},
{
path: '/course',
name: 'course',
component: Course
},
{
// 第一种路由传参
// path: '/course/detail', // 第二种路由传参
path: '/course/:pk/detail',
name: 'course-detail',
component: CourseDetail
}
]; const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
}); export default router

store——index.js

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
})

views—main.js

// import 别名 form '资源'

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' Vue.config.productionTip = false; // 配置全局样式:@就代表src文件夹的绝对路径,官方提倡require加载静态文件
// import '@/assets/css/global.css'
require('@/assets/css/global.css'); // new Vue({
// router,
// store,
// render: h => h(App)
// }).$mount('#app'); new Vue({
el: '#app',
router: router,
store: store,
render: function (read_vue_fn) {
return read_vue_fn(App)
}
}); // 项目的生命周期:
/**
* 1、启动项目,加载主脚本文件 main.js
* 加载Vue环境,创建根组件完成渲染
* 加载系统已有的第三方环境:router、store
* 加载自定义的第三方环境与自己配置的环境:后期项目不断添加
*
* 2、router被加载,就会解析router文件夹下的index.js脚本文件,完成 路由-组件 的映射关系
*
* 3、新建视图组件.vue(在views文件夹中),在路由中配置(在router的index.js中),设置路由跳转(在导航栏组件中Nav.vue)
*/

views—App.vue

<template>
<div id="app">
<!--页面组件占位符-->
<router-view></router-view>
</div>
</template>

components——Nav.vue

<template>
<div class="nav">
<div class="content">
<ul>
<li class="logo">
<img src="@/assets/img/logo.svg" alt="" @click="goHome">
</li>
<li class="route">
<router-link to="/">主页</router-link>
</li>
<li class="route">
<!--<router-link to="/course">课程页</router-link>-->
<router-link :to="{name: 'course'}">课程页</router-link>
</li>
</ul>
</div>
</div>
</template> <script>
export default {
name: "Nav",
methods: {
goHome() {
// console.log('去向主页');
// console.log(this.$router); // 控制路由跳转
// console.log(this.$route); // 控制路由数据 if (this.$route.path !== '/') {
// this.$router.push('/'); // 往下再跳转一页 this.$router.push({
name: 'home'
}); // this.$router.go(2); // go是历史记录前进后退,正为前进,负为后退,数字为步数
}
}
}
}
</script> <style scoped>
.nav {
width: 100%;
height: 60px;
background-color: #eee;
}
.content {
width: 1200px;
margin: 0 auto;
/*background-color: red;*/
height: 60px;
}
.content ul li {
float: left;
}
.logo {
padding-top: 10px;
padding-right: 50px;
cursor: pointer;
} .route {
padding: 15px 10px 0;
}
.route a {
padding-bottom: 5px;
border-bottom: 3px solid transparent;
}
.route a.router-link-exact-active {
color: orange;
border-bottom-color: orange;
}
</style>

components——CourseTag.vue

<template>
<div class="course-tag">
<img :src="course.img" alt="" @click="goDetail(course.id)"> <!--第一种路由传参-->
<!--<router-link :to="`/course/detail?pk=${course.id}`">{{ course.title }}</router-link>--> <!--<router-link :to="{-->
<!--name: 'course-detail',-->
<!--query: {pk: course.id}-->
<!--}">{{ course.title }}-->
<!--</router-link>--> <!--第二种路由传参-->
<router-link :to="`/course/${course.id}/detail`">{{ course.title }}</router-link> </div>
</template> <script>
export default {
name: "CourseTag",
props: ['course'],
methods: {
goDetail(pk) {
// this.$router.push(`/course/detail?pk=${pk}`);
this.$router.push({
name: 'course-detail',
query: {pk: pk}
});
}
}
}
</script> <style scoped>
.course-tag {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
} .course-tag img {
width: 100%;
height: 240px;
} .course-tag a {
text-align: center;
font-weight: normal;
font-size: 20px;
display: block;
}
</style>

DAY69

课堂笔记

## 复习

​```python
"""
1、环境
node:官网下载安装包,傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm
cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
vue/cli:cnpm install -g @vue/cli 2、项目创建
cd 存放项目的目录
vue create 项目名 => 需要安装的组件babel、vue-router、vuex 3、配置项目启动
pycharm打开项目,配置npm启动 4、main.js完成vue环境的加载、完成根组件的渲染、加载vue-router、vuex等环境、加载自定义环境 5、vue-router配置路由:
<router-link to=""></router-link> | this.$router.push() 完成跳转
<router-view /> 完成页面组件的占位
在router/index.js中 完成路由配置 路径-视图组件 映射关系
两种路由传参
配置 跳转 获取
path:'/user' to="/user?pk=1" $route.query.pk
path:'/user/:pk' to="/user/1" $route.params.pk :to="{name: 'user'}" 6、组件生命周期钩子:组件从创建到销毁的整个生命周期中特殊时间节点回调的方法
created(){完成后台数据的请求}
mounted(){完成极其耗时的后台数据请求} 7、js原型
Vue.prototype.count = 100
所有Vue实例都可以访问count
"""
​``` ## vue的ajax插件:axios ​```python
"""
1)安装插件(一定要在项目目录下):
>: cnpm install axios 2)在main.js中配置:
import axios from 'axios'
Vue.prototype.$axios = axios; 3)在任何一个组件的逻辑中发送ajax请求:
this.$axios({
url: 'http://127.0.0.1:8000/cars/',
method: 'get',
}).then(response => {
console.log(response);
// this.cars = response.data;
}).catch(error => { // 网络状态码为4xx、5xx
console.log(error);
}); """
​``` ## CORS跨域问题(同源策略) ​```python
"""
同源:http协议相同、ip服务器地址相同、app应用端口相同
跨域:协议、ip地址、应用端口有一个不同,就是跨域 Django默认是同源策略,存在跨越问题。
Django的解决方案: 1)Django按照cors模块:
>: pip install django-cors-headers 2)在settings注册模块,配置中间件:
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
] 3)在settings开启允许跨越:
CORS_ORIGIN_ALLOW_ALL = True
"""
​``` ## Vue配置ElementUI ​```python
"""
1)安装插件(一定要在项目目录下):
>: cnpm install element-ui 2)在main.js中配置:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); 3)使用:
灵魂:复制粘贴 """
​``` ## Vue配置jq+bs:见其课件 ## A作业(必做) ​```python
"""
1、整理今天所学知识点 2、将vue知识点系统回顾一下:vue指令、vue成员、vue生命周期钩子、vue项目的请求生命周期、vue文件组件(结构、语法、导入、页面与小组件)、父子组件间的传参(Cars页面渲染多个Car组件)、路由(占位、跳转、传参)、配置各种第三方插件(element、jq+bs、axios) 3、完成基础前后台分类的数据展示类网站
封装导航栏Nav小组件,完成各页面的跳转,在需要导航栏的页面中渲染Nav小组件
在主页Home组件中,写一个轮播图(bs和element都要提供),完成后台数据的轮播展示
将汽车主页数据渲染以及详情页数据渲染的数据,都放在后台(用mysql数据库存储),完成后台数据的渲染,前台父子组件以及组件间的传参
"""
​``` ## B作业(选做) ​```python
"""
1、尝试将bbs重构为前后台分类项目
2、好好预习drf视频(重中之重重)
"""
​```

Vue配置bs环境

## 安装插件

#### jQuery

​```
>: cnpm install jquery
​``` #### vue/cli 3 配置jQuery:在vue.config.js中配置(没有,手动项目根目录下新建) ​```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 bootstrap@3
​``` #### vue/cli 3 配置BootStrap:在main.js中配置 ​```js
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
​```

前后端分离跨域交互

## 分离的前后台交互

### 后台处理跨域

##### 安装插件

​```
>: pip install django-cors-headers 插件参考地址:https://github.com/ottoyiu/django-cors-headers/
​``` ##### 项目配置:dev.py ​```python
# 注册app
INSTALLED_APPS = [
...
'corsheaders'
] # 添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
] # 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
​```

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false; // 全局css
require('@/assets/css/global.css'); // 全局js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings; // 配置axios
import axios from 'axios'
Vue.prototype.$axios = axios; // 配置element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 配置bootstrap,前提要配置jQuery
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css" new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');

vue.config.js

const webpack = require("webpack");

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

App.vue

<template>
<div id="app">
<router-view/>
</div>
</template>
//固定五句话

Car.vue

<template>
<div class="car">
<Nav />
<div class="wrap">
<CarTag v-for="car in cars" :car="car" />
</div>
</div>
</template> <script>
import Nav from '@/components/Nav'
import CarTag from '@/components/CarTag' export default {
name: "Car",
components: {
Nav,
CarTag,
},
data() {
return {
cars: []
}
},
created() {
// 完成ajax请求后台,获得数据库中的数据
this.$axios({
url: this.$settings.base_url + '/cars/',
method: 'post',
params: { // url拼接参数:任何请求都可以携带
a: 1,
b: 2,
c: 3
},
data: { // 数据包参数:get请求是无法携带的
x: 10,
y: 20,
}
}).then(response => {
// console.log('正常', response);
this.cars = response.data;
}).catch(error => { // 网络状态码为4xx、5xx
console.log('异常', error.response);
});
}
}
</script> <style scoped>
.wrap {
width: 1100px;
/*background-color: green;*/
margin: 10px auto 0;
}
.wrap:after {
display: block;
content: '';
clear: both;
}
</style>

CarDetail.vue

<template>
<div class="car-detail">
<div v-if="car.msg">
<h1>{{ car.msg }}</h1>
</div>
<div v-else-if="car.id">
<img :src="car.img" alt="">
<h2>{{ car.title }}</h2>
<h3>${{ car.price }}w</h3>
<h3>{{ car.info }}</h3>
</div>
</div>
</template> <script>
export default {
name: "CarDetail",
data() {
return {
car: {}
}
},
created() {
// 拿到路由传递来的car主键
let pk = this.$route.query.pk || this.$route.params.pk;
// 主键不存在,就直接结束方法
if (!pk) return false;
// 主键存在才请求后台
this.$axios({
url: this.$settings.base_url + `/car/${pk}/`,
}).then(response => {
this.car = response.data
}).catch(error => {
console.log(error.response)
})
}
}
</script> <style scoped>
.car-detail {
/* vw:屏幕宽度 vh:屏幕高度*/
/*width: 100vw;*/
/*height: 100vh;*/
/*background-color: orange;*/
}
</style>

Element.vue

<template>
<div class="element">
<h1>element-ui组件</h1>
<hr> <el-row type="flex" :gutter="20" justify="center">
<el-col :span="6">
<div class="grid-content bg-purple"></div>
</el-col>
<!--<el-col :span="8">-->
<!--<div class="grid-content bg-purple-light"></div>-->
<!--</el-col>-->
<el-col :span="6" :offset="8">
<div class="grid-content bg-purple"></div>
</el-col>
</el-row> <hr> <el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container> <hr> <i class="icon el-icon-platform-eleme"></i> <hr> <el-row>
<el-button @click="fn" round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row> <hr> <el-carousel indicator-position="outside">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel> <hr>
<h2>bootstrap环境</h2>
<i class="btn btn-primary">按钮</i> <div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</template> <script>
export default {
name: "Element",
methods: {
fn() {
/*
this.$message({
message: '弹出框',
type: 'warning',
duration: 1000,
showClose: true,
onClose: () => {
this.$message('弹出框关闭了')
}
})
*/
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
}); }
}
}
</script> <style scoped>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
} .el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
} .el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
} .icon {
font-size: 100px;
color: orange;
} .grid-content {
height: 60px;
} .bg-purple-dark {
background: #99a9bf;
} .bg-purple {
background: #d3dce6;
} .bg-purple-light {
background: #e5e9f2;
} .el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
} .el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
} .el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
} body > .el-container {
margin-bottom: 40px;
} .el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
} .el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

Home.vue

<template>
<div class="home">
<Nav />
<h1>
<span @click="goCarPage">欢迎来到汽车系统</span>
</h1>
</div>
</template> <script>
import Nav from '../components/Nav' export default {
name: "Home",
components: {
Nav
},
methods: {
goCarPage() {
if (this.$route.path !== '/car') {
this.$router.push('/car')
}
}
}
}
</script> <style scoped>
h1 {
/*background-color: red;*/
text-align: center;
margin-top: 160px;
}
h1 span {
/*background-color: orange;*/
cursor: pointer;
font: bold 60px/70px 'STSong';
}
</style>

router——index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home'
import Car from '../views/Car'
import CarDetail from '../views/CarDetail'
import Element from '../views/Element' Vue.use(VueRouter); const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/car',
name: 'car',
component: Car
},
{
path: '/car/detail/:pk',
name: 'car-detail',
component: CarDetail
},
{
path: '/element',
name: 'element',
component: Element
}
]; const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
}); export default router

store——index.js

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

components——Nav.vue

<template>
<div class="nav">
<ul>
<li>
<router-link to="/">主&nbsp;页</router-link>
</li>
<li>
<router-link to="/car">汽&nbsp;车</router-link>
</li>
<li>
<router-link to="/element">饿&nbsp;了&nbsp;么</router-link>
</li>
</ul>
</div>
</template> <script>
export default {
name: "Nav"
}
</script> <style scoped>
.nav {
height: 60px;
background-color: #eee;
}
.nav ul {
width: 1100px;
margin: 0 auto;
}
.nav li {
float: left;
padding: 15px 20px 0;
}
.nav a {
border-bottom: 3px solid transparent;
padding-bottom: 2px;
}
.nav a.router-link-exact-active {
color: orange;
border-bottom-color: orange;
}
</style>

components——CarTag.vue

<template>
<div class="car-tag">
<router-link :to="`/car/detail/${car.id}`">
<img :src="car.img" alt="">
<h3>
<span>{{ car.title }}</span>
</h3>
</router-link>
</div>
</template> <script>
export default {
name: "CarTag",
props: ['car'],
}
</script> <style scoped>
.car-tag {
/*border: 1px solid black;*/
border-radius: 10px;
overflow: hidden;
width: 200px;
/*height: 280px;*/
float: left;
margin-right: 25px;
margin-bottom: 25px;
background-color: beige;
cursor: pointer;
}
.car-tag a.router-link-active {
display: block;
} .car-tag:nth-child(5n) {
margin-right: 0;
} .car-tag img {
width: 200px;
height: 125px;
} .car-tag h3 {
margin: 5px auto;
text-align: center;
}
</style>

Django后端app文件夹(admin.py)

from django.contrib import admin

from . import models
admin.site.register(models.Car)

Django后端(apps.py)

from django.apps import AppConfig

class AppConfig(AppConfig):
name = 'app'

Django后端app文件夹(models.py)

from django.db import models

class Car(models.Model):
title = models.CharField(max_length=64)
price = models.DecimalField(max_digits=11, decimal_places=2)
img = models.ImageField(upload_to='car', default='default.jpg')
info = models.TextField() class Meta:
db_table = 'old_boy_car'
verbose_name = '汽车'
verbose_name_plural = verbose_name def __str__(self):
return self.title

Django后端app文件夹(views.py)


from django.http import JsonResponse
from django.conf import settings
from . import models
def get_cars(request, *args, **kwargs):
# print(request.method)
# print(request.GET)
# print(request.POST)
# print(request.body)
# return JsonResponse({'msg': 'get ok'}) car_query = models.Car.objects.values('id', 'title', 'img')
car_list = list(car_query)
for car in car_list:
car['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car.get('img')))
return JsonResponse(car_list, safe=False) def get_car(request, *args, **kwargs):
pk = kwargs.get('pk')
car_obj = models.Car.objects.filter(pk=pk).values('id', 'title', 'img', 'price', 'info').first()
if car_obj:
car_obj['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car_obj.get('img')))
return JsonResponse(car_obj, json_dumps_params={'ensure_ascii': False})
return JsonResponse({'msg': '数据不存在'})

Django后端d-proj文件夹urls文件

from django.conf.urls import url
from django.contrib import admin from django.views.static import serve
from django.conf import settings from app import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^cars/$', views.get_cars),
url(r'^car/(?P<pk>\d+)/$', views.get_car), url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),
]

Django后端d-proj文件夹settings文件

 注掉csrf中间件
# 'django.middleware.csrf.CsrfViewMiddleware', # 打开跨越
CORS_ORIGIN_ALLOW_ALL = True # ap:国际化配置
# TODO 国际化配置
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False # media
MEDIA_URL = '/media/'
# 项目media文件夹的绝对路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media'

day65——day69的更多相关文章

  1. day65 request对象,以及方法,response对象,render,redirect

    这里的都是我们会频繁使用到的,用得多了自然就会了,我们写项目都是少不了这些用法的,所以这就把老师的博客粘过来就好了, Request对象 官方文档 属性 所有的属性应该被认为是只读的,除非另有说明. ...

  2. python 全栈开发,Day69(Django的视图层,Django的模板层)

    昨日内容回顾 相关命令: 1 创建项目 django-admin startproject 项目名称 2 创建应用 python manage.py startapp app名称 3 启动项目 pyt ...

  3. python 全栈开发,Day65(MySQL练习题,参考答案)

    一.MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号.ps:针对的是自己的生物成绩比物理成绩高,再 ...

  4. python 全栈开发,Day65(索引)

    索引 一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查找 三.常 ...

  5. day69

    昨日回顾: 1 路由层:  1简单配置  2无名分组  3有名分组  4反向解析--模板层,视图层  5路由分发  include  6名称空间   7伪静态 2 作业:  urlpatterns = ...

  6. DAY65

    # 1.web应用# 2.CS和BS架构# 3.http协议# 特点: 1.接受请求正在处理# 2.请求处理完毕# 3.需要进行附加操作以完成请求# 4.服务器无法处理请求# 5.服务器处理请求出错# ...

  7. day65 Django模板语言

      常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特殊的含 ...

  8. Django-model基础(Day69)

    阅读目录 ORM 创建表(建立模型) 添加表记录 查询表记录 F查询与Q查询 修改表记录 删除表记录 数据库回顾:http://www.cnblogs.com/yuanchenqi/articles/ ...

  9. web应用与web框架(Day65)

    Web应用 对于所有的web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端 import socket def handle_request(client): ...

随机推荐

  1. 026_JDBC

    JDBC简介 JDBC(Java DataBase Connectivity,Java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编 ...

  2. ubuntu常见错误–Could not get lock /var/lib/dpkg/lock解决

    ubuntu常见错误–Could not get lock /var/lib/dpkg/lock解决     通过终端安装程序sudo apt-get install xxx时出错:     E: C ...

  3. MyBatis的核心API

    MyBatis核心Api 上次简单的写了一个MyBatis的简介以及编写了一个MyBatis的入门程序,但是在入门程序中出现多很多比较陌生的词,比如SqlSessionFactoryBuilder.S ...

  4. 把类完善了一下,播放器也完善了一下,纯MFC与WinMM的产物

  5. netty 私有协议栈

    通信协议从广义上区分,可以分为公有协议和私有协议.由于私有协议的灵活性,它往往会在某个公司或者组织内部使用,按需定制,也因为如此,升级起来会非常方便,灵活性好.绝大多数的私有协议传输层都基于TCP/I ...

  6. pom.xml文件配置maven仓库地址

    中央仓库就是Maven的一个默认的远程仓库,Maven的安装文件中自带了中央仓库的配置($M2_HOME/lib/maven-model-builder.jar) 在很多情况下,默认的中央仓库无法满足 ...

  7. C3P0连接池参数配置

    <!--acquireIncrement:链接用完了自动增量3个. --> <property name="acquireIncrement">3</ ...

  8. Python全栈开发:递归实例

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 递归不能无限,python会限制递归深度,递归主要用于费布拉切数列 &q ...

  9. 读《深入PHP 面向对象、模式与实践》笔记

    1. include() 和require() 语句的不同在于它们如何处理错误.使用require()调用文件发生错误时,将会停止整个程序;调用include()时遇到相同的错误,则会生成警告并停止执 ...

  10. Vue创建项目环境

    目录 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue项目环境搭建 &q ...