search

博客列表 >vue首页、分类练习

vue首页、分类练习

Blackeye
Blackeye原创
2022年06月15日 15:36:17575浏览

0517\phpcnh5\src\views\Goods\Index.vue

  1. <template>
  2.     <div class="fui-fullHigh-group">
  3.         <div class="fui-fullHigh-item menu">
  4.             <div class="nav" :class="on==index?'on':''" @click="edit_cat(index)" v-for="(item,index,key) in cat" :key="key" >{{item.name}}</div>
  5.         </div>
  6.         <div class="fui-fullHigh-item container">
  7.             <div class="fui-icon-group" v-for="(item,index,key) in cat" :key="key">
  8.                 <div v-if="on==index">
  9.                     <router-link :to="'/goods_lists?id='+item.cid" v-for="(items,indexs,keys) in item.son" :key="keys">
  10.                         <div class="fui-icon-col">
  11.                             <div class="icon">
  12.                                 <img class="img" :src="items.pic" />
  13.                             </div>
  14.                             <div class="text">{{items.name}}</div>
  15.                         </div>
  16.                     </router-link>
  17.                 </div>
  18.             </div>
  19.         </div>
  20.     </div>
  21. </template>
  22. <script>
  23. import { reactive, toRefs } from "vue";
  24. import { GoodsIndex } from "../../network/index.js";
  25. export default({
  26.     setup() {
  27.         const data = reactive({
  28.             on : 1,
  29.             cat: []
  30.         });
  31.         const edit_cat = (e)=>{
  32.             data.on = e;
  33.         }
  34.         GoodsIndex().then( (e)=>{
  35.             data.cat = e.data;
  36.         });
  37.         return {
  38.             title:"分类",
  39.             ...toRefs(data),
  40.             edit_cat
  41.         } 
  42.     }
  43. })
  44. </script>
  45. <style scoped>
  46. .fui-fullHigh-group{
  47.   position: absolute;
  48.   top: 0;
  49.   bottom: 0;
  50.   width: 100%;
  51.   display: flex;
  52. }
  53. /* 左侧 */
  54. .fui-fullHigh-item{
  55.   height: inherit;
  56.   width: 100%;
  57.   background: #fff;
  58.   overflow-y: auto;
  59. }
  60. .fui-fullHigh-item.menu {
  61.   width: 5.25rem;
  62.   background: #f8f8f8;
  63. }
  64. .fui-fullHigh-item.menu .nav {
  65.   font-size: 28rpx;
  66.   text-align: center;
  67.   color: #000;
  68.   padding: 0.2rem 0;
  69.   height: 2.5rem;
  70.   text-overflow: ellipsis;
  71.   white-space: nowrap;
  72.   overflow: hidden;
  73.   position: relative;
  74.   display: flex;
  75.   justify-content:center;
  76.   align-items:Center;
  77. }
  78. .fui-fullHigh-item.menu .on {
  79.   background: #fff;
  80.   position: relative;
  81.   color: #ff5555;
  82. }
  83. /* 右侧 */
  84. .fui-fullHigh-item.container {
  85.   position: relative;
  86.   padding: 0.8rem;
  87.   flex: 1;
  88. }
  89. .fui-icon-group {
  90.   position: relative;
  91.   overflow: hidden;
  92.   background: #fff;
  93.   display: flex;
  94.   flex-wrap: wrap;
  95. }
  96. .fui-icon-group .fui-icon-col {
  97.   height: auto;
  98.   position: relative;
  99.   padding: 0.5rem 0;
  100.   text-align: center;
  101.   transition: background-color 300ms;
  102.   -webkit-transition: background-color 300ms;
  103.   float: left;
  104.   border: none !important;
  105. }
  106. .fui-icon-group .fui-icon-col {
  107.   float: left;
  108.   margin-right: 17px;
  109.   padding-top: 10px;
  110. }
  111. .fui-icon-group .fui-icon-col .icon {
  112.   height: 115px;
  113.   width: 100%;
  114.   margin: auto;
  115.   text-align: center;
  116.   line-height: 2.2rem;
  117. }
  118. .icon {
  119.   font-family: "icon" !important;
  120.   font-size: 16px;
  121.   font-style: normal;
  122.   -webkit-font-smoothing: antialiased;
  123.   -moz-osx-font-smoothing: grayscale;
  124. }
  125. .img {
  126.   width: 115px;
  127.   height: 100%;
  128. }
  129. .fui-icon-group .fui-icon-col .text {
  130.   font-size: 24px;
  131.   text-align: center;
  132.   overflow: hidden;
  133.   text-overflow: ellipsis;
  134.   white-space: nowrap;
  135.   padding: 0.2rem;
  136.   color: #000;
  137. }
  138. .fui-icon-group .fui-icon-col .text {
  139.   font-size: 0.55rem;
  140.   line-height: 1.05rem;
  141.   padding-top: .5rem;
  142. }
  143. </style>

