前情回顾
# 1 vue3 介绍
-速度更快，源码的更新
-全面拥抱ts：微软出的
-ts是js的超集
-写了ts，浏览器认识吗？---》ts最终被转成了js
-重写虚拟DOM的实现和Tree-Shaking：Tree-shaking的本质是消除无用的js代码
# 2 创建vue3项目
-vue-cli
-vite：以后如果写vue3，必须用vite
npm create vite@latest # 选择安装 vue-router和pinia
cnpm install
-运行项目
npm run dev
# 3 setup函数---》配置项api写法
export default{
setup(){
return {}
}
}
# 4 组合式api，所有代码都写在setup函数中---》
<script setup>
写原来写在setup函数中得东西，不需要return了
</script>
# 5 ref 和 reactive
reactive 是深层次的---》无论多少层，都带响应式
# 6 计算属性：之前是配置项，显示是导入一个函数
let person=reactive({name:lqz,age:19})
# 1 只取值
person.hobby=computed(()=>{
return person.name+person.age
})
# 2 取值和赋值
person.hobby=computed({
get(){
return 'xxxx'
},
set(newValue){
}
})
# 7 监听属性
# 1 监听普通
watch(age, (newValue, oldValue) => {
console.log('sum变化了', newValue, oldValue)
})
# 2 监听对象
watch(() => person.name, (newValue, oldValue) => {
console.log('person.name变化了', newValue, oldValue)
})
# 3 监听多个
const sum = ref(100)
const msg = ref('很好')
watch([sum, msg], (newValue, oldValue) => {
console.log('sum或msg变化了', newValue, oldValue)
})
# 4 watchEffect的使用
watchEffect(() => {
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})
# 8 生命周期
vue2 和vue3 不一样了
vue3的选项式和配置项
setup()
setup():组件加载完成，就跟后端交互，先定义变量--》发ajax--》拿回来的数据赋值给变量
onBeforeMount()
onMounted()
onBeforeUpdate()
onUpdated()
onBeforeUnmount()
onUnmounted()
# 9 toRefs
# 10 其他：以后都使用组合式api
### 10.1 典型写法
<script setup lang="js" name="组件名字">
</script>
### 10.2 不需要return，它会自动return
-如果注册局部组件，只需要导入组件即可，在template中就可以使用了
### 10.3 以后只需要在 setup 内，写变量，写函数即可
const age=ref(0)
function add(){
age.value++
}
#### 10.4 vue-router的使用
-路由跳转：
import {useRouter, useRoute} from 'vue-router'
const router = useRouter() # 就是以前的this.$router
const route = useRoute() # 就是以前的this.$route
-路由注册--跟之前一模一样
-路由的api--跟之前一样
router.push({name:'home'})
-路由守卫跟之前一样：
router.beforeEach()
-路由嵌套，跟之前一样
### 10.5 之前用vuex---》vue3上还可以用--》但是使用pinia更好
import {useCounterStore} from '@/stores/counter'
const store = useCounterStore()
console.log(store.count)
### 10.6 elementui-plus
npm install element-plus --save
# main.js中
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
今日内容
vue3之axios
# 1 安装：
cnpm install axios
# 2 在setup中直接发送请求---以后再template中循环filmList.result
import axios from 'axios'
const filmList = reactive({result:[]})
axios.get('http://127.0.0.1:8000/film/').then(res => {
console.log(res.data)
filmList.result = res.data.results
})
# 3 async 和 await的使用
const filmList = reactive({result: []})
async function load() {
# await必须写在被async修饰的函数中,也可以写在setup函数中
let response = await axios.get('http://127.0.0.1:8000/film/')
filmList.result = response.data.results
}
load(
# 4 axios的拦截器
-请求发出之前的拦截器
-请求响应回来的拦截器
-判断状态码是不是100，如果是100，继续走，不是100，直接弹错误
vue3之ref
# 1 ref属性---》setup写法中取
-在子组件中暴露
<script setup>、......................................................................4+===========================================
import {reactive} from "vue";
const person=reactive({name:'lqz',age:19})
function add(){
console.log('asfdasfd')
}
defineExpose({person,add})
</script>
-在父组件中获取
# template中： <HelloWorld ref="helloworld"></HelloWorld>
# js中：
import {ref, reactive,} from "vue";
# 1 拿到ref对应的组件对象
const helloworld = ref() # 变量名必须跟 在组件上定义的名字一致
function handleClick() {
# this.$refs.helloworld 现在不能这么拿
console.log(helloworld.value) # helloworld.value拿到组件对象
# 使用组件对象的属性和方法---》vue3---》不能直接使用，需要子组件暴露---》只能用子组件暴露的
helloworld.value.add()
console.log(helloworld.value.person.name)
}
vue3之toRefs
### 结构赋值
let person = {name: 'lqz', age: 19}
let {name, age} = person // 普通解构赋值，name=person.name age=person.age
let {name:a, age} = person // 重命名解构赋值：a=person.name age=person.age
console.log(a)
console.log(age)
### toRefs的使用
# toRefs 可以把对象内部的所有值，都做成响应式
# 通过结构赋值，赋值给某些变量---》这些变量就有响应式
# 改这些变量会影响到原来对象中得值
const person = reactive({name: 'lqz', age: 19})
# let res = toRefs(person) // 把里面所有 普通变量做成响应式
# console.log(res)
# console.log(person)
let {name, age:nl} = toRefs(person) // 等同于： name=ref(lqz) age=ref(19)
# let {name, age} = person // 等同于： name=lqz age=19
function add() {
nl.value++
console.log(nl.value)
}
## toRef的使用
const person = reactive({name: 'lqz', age: 19})
# const name=toRefs(person) //{name:ref(name),age:ref(age)}
const name = toRef(person, 'name') //name=ref(person.name)
function change() {
name.value = 'xxx'
}
路飞项目介绍
项目类型(python适合项目类型)
# 1 面向互联网用户：商城类项目
-微信小程序商城
# 2 面向互联网用户：二手交易类的
-咸鱼
-转转
# 3 公司内部项目：python写的重点
-oa系统
-客户关系管理
-资产管理
-打卡系统工资核算系统
-第三方公司做的：
-给医院 互联网，内部的项目
-银行 内部系统
-政府
-钢材市场，商户
- 微信小程序订餐
-二维火 餐饮行业
-零售行业
-问卷网
-考试系统
# 4 个人博客
# 5 内容收费站
-掘金
-拉钩教育
=补充：咱们可以在哪里看技术类文章
-cnblogs
-csdn
-思否
-稀土掘金
# 6 房屋租赁
-青客
-蛋壳
-自如
项目开发流程
# 开发流程
-立项
-需求分析
# 互联网项目
-需求调研和分析：产品经理设计出来的
# 传统软件
-需求调研和分析：市场人员跟客户对接
-原型设计：产品经理
-懂业务
-分任务开发
-前端团队：前端开发
-UI设计:美工
-前端写代码（pc，小程序，移动端）
-后端团队：后端开发
-架构，数据库设计
-分任务开发：用户，商品板块
-协同开发
-联调测试
-项目测试：测试人员
-项目上线：运维人员
# 你在公司开发流程是什么？
-开新项目，先开会，设计技术选型，数据库设计
-产品，原型图做好了---分析出需求--》需求说明书
-老大在项目管理平台（禅道）分配任务给我
-进入到管理平台就能看到任务，相关功能的原型图
-需求，原型图，实现的效果
-开发---有不明白的需求，找产品对接----》自测
-提交到版本仓库(git，svn)
-所有都开发完了，分支合并
-跟前端联调
-发版：
-如果是老项目
-老大在项目管理平台（禅道）分配任务给我
-进入到管理平台就能看到任务，相关功能的原型图
-需求，原型图，实现的效果
-开发---有不明白的需求，找产品对接----》自测
-提交到版本仓库(git，svn)
-所有都开发完了，分支合并
-跟前端联调
-发版：
路飞项目需求
# 线上销售课程的
-商城
-知识付费类
# 需求
-首页功能
-轮播图接口
-推荐课程接口
-用户功能
-用户名密码登录
-手机号验证码登录
-发送手机验证码
-验证手机号是否注册过
-注册接口
-课程列表功能
-课程列表接口
-排序，过滤，分页
-课程详情
-课程详情接口
-视频播放功能
-视频托管（第三方，自己平台）
-下单功能
-支付宝支付：生成支付链接，付款，回调修改订单状态
-购买成功功能
pip换源
# 1 之前装第三方模块 pip3 install django -i 镜像仓库 # 2 一劳永逸--》整点配置，以后安装模块，自动去配置好的源下载 ###windows 1、文件管理器文件路径地址栏敲：%APPDATA% 回车，快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中 2、新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件 3、新增 pip.ini 配置文件内容 [global] index-url = https://mirrors.aliyun.com/pypi/simple [install] use-mirrors =true mirrors =https://mirrors.aliyun.com/pypi/simple trusted-host =mirrors.aliyun.com # 以后再任意路径安装模块，都会自动使用阿里云源
虚拟环境
虚拟环境作用
1、使不同应用开发环境相互独立
2、环境升级不影响其他应用，也不会影响全局的python环境
3、防止出现包管理混乱及包版本冲突
# 什么是虚拟环境，为什么要有它？它解决了什么问题
-操作系统装了python3.10
-使用django 2.2.2开发了一个项目
-使用django 3.x 开发了一个项目
-把两个项目都打开，同时开发
-每个项目都用自己独立的环境，装的模块相互不影响
-两种解决方案：
Virtualenv
pipenv
# Virtualenv如何创建虚拟环境
####1 win下安装
pip3 install virtualenv
pip3 install virtualenvwrapper-win
##### 2 配置 环境变量：
# 控制面板 => 系统和安全 => 系统 => 高级系统设置 => 环境变量 => 系统变量 => 点击新建 => 填入变量名与值
变量名：WORKON_HOME 变量值：自定义存放虚拟环境的绝对路径
eg: WORKON_HOME: D:\Virtualenvs
去d盘根路径创建出 Virtualenvs 文件夹
#####3 同步配置信息：
# 去向Python3的安装目录 => Scripts文件夹 => virtualenvwrapper.bat => 双击
#### 4 使用虚拟环境
-创建：mkvirtualenv -p python3 虚拟环境名称
-mkvirtualenv -p python38 luffy
-创建完会进入:(luffy) C:\Users\oldboy>
-在虚拟环境中安装模块（装在虚拟环境不会影响其他人）：pip install django==3.2.20
-退出：
-deactivate
-查看：
workon
-进入
workon luffy
-删除
rmvirtualenv 虚拟环境名称
# pycharm创建虚拟环境
项目后台创建及目录调整
# 使用虚拟环境创建后台项目
-方式一：使用命令
-进入到虚拟环境，安装django，指定版本
-django-admin startproject 项目名
-方式二：使用pycharm
-一定注意，指定解释器创建(虚拟环境中得解释器)
-如果打开了项目，没有使用虚拟环境---》切换到虚拟环境
-增加方式跟之前一样
标签：01,const,name,age,---,person,虚拟环境,lufffy From： https://www.cnblogs.com/wzh366/p/17970191