上节回顾
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换源
2.1 介绍
"""
1、采用国内源,加速下载模块的速度
2、常用pip源:
-- 豆瓣:https://pypi.douban.com/simple
-- 阿里:https://mirrors.aliyun.com/pypi/simple
3、加速安装的命令:
-- >: pip install -i https://pypi.douban.com/simple 模块名
"""
2.2 永久配置安装源
Windows
"""
1、文件管理器文件路径地址栏敲:%APPDATA% 回车,快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中
2、新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件
3、新增 pip.ini 配置文件内容
"""
MacOS、Linux
"""
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
"""
三、虚拟环境的搭建
3.1 优点
1 、使不同应用开发环境相互独立
2 、环境升级不影响其他应用,也不会影响全局的python环境
3 、防止出现包管理混乱及包版本冲突
3.2 windows
安装
pip3 install virtualenv
pip3 install virtualenvwrapper- win
配置虚拟环境管理器工作目录
变量名:WORKON_HOME 变量值:自定义存放虚拟环境的绝对路径
eg: WORKON_HOME: D: \Virtualenvs
3.3 MacOS、Linux
安装
pip3 install - i https: // pypi. douban. com/ simple virtualenv
pip3 install - i https: // pypi. douban. com/ simple virtualenvwrapper
工作文件
- - sudo cp - rf ~ / . local/ bin / virtualenvwrapper. sh / usr/ local/ bin
配置
VIRTUALENVWRAPPER_PYTHON= / usr/ local/ bin / python3
source / usr/ local/ bin / virtualenvwrapper. sh
- - source ~ / . bash_profile
使用
- - mkvirtualenv 虚拟环境名称
- - mkvirtualenv - p python2. 7 虚拟环境名称
- - mkvirtualenv - p python3. 6 虚拟环境名称
- - workon
- - workon 虚拟环境名称
- - python | exit( )
- - pip或pip3 install 模块名
- - deactivate
- - rmvirtualenv 虚拟环境名称
pip freeze > req. txt
3.4 pycharm使用
新建项目
添加环境
使用环境
四、后台:Django项目创建
4.1 环境
"""
为luffy项目创建一个虚拟环境
>: mkvirtualenv luffy
"""
"""
按照基础环境依赖
>: pip install django==2.0.7
>: pip install djangorestframework
>: pip install pymysql
"""
4.2 创建项目
"""
前提:在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: django-admin startproject luffyapi
开发:用pycharm打开项目,并选择提前备好的虚拟环境
"""
4.3 重构项目目录
"""
├── luffyapi
├── logs/ # 项目运行时/开发时日志目录 - 包
├── manage.py # 脚本文件
├── luffyapi/ # 项目主应用,开发时的代码保存 - 包
├── apps/ # 开发者的代码保存目录,以模块[子应用]为目录保存 - 包
├── libs/ # 第三方类库的保存目录[第三方组件、模块] - 包
├── settings/ # 配置目录 - 包
├── dev.py # 项目开发时的本地配置
└── prod.py # 项目上线时的运行配置
├── urls.py # 总路由
└── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件]
└── scripts/ # 保存项目运营时的脚本文件 - 文件夹
"""
4.4 配置开发环境
"""
1.修改 wsgi.py 与 manage.py 两个文件:
# manage.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')
# wsgi.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.prod')
# manage_prod.py
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.prod')
2.将settings.py删除或改名,内容拷贝到settings/dev.py中
3.修改dev.py文件内容
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False
4.修改启动配置:见插图
5.在任何一个__init__.py文件中测试默认配置文件是否是dev.py文件
from django.conf import settings
print(settings)
"""
五、数据库配置
5.1 创建数据库
"""
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;
"""
5.2 为指定数据库配置指定账户
"""
设置权限账号密码
# 授权账号命令:grant 权限(create, update) on 库.表 to '账号'@'host' identified by '密码'
1.配置任意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?
"""
5.3 配置文件配置
DATABASES = {
'default' : {
'ENGINE' : 'django.db.backends.mysql' ,
'NAME' : 'luffy' ,
'USER' : 'luffy' ,
'PASSWORD' : 'Luffy123?' ,
'HOST' : 'localhost' ,
'PORT' : 3306
}
}
import pymysql
pymysql. install_as_MySQLdb( )
5.4 Django 2.x 一些版本pymysql兼容问题
Django不采用2.0.7版本很可能出现以下问题,需要修改源代码
六、路飞前台搭建
6.1 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 步报错,清除缓存后重新走2 、3 步
> : npm cache clean - - force
6.2 创建项目
"""
前提:在目标目录新建luffy文件夹
>: cd 建立的luffy文件夹
>: vue create luffycity
"""
6.3 重构项目目录
"""
├── luffycity
├── public/ # 项目共有资源
├── favicon.ico # 站点图标
└── index.html # 主页
├── src/ # 项目主应用,开发时的代码保存
├── assets/ # 前台静态资源总目录
├── css/ # 自定义css样式
└── global.css # 自定义全局样式
├── js/ # 自定义js样式
└── settings.js # 自定义配置文件
└── img/ # 前台图片资源
├── components/ # 小组件目录
├── views/ # 页面组件目录
├── App.vue # 根组件
├── main.js # 入口脚本文件
├── router
└── index.js # 路由脚本文件
store
└── index.js # 仓库脚本文件
├── vue.config.js # 项目配置文件
└── *.* # 其他配置文件
"""
6.4 文件修订:目录中非配置文件的多余文件可以移除
App.vue
< template>
< div id = "app" >
< router- view/ >
< / div>
< / template>
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue. use( VueRouter) ;
const routes = [
{
path: '/' ,
name: 'Home' ,
component: Home
} ,
{
path: '/home' ,
redirect: '/' ,
} ,
] ;
const router = new VueRouter( {
mode: 'history' ,
base: process. env. BASE_URL,
routes
} )
export default router
Home.vue
< template>
< div class = "home" >
< / div>
< / template>
< script>
export default {
name: 'home' ,
components: {
} ,
}
< / script>
6.5 全局配置:全局样式、配置文件
global.css
/ * 声明全局样式和项目的初始化样式 * /
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input , select, option, textarea {
margin: 0 ;
padding: 0 ;
font- size: 15px;
}
a {
text- decoration: none;
color:
}
ul {
list - style: none;
}
table {
border- collapse: collapse; / * 合并边框 * /
}
settings.js
export default {
base_url: 'http://127.0.0.1:8000'
}
main.js
// 配置全局样式
import '@/assets/css/global.css'
// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue. prototype. $settings = settings;
// 在所有需要与后台交互的组件中:this. $settings. base_url + '再拼接具体后台路由'