支付宝支付 第八集：Vue实现产品页面和数据渲染
一、问题
-
静态页面没有渲染出来的话，可能是main.css没有加载进去，在main.html中，修改以下路径即可
-
如果Vue的数据没有显示出来，注意Vue的各个名字是否写对，注意这里是methods不是method，不要忘记那个s！！！
-
了解并使用Vue的v-for
-
Vue中的插值符{{}}
二、代码
-
目录结构
-
css、js、main.html代码资源，免费下载即可！！！
链接：https://pan.baidu.com/s/1cmJioIKfrYLyE2vG5Kt1ag
提取码：0916 -
IndexController.java
@GetMapping("/main") public String main(){ return "main"; } -
出现第一个成功截图后，更新main.html
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>kuangstudy-支付宝支付</title> <link rel="stylesheet" href="/static/css/main.css"> </head> <body data-ext-version="3.1"> <div data-v-7e2550d6="" class="odm_extension image_downloader_wrapper"><!----></div> <!--页面头部--> <nav class="navbar sticky-top navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand logo" href="https://www.kuangstudy.com/"> <img style="width: 112px;" src="https://www.kuangstudy.com//assert/course/c1//index_topleft_logo_black.png" alt=""> </a> <div class="collapse navbar-collapse position-relative"> <ul class="navbar-nav mr-auto"> <li class="nav-item position-relative"> <a class="nav-link ksd-nav-linknav nav-link-course" href="https://www.kuangstudy.com/course">课程</a> <i class="iconfont ksd-bgd-left">免费</i> </li> <li class="nav-item"> <a class="nav-link ksd-nav-linknav nav-link-topics active" href="https://www.kuangstudy.com/bbs">江湖</a> </li> <li class="nav-item"> <a class="nav-link ksd-nav-linknav nav-link-down" href="https://www.kuangstudy.com/app">导航</a> </li> </ul> <div id="ksdloginbox"> <div style="position: relative;top:-18px"> <div class="tipmessage-box" style="cursor: pointer"><i class="iconfont iconiconfontunie62c tp1 pr pr-1"></i><span class="im-notify ksd-im-number im-number im-center" style="display: none"></span>消息 </div> <div class="i-frame animated2 fadeInDown"></div> <div class="ksd-logindrop show" data-vip="2"> <a href="https://www.kuangstudy.com/u" class="ksd-home pr tp2" style="z-index: 11"><i class="iconfont iconhome pr pr-1"></i>进入主页</a> <a class="dropdown-toggle ksd-user-info" href="javascript:void(0);" title="飞哥" data-vip="2" id="navbarDropdown"> <span class="pr"> <img class="ksd-avatar2 ksd-avatar-img" src="https://www.kuangstudy.com//assert/course/c1//132" alt=""> <span class="ksd-iconrenzheng-vip"><img src="https://www.kuangstudy.com//assert/course/c1//vip.png" alt=""></span> </span> <span class="ksd-text">飞哥</span> </a> <div class="ksd-login-items"> <div class="ksd-header-items mt-3"> <ul> <li class="ksd-num-items"> <a href="https://www.kuangstudy.com/u#topic"> <span class="num ksd-num-count6">3</span> <span class="ktext">文章</span> </a> </li> <li class="ksd-num-items"> <a href="https://www.kuangstudy.com/u#fans"> <span class="num ksd-num-count1">7</span> <span class="ktext">关注</span> </a> </li> <li class="ksd-num-items"> <a href="https://www.kuangstudy.com/u#follow"> <span class="num ksd-num-count2">471</span> <span class="ktext">粉丝</span> </a> </li> </ul> </div> <div> <div class="citems ksd-sign-items"> <a href="javascript:void(0);" data-num="2" class="ksd-user-qiandao"><i class="iconfont iconsetlocation pr-2 pr tp1"></i><span class="ksd-uqtext">签到</span></a> </div> </div> </div> <div class="ksd-login-items"> <ul> <li class="items"> <a href="https://www.kuangstudy.com/u" style="width:126px;text-align:left" title="点击前往个人中心" class="fl flitems"><i class="iconfont iconhome"></i>个人中心</a> <a href="https://www.kuangstudy.com/vip/pay" title="点击前往订购和续费" class="fr fritems pr"><span class="vipicon fw" style="padding:2px 6px">年会员</span></a> </li> <li class="items ksdcopylinknum" title="点击复制数字账号" data-clipboard-text="2"> <a href="https://www.kuangstudy.com/u/settings" style="width:160px;text-align:left" class="fl ksd-settings2 flitems"><i class="iconfont iconiconzh1"></i>账号</a> <a href="javascript:void(0);" class="fr ksd-settings2 fritems">2</a> </li> <li class="items ksd-exp-itemboxs"> <a href="javascript:void(0);" class="fl flitems"><i class="iconfont icondengji2 tp1 pr"></i>等级</a> <a href="javascript:void(0);" class="fr fritems ksd-coin-exp show1" data-exp="74000"><span class="ksd-num-exp">74000</span>exp</a> <a href="javascript:void(0);" class="fr fritems show2 ksd-coin-exp ksd-coin-exp-text" data-exp="74000">Lv6</a> </li> <li class="items"> <a href="javascript:void(0);" class="fl flitems"><i class="iconfont iconjinbi"></i>K币</a> <a href="javascript:void(0);" class="fr fritems ksd-coin-coin" data-coin="4814887"><span class="ksd-coin-cointext ksd-num-coin">4814887</span><span class="pr ftp2">币</span></a> </li> <li class="items" title="订购会员"> <a href="https://www.kuangstudy.com/vip/pay" style="text-align:left" class="fl ksd-settings2 flitems"><i class="iconfont iconVIP_paiban"></i>查看会员权益</a> </li> <li class="items"> <a href="https://www.kuangstudy.com/u/settings" style="width:100%;text-align:left" class="fl flitems"><i class="iconfont iconSettingscontroloptions"></i>个人设置</a> </li> </ul> </div> <div class="ksd-login-items bnone"> <ul> <li class="items"> <a href="javascript:void(0);" class="fl flitems ksd-logout"><i class="iconfont iconai-out"></i>退出登录</a> </li> </ul> </div> </div> </div> </div> </div> </div> </nav> <!--内容区域--> <div id="app" class="container" style="margin-top: 55px;"><h1 class="text-center fz32 mb-5"><a href="https://www.kuangstudy.com/app/code">笔记下载：https://www.kuangstudy.com/app/code</a></h1> <div id="ksd-alert-msg-1" class="alert alert-primary"> <button type="button" data-dismiss="alert" class="close">×</button> <strong><i class="iconfont icontubiao_xitongtongzhi fz20"></i></strong><span class="pl-2 ccmsg">教程提供者：秦疆（遇见狂神说）、徐成飞（飞哥），作者已授权！Bilibili地址：<a href="https://space.bilibili.com/95256449" target="_blank">https://space.bilibili.com/95256449</a></span> </div> <div class="row course-item-wrap"> <div class="col-lg-12"> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade show active"> <div class="row"> <div class="col-lg-12"></div> </div> <div class="row course-block"> <div id="courseListBox" class="course_bdleft Mtp25"> <div class="course_stage_item"><h2 index="1" id="ksd-title-position-1" class="ksd-title-position-h2"><span class="cro_icon1">1</span> <span>第一阶段：JavaSE</span></h2> <div class="path-course-r"> <div class="row"> <div v-for="(course,index) in courseList" class="col-lg-3 col-md-4 col-sm-6 animated fadeInUp delay-1s"> <div class="course-item"> <div class="course-img "> <a :href="'https://www.kuangstudy.com/course/detail/'+course.courseid" target="_blank" :title="course.title" class="course__img"> <img height="140" width="100%" :src="'https://www.kuangstudy.com/'+course.img" > <span class="num">1</span> <span class="stimer">{{course.price}}</span> </a> </div> <div class="course-content"> <h3 :title="course.title" class="course__title"> <a href="https://www.kuangstudy.com/course/detail/1317503462556848129" target="_blank" :title="course.title" class="course__img"> {{course.title}} </a> </h3> <p class="course__author">{{course.intro}}</p> <div class="course-price-wrap"> <span class="course__btn"> <i class="iconfont iconshouye"></i> 点击支付 </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="/static/js/jquery-3.5.1.min.js"></script> <script src="/static/js/vue.min.js"></script> <script src="/static/js/axios.min.js"></script> <script> var vue =new Vue({ el:"#app", data:{ courseList:[], }, created:function () { this.loadCourse(); }, methods:{ loadCourse:function () { var that = this; axios.post("/api/course/list").then(function (res) { console.log("res================>", res); if(res.data.code == 20000){ that.courseList = res.data.data.courseList; } }) } } }) </script> </body> </html> -
进行测试
9623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
