概念和想法

使用前后端分离的架构,通过Http协议进行数据传输。

Laravel 5.2 用到的技术

  • 使用oAuth2.0 来进行验证用户及提供API权限问题
  • 使用dingo API来实现API接口
  • API采用RESTful思想设计
  • 使用云片网服务进行短信发送与验证
  • 代码架构充分分离,分别为
    • Controller(接受请求)
    • Service(处理主要逻辑)
    • Repository (处理数据库Model)
    • Presenters(处理模版页面逻辑 由于我是作为api service,所以不需要

前端

主要考虑了既然开发了通过API提供服务的后端,那么网站前端也使用相应的技术比较方便。

我选择了vue+webpack实现的单页面应用。

webpack的全局变量

当我需要使用开源的类库时,引入变成了一个问题。

例如jquery,当我在网上找了所有方法,并分别尝试了:

  • 在ProvidePlugin中当作插件载入
  • 在main.js中rquire载入
  • 使用expose-loader暴露全局

均失败的结果,让我对自己的项目是否破损了产生怀疑。

后来,在一次搜索中发现有人和我遇到了同样的情况,各种方法尝试,在调用$会出现未定义的问题,但配置没问题。

有帮助者给出了解决方案:
link

It looks like you got everything setup properly. The error you are receiving is from ESLint’s no-undef rule. Since jQuery uses the global variable $ or jQuery, ESLint needs to be configured to know about it. Within your .eslintrc.js file, add them to globals.

.eslintrc.js

1
2
3
4
5
6
7
{
// Other configs...
"globals": {
"$": true,
"jQuery": true
}
}

也就是说ESLint需要配置,并设置为全局。

components的组装

在vue中,一个非常重要的理念就是使用component。可以提高开发效率,增加高复用性。

例如我在写后台管理页面时,会需要用到相同的sidebar,那么如何进行类似继承的复用,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import Vue from 'vue'
import Router from 'vue-router'

import NotFoundView from '@/components/public/404'
import DashBoard from '@/components/public/dashboard'

import AnalyticView from '@/components/analytic/show'
// ...

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
component: DashBoard,
children: [
{
path: 'analytic',
component: AnalyticView,
name: 'analytic'
}
]
},
{// not found handler
path: '*',
component: NotFoundView
}
]
})

注意,这里的dashborad.vue的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template lang="html">
<div class="dashboard">
<sidebar />
<div class="main">
<router-view></router-view>
</div>
</div>
</template>

<script>
import Sidebar from './sidebar'

export default {
name: 'Dashboard',
components: { Sidebar }
}
</script>

<style lang="stylus">
.main
margin-left 120px
margin-right 20px
margin-top 20px
</style>

需要将<router-view></router-view>继续往下传递。