上节回顾
1 vue介绍
1 vue-js框架,渐进式框架
2 双向数据绑定,组件化开发(js,css,html),单页面开发(index.html)(vue-router)
3 快速使用(1.x 2.x)
2 vue基础
1 插值{{js变量/语法}}
2 指令 v-xx
v-html(html的字符串转成标签 处理了xss攻击,django中处理xss攻击的原理
v-show,v-text,v-if
3 事件指令
v-on:@click 缩写成@click
4 属性指令
v-bind:src 缩写成src
5 class与style
class的三种写法,style的写法
6 动态创建删除(v-else)
7 列表渲染(v-for)
8 v-if+v-for控制购物车显示
9 v-if
10 v-for遍历列表,对象
11 key值解释(diff算法)
12 数组更新与检测(更改数组,页面发生变化,有的操作不能触发,手动触发,vue.set()
13 input过滤案例
14 简单事件:@click=‘js语法/函数地址,函数(),函数$event)‘
15 事件修饰符:组织事件冒泡
16 按键修饰符(输入搜索商品后,敲回车触发事件)
17 v-model基本使用(input)
18 checkbox选中变量是布尔类型
19 多选(变量是数组,选中以后,value放到数组中)
20 单选 变量是布尔类型
21 购物车案例
22 v-model之 lazy,number,trim
3 vue生命期钩子
1 8个函数(根组件,普通组件)
2 初始化之前,初始化,挂载前,挂载(用得多),更新前,更新后,更新,销毁前,销毁
3 定时器和延迟任务
4 es6语法,推荐使用箭头函数,如果使用function(){this代指函数,不是代指vue对象}
4 vue组组件
1 fetch和axios(向后端发请求)
1 jq的ajax
2 fetch使用
3 axios的使用
2 计算属性(把函数包装成数据,计算属性函数中关联的变量发生变化,它就会重新计算)
2.1 通过计算属性实现名字首字母大写
2.2 通过计算属性重新过滤案例
3 虚拟dom与diff算法 key的作用
3.1 vue2.0中v-for中 :key'有什么用
3.2 虚拟DOM的diff算法
3.3 具体实现
-把树按照层级分解
-同key值比较
-通组件对比
4 组件化开发基础
4.1 组件是什么,有什么用
4.2 组件注册方式:全局组件,局部组件
4.3 定义全局组件,绑定事件,编写样式(只能用style写在标签上)
4.4 定义局部组件(只能在当前组件中使用)
4.5 组件编写方式与vue实例的区别(data在组件中是一个函数,各个组件数据不共享)
4.6 父子通信之父传子
4.7 属性验证
4.8 父子通信之子传父(通过事件)
4.9 ref属性(this.$refs.mychild组件对象,属性,函数)
4.10 事件总线(不同层级间组件通信)(就是一个vue实例)
观察者模式(发布订阅):设计程序的一种架构方式,跟语言无关
4.11 动态组件
:is='变量(字符串)'
4.12 keep-alive使用
5 vue进阶
1 slot插槽(内容分发)
基本使用、具名插槽
2 swiper学习
3 自定义组件封装
4 自定义指令
1 基本使用
2 让所有使用自定义指令的标签背景都变成红色
3 用户指定自定义指令的背景色,修改变量，背景变化
Vue.directive('mystyle',{
//当被改指令修饰的标签插入到dom中会执行
inserted(){
console.log('我执行了')
},
update(el,input){
el.style.background=input.value
}
})
5 过滤器
:src="data.img | myChange"
//定义过滤器
Vue.filter('myChange',function (url) {
return url.replace('w.h','128.180')
})
6 vue-cli
-xx.vue 一个组件,样式,js,html都写在这个里面,编译成js,csshtml,webpack编译
-xx.vue 一个组件，样式，js，html都写在这个里面，编译成js，css，html，webpack编译
-Vue-cli：脚手架，方便的把xx.vue---》js，css，html,创建工程
-node js 环境（node， npm：cnpm：淘宝镜像）
-cnpm install -g @vue/cli
-创建项目：
-vue ui
-vue create 项目名字
-pycharm打开（vue的插件）
-运行 npm run serve
-通过配置pycharm，点击运行
今日内容
1 企业软件开发流程
1 互联网软件公司
-互联网产品，上网用户
-产品经理
-产品需求：来自于产品经理
-设计产品原型（axure，墨刀，ui部门）---》原型图
-后端：技术选型，架构设计，数据库设计，分任务开发（你们处的位置），自测
-前端：ui设计，页面切图（详细的标明颜色，字体。。。），写前端功能
-联调（后端代码和前端代码部署好）----》出一堆bug--》禅道---》改bug
-上线
-继续开发新功能---》联调---》改bug---》上线
-继续开发新功能，发现bug了，开一个bug分支，改完上线
-外包公司，给别人定制软件，定制完了，付完钱，结束了
2 传统软件公司
-需求来自于客户（项目经理，架构师）
3 路飞项目需求
首页
登录注册
课程列表
课程详情
视频播放
商品结算:支付宝支付
购买成功：购买成功
个人中心：修改密码...
2 pip换源
-1 pip3 下载在国外，比较慢，使用豆瓣源
pip3 install django==1.11.9 -i 地址
永久配置安装源
-2 win:
"""
1、文件管理器文件路径地址栏敲：%APPDATA% 回车，快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中
2、新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件
3、新增 pip.ini 配置文件内容
"""
-3 linux和mac
"""
1、在用户根目录下 ~ 下创建 .pip 隐藏文件夹，如果已经有了可以跳过
-- mkdir ~/.pip
2、进入 .pip 隐藏文件夹并创建 pip.conf 配置文件
-- cd ~/.pip && touch pip.conf
3、启动 Finder(访达) 按 cmd+shift+g 来的进入，输入 ~/.pip 回车进入
-4、新增 pip.conf 配置文件内容
"""
"""
配置文件内容
[global]
index-url = http://pypi.douban.com/simple
[install]
use-mirrors =true
mirrors =http://pypi.douban.com/simple/
trusted-host =pypi.douban.com
4 以后再使用pip安装，走的是豆瓣源
3 虚拟环境搭建
优点
1、使不同应用开发环境相互独立
2、环境升级不影响其他应用，也不会影响全局的python环境
3、防止出现包管理混乱及包版本冲突
1 路飞项目用django2.0.7, 公司老项目用的1.11.9，如果都再系统解释器装，django版本需要不停安装卸载
2 windows中
pip3 install virtualenv
pip3 install virtualenvwrapper #(windows要加-win)
3
win配置环境变量（原来用pycharm创建的虚拟环境都放在了项目根路径下）
-配一个环境变量：WORKON_HOME: D:\Virtualenvs
-现在放在了d:\Virtualenvs
mac/linux:
# 先找到virtualenvwrapper的工作文件 virtualenvwrapper.sh，该文件可以刷新自定义配置，但需要找到它
# MacOS可能存在的位置 /Library/Frameworks/Python.framework/Versions/版本号文件夹/bin
# Linux可能所在的位置 /usr/local/bin | ~/.local/bin | /usr/bin
# 建议不管virtualenvwrapper.sh在哪个目录，保证在 /usr/local/bin 目录下有一份
# 如果不在 /usr/local/bin 目录，如在 ~/.local/bin 目录，则复制一份到 /usr/local/bin 目录
-- sudo cp -rf ~/.local/bin/virtualenvwrapper.sh /usr/local/bin
# 在 ~/.bash_profile 完成配置，virtualenvwrapper的默认默认存放虚拟环境路径是 ~/.virtualenvs
# WORKON_HOME=自定义存放虚拟环境的绝对路径，需要自定义就解注
VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3
source /usr/local/bin/virtualenvwrapper.sh
# 在终端让配置生效：
-- source ~/.bash_profile
4 使用如下命令
mkvirtualenv -p python3 luffyapi # 基于python3创建出一个虚拟环境luffyapi，放在d:\Virtualenvs
5 使用命令
workon # 查看目前有哪几个虚拟环境
workon luffyapi # 使用luffyapi
deactivate # 退出当前虚拟环境
6 导出项目依赖模块（第三方模块导出）
pip freeze >req.txt
以后上线，项目大概率跑在虚拟环境中
使用
# 在终端工作的命令
# 1、创建虚拟环境到配置的WORKON_HOME路径下
# 选取默认Python环境创建虚拟环境：
-- mkvirtualenv 虚拟环境名称
# 基于某Python环境创建虚拟环境：
-- mkvirtualenv -p python2.7 虚拟环境名称
-- mkvirtualenv -p python3.6 虚拟环境名称
# 2、查看已有的虚拟环境
-- workon
# 3、使用某个虚拟环境
-- workon 虚拟环境名称
# 4、进入|退出 该虚拟环境的Python环境
-- python | exit()
# 5、为虚拟环境安装模块
-- pip或pip3 install 模块名
# 6、退出当前虚拟环境
-- deactivate
# 7、删除虚拟环境(删除当前虚拟环境要先退出)
-- rmvirtualenv 虚拟环境名称
4 路飞后台创建，配置修改，目录变更
1 新建luffyapi项目
2 重构项目目录
'''
├── luffyapi # 项目名
├── logs/ # 项目运行时/开发时日志目录 - 包
├── manage.py # 脚本文件
├── luffyapi/ # 项目主应用，开发时的代码保存 - 包
├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存 - 包
├── libs/ # 第三方类库的保存目录[第三方组件、模块] - 包
├── settings/ # 配置目录 - 包
├── dev.py # 项目开发时的本地配置
└── prod.py # 项目上线时的运行配置
├── urls.py # 总路由
└── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件]
└── scripts/ # 保存项目运营时的脚本文件 - 文件夹
'''
5 数据库配置
1.管理员连接数据库
>: mysql -uroot -proot
2.创建数据库
>: create database luffy default charset=utf8;
3.查看用户
>: select user,host,password from mysql.user;
# 5.7往后的版本
>: select user,host,authentication_string from mysql.user;
"""
"""
设置权限账号密码
# 授权账号命令：grant 权限(create, update) on 库.表 to '账号'@'host' identified by '密码'
1.配置任意ip都可以连入数据库的账户luffy账户，密码是Luffy123?,只对luffy库所有表有所有权限，可以使用任意ip地址连接
>: grant all privileges on luffy.* to 'lufei01'@'%' identified by 'lufei123';
2.由于数据库版本的问题，可能本地还连接不上，就给本地用户单独配置
>: grant all privileges on luffy.* to 'lufei01'@'localhost' identified by 'lufei123';
3.刷新一下权限
>: flush privileges;
只能操作luffy数据库的账户
账号：lufei01
密码：lufei123
"""
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
