|
摘要: 本文介绍使用Vue2单页面程序作为前台，以Yii2搭建后台提供API，进行前后端分离开发的入门知识。本文适合Vue2，Yii2爱好者观看。预计花费时间30分钟，跟随教程操作。 后台 前后端分离之后,后台语言的选择一下子多了,只要能处理请求,返回JSON就可以了。不过据说PHP是世界上最好的语言，所以本教程选的是PHP，当然，站在巨人的肩膀上，选个好用不浮夸的框架也是必要的，不然重复发明轮子会占用很多玩耍的时间，不利于身心健康。性能什么的，不要计较太多，如果幸福的烦恼来临，多花点钱，多搞几台机器的事而已。废话不多说，撸起袖子加油干！ 1.安装Yii2 Yii2通过composer-asset-plugin整合bower和npm上的前端库到composer的安装上，如果之前安装过这个插件，就不用安装啦，直接 composer create-project --prefer-dist yiisoft/yii2-app-basic basic 如果没有安装过asset-plugin，就先安装插件，再创建一个新的Yii2程序： 稍等片刻，就能安装好啦。 Composer安装有问题的，请看另外一篇博文：Composer更新慢的终极解决方案 配置下虚拟主机，以apache为例，打开apache目录下的httpd-vhosts.conf配置文件，添加配置： DocumentRoot指向的是刚刚创建的Yii2程序的web目录，ServerName是本地域名，配置好apache配置后，需要再改一下hosts文件，以Win7为例，打开 C:\Windows\System32\drivers\etc\hosts 在文件最后添加一行 保存，重启Apache，打开浏览器，打开地址 http://ckend.local/ 看到熟悉的 Congratulations!大字，说明安装配置完成啦！ 2.配置Yii2支持API调用 2.1 添加API相关Controller的基础类，这里取名BaseAPIController： 主要解决两个问题：
2.1.2 修改接受的请求数据格式 传统的web应用，请求类型通常是x-www-form-urlencoded与multipart/form-data, 对应普通的表单提交，以及文件内容提交，默认Yii2不支持Json格式的请求，需要在config/web.php里修改request组件配置 ： 2.2 添加权限验证控制器 简单起见，不涉及数据库操作，用户名密码如果都符合要求，就返回一个token，这个token的值是100-token,为什么是这个值，请看创建好的Yii2项目的Models目录下的User.php. 2.3 添加需要授权才能访问的控制器 重点是，这个ItemController只有通过验证，才能访问到Index这个action，这里增加的验证器HttpBearerAuth就是用来验证请求的Header里是否带着刚刚分发的token, 之所以不对OPTIONS请求做验证，是因为OPTIONS请求不带别的信息啊，没法验证。浏览器非要在请求之前发个OPTIONS请求，也没办法。 2.4 测试 打开浏览器访问http://ckend.local/item 正常情况下，会返回为授权信息 ： 前台 前端采用Vue2这个单独好用的js框架，文档丰富，社区活跃，最难得的是作者很帅！ 1.安装Node和vue-cli 现在前端没有Node简直寸步难行，所以Node是必须安装的，去官网下个安装包，安装好。然后再安装vue-cli工具。 2.创建Vue单页面程序 运行命令： 会让您输入必要的信息，如项目名称，描述，作者之类的。这里简单起见，一路默认回车就是啦。 3.运行程序 如上面命令行输出的提示，vue-cli创建项目后，还需要npm install安装，然后npm run dev运行，看看能不能成功运行。 4.安装必要库 本例需要用到Vue-router这个官方推荐路由，以及axios这个官方推荐http库。至于官方为什么不推荐原来的vue-resource了，我也不知道，前端喜新厌旧，就是这样的。
细心的朋友会发现多安装了bootstrap 和 iview这两个库，没别的目的，就是想让界面好看点，听说也比较火，安装了吧，反正闲着也是闲着。 稍等片刻，安装完毕，npm run dev看看效果吧。 5.开始添加前端逻辑 逻辑是这样的，这个前端页面，是登录之后才能用的，未登录用户，直接给跳转到登录页。登录成功后，跳回首页，然后调用Item/index接口，获取信息然后显示在页面上。 好了，计划完毕，开始写代码。在src目录下创建一个config目录，加一个setting.js, 内容如下：
基本的配置信息就在这里了，包含了后端服务地址，用户标志的key名称。 再在src目录下创建一个services目录，加一个auth.js,用来辅助判断用户登录状态:
就四个函数，功能不言而喻。 再在services目录下加一个http.js，用来包装一下axios：
重点是在request和response两个拦截器。request里，查看用户是处于登录状态，如果是，那么就在请求的headers里加上 Bearer ${token}; 这样后端在接受到请求的时候，用HttpBearerAuth去校验这个token是不是符合要求，就能够进行用户权限验证啦。当然，不用拦截器也是可以的，但是每个请求都需要加Headers头，会不会很累？ response拦截器里，检查返回的状态，如果是401状态码，就是用户没有通过权限验证，那就去登录页面再登录啦。同样的，每个请求也是可以检查状态码的，但是太麻烦，偷懒是美德！ 最后，在src目录下的main.js里把这些工具函数连接起来:
写完这一大串后，发现命令行里报了一堆错，看了看，应该是引入了bootstrap,iview的css，而默认的webpack配置文件没有相应的loader, 于是先安装下这些loader:
然后，修改webpack.config.js文件，给file-loader加上woff|woff2|ttf|eot，因为bootstrap用到了这些字体文件，然后再加上style-loader!css-loader, 修改如下：
再次npm run dev后，熟悉的首页又回来啦。 6.添加路由根节点 打开App.vue，修改后的App.vue如下：
其实就是用App这个组件作为总的树根，然后Home和Login两个组件作为路由子组件加载进来。 7.添加components目录 添加components目录，再添加Login.vue和Home.vue
Home.vue
添加完毕后，npm run dev 就可以测试了。按照之前设计的逻辑，首先请求，http://localhost:8080, 由于/路由对应的是Home.vue,而Home组建创建的时候，调用了一个后端需要权限的API，于是返回401错误，然后被重定向到login去登录。 登录的时候，发现报错：
意思是说跨域了，http://localhost:8080， 不被后端接受。跨域问题有很多解决方法，本人倾向于用应用服务器配置解决，这里以 Apache为例，在后端的web目录下，加上一.htaccess文件，内容如下: <IfModule mod_rewrite.c>
告诉Apache，不要管跨域问题啦。Nginx的话，添加：
跨越问题其实挺复杂， 建议多看看相关资料，这里就不多说了。 加了.htaccess文件后，刷新下页面，发现来到了登录页面，这就对啦。 继续用admin，admin登录。相信就能正常啦。 后记 本文花了1天时间写成，踩坑花了至少3天时间，如果您读到这里，恭喜您，您是一个有耐心和爱学习的人。没有更多内容了。代码已上传到码云，随意获取查看： 前台：http://git.oschina.net/linwx/basic_front 后台：http://git.oschina.net/linwx/basic_backend 希望您也能感受到使用Vue2和Yii2快速开发的乐趣！
|
|
|
