前端发展与现状
大家都知道前端是由HTML、CSS、Js组成的，一开始这样写出来的页面，不能局部加载，复用性比较差，重复工作比较多。微软就推出了ifram标签，就是相当于在网页中嵌套一个网页，切换目录只是切换ifram中的网页，还是直接加载某个完整的html界面。接着ajax的出现，实现了局部刷新，优化了用户体验。后来进入了jQuery时代，jQuery封装了很多原生方法，减少了代码量。现在我们前端进入了前后端分离时代，流行 MV* 框架（MVC、MVP、MVVM），MVVM框架有Angular、Vue、React。
MVVM框架
现在我们后台管理系统是基于Vue开发的单页面应用（SPA）。
Vue简单介绍
1、Vue.js是一个构建数据驱动的web框架
2、Vue.js实现了数据的双向绑定和组件化
3、Vue.js只需要关系数据的变化，无需繁琐的获取和操作dom
比如给一个元素绑定事件并赋值，jQuery的做法是：
<input class="ipt" type="text">
<button class="btn"></button>
<script type="text/javascript">
$.ready(function () {
$('.ipt').value();
$('.btn').click(function() {
})
})
</script>
vue的写法是：
<input class="ipt" v-model="value" type="text">
<button class="btn" @click="click"></button>
.vue文件的写法
<template>
这里写HTML
</template>
<script type="text/ecmascript-6">
这里写数据和方法
</script>
<style lang="stylus" rel="stylesheet/stylus">
这里写css
</style>
项目结构
├── build // 构建相关
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── comm// 打包后生成的目录
│ ├── favicon.ico
│ ├── index.html
│ └── static
├── config // 配置相关
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── package.json //开发生产依赖
├── server //服务及mock数据
│ ├── controller
│ └── mock
├── src //源代码
│ ├── App.vue // 入口页面
│ ├── api // 所有请求
│ ├── assets // 字体等静态资源
│ ├── common // 全局公用方法
│ ├── components // 全局公用组件
│ ├── favicon.ico
│ ├── index.html // html模板
│ ├── main.js // 入口js 加载组件 初始化等
│ ├── pages // 所有页面
│ ├── plugins // 全局工具
│ ├── router // 路由
│ └── store // 全局store管理
└── static // 第三方不打包资源
├── async.js
├── css
├── img
├── jquery-1.8.3.min.js
├── jquery.ztree.js
├── md5.js
├── paopao.js
├── spark-md5.js
├── tinymce
├── upload.js
├── upyun-mu.js
└── vue-style-loader
这里来简单讲一下src文件
api 和 views
咱们公司后台项目目前大概有十几个api模块。随着业务的迭代，模块会越来越多。所以这里根据业务模块来划分pages，并且将pages 和 api 两个模块一一对应，方便维护，如下图
aip和pages.png
这样不管项目怎么累加，api和pages比较好维护。
components
这里的components放置的都是全局公用的一些组件，如上传组件，富文本等等。
components.png
store
vex要根据需求去使用，咱们后台项目来说，虽然业务模块比较多，还有权限，但业务之间的耦合度是很低的，所以根本没有必要使用vuex来存储data，每个页面里存放自己的data就行。当然有些数据还是需要用vuex来统一管理的，如登录,用户信息，还是用vuex管理方便。
Router
路由这个概念最先是在后台出现的，浏览器发出请求，服务器根据请求，解析url路径，根据服务器的路由配置，返回相应 html 字串。我们前端路由的实现本质上就是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则，每次 hash 值的变化，会触发 hashchange 这个事件，通过替换 DOM 的方式来实现页面的切换，还有通过HTML5的两个api,pushState 和 replaceState实现记住路由。
router-view
<router-view> 是用来渲染路径匹配到的组件。<router-view> 还可以内嵌<router-view>，实现路由嵌套。
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
最后
今天我只是给大家简单的说了一下后台管理的结构和vue的简单知识，大家要是有兴趣可以去了解一下，也可以随时交流~
网友评论