使用vue.js + laravel开发单页面应用
最近学了vuejs和laravel,然后顺便就撸了简单的demo,这里将会根据这个demo介绍下如何使用vuejs+laravel开发一个简单的单页面应用,demo的github地址是https://github.com/helbing/laravel-vue-start-kit
开发环境
windows 穷,没办法,买不起苹果
phpstudy windows中最好的php集成开发环境,没有之一
开发中所需的一些包介绍
package.json
如果会vuejs的话,那么绝大多数的包就算不用介绍也知道是用来做什么的
composer.json
这里将会用dingo api
和json web token
来开发后台API
(1)dingo api文档,https://github.com/dingo/api/wiki
(2)jwt-auth文档,https://github.com/tymondesigns/jwt-auth/wiki
后端API配置
通过那两篇文档,我们知道需要在如下几个地方进行配置
(1)在config/app.php
中加入
(2)执行php artisan vendor:publish --provider="Dingo\Api\Provider\LaravelServiceProvider"
和php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"
,然后再config目录下就会自动生成api.php
和jwt.php
,接下来执行php artisan jwt:generate
生成JWT_SECRET
,最后在.env
文件中写入
在app/Http/Kernel.php
中加入
(3)jwt-auth
依赖于user
表,也就是database/migrations/2014_10_12_000000_create_users_table.php
,执行php artisan migrate
生成user表,并确保app/User.php
存在,然后类中加入protected $table = 'user';
,不然声明使用user
表,不然会默认使用users
表
初尝dingo api
打开app/Http/routes.php
文件
(1)引入dingo api,$api = app('Dingo\Api\Routing\Router');
(2)创建API版本
(3)创建路由
(4)创建相应的controller和action
BaseController
为
在开始访问API前,我们先来进行一些开发环境上的配置
打开phpstudy
(1)其他选项菜单->打开hosts
(2)其他选项菜单->站点域名管理
(*)网站目录需要指向项目的public
文件,让/public/index.php
作为项目的入口文件
执行php aritsan api:routes
接下来就可以在postman调试接口了demo.vue:82/api/test
将.env
文件中的API_VERSION
修改为v2
,再次访问接口就可以看到去调用的是Api/V2/Controllers/TestController@index
将.env
文件中的API_PREFIX
修改为api2
,执行php aritsan api:routes
,可以看到
使用jwt-auth
这里将会以我写的demo来讲解如何使用jwt-auth这个包,打开Api/V1/Controllers/AuthController
,可以看到里面写了三个action
(1)me
用于获取用户信息和验证token是否过期或有效,通过传递token可以进行解析获取用户信息
(2)login
用于登录,password
字段是必须传递的
(3)register
用于用户注册,password
必须采用bcrypt
加密,不然在JWTAuth::attempt
的时候会获取不到token
,JWTAuth::attempt
会对传递进去password
自动进行bcrypt
加密
接下来我们注册相应的路由,然后用postman进行接口调试,(*)使用jwt.auth
中间件就意味着每次调用接口的时候必须传递token
,中间件会对token
进行验证,如demo.vue:82/me?token=token_value
现在我们通过postman调用demo.vue:82/register
接口,并传入四个参数name
,email
,password
,password_confirmation
可以看到成功返回了token
和name
,在数据库中也能看到用户确实被创建了
接下来我们来调试demo.vue:82/login
接口,传入email
和password
两个参数
(1)输入了错误的密码
可以看到返回的错误信息
(2)输入了正确的密码
成功返回了token
和name
,这就说明用户确实登录成功了
最后我们来调试demo.vue:82/me
这个接口,由于该接口使用了jwt.auth
这个中间件,所以每次调用接口的时候需要带上token
(1)传入了一个不存在的token
(2)传入了正确的token
成功返回了用户信息
前端部分
前端部分我不打算讲如何一步一步写代码,这里会讲一些需要注意的点和一些技巧,参考我写的demo的代码,相信你一定能很快学会如何结合laravel和vuejs写一个单页面应用
(1)Elixir的使用
Elixir是Laravel提供了一套干净、平滑的API用于为Laravel应用定义基本的Gulp任务
之后gulp && npm run dev
,这样以后保存代码都会自动gulp,同时还会同步到浏览器,大大节约了开发时间
(2)beforeEach和自定义字段的使用
beforeEach和自定义字段的用法可以查看文档http://router.vuejs.org/zh-cn/api/before-each.html和http://router.vuejs.org/zh-cn/route.html
首先打开/resources/assets/js/routers.js
,可以看到这段代码
我在路由跳转前进行了一些判定,我在/auth/profile
,/dog
等路由设置了自定义字段auth: true
,让用户在跳转到这些页面时候判定token
存不存在,不存在则表明用户未登陆,直接跳转到/auth/login
。在/auth/login
,/auth/register
我设置了自定义字段guest: true
,让用户在登陆后(token存在)无法再跳转到这些页面,如果访问了,则跳转到/auth/profile
localStroage的使用
因为调用某些接口需要用到token,所以需要将token值存入localStroage中方便取出使用。虽然可以将token存在store中,然而在有些地方,比如ready()
中无法获取到store中的值(参考/resource/assets/js/components/Auth/Profile.vue
),所以将token值存储在localStroage比较合适。
使用vue.js + laravel开发单页面应用的更多相关文章
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- angular开发单页面应用--页面资源部分
关于angular是什么,能够干什么就不在这里解释了,自行搜索了,或者等稍晚一点再解释... angular适合开发单页面应用,这句话在介绍angular的网站和博客里都可以提到.因为angular是 ...
- Vuebnb 一个用 vue.js + Laravel 构建的全栈应用
今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel.它会在Packt出版社在2018年初出版. 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb.在这 ...
- vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义
最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...
- 用vue.js重构订单计算页面
在很久很久以前做过一个很糟糕的订单结算页面,虽然里面各区域(收货地址)使用模块化加载,但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误. 大致问题如下: 1. 每个模块都采用usercont ...
- 怎样开发单页面app
groot.view("myview", function (vm, ve) { ve.loada = function () { require("./app/page ...
- vue.js 使用 vue-router 修改页面标题
module.exports = { name: 'myComponent', data: {} route{ data: function(){ document.title = "页面标 ...
- vue.js 跳转同一页面,传不同值,组件监听路由
watch: { '$route' () { this.type = this.$route.params.type this.loadData() } },
随机推荐
- FatMouse' Trade(杭电ACM---1009)
FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- devmapper: Thin Pool has 154464 free data blocks which is less than minimum required 163840 free dat
清理exited进程: docker rm $(docker ps -q -f status=exited) 清理dangling volumes: docker volume rm $(docker ...
- padding 和 float属性
padding = {上内,右内,下内,左内} 内边距 padding:"10, 5,15,20" float = "true" 控件固定住.
- 三、CSS语言
CSS语言 1.概述:CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果.可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示 ...
- 班级作业:Java Web环境的搭建
Java Web环境的搭建 一.开发所需工具.(根据你的电脑以及系统选择合适的版本下载) 1.JDK .下载链接:https://www.oracle.com/technetwork/java/jav ...
- MySQL数据查询
数据查询语言DQL select [all | distinct] 字段或表达式列表 [from子句] [where子句] [group by子句] [having子句] [order by子句] [ ...
- allegro画元件封装
LP Wizard 10.5 根据标准,输入datasheet的尺寸,可以计算出推荐的焊盘和封装. 封装必须画的层: 1.引脚 2.pakage-> 2.1.assembly_top,add线( ...
- Coroutines declared with async/await syntax is the preferred way of writing asyncio applications. For example, the following snippet of code (requires Python 3.7+) prints “hello”, waits 1 second, and
小结: 1.异步io 协程 Coroutines and Tasks — Python 3.7.3 documentation https://docs.python.org/3/library/a ...
- 图像分类(二)GoogLenet Inception_v2:Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift
Inception V2网络中的代表是加入了BN(Batch Normalization)层,并且使用 2个 3*3卷积替代 1个5*5卷积的改进版,如下图所示: 其特点如下: 学习VGG用2个 3* ...
- (4.9)mysql备份还原——binlog查看工具之mysqlbinlog的使用
关键词:mysqlbinlog,mysql binlog查看,二进制文件查看,binlog查看工具,binlog查看方法 常用总结: [1]在test库redo某个binlog中的文件mysqlbin ...