# shop **Repository Path**: Dogw/shop ## Basic Information - **Project Name**: shop - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-11-05 - **Last Updated**: 2024-11-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README /project .gitignore git仓库忽略文件 index.html 页面入口文件 package.json 安装包依赖文件 vite.config.js vite配置文件 === config.php node_modules/ 依赖包 === vender public/ 公共访问目录 === public dist/ 打包目录 src/ 开发逻辑目录 === application /src App.vue 项目入口文件 === view/layout.html main.js 项目的核心文件 === public/index.php assets/ 放置一些图片，如logo等 components/ 组件目录 ==== view 视图 package.json -> npm 创建出来的 scripts -> 命令列表 dependencies -> 生产阶段依赖包 devDependencies -> 开发阶段依赖包 启动命令 npm run dev yarn dev 找东西： 1、index.html (程序的入口文件、vue应用的div容器 id=app) import { createApp } from 'vue' 引入vue框架 App -> 根组件(父组件) HelloWorld.vue(子组件) Thinkphp MVC Vue M V VM(视图模型-控制器-组件) Vue 风格代码 Vue2/Vue3 Vue2 选项式的风格 { data:{} methods:{}, computed:{}, watch:{}, onCreated(){} } Vue3 组合式的风格 == php通讯录很相似 上面php 下面的html Vue2 -> Object.defineProperty 定义属性的方法 Vue3 -> Proxy 代理对象 完成数据的绑定 父子通信 父->子：传递属性props 子->父：传递事件方法event(emits) 全局的传参方式 传递：provide('demo') 接收：inject('demo') v-if 只会渲染满足条件的一条 v-show 会直接插入到页面中 只是通过css 设置显示还是隐藏而已 万能标签 插槽 demo.vue demo2.vue slot -> 组件内插槽 teleport -> index.html 全局入口页面的插槽 安装路由 npm install vue-router@4 yarn add vue-router@4 #/ # 锚点功能 hash模式 / 默认路由 Vue 单页面应用 path: /info/:pid -> params 传参 跳转需要用 name 属性来跳转 path: /search -> query 传参 跳转就正常使用 path 属性来跳转 /business/index /business/profile /business/login 路由嵌套 /business -> 父路由 /index -> 子路由 /profile /login Vue -> 声明周期 beforeMounted onMounted Router -> 钩子函数全局 beforeEach(进入路由前) afterEach(进入路由后) /business/index 进入路由前，判断是否登录，meta:{auth:true}

