前情回顾
# 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