目录
- 环境搭建
- 后端
2.1 数据库设计
2.2 SpringBoot + Mybatis
2.3 SpringBoot+RestfulAPI - 前端
3.1 VueJS 2.0 + Webpack工程介绍
3.2 Admin-LTE介绍及使用
3.3 VueJS一些基础知识
3.4 项目中用到的和VueJS的开源组件
前言
总结了一些VueJs的基础知识，方便后面写代码的时候有概念。
说实话，我从最早的那种响应式的页面开发经验，跳转到这里还是稍微花了点时间的。
因为最早的形式就是后端返回HTML/FTL，浏览器展示。
也就意味着有N个页面要维护。
而类似于Vue.js， AngularJs等MVVM出现
MVVM
参考：谈谈MVVM框架
我的理解是，
- 前后端的同事的工作就更分离了，也意味着更能够敏捷开发。而不是臃肿的MVC模式下用Controller来维护View，然后前后端的耦合很大。现在，前后端同事只要在数据上保持一致。实际上工作就完全分离了。
- 可以做单页应用，也就是对于后端来说只有一个HTML/Ftl文件维护即可。前端通过组件的形式来像堆积木一样的堆积不同的页面。对于用户来说，访问速度很快（因为没有页面同步加载的过程）
我的开发过程中，用的比较多的就是下面两个功能。
- 组件
- Router
我通过这两个就可以开发单页应用了
实战中的例子
大致的思路就是：
- 我需要有个主页面
- 我通过路由的方式转移到不同的页面去。
- 不同的页面其实是一个组件，而不是通过去后台请求发来的HTML/FTL文件。
根据前一节：3.2 Admin-LTE介绍。
我们已经有一个app.vue来挂载到<Body>的第一个div上。所以思路的第一步已经做好了。
接下里就是我们的两个子页面：
├──app.vue
│ ├── com1.vue
│ └── com2.vue
对于vue来说。com1.vue和com2.vue既是两个组件。接下来我们通过注册router的方式，来讲路由注册号。这样的话，页面跳转就可以做到了。
这里使用的是vuejs2.0的router注册方式。最下面参考的链接是vuejs1.0的
改造main.js如下：
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import bot from './components/com1.vue'
import unity from './components/com2.vue'
/* eslint-disable no-new */
Vue.use(VueResource)
Vue.use(VueRouter)
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
// const bot = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{path: '/', redirect: 'com1'},
{path: '/com1', component: com1},
{path: '/com2', component: com2}
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
router,
// el: '#app',
template: '<App/>',
components: { App }
}).$mount('#app')
这里就是注册了一个router，并写好路由 ：
{path: '/', redirect: 'com1'},
{path: '/com1', component: com1},
{path: '/com2', component: com2}
上述也比较好理解。就是首页redirect到com1.vue。
点击/com1，使用的是com1.vue
点击/com2，使用的是com2.vue
接下来就是需要在app.vue中绑定router-view，关键代码如下：
<ul class="sidebar-menu">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<!--<li class="active"><a href="#"><i class="fa fa-link"></i> <span><router-link to="/com1">com1页面</router-link></span></a></li>-->
<li>
<router-link to="/com1"><i class="fa fa-link"></i><span>com1页面</span></router-link>
</li>
<li>
<router-link to="/com2"><i class="fa fa-link"></i><span>com2页面</span></router-link>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<router-view></router-view>
</div>
工程目录如下
先通过<router-link>讲跳转的URI标识号。
在通过<router-view>具体的来加载各自的xxx.vue（com1.vue，com2.vue）
实现后的工程目录如下：
目录
知道这些原理之后，理论上就可以直接在各自的组件（xxx.vue）中开发自己的组件了。
组件
这里已com1.vue为例:
组件
这里的几个概念：
- <template>是页面的视图层，其中只能有一个<div>
- components属性：可以是引用的外部安装的组件，也可以是自己定义的然后这里用到的组件。比如里面的Vuetable就是外部安装来的，errorcasetable就是自己写的另外一个组件。这里就达到了堆积木的效果
- data属性：这个页面所有的数据。意味着是MVVM中的model
- computed & mounted：这个是vue的生命周期。我还不是特别理解，但是computed是在页面加载前就会计算好。mounted是页面加载的时候调用。
- methods：顾名思义，这个vue实例下的函数。相当于java的私有方法。我用的话一般是在mounted里调用这些方法。
实例生命周期
另外一部分是在view里的一些指令：
view
已下图为例，用到了v-for和v-bind。
- v-for：比较好理解，就是entity这个在上述data属性中的数据，它是个list。所以可以渲染到了li标签。
- v-bind：就是绑定了 这里的style = {width：calculatePercentage(e)},width：calculatePercentage()是个函数。所以意思就是这个style是根据这个函数的计算结果来展示。
更多请参考：
网友评论