luffy前台案例
目录
luffy前台案例
1.课程点击跳转详情页
#views/Course.vue
<template>
<div class="course">
<Nav></Nav>
<h1>课程主页</h1>
<!--组件不能直接绑定点击函数,对象(字典)不能作为key值-->
<CourseCard :card="card" v-for="card in card_list" :key="card.title"></CourseCard>
</div>
</template>
<script>
import Nav from '@/components/Nav'
import CourseCard from '@/components/CourseCard'
export default {
name: "Course",
data() {
return {
card_list: []
}
},
components: {
Nav,
CourseCard
},
created() {
let cards= [
{
id: 1,
bgColor: 'red',
title: 'Python基础'
},
{
id: 3,
bgColor: 'blue',
title: 'Django入土'
},
{
id: 8,
bgColor: 'yellow',
title: 'MySQL删库高级'
},
];
this.card_list = cards;
}
}
</script>
<style scoped>
h1 {
text-align: center;
background-color: brown;
}
</style>
#conponents/CourseCard.vue
<template>
<div class="course-card">
<div class="left" :style="{background: card.bgColor}"></div>
<!--<div class="right" @click="goto_detail">{{ card.title }}</div>-->
//由课程点击跳转详情页
<router-link to="course/detail" class="right">{{card.title}}</router-link>
</div>
</template>
<script>
export default {
name: "CourseCard",
props: ['card'],
methods:{
goto_detail(){
console.log(this.card.id)
}
}
}
</script>
<style scoped>
.course-card {
margin: 10px 0 10px;
}
.left,.right {
float: left;
}
//清浮动
.course-card:after {
content: '';
display: block;
clear: both;
}
.left {
width: 50%;
height: 120px;
background-color: blue;
}
.right {
width: 50%;
height: 120px;
background-color: tan;
font: bold 30px/120px 'STSong';
text-align: center;
cursor: pointer;
}
</style>
2.详情页的数据分析与布局
<template>
<div class="course-detail">
<h1>课程详情页</h1>
<hr>
<div class="detail">
<div class="header" :style="{background:course_ctx.bgColor}"></div>
<div class="body">
<div class="left">{{course_ctx.title}}</div>
<div class="right">{{course_ctx.ctx}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CourseDetail",
data(){
return{
course_ctx:""
}
},
//页面创建成功,完成数据的渲染
created(){
//console.log("页面创建了")
//需求,获取课程主页传过来的课程id,通过课程id拿到该课程的详细信息
//伪代码:数据来源于后台
// $.ajax({
// url:`/course/detail/${id}/`,
// success:(response)=>{
// this.course_ctx=response.data
// }
// })
let detail_list=[
{
id: 1,
bgColor: 'red',
title: 'Python基础',
ctx:"python"
},
{
id: 3,
bgColor: 'blue',
title: 'Django入土',
ctx:"django"
},
{
id: 8,
bgColor: 'yellow',
title: 'MySQL删库高级',
ctx:"mysql"
},
];
let id = 1;
for(let dic of detail_list){
if(dic.id==id){
this.course_ctx = dic;
break;
}
}
}
}
</script>
<style scoped>
h1 {
text-align: center;
}
.detail {
width: 80%;
margin: 20px auto;
}
.header {
height: 150px;
}
.body:after {
content: '';
display: block;
clear: both;
}
.left, .right {
float: left;
width: 50%;
font: bold 40px/150px 'Arial';
text-align: center;
}
.left { background-color: aqua }
.right { background-color: aquamarine }
</style>
3.路由有名分组传参
#coursecard.vue
<router-link :to="`course/detail/${card.id}`" class="right">{{card.title}}</router-link>
#coursedetail.vue
created(){'''
let id = this.$route.params.pk;
'''}
#route.js
route:[ {
path: '/course/detail/:pk',
name: 'course-detail',
component: CourseDetail
}]
4.route-link的两种传参方式
#以数据包方式携带参数id
<router-link :to="{
name: 'course-detail',
params: {pk: card.id},
}" class="right">{{ card.title }}</router-link>
#以路由拼接携带参数
<router-link :to="{
query: {pk: card.id}
}" class="right">{{ card.title }}</router-link>
#route.js 配置
route:[ {
path: '/course/detail/',
name: 'course-detail',
component: CourseDetail
}]
#coursedetail.vue
created(){'''
let id = this.$route.params.pk || this.$route.query.pk;
'''}
5.路由逻辑跳转与传参
通过route-link路由转跳并不是万能的,当激活某个事件,才会发生路由跳转.
<div class="right" @click="goto_detail">{{ card.title }}</div>
普通标签发生路由跳转
export default {
name: "CourseCard",
props: ['card'],
methods: {
goto_detail() {
// 注：在跳转之前可以完成其他一些相关的业务逻辑，再去跳转
let id = this.card.id;
// 实现逻辑跳转
this.$router.push(`/course/detail/${id}`);
// this.$router.push({
// 'name': 'course-detail',
// // params: {pk: id}
// query: {pk: id}
// });
// 在当前页面时，有前历史记录与后历史记录
// go(-1)返回上一页,逻辑返回上一页
// go(2)去向下两页
// this.$router.go(-1)
}
}
}
6.axios安装及请求后台
安装axios
:项目名>cnpm install axios --save
#main.js中配置axios,完成ajax请求
import axios from "axios"
Vue.prototype.$axios = axios
'''
export default {
name: "CourseDetail",
data() {
return {
course_ctx: '',
val: '',
}
},
created() {
let id = this.$route.params.pk || this.$route.query.pk || 1;
this.$axios({
url: `http://127.0.0.1:8000/course/detail/${id}/`,
method: 'get',(默认请求方式为get)
}).then(response => {
console.log('请求成功');
console.log(response.data);
this.course_ctx = response.data;
}).catch(error => {
console.log('请求失败');
console.log(error);
})
}
}
'''
注:开发时需要将django中csrf禁用
7.vue-cookie的使用
:项目名>cnpm install vue-cookie --save
#main.js配置cookie,完成数据的存储(可以设置过期时间)
import cookie from "vue-cookie"
Vue.prototype.$cookie = cookie
'''
created() {
console.log('组件创建成功');
let token = 'asd1d5.0o9utrf7.12jjkht';
// 设置cookie默认过期时间单位是1d(1天),以key:value形式存储
this.$cookie.set('token', token, 1);
},
mounted() {
console.log('组件渲染成功');
let token = this.$cookie.get('token');
console.log(token);
},
destroyed() {
console.log('组件销毁成功');
//删除cookie时,将key值为空
this.$cookie.delete('token')
}
'''
8.element-ui的使用
安装
https://element.eleme.cn/#/zh-CN/component/installation
#main.js配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
