[经典案例]使用Vue-cli实现路由间的跳转与调用接口完成前端页面数据的渲染与显示-文章列表项目

it2023-06-22 67

前端vue 的老师飞快的讲了如何使用Vue完成前端页面数据的渲染，听的懵懵懂懂，回头细心琢磨了一下，写了笔记加深一下印象，有兴趣的小伙伴也可以看一下学习一下；文章最后附带项目源代码。

文章目录

前言一、首先创建components组件。二、其次配置路由。1.创建项目在router文件夹下的index.js文件中配置路由。2.引入图片资源文件3.之后开始写主页面jinengHome组件的代码4.编写中部列表数据代码5.编写详情页的代码三、最后的最后不要忘记总结

前言

废话不多说，先上效果图。

主页面分为三个板块，分别为顶部文章管理、文章列表，中部的文章列表数据渲染页面，还有底部固定的footer导航。

最后还有点击返回跳转到主页面的主功能。

开始做记录项目吧。

一、首先创建components组件。

二、其次配置路由。

1.创建项目在router文件夹下的index.js文件中配置路由。

代码如下（示例）：

这里需要注意的是二级路由children ，因为jinengHome这个组件是主页面，jinnegDetail.vue 是二级页面，jinnegList.vue与主页面是同级的组件。

import jinengDetail from '@/components/jinengDetail.vue' import jinengList from '@/components/jinengList.vue' import jinengHome from '@/components/jinengHome.vue' // 路由配置代码：这里需要注意的是二级路由children ，因为jinengHome这个组件是主页面，jinnegDetail.vue 是二级页面，jinnegList.vue与主页面是同级的组件。 routes: [{ path: '/jinengHome', name: 'jinengHome', component: jinengHome, children: [ { path: '/jinengDetail', name: 'jinengDetail', component: jinengDetail }, { path: '/', name: 'jinengList', component: jinengList }, ] }, ]

2.引入图片资源文件

：

3.之后开始写主页面jinengHome组件的代码

需要注意的是每一个组件里面必须要有<template /template> 而且模板里面必须包裹一个 div

<template> // 模板 <div class="container"> <div class="page-title" :style="{ 'justify-content': currentPath === '/jinengList' ? 'center' : 'space-between', }"> // :style 动态绑定样式，冒号代表 v-bind 绑定样式。 <router-link id="goBack" v-show="currentPath === '/jinengDetail'" to="/">返回</router-link> // 给返回按钮添加一个v-show 指令，让他停留在主页面的时候隐藏，到详情页的时候显示。 <span>文章管理</span> // 为保存按钮添加跳转时显示隐藏的效果 <router-link id="save" v-show="currentPath === '/jinengDetail'" to="/jinengList">保存</router-link> </div> // 头部的文章标签栏切换的效果，为li 绑定类名并同时添加 @click 点击事件，选中状态变红色，未选中为默认状态。 <ul class="page-tab"> <li :class="{ active: currentItem === item }" @click="changeItem(item)" v-for="(item, index) in arr" :key="index" > // 与此同时，台为li 添加了 v-for 指令来遍历 arr 这个数组，数组里面存放-文章列表, 文章编写, 文章分类，三个条目。对应js 的 return 下的arr：[]代码。 {{ item }} // 为数组item编写模板语法，让其显示到页面上面 </li> </ul> // 最后配置路由容器 <router-view></router-view> //底部文章管理的模块 <ul class="footer"> <li> <div class="icon"></div> <div>文章管理</div> </li> <li> <div class="icon"></div> <div>文章管理</div> </li> <li> <div class="icon"></div> <div>文章管理</div> </li> </ul> </div> </template>

接下来为元素和标签配置样式编写css代码

紧接着编写js 为他执行动作- 代码

到此页面的显示效果为：

4.编写中部列表数据代码

HTML代码 <template> <div class="list-container"> <div class="search-box"> <div class="input-icon"></div> <input type="text" /> </div> <ul class="content-box"> <li v-for="(item, index) in arr" :key="index" @click="toDetail(item)"> <div class="title">{{ item.title }}</div> <div>{{ item.userName }} 发布于：{{ item.updateTime }}</div> <div class="item-icon"></div> </li> </ul>  </div> </template>

css代码：

js代码：这里需要注意的是引入jQuery文件需要在项目中配置，配置语句跳出控制台输入：npm install jquery --save 即可引入 jQuery，然后在页面中的script下输入 import $ from “jquery” 即可使用jQuery的一些语法和代码。

npm install jquery --save <script> import $ from "jquery";// 这里需要注意的是引入jQuery文件需要在项目中配置， //配置语句跳出控制台输入：npm install jquery --save 即可引入 jQuery。 //然后在页面中的script下输入即可使用jQuery的一些语法和代码。 import $ from "jquery" export default { data() { return { arr: [], // 这里用于显示调用接口成功后传回来的数据。 }; }, mounted() { // 在vue中写jQuery代码需要在 mounted中编写。 $.ajax({ url: "http://192.168.3.77:3000/api/demo/getList", //请求地址，这里是老师给的服务器默认地址，这个接口已经有数据了。 method: "get",// 请求方式为get请求 data: {}, // 这里的data是用来显示请求成功后取回来的数据用于显示。 dataType: "json", // 请求的数据类型为 json，json解析。 success: (res) => { // 请求成功后，把请求的数据 res 作为参数传入。 console.log(res);// 在控制台中输出调取成功后的数据。 this.arr = res;// 把请求成功后的数据获取到后，显示到 data(){} 中 return下的arr数组当中。 }, }); }, methods: { toDetail(data) { console.log(data); this.$router.push({ path: "/jinengDetail", query: data }); }, }, }; </script>

至此，列表文章的模块就有数据了。运行效果图：

5.编写详情页的代码

html

国际惯例，配置css代码，只要有html代码要设置样式的话就要写 css代码：

配置完css代码后的效果为：最后是js代码：这里需要注意的是 url 地址的老师提供的默认地址，需要自己去找接口数据调用。

三、最后的最后不要忘记

在App.vue 根组件中写路由容器代码 <router-view //> 否则页面没有任何数据！

总结

1.二级路由children ，因为jinengHome这个组件是主页面，jinnegDetail.vue 是二级页面，jinnegList.vue与主页面是同级的组件。

2.引入jQuery文件需要在项目中配置，配置语句跳出控制台输入：npm install jquery --save 即可引入 jQuery，然后在页面中的script下输入 import $ from “jquery” 即可使用jQuery的一些语法和代码。

3 url: “http://192.168.3.77:3000/api/demo/getList”, 的请求地址，这里是老师给的服务器默认地址，这个接口已经有数据了。method: 请求方式要为get请求。

4： success: (res) => { 是使用的箭头函数来获取数据，请求成功后，把请求的数据 res 作为参数传入 this.arr = res;代码是把请求成功后的数据获取到后，显示到 data(){} 中 return下的arr数组当中。

5：路由配置文件path 为路径，将其设置为 “/” 的话为跳转到当前主页面。

项目源代码：链接：https://pan.baidu.com/s/1Jfz7DmgH9di1uua-bUl_qw 提取码：pykn

最困难之时，就是我们离成功不远之日。——凯撒

最新回复(0)