支付宝支付第八集：Vue实现产品页面和数据渲染

一、问题

静态页面没有渲染出来的话，可能是main.css没有加载进去，在main.html中，修改以下路径即可
如果Vue的数据没有显示出来，注意Vue的各个名字是否写对，注意这里是methods不是method，不要忘记那个s！！！
了解并使用Vue的v-for

Vue指令之 v-for的使用
Vue中的插值符{{}}

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"><iclass="iconfont iconiconfontunie62c tp1 pr pr-1"></i><spanclass="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"><iclass="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"><iclass="iconfont iconsetlocation pr-2 pr tp1"></i><spanclass="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"><iclass="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"><spanclass="ksd-coin-cointext ksd-num-coin">4814887</span><spanclass="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"><iclass="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"><iclass="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"><ahref="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地址：<ahref="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"><spanclass="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"><imgheight="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"><ahref="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>

进行测试

三、成功截图

第一个静态资源测试
第二个数据库读取数据测试

如图可见，页面上渲染的数据是从数据库中读取出来的，并不是写死的！！！

支付宝支付第八集：Vue实现产品页面和数据渲染相关推荐

支付宝支付第七集：产品数据接口的定义和测试
支付宝支付第七集:产品数据接口的定义和测试一.目录结构二.代码数据库SQL脚本(使用查询-新建查询) /* Navicat MySQL Data Transfer Source Server ...
支付宝支付第十一集：支付回调成功后的监听
支付宝支付第十一集:支付回调成功后的监听一.代码目录结构更新OrderDetailController.java package com.dzy.alipay.web.order; impor ...
支付宝支付第十集：支付回调
支付宝支付第十集:支付回调一.注意这里的支付回调最好是自己有一个服务器(阿里云服务器一年70多也不是很贵),博主自己尝试了一下,本机和使用虚拟机模拟服务器的话,支付宝的授权回调信息是传不过来的, ...
支付宝支付第五集：二维码生成工具
支付宝支付第五集:二维码生成工具一.代码目录结构 BufferedImageLuminanceSource.java package com.dzy.alipay.qrcode;import c ...
支付宝支付第六集：生成支付二维码
支付宝支付第六集:生成支付二维码一.资源支付宝沙箱显示APP-ID错误:我的原因是支付宝网关地址写错了支付宝沙箱环境报 invalid-app-id 错误原因: 无效的AppID参数错误支 ...
支付宝支付第四集：配置类的定义和注入
支付宝支付第四集:配置类的定义和注入一.代码目录结构 application-dev.yml # 支付宝支付参数配置 alipay:app_id: 公司支付宝的APPIDmerchant_pri ...
支付宝支付第三集：搭建项目及测试（含代码）
支付宝支付第三集:搭建项目及测试(含代码) 一.资源在搭建项目的时候,涉及到了SpringBoot的配置文件properties与yml文件,由于之前的项目使用的全部是properties类型,这 ...
在Vue中异步加载数据渲染到Dom
在Vue中异步加载数据渲染到Dom 问题 <div v-for="o in resmessage" :key="o" class="text i ...
android移动支付——支付宝支付，android开发游戏加速器
上面的支付流程细化下来就是: 1.浏览商品 2.把要买的商品加入购物车 3.把商品拿到收银台,收银人员处理商品信息 4.告诉收银员支付方式 5.选择支付方式进行支付 6.处理支付结果(成功.失败.取消 ...
android移动支付——支付宝支付
前言这里开篇讲解一系列的android相关的移动支付.移动支付也称为手机支付,用户使用移动的设备,完成对所购买商品或者服务的支付功能.包括远程支付(网上支付.短信支付),近场支付(刷卡.滴卡.pos ...

支付宝支付第八集：Vue实现产品页面和数据渲染

支付宝支付第八集：Vue实现产品页面和数据渲染

一、问题

静态页面没有渲染出来的话，可能是main.css没有加载进去，在main.html中，修改以下路径即可

如果Vue的数据没有显示出来，注意Vue的各个名字是否写对，注意这里是methods不是method，不要忘记那个s！！！

了解并使用Vue的v-for

Vue中的插值符{{}}

二、代码

目录结构

css、js、main.html代码资源，免费下载即可！！！

IndexController.java

出现第一个成功截图后，更新main.html

进行测试

三、成功截图

第一个静态资源测试

第二个数据库读取数据测试

如图可见，页面上渲染的数据是从数据库中读取出来的，并不是写死的！！！

支付宝支付第八集：Vue实现产品页面和数据渲染相关推荐

最新文章

热门文章

支付宝支付 第八集：Vue实现产品页面和数据渲染

支付宝支付 第八集：Vue实现产品页面和数据渲染

一、问题

静态页面没有渲染出来的话，可能是main.css没有加载进去，在main.html中，修改以下路径即可

如果Vue的数据没有显示出来，注意Vue的各个名字是否写对，注意这里是methods不是method，不要忘记那个s！！！

了解并使用Vue的v-for

Vue中的插值符{{}}

二、代码

目录结构

css、js、main.html代码资源，免费下载即可！！！

IndexController.java

出现第一个成功截图后，更新main.html

进行测试

三、成功截图

第一个静态资源测试

第二个数据库读取数据测试

如图可见，页面上渲染的数据是从数据库中读取出来的，并不是写死的！！！

支付宝支付 第八集：Vue实现产品页面和数据渲染相关推荐

最新文章

热门文章

支付宝支付第八集：Vue实现产品页面和数据渲染

支付宝支付第八集：Vue实现产品页面和数据渲染

支付宝支付第八集：Vue实现产品页面和数据渲染相关推荐