文章目录
一、vue总结
1-Vue介绍
-1 vue js框架，渐进式框架
-2 双向数据绑定，组件化开发（js，css，html），单页面开发（index.html）(vue-router)
-3 快速使用（1.x，2.x，3.x），下载，放到项目中，通过script引入
2-Vue基础
-1 插值 {{ js变量，语法}}
-2 指令 v-xx
-v-text
-v-html (html的字符串转成标签，处理了xss攻击，django中处理xss攻击的原理)
-v-show
-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/v-else-if/v-else
-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语法，推荐使用箭头函数(使用this代指vue对象)，如果使用function(){ this代指函数，不是代指vue对象 }
4-Vue组件
-1 fetch和axios（向后端发请求）
-1 jq的ajax
-2 fetche使用
-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插槽 (内容分发)
1.1 基本使用
1.2 具名插槽
2 swiper学习（了解）
3 自定义组件的封装
4 自定义指令
4.1 基本使用
4.2 让所有使用自定义指令的标签背景都变红色
4.3 用户指定自定义指令的背景色,修改变量，背景变化
Vue.directive('mystyle',{
//当被改指令修饰的标签插入到dom中会执行
inserted(){
console.log('我执行了')
},
update(el,input){
el.style.background=input.value
}
})
7 过滤器
:src="data.img | myChange"
//定义过滤器
Vue.filter('myChange',function (url) {
return url.replace('w.h','128.180')
})
6-Vue-cli
-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 互联网软件公司
-互联网产品，上网用户
-产品经理
-产品需求：来自于产品经理
-设计产品原型（axure，墨刀，ui部门）—》原型图
-后端：技术选型，架构设计，数据库设计，分任务开发（你们处的位置），自测
-前端：ui设计，页面切图（详细的标明颜色，字体。。。），写前端功能
-联调（后端代码和前端代码部署好）----》出一堆bug–》禅道—》改bug
-上线
-继续开发新功能—》联调—》改bug—》上线
-继续开发新功能，发现bug了，开一个bug分支，改完上线
-外包公司，给别人定制软件，定制完了，付完钱，结束了
2 传统软件公司
-需求来自于客户（项目经理，架构师）
3 路飞项目需求
首页
登录注册
课程列表
课程详情
视频播放
商品结算:支付宝支付
购买成功：购买成功
个人中心：修改密码…
三、pip换源
1、pip安装源
pip3 下载在国外，比较慢，使用豆瓣源
常用的pip源：
--豆瓣：https://pypi.douban.com/simple
--阿里：https://mirrors.aliyun.com/pypi/simple
pip3 install django==1.11.9 -i 地址
2、永久配置安装源
1 文件管理器文件路径地址栏敲：%APPDATA% 回车，快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中
2 针对windows
新建pip文件夹并在文件夹中新建 pip.ini配置文件
[global]
index-url = http://pypi.douban.com/simple
[install]
use-mirrors =true
mirrors =http://pypi.douban.com/simple/
trusted-host =pypi.douban.com
3 针对linux和mac
用户家路径新建.pip隐藏文件夹
mkdir ~/.pip
进入.pip隐藏文件夹并创建pip.conf配置文件
cd ~/.pip && touch 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安装，走的是豆瓣源
四、虚拟环境搭建
详见 http://www.xuexianqi.top/archives/126.html
1、优点
1、使不同应用开发环境相互独立
2、环境升级不影响其他应用，也不会影响全局的python环境
3、防止出现包管理混乱及包版本冲突
2、在windows中安装
pip3 install virtualenv
pip3 install virtualenvwrapper-win
#配置环境变量
-配一个环境变量（控制面板 => 系统和安全 => 系统 => 高级系统设置 => 环境变量 => 系统变量 => 点击新建 => 填入变量名与值）：WORKON_HOME: D:\Virtualenvs
-原来用pycharm创建的虚拟环境都放在了项目根路径下，现在放在了Ｄ:\Virtualenvs
#同步配置信息：
去向Python3的安装目录 => Scripts文件夹 => virtualenvwrapper.bat => 双击
3、mac、linux中安装
pip3 install -i https://pypi.douban.com/simple virtualenv
pip3 install -i https://pypi.douban.com/simple virtualenvwrapper
工作文件
# 先找到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、创建虚拟环境
进入之前创建的用于存放虚拟环境的总文件夹，在路径地址栏输入cmd
在cmd中输入命令：mkvirtualenv 虚拟环境名称（虚拟环境名称最好与项目对应）
mkvirtualenv -p python3 luffyapi # 基于python3创建出一个虚拟环境luffyapi，放在D:\Virtualenvs
5、常用命令
查看已有的虚拟环境：workon
使用某个虚拟环境 ：workon 虚拟环境名称
进入|退出 该虚拟环境的Python环境：python | exit()
为虚拟环境安装模块：pip/pip3 install 模块名
退出当前虚拟环境：deactivate
删除虚拟环境(删除当前虚拟环境要先退出)：rmvirtualenv 虚拟环境名称
导出项目依赖模块（第三方模块导出）：pip freeze >requirements.txt
五、路飞后台创建，配置修改，目录变更
详见 http://www.xuexianqi.top/archives/744.html
1、虚拟环境和依赖准备
#创建虚拟环境luffyapi
mkvirtualenv LuffyAPI
#切换到虚拟环境luffyapi
workon luffyapi
安装基础依赖
pip install djangorestframework==3.10.0
pip install django==2.0.7
pip install pymysql
2、新建luffyapi项目
#切换到需要创建项目的路径
cd 项目路径
#创建django项目
django-admin startproject luffyapi
3、重构项目目录
#目录结构
'''
├── luffyapi # 项目名
├── logs/ # 项目运行时/开发时日志目录 - 包
├── manage.py # 脚本文件
├── luffyapi/ # 项目主应用，开发时的代码保存 - 包
├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存 - 包
├── libs/ # 第三方类库的保存目录[第三方组件、模块] - 包
├── settings/ # 配置目录 - 包
├── dev.py # 项目开发时的本地配置
└── prod.py # 项目上线时的运行配置
├── urls.py # 总路由
└── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件] - 包
└── scripts/ # 保存项目运营时的脚本文件 - 文件夹
'''
#更改过程
在根目录LuffyAPI下创建logs文件夹、scripts文件夹
在子目录LuffyAPI下创建apps文件夹、libs文件夹、settings文件夹
将子目录LuffyAPI下的settings.py移动到settings文件夹中，并重命名为dev.py
将dev.py复制一份，重命名为pro.py
4、修改manage.py和wsgi.py
#manage.py
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
#wsgi.py
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffyapi.settings.dev")
5、创建app
因为已经更改过了目录结构，创建APP已经不能在原路径下创建了，需要到子目录luffyapi下的apps中创建
# 切换到 子目录luffyapi 下的 apps （Windows系统是\，Linux和Mac是/）
cd luffyapi\apps\
# 创建4个APP
python ../../manage.py startapp course
python ../../manage.py startapp home
python ../../manage.py startapp order
python ../../manage.py startapp user
6、设置环境变量
#修改dev.py
import sys
# 让项目下的子LuffyAPI作为根路径
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
sys.path.append(BASE_DIR) # 把该路径添加到环境变量，可以直接导入子LuffyAPI的文件了
sys.path.append(os.path.join(BASE_DIR, 'apps')) # 把apps加入到环境变量
将子luffyapi文件夹作为Source Root (便于pycharm提示)
将app文件夹作为Source Root (便于pycharm提示)
完成之后，文件夹都变成蓝色
7、注册app
INSTALLED_APPS = [
...
'rest_framework',
'course',
'home',
'order',
'user',
]
六、数据库配置
详见 http://www.xuexianqi.top/archives/743.html
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 'luffy'@'%' identified by 'Luffy123?';
2.由于数据库版本的问题，可能本地还连接不上，就给本地用户单独配置
>: grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';
3.刷新一下权限
>: flush privileges;
只能操作luffy数据库的账户
账号：luffy
密码：Luffy123?
"""
django中数据库配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'luffy',
'USER': 'luffy',
'PASSWORD': 'Luffy123?',
'HOST': '[本机IP]',
'PORT': 3306
}
}
import pymysql
pymysql.install_as_MySQLdb()
七、国际化配置以及修改pycharm配置
1、国际化配置
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False
2、修改pycharm配置
① 点击左上角下拉 - Edit Configurations…
② 将Environment variables中的内容替换成如下内容
PYTHONUNBUFFERED=1;DJANGO_SETTINGS_MODULE=luffyapi.settings.dev
3、删除dev.py中的TEMPLATE配置
-可删可不删
-Django2.2之前可以删除，Django2.2之后删除会报错，需要一同删除其他关联文件
4、运行测试
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
