[TOC]
## 4.4.1 前台网页设计与实现
网页设计构思是网页制作的指南针，针对网页的主题、命名、标志、色彩搭配和字体等要素，确定这些要素后，需要网页布局，网页布局要遵循对称平衡、异常平衡、对比、凝视和空白等原则，下面主要针对该系统中网页色彩和布局进行一些设计说明：
（1）网页给人的第一印象来自视觉，确定网站的标准色彩是相当重要的一步，不同色彩搭配会产生不同效果。并可能影响访问者的情绪。一般来说适合于网页标准色的颜色的蓝色、黄/ 色和黑/灰/白色3大系。一个网站的标准色彩不宜超过3 种，太多会让人眼花缭乱。标准色彩多用于站标、网站的标题、主菜单和主色块。给人以整体统一的感觉，其它色彩也可使用，但只能作为点缀和衬托，绝不可喧宾夺主。基于以此理论，结合用人调查结果，本网站确定蓝色作为标准色彩，其它色彩如白色、灰色等作点缀。
（2）本站根据总体设计，设计的栏目有主页推荐、歌单、歌手、我的音乐等，导航栏应该提供这些栏目的导航链接，同时，在主页醒目的位置，分别设计这些栏目的部分内容，便于浏览着对这些栏目有一个一目了然的大致了解。
本课题前台实现采用IDEA编辑器，方便前后端一起开发，使用node.js技术，安装vue-cli脚手架构件工具，综合集成axios、element-ui、vue-router、vuex，快速搭建客户端前台页面，脚手架执行过程：index.html ->main.js ->app.vue。主程序入口文件（main.js），主要完成VUE对象的创建工作，完成路由对象、vuex对象的加载。
（1）在创建一个vue项目后，在 views 文件夹中写一个页面的组件，因为代码都放在一起对后期维护和修改都不方便，所以把它们根据功能或者位置拆分开，放到 components 文件夹下面去实现，最后再整合到 views 文件夹下。加载到 App.vue 文件中，最后渲染到页面中。
（2）最开始构建页面可以写死，当基本样子搭起来之后就可以去向后端去请求数据，请求数据用到的是`axios`插件，获取到数据后console一下，在控制台查看请求的数据，确保数据保存到正确的变量中去（这里如果遇到跨域的问题可以在后端用 CORS 解决）。
（3）组件的问题解决了接下来就是访问的问题，我们如何通过点击的时候切换组件呢？我们在 router 文件夹中引入组件，给它们设定访问它们的路径。这里用到了`vue-router`插件。
（4）随着组件的增多，组件之间的传值就是问题，不可能一些数据一直好几个组件里一直传，我们需要把它们单独拿出来放到 store 文件夹下面保存起来，当需要的时候在获取（这里通过 sessionStorage 解决vuex刷新数据丢失问题）。这里用到了`vuex`组件。
（5）不同的组件有时候会用到相同的方法，当要修改方法时就要改好多地方，所以把它们单独拿出来放到mixins文件夹下面，当用到这些方法的时候在对应组件中引入即可。
（6）vue支持很多的第三方组件，能给我们项目带来很好的交互和显示效果，具体在需要的时候npm或yarn就行了，当然了，一些样式和js语句也可以放到assets文件夹下。
## 4.4.2 页面链接导航设计与实现
为了让用户通过该网方便浏览，查询各种信息，应把在一个页面上无法全部实现的信息链接到它的下一级甚至下下一个级页面。这样做层次清楚，条理分明，便于用户使用。可以将导航栏封装到页头组件（components/TheHeader.vue）中。
结合本网站前台页面跳转的设计，页面应当分为已登录和未注册两个主要的状态。效果如图所示：
当用户未注册登录时关键代码如下：
```
<!--图标-->
<div class="header-logo" @click="goHome">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-erji"></use>
</svg>
<span>{{musicName}}</span>
</div>
<ul class="navbar" ref="change">
<li :class="{active: item.name === activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path, item.name)">
{{item.name}}
</li>
<li>
<div class="header-search">
<input type="text" placeholder="搜索音乐" @keyup.enter="goSearch()" v-model="keywords">
<div class="search-btn" @click="goSearch()" >
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
</div>
</div>
</li>
<li v-show="!loginIn" :class="{active: item.name === activeName}" v-for="item in loginMsg" :key="item.type" @click="goPage(item.path, item.name)">{{item.name}}</li>
</ul>
```
当用户已登录时关键代码如下：
```
<!--设置-->
<div class="header-right" v-show="loginIn">
<div id="user">
<img :src="attachImageUrl(avatar)" alt="">
</div>
<ul class="menu">
<li v-for="(item, index) in menuList" :key="index" @click="goMenuList(item.path)">{{item.name}}</li>
</ul>
</div>
```