拓展一套 UI框架进来 搭建第一个 Vite 项目 yarn create vite Vue 和 Thinkphp 对比 Thinkphp MVC 工具具备的很全面 cookie session 分页 文件上传.... Vue MVVM 不具备常见开发功能 它仅仅只是一个纯裸框架的 Vue纯裸的框架上 不断去迭代功能 让他逐渐变成 Thinkphp模样 造轮子的过程 Nuxt框架 == Thinkphp 造轮子搭建过程： 1、添加别名路径变量 2、安装路由：yarn add vue-router@4 3、安装整合路由插件： npm install vite-plugin-pages -S npm install vite-plugin-vue-layouts -S 4、官方的工具包，自动引入 npm install unplugin-auto-import -S 5、安装UI框架，移动端 yarn add vant npm i vant 6、全局自动导入自定义组件 yarn add unplugin-vue-components -S cnpm install unplugin-vue-components -S https://www.quickask.net/docs/book/web/frame/vue/04/01.html#unplugin-auto-import-vite-%E6%8E%A8%E8%8D%90%E5%A5%BD%E7%94%A8 7、安装城市数据包 yarn add @vant/area-data -S cnpm i @vant/area-data -S import { createApp } from 'vue'; import { Area } from 'vant'; const app = createApp(); app.use(Area); 路由的配置 https://www.quickask.net/docs/book/web/frame/vue/04/02.html#%E8%87%AA%E5%8A%A8%E6%9E%84%E5%BB%BA%E8%B7%AF%E7%94%B1%E7%AC%AC%E4%B8%89%E6%96%B9%E6%8F%92%E4%BB%B6 console.log(generatedRoutes)//想知道路由的位置 import generatedRoutes from 'virtual:generated-pages' router/index.js 8.接口配置 yarn add axios -S cnpm install axios -S 全局挂载 在业务中使用 反向代理 //创建模型 php think build --module shop //创建登录的控制器 php think make:Controller shop/Business 前端发送的时候：http://localhost:5173/shop/business/login 反向代理：vite.config.js http://www.fast.com/shop http://www.fast.com/shop/shop/business/login 后端接口地址：http://www.fast.com/shop/business/login fastadmin后端：phpstudy -> apache vue -> vite构建工具 -> server(服务器软件) http服务(apache == nodejs) vite == webpack ->webpack-dev-server(http服务器功能) == apache vue2 -> vue.cli -> webpack/webpack-dev-server vite(server - nodejs) cookie vue全家桶 vuex -> vue2/vue3 pinia -> vuex vuex、pinia 状态管理 vuex -> state(data数据) -> action -> mutation -> getter(computed) state: data数据 getter: 获取器 mutation: setter修改器 action: 提交一个修改动作 pinia state: data数据 getter: 获取器 action: 提交一个修改动作 安装pinia 本地存储localStorage yarn add pinia -S yarn add pinia-plugin-persist -S cnpm install pinia -S cnpm install pinia-plugin-persist -S 把登录成功后的数据存入 本地存储localStorage pinia 做判断异常登录的问题 邮箱验证 思路: 就是需要验证 该账户的 auth 为0 验证成功后变为1 事件名 说明 回调参数 //selectedValues 地址码 selectedOptions 文字 confirm 点击完成按钮时触发 { selectedValues, selectedOptions, selectedIndexes } 收货地址 创建控制器 Address php think make:controller shop/Address { id:1, name: '张三', tel: '13512644556', address: '广州海珠区 新港西路230号', isDefault: true, }, { id:2, name: '张三', tel: '13512644556', address: '广州海珠区 新港西路230号', isDefault: false, }, { id:3, name: '张三', tel: '13512644556', address: '广州海珠区 新港西路230号', isDefault: false, } //创建模型 php think make:model common/Product/Product ul.proul li .tit { height: 40px; line-height: 22px; /* 改 */ font-size: 15px; /* 字体自动换行 */ word-wrap:break-word; font-weight: 700; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 5px 10px; } //创建商品单位模型 php think make:model common/Product/Unit php think make:model common/Product/Type php think make:controller shop/Product //商品详细查询 //需要的条件 商品名字 价格 商品描述 暂时需要的数据 product 这个表的数据 typeid unitid 根据外键做外连接 该商品的评论表 写出选项卡的另一部分的 评分 //创建订单商品表 php think make:model common/Order/OrderProduct //做收藏功能 需要传递的值大致有 商品的id busid sku 商品规格 yarn add vant-sku -S cnpm i vant-sku -S ProductOrder php think make:model common/Product/Cart php think make:model common/Product/Prop php think make:model common/Product/Relation php think make:controller shop/Cart php think make:controller shop/Order //添加订单 业务逻辑 如果你使用余额支付的情况下 1.需要改变用户的余额值 2.订单表插入一条新数据 3.订单商品表也插入一条新数据 4.插入消费记录 5.更新库存 6.删除购物车的数据 7.优惠券更新状态 ljcshop 后台： 商品管理、进销存管理 ------------直播------------ 推流:主播 拉流:观看的用户 设置推流和拉流的请求地址 配置推流身份验证(效验) 关联推流和拉流 生成推流(推送流媒体)和拉流的(视频播放地址) 开启直播和播放直播 生成播流地址：play.quickask.net 生成推流地址：push.quickask.net 将提前录制好的视频 推流上去 ffmpeg -re -i ./live.mp4 -vcodec h264 -acodec aac -strict -2 -f flv rtmp://推流地址 购买的人数：100w人 库存：100件 redis 消息队列 先进先出 100个 立即购买：用户 入列 用户出列 数据库交互：下单、扣钱、扣库存、插入消费记录、推荐人分成 redis 服务器端(缓存的数据库) navicat(客户端) 支持操作redis php 安装 redis 拓展 让php 可以操作 redis 发现功能 评论