2.4 前端界面实现（VUE）

最新推荐文章于 2025-09-17 20:29:43 发布
原创 最新推荐文章于 2025-09-17 20:29:43 发布 · 1.7k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #js

本篇博客介绍了如何使用Vue来实现前端界面的底部导航栏和个人信息显示。底部导航栏通过pages.json配置，包含"首页"、"课程"、"我"三个选项。个人信息在"我"的页面展示，读取微信服务号API获取的用户头像和昵称。此外，还强调了微信服务号API获取用户信息的重要性，并提供了代码下载链接。

这里，对我们的选课系统进行一次升级。我们将系统底部调整为导航形式，分为“首页”、“课程”、“我”三个导航。“首页”主要介绍系统中的特色课程、教师风采等，“课程”中主要用来进行学生选课或教师领取教学任务，“我”完成获取用户信息、与课程教学相关的课程学习（将来直播、录播教学时进行扩展）、课程考试、身份切换等操作。

本章系统演示，请微信扫描下面二维码进行访问：

 

主要界面设计如下：

 

本小节，我们对该系统的界面设计的主要部分再做以下简单介绍。

说明：本文中所使用的部分图片来自互联网，仅用于教学演示。本文系统设计时，使用了ColorUI的样式设计源码（ColorUi for uniApp  v2.1.6）。上述图片、设计样式如侵害了原作者的权益，请私信或评论区留言通知本文作者，我们将立即删除。

2.4.1 底部导航栏

底部导航栏的设计，主要在VUE工程的pages.json中定义，主要定义的代码为：

"tabBar":
最低0.47元/天 解锁文章
Vue 组件开发：构建高效可复用的前端界面要素
九天的专栏
01-29 1635
基础事件处理：在组件内部可以使用v-on指令来监听原生 DOM 事件。< template > < button @click = " handleClick " > 点击我 </ button > </ template > < script > export default {console . log('按钮被点击了');
apache2.4 部署 vue.cli3
yyzzhhh的博客
11-13 820
apache2.4 部署vue.cli3前提部署环境安装及部署安装apache2.4.41第一步，当然是下载apache。第二步， 解压缩。 解压缩时就需要注意喽。第三步， 设置文件vue部署vue的打包修改httpd.conf文件完成 前提 只是第一次写文章，主要用于记录，本人是个新手如果有不正确或有更好的方法也欢迎高手指出，当然如果能帮助到别人那更是很开心的事情。 所以言归正传，回归主题。用v...
前端界面设计
06-29
布局的实现界面，包括下拉框、文本框、按钮、表格等组件
一款漂亮的前端界面
10-11
一款漂亮的前端web界面，里面有丰富的CSS和Jquery处理
现代化前端界面：Bootstrap5 + jQuery打造响应式UI
最新发布
yweng18的博客
09-17 1082
本文介绍了使用Bootstrap5+jQuery构建现代化响应式前端界面的实践方法。文章首先强调了优秀UI设计的重要性，包括提升品牌形象、扩大用户覆盖和改善用户体验。技术选型方面，对比分析了Bootstrap+jQuery与现代框架的优劣势，指出其学习成本低、开发效率高的特点。重点讲解了设计系统理念，展示CSS变量定义的设计令牌体系，包括色彩、字体、间距等标准化参数。最后详细解析了移动优先的响应式布局架构，通过Bootstrap5栅格系统实现设备自适应，并提供了代码示例。该方案适合需要快速开发且维护成本低的
好看前端界面
12-25
是一套比较编写比较规范的前端界面，拥有完整的模块，适合有点前端基础的同学
Element-UI布局（左右上下布局）
热门推荐
明耀的博客
02-26 2万+
&lt;style&gt; .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } #div_main { background-color: aqua; } &lt;/style&gt; &lt;template&gt; ...
创新实训【10】——前端主界面实现
weixin_43710646的博客
04-20 416
主要内容 这篇主要记录网页主体的设计与创建，包括了网页的菜单，导航条，主要框架等。 网页主体如下： 主要步骤 shouye.vue: <template> <el-container class="home-container"> <!--头部布局--> <el-header style="height:60px"> <div > <span>山东大学舆情分析系统</span
jeecgboot2.4前端技术解析：Vue.js框架入门与应用
Vue.js 是一款轻量级、高性能的前端框架，由尤雨溪于2014年创建并开源。Vue.js 的核心库只关注视图层，易于上手且便于与其它库或现有项目整合。Vue 十分灵活，能够进行简单的页面交互，也能开发复杂的单页面应用 ...
【wiki知识库】05.分类管理实现--前端Vue模块
qq_61024956的博客
06-05 2440
带你打造wiki--分类模块前端部分改造
前台页面
weixin_30367543的博客
05-31 219
window.location.href="跳转url" <option value=> 对数据进行处理 jsp中字符双引号，值单引号。 user_list += '<option value="'+userData[i].user_id+'">'+userData[i].name+'</option>'; 1、<span> <...
精美的前端界面
05-08
很漂亮，适合想学前端的人学习
博客前端界面帮助java初学者更好的处理后端，前端技术稍微了解，省时省力
03-13
前端界面html代码，帮助java初学者更好的处理后端，前端技术稍微了解，省时省力 帮助java初学者更好的处理后端，前端技术稍微了解，省时省力
前端页面
qq_34331610的博客
06-27 352
&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo
好的前端界面
qq_36610794的博客
07-17 516
pageEncoding="UTF-8"%> " rel="stylesheet" type="text/css"> ng-controller="CyberPage"> 企业通讯录
前端登陆界面
oafseoases
06-26 1万+
用 HTML + CSS 写的前端登陆界面
前端界面搭建
m0_64337048的博客
08-03 2037
使用HTML框架进行web网页的快捷开发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值