0517\phpcnh5\src\views\Goods\Lists.vue

  1. <template>
  2. <!-- 修复only one root问题 -->
  3. <div>
  4.     <Header :title="title"></Header>
  5.     <div style="background:#f3f3f3;">
  6.         <!-- 商品列表 -->
  7.         <div class="fui-content">
  8.             <div class="fui-content-inner">
  9.                 <div class="fui-goods-group block">
  10.                     <!-- 单个商品 -->
  11.                     <div class="fui-goods-item" @click="go_url()" v-for="(item,index,key) in lists" :key="key">
  12.                         <img class='image' :src="item.img_s"/>
  13.                             <div class="name">{{item.title}}</div>
  14.                             <div style="line-height:0.7rem;height:0.7rem;color:#b2b2b2;font-size:0.6rem;margin-top: .2rem;text-decoration: line-through"></div>
  15.                             <div class="price">
  16.                               <span class="text">￥100</span>
  17.                               <span class="buy">销量：10</span>
  18.                             </div>
  19.                     </div>
  20.                 </div>
  21.                 <button v-if="is_btn" class="ant-btn ant-btn-primary" style="width:100%;" @click="xiala()">加载更多</button>
  22.             </div>
  23.         </div>
  24.     </div>
  25. </div>
  26. </template>
  27. <script>
  28. import Header from '../../components/Header.vue';
  29. import { reactive, toRefs } from "vue";
  30. import { useRoute,useRouter } from "vue-router";
  31. import { GoodsLists } from "../../network/index.js";
  32. export default({
  33.     components:{
  34.       Header
  35.     },
  36.     setup() {
  37.         const route = useRoute();
  38.         const router = useRouter();
  39.         const go_url = ()=>{
  40.             router.push("/goods_details");
  41.         }
  42.         const data = reactive({
  43.           lists: [],
  44.           page: 1,
  45.           num: 1,
  46.           is_btn:true
  47.         });
  48.         GoodsLists({id:route.query.id, p : data.page}).then( (e)=>{
  49.           data.lists = e.data.lists;
  50.           data.num = e.data.num;
  51.             if(data.page >= data.num){
  52.               data.is_btn = false;
  53.             }
  54.         } )
  55.         const xiala = ()=>{
  56.           data.page = data.page+1;
  57.           if(data.page <= data.num){
  58.             GoodsLists({id:route.query.id, p : data.page}).then( (e)=>{
  59.               data.lists = data.lists.concat(e.data.lists)
  60.             })
  61.             if(data.page >= data.num){
  62.               data.is_btn = false;
  63.             }
  64.           }
  65.         }
  66.         return {
  67.             go_url,
  68.             title:"列表",
  69.             ...toRefs(data),
  70.             xiala
  71.         }
  72.     }
  73. })
  74. </script>
  75. <style scoped>
  76. /* 顶部筛选 */
  77. .sort {
  78.   position: relative;
  79.   width: 100%;
  80.   padding: .4rem 0;
  81.   background: #fff;
  82.   -webkit-box-align: center;
  83.   border-bottom:1px solid #e7e7e7;
  84. }
  85. .sort .item {
  86.   position: relative;
  87.   width: 1%;
  88.   display: table-cell;
  89.   text-align: center;
  90.   font-size: 0.7rem;
  91.   border-left: 1px solid #e7e7e7;
  92.   color: #666;
  93. }
  94. .sort .item:first-child {
  95.   border: 0;
  96. }
  97. .on .text{
  98.   color: #fd5454;
  99. }
  100. /* 商品 */
  101. .fui-content {
  102.   position: absolute;
  103.   right: 0;
  104.   left: 0;
  105.   overflow: auto;
  106.   -webkit-overflow-scrolling: touch;
  107. }
  108. .fui-content-inner {
  109.   box-sizing: border-box;
  110.   border-top: 1px solid transparent;
  111.   margin-top: -1px;
  112. }
  113. .fui-goods-group {
  114.   height: auto;
  115.   overflow: hidden;
  116.   background: #f9f9f9;
  117. }
  118. .fui-goods-group.block {
  119.   padding: 0.2rem;
  120. }
  121. /* 单个商品 */
  122. .fui-goods-group .fui-goods-item {
  123.   width: 50%;
  124.   float: left;
  125.   border-bottom: 0;
  126.   background: none;
  127.   padding: 0.25rem;
  128.   display: block;
  129. }
  130. .fui-goods-item {
  131.   position: relative;
  132.   height: auto;
  133.   padding: 0.8rem;
  134.   border-bottom: 1px solid #e7e7e7;
  135.   background: #fff;
  136.   overflow: hidden;
  137.   display: flex;
  138. }
  139. .image {
  140.   width: 100%;
  141.   overflow: hidden;
  142.   margin: 0;
  143.   background-position: center;
  144.   background-repeat: no-repeat;
  145.   background-size: cover;
  146.   position: relative;
  147.   float: none;
  148. }
  149. /* 商品名 */
  150. .detail {
  151.   -webkit-box-flex: 1;
  152.   -webkit-flex: 1;
  153.   -ms-flex: 1;
  154.   flex: 1;
  155.   background: #fff;
  156.   padding-left: 0.5rem;
  157.   padding: 0.5rem;
  158. }
  159. .name {
  160.   height: 1.7rem;
  161.   overflow: hidden;
  162.   text-overflow: ellipsis;
  163.   display: -webkit-box;
  164.   -webkit-line-clamp: 2;
  165.   -webkit-box-orient: vertical;
  166.   font-size: 0.65rem;
  167.   line-height: 0.9rem;
  168.   margin-top: 0;
  169.   color: #262626;
  170. }
  171. .price {
  172.   position: relative;
  173.   display: flex;
  174.   align-items: center;
  175.   font-size: 0.7rem;
  176.   margin-top: 0;
  177. }
  178. .price .text {
  179.   flex: 1;
  180.   color: #ff5555;
  181.   font-size: 0.8rem;
  182. }
  183. .buy {
  184.   text-align: center;
  185.   color: #666;
  186.   font-size: 0.6rem;
  187. }
  188. .ant-btn {
  189.     line-height: 1.5715;
  190.     position: relative;
  191.     display: inline-block;
  192.     font-weight: 400;
  193.     white-space: nowrap;
  194.     text-align: center;
  195.     background-image: none;
  196.     border: 1px solid transparent;
  197.     box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
  198.     cursor: pointer;
  199.     transition: all .3s cubic-bezier(.645,.045,.355,1);
  200.     -webkit-user-select: none;
  201.     -moz-user-select: none;
  202.     -ms-user-select: none;
  203.     user-select: none;
  204.     touch-action: manipulation;
  205.     height: 32px;
  206.     padding: 4px 15px;
  207.     font-size: 14px;
  208.     border-radius: 2px;
  209.     color: rgba(0,0,0,.85);
  210.     background: #fff;
  211.     border-color: #d9d9d9;
  212. }
  213. .ant-btn-primary {
  214.     color: #fff;
  215.     background: #1890ff;
  216.     border-color: #1890ff;
  217.     text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  218.     box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
  219. }
  220. </style>

0517\tp\app\api\controller\Api.php

  1. <?php
  2. namespace app\api\controller;
  3. use think\facade\Db;
  4. use think\facade\Request;
  6. class Api{
  7.     // Access to XMLHttpRequest at 'http://www.tp.com/index.php/api/Api/index' 
  8.     // from origin 'http://localhost:8080' has been blocked by CORS policy: No 
  9.     // 'Access-Control-Allow-Origin' header is present on the requested resource.
  10.     // 错误信息：是因为前后端分离导致的。前后端 前端和后端的域名不是一个。不是一个，就会出现这种错误。
  11.     // 跨域名访问的安全错误提示
  13.     // public function __construct(){
  14.     //     // 使用php的header函数，设置为*，全部能访问
  16.     //     header("Access-Control-Allow-Origin:*");
  17.     //     header("Content-Type : application/json; charset=utf-8");
  18.     //     // header("Access-Control-Allow-Headers:content-type");
  19.     //     // header("Access-Control-Request-Method:GET,POST");
  20.     // }
  21.     public function index(){
  22.         // 如何写一个 前端数据接口呢？app、小程序、vue
  23.         // 接口：让2个以上的项目进行数据联通，数据交互
  24.         // 多个语言 必须有统一的格式， 最后返回值，必须多种语言都能使用
  26.         // 接口的统一数据格式是 json
  28.         // php有json的函数 
  29.         // json_encode 把php的数据加密成json格式
  30.         // json_decode 把json格式转为 php数据格式
  32.         // $arr = [
  33.         //     "ouyangke" => "欧阳克",
  34.         //     "miejue" => "灭绝师太",
  35.         //     "php" => [
  36.         //         "ouyangke",
  37.         //         "miejue"
  38.         //     ],
  39.         //     "tianpeng" => "朱天蓬"
  40.         // ];
  41.         // json格式，是文本，我们就可以echo
  42.         // {"ouyangke":"\u6b27\u9633\u514b","miejue":"\u706d\u7edd\u5e08\u592a","tianpeng":"\u6731\u5929\u84ec"}
  43.         // echo json_encode($arr);
  45.         // 1、接口 必须用json返回数据
  46.         // 2、用数组 转为json数据
  47.         $ad = Db::table('oyk_adver')->where('status',1)->order('sort DESC')->select()->toArray();
  49.         $lists = Db::table('oyk_shop_lists')->where('status',1)->order('add_time DESC')->limit(6)->select()->toArray();
  50.         // & 取之前的地址
  51.         foreach($lists as &$v){
  52.             $img = explode(';',$v['img']);
  53.             $v['img_s'] = $img[0];
  54.         }
  55.         // 3、接口只能一次性返回数据，不能多次
  56.         // echo json_encode($ad);
  57.         // echo json_encode($lists);
  59.         $arr = [
  60.             'ad' => $ad,
  61.             'lists' => $lists
  62.         ];
  63.         echo json_encode($arr);
  64.     }
  65.     public function goods_index(){
  66.         $cat = DB::table('oyk_shop_cat')->where('status',1)->order('pid,sort DESC')->select()->toArray();
  67.         $tmp = [];
  68.         foreach($cat as $v){
  69.             if($v['pid'] == 0){
  70.                 $tmp[$v['cid']] = $v;
  71.             }else{
  72.                 $tmp[$v['pid']]['son'][] = $v;
  73.             }
  74.         }
  75.         $arr = [
  76.             'code' => 0,
  77.             'msg' => '成功',
  78.             'data' => $tmp
  79.         ];
  80.         echo json_encode($arr);
  81.     }
  83.     public function goods_lists(){
  84.         $page = input('post.p');
  85.         $id = input('post.id');
  86.         $count =  Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->count();
  87.         $lists = Db::table('oyk_shop_lists')->where('status',1)->where('cid',$id)->page($page,5)->select()->toArray();
  88.         foreach($lists as &$v){
  89.             $img = explode(';',$v['img']);
  90.             $v['img_s'] = $img[0];
  91.         }
  92.         $arr = [
  93.             'code' => 0,
  94.             'msg' => '成功',
  95.             'data' => [
  96.                 'lists' => $lists,
  97.                 'num' => ceil($count/5)
  98.                 ]
  99.         ];
  100.         echo json_encode($arr);
  101.     }
  102. }

0517\phpcnh5\src\network\index.js

  1. import {request} from "./request.js";
  3. export function Index(){
  4.     return request( {
  5.         method : "POST",
  6.         url : "Api/index"
  7.     } )
  8. }
  10. export function GoodsIndex(){
  11.     return request( {
  12.         method : "POST",
  13.         url : "Api/goods_index"
  14.     } )
  15. }
  17. export function GoodsLists(data){
  18.     return request({
  19.         method: "POST",
  20.         data: data,
  21.         url : "Api/goods_lists",
  23.     })
  24. }

解决axios的跨域设置

0517\tp\app\middleware.php

  1. <?php
  2. // 全局中间件定义文件
  3. return [
  4.     // 全局请求缓存
  5.     // \think\middleware\CheckRequestCache::class,
  6.     // 多语言加载
  7.     // \think\middleware\LoadLangPack::class,
  8.     // Session初始化
  9.     // \think\middleware\SessionInit::class
  10.     // 跨域请求
  11.     \think\middleware\AllowCrossDomain::class
  12. ];
上一条：使用 Laravel Filament 极速搭建美观大方的后台面板下一条：尝鲜少代码高性能的Svelte框架
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多