lufffy——vue3_axios /ref/toRefs，， 路飞项目介绍_开发流程_项目需求_pip换源，，虚拟环境，，项目后台创建及目录调整
前情回顾
# 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)
# 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，直接弹错误
# 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) }
### 结构赋值 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' }
# 1 面向互联网用户：商城类项目 -微信小程序商城 # 2 面向互联网用户：二手交易类的 -咸鱼 -转转 # 3 公司内部项目：python写的重点 -oa系统 -客户关系管理 -资产管理 -打卡系统工资核算系统 -第三方公司做的： -给医院 互联网，内部的项目 -银行 内部系统 -政府 -钢材市场，商户 - 微信小程序订餐 -二维火 餐饮行业 -零售行业 -问卷网 -考试系统 # 4 个人博客 # 5 内容收费站 -掘金 -拉钩教育 =补充：咱们可以在哪里看技术类文章 -cnblogs -csdn -思否 -稀土掘金 # 6 房屋租赁 -青客 -蛋壳 -自如
# 开发流程 -立项 -需求分析 # 互联网项目 -需求调研和分析：产品经理设计出来的 # 传统软件 -需求调研和分析：市场人员跟客户对接 -原型设计：产品经理 -懂业务 -分任务开发 -前端团队：前端开发 -UI设计:美工 -前端写代码（pc，小程序，移动端） -后端团队：后端开发 -架构，数据库设计 -分任务开发：用户，商品板块 -协同开发 -联调测试 -项目测试：测试人员 -项目上线：运维人员 # 你在公司开发流程是什么？ -开新项目，先开会，设计技术选型，数据库设计 -产品，原型图做好了---分析出需求--》需求说明书 -老大在项目管理平台（禅道）分配任务给我 -进入到管理平台就能看到任务，相关功能的原型图 -需求，原型图，实现的效果 -开发---有不明白的需求，找产品对接----》自测 -提交到版本仓库(git，svn) -所有都开发完了，分支合并 -跟前端联调 -发版： -如果是老项目 -老大在项目管理平台（禅道）分配任务给我 -进入到管理平台就能看到任务，相关功能的原型图 -需求，原型图，实现的效果 -开发---有不明白的需求，找产品对接----》自测 -提交到版本仓库(git，svn) -所有都开发完了，分支合并 -跟前端联调 -发版：
# 线上销售课程的 -商城 -知识付费类 # 需求 -首页功能 -轮播图接口 -推荐课程接口 -用户功能 -用户名密码登录 -手机号验证码登录 -发送手机验证码 -验证手机号是否注册过 -注册接口 -课程列表功能 -课程列表接口 -排序，过滤，分页 -课程详情 -课程详情接口 -视频播放功能 -视频托管（第三方，自己平台） -下单功能 -支付宝支付：生成支付链接，付款，回调修改订单状态 -购买成功功能
# 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 -一定注意，指定解释器创建(虚拟环境中得解释器) -如果打开了项目，没有使用虚拟环境---》切换到虚拟环境 -增加方式跟之前一样
浙公网安备 33010602011771号