php单页应用,Laravel"/>
php单页应用,Laravel
(1)创建导航组件,路径 resources/js/components/Navigation.vue,内容如下:
您好:{{ username }}(注销)
export default {
data () {
return {
username: this.$store.state.username
}
},
methods: {
// 注销按钮点击
logout() {
// 清除保存的用户名并跳回登录页
this.$storemit('setUsername', '');
this.$router.push("/login");
}
},
}
(2)创建文章列表组件,路径 resources/js/components/List.vue,内容如下:
{{ item.title }}
import HttpAPI from '../api/httpAPI.js';
export default {
data() {
return {
list: []
}
},
methods: {
},
// 页面创建时自动加载列表数据
created() {
// 发起请求
HttpAPI.getList( )
.then(( response ) => {
if(response.data.status) {
this.list = response.data.result;
}
})
}
}
(3)创建文章详情组件,路径resources/js/components/Detail.vue,内容如下:
标题:{{ detail.title }} 内容:{{ detail.content }}返回列表
import HttpAPI from '../api/httpAPI.js';
export default {
data() {
return {
detail: {}
}
},
// 页面创建时通过路由中的参数ID加载详情数据
created() {
// 发起请求
HttpAPI.getDetail(this.$route.params.id)
.then(( response ) => {
if(response.data.status) {
this.detail = response.data.result;
}
})
},
methods: {
}
}
7,路由配置
更多推荐
php单页应用,Laravel
发布评论