手把手教你前后分离架构(三) 前端项目美化

        前面我们已经实现了前后两端项目的基础搭建以及前后数据交互，目前的UI页面十分的简陋，所以今天咱们来完善前端项目，让UI更加美观。
        如果你的html、js、css的基础很好，那么前端项目研发起来相信不会很困难，不管是传统技术JSTL、JQuery与easyUI、bootstrap等UI框架，还是vue、react、angular与elmentui、layui等新技术，前端底层实现都是大同小异的，无非每项技术的特点各有不同。后期可根据团队人员和项目的基本情况来进行配套组合的技术选型。我们继续以Vue.js和elmentui为例研发本项目。

基础组件整合

为了后续不断完善前端项目，需要一些VUE组件来帮助我们更好的实现前端功能。

页面模块化

require和import的区别

vue编程中最重要的思想就是模块化，import和require都是被模块化所使用。
遵循规范
require 是 AMD规范引入方式。
import是ES6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法。
调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方。
import是编译时调用，所以必须放在文件开头。
原来得样例中页面引入咱们使用   import login from '@/views/login'的方式。
后续如果页面过多，开发环境如果使用懒加载， 页面太多的话会造成webpack热更新太慢。所以生产环境使用懒加载,开发环境不使用懒加载。
添加模块化工具类
router目录下添加工具类根据不同环境采用不同的模块化方式

import-development.js

module.exports = file => require('@/views/' + file + '.vue').default

import-production.js

module.exports = file => () => import('@/views/' + file + '.vue')

嵌套路由

嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路景观也按某种结构对应嵌套的各层组件，例如我们看Vue的官网教程。
当我们点击左边的项目的时候，我们知道，他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面，我们可以看到，他就是一个路由。或者我们应该说，他就是一个子路由。

 index.js 添加路由

const _import = require('./import-' + process.env.NODE_ENV)


//全局路由
const routes = [
  { path: '/login', name:'login',component: _import('login') },
]

// 嵌套路由入口
const mainRoutes = {
  path: '/',
  component: _import('layout/main'),
  name: 'main',
  redirect: { name: 'home' },
  meta: { title: '主入口整体布局' },
  children: [
    { path: '/home', component: _import('demo/list'), name: 'home', meta: { title: '首页' } },
 { path: '/test1', component: _import('demo/test1'), name: 'test1', meta: { title: '选项一', isTab: true } },
    { path: '/test2', component: _import('demo/test2'), name: 'test2', meta: { title: '选项二', isTab: true } },
    { path: '/test', component: _import('demo/add'), name: 'test', meta: { title: '测试功能', isTab: true } },
    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题', isTab: true } },
  ],
}

export default new Router({
  routes: routes.concat(mainRoutes)
})

状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex 包含有五个基本的对象：

state：存储状态。也就是变量；
getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。和vue中的methods类似。
actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。this.$store.dispatch(‘user/login’, this.loginForm)
modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

有了Vuex可以实现组件全局状态(数据)的管理,方便的实现组件之间的数据共享。

Sass整合

Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许使用变量 (variables),嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。

npm install node-sass --save-dev //安装node-sass 
npm install sass-loader --save-dev //安装sass-loader 
npm install style-loader --save-dev //安装style-loader

此处安装后可能会因sass-loader版本过高报错，可手动指定版本

npm install [email protected] --save-dev   //版本不能太高

也可在package.json中更改版本，然后npm install

基本UI设计

我们先研后台管理系统，管理系统一般有一下几类UI页面。
1、登录页面
这个不多说了用户密码登录页面。
2、主页面
登录验证成功后跳转到本页面，左侧菜单右侧详情的常规布局。
3、功能列表页
4、功能编辑详情

登录页面

登录页面前边我们已经实现了简单表单，样子比较丑陋，登录页比较简单，样式大家可以自行找网上提供的布局样式也可，基础较好的同学可以自己调整布局。这里举一个简单的登录样式的样例。

访问 ：http://localhost:9081/#/login 显示如下

 这里先不做后台校验，随便输入用户名、密码后跳转主页面。

主页面实现

主页面是整个后台管理系统的门面，它的重要程度不言而喻。

先实现常规的左侧是菜单、右侧是详情页面，头部有登录人的基础信息提示。更炫酷的要求后面逐步实现。

整体布局我们参考element官网布局容器来实现，我门以这个样例作为参考样例。

 新增主页面main.vue

封装Aside、Header、Main-content三个组件，在Main.vue主页面中使用。

Aside组件存放菜单
参照element官网 导航菜单组件

 main-sidebar.vue

Header
 

右侧主页面
主页面多个tabs标签页组成，
参考官网

main-content.vue

访问测试

 列表页

list.vue
 

演示截图

明细页面 

addPage.vue
 

演示样例

 以上就是前端系统主要页面及常用组件，有新的组件可通过elementUI官网，查询具体用法，另外样式的底层逻辑是相同的。

 

关注公众号”小猿架构“，发送 "前后分离架构" ，下载课程视频+课程源码+课件。