---恢复内容开始---
内容详细：
1. vue init webpack luffy
2. 安装依赖：
cd luffy
npm install vuex --save 用于：多组件之间数据共享
npm install vue-cookies --save 用于：操作cookie
npm install axios --save 用于：发送ajax请求
3.创建路由
文件写在这里边
注意路由都写在 router:[ 写在这里 以逗号分隔 ]
在 App.vue中的配置
显示的页面效果
第二步：显示类表详情
用v-for 循环显示页面内容并且设置页面标签绑定的url 涉及到显示传过来的图片，每段文字绑定链接，在for循环中绑定链接 路由中接收id
<template> <div> <h4>{{msg}}</h4> <div v-for="item in courseList"> <!--第一种方式 有path:的形式来拼接路径--> <!--<router-link :to="{ path:'/detail/'+ item.id }">{{item.id}},{{item.name}}--> <!--<img class="img" v-bind:src="item.img" alt=""></router-link>--> <!--第二种方方式，用name 和params的方式来拼写链接 这里的to 需要绑定 详解请见下文--> <router-link :to="{ name:'detail',params:{id:item.id}}">{{item.id}},{{item.name}} <img class="img" v-bind:src="item.img" alt=""></router-link> <!--因为图片是从后端传送过来的，所以这里要写 v-bind:来绑定用户发送过来的数据 --> <router-link to="{name}"></router-link> </div> </div> </template> <script> export default { name: 'Course', data() { return { msg: '课程页面', #这里的逗号不能忘记 courseList:[] } },
//访问这个地址的时候，就会 mounted() { this.init() },
//这个函数的意思是要想执行后边的methods中的函数必须先执行它 而这个往往会调用methods中的函数 methods: { init() { this.courseList = [ // 用户发送的静态文件这里要在前边写上 require 这里注意写法 {id: 11, name: '21天学会Python', img: require('../assets/logo.png')}, {id: 21, name: '21天学会Java', img: require('../assets/logo.png')}, {id: 31, name: '21天学会Linux', img: require('../assets/logo.png')}, ] } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .img{width:50px;height:50px } </style>
路由在index.js文件中的写法
{ path: '/detail/:id ', name: 'detail', component: Detail },
////// 与上例中的router-link对比这计
<router-link :to="{ name:'detail',params:{id:item.id}}">{{item.id}},{{item.name}}
这个name就相当于上边的name 这里parmas中的的id的值就相当于上边的后边的 /:id
<img class="img" v-bind:src="item.img" alt=""></router-link>
效果
第三步：获取url中的id并显示相应的内容 显示课程推荐并可以点击显示推荐的内容
知识点：： 这里用到了主动给url 重定向 如何取出用户输入的url中的参数 params的值
<template> <div> <h4>{{msg}}{{currentCouersId}}</h4> <li>课程名称：{{CoureDtail.title}}</li> <li>课程简介：{{CoureDtail.summary}}</li> <h4>课程推荐</h4> <ul v-for="item in recoments"> <!--<li><router-link :to="{name:'detail',params:{id:item.id}}" >{{item.id}}{{item.name}}</router-link></li>-->
//点击触发下边定义好的事件，并将参数传给事件
<li @click="CourentChangeId(item.id)">{{item.id}}{{item.name}}</li> </ul> </div> </div> </template> <script> export default { name: 'Detail', data() { return { msg: '课程详细', //能够从url中去取出 自己在路由中定义的 名字为id的params(参数) 注意这里写的是route 用于显示课程推荐的的详情 currentCouersId:this.$route.params.id, CoureDtail: { title:'', summary:'' }, recoments:[ {id:100,name:'vue'}, {id:200,name:'sql'}, ] } }, mounted(){ this.init() }, methods:{ init(){ this.CoureDtail={ title:'21天学会python', summary:'休想', } }, CourentChangeId(id){ // 1 主动将课程内容根据课程id进行更新 this.currentCouersId=id // 2 再次执行一个init方法将数据刷新上去 this.init() // 注意这里写的是router 要与上边区分开来 // 重要 将url 进行重定向 相当于django中的 redirect this.$router.push({name:'detail',params:{id:id}}) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
第四部：登录
使用vuex组件来生成一个全局的store组件 这个全局的组件中有他的属性和方法， 所以 在任何一个组件中都可以进行调用
使用vue-cookies 组件来对用户登录的数据进行记录和查询
自己写的store组件 重要：
import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'
Vue.use(Vuex)
export default new Vuex.Store({
// 组件中通过 this.$store.state.username 调用 全局属性
state: {
username: Cookie.get('username'),
token: Cookie.get('token'),
//配置全局的api,当我组件中用到相关api 的使用就可以按照此方法引入数据
apiList: {
auth: 'http://127.0.0.1:8000/api/v1/auth/',
courses: 'http://127.0.0.1:8000/api/v1/courses/',
pricePolicy: 'http://127.0.0.1:8000/api/v1/price_policy/',
shopCar: 'http://127.0.0.1:8000/api/v1/shop_car/',
}
},
mutations: {
// 组件中通过 this.$store.commit('saveToken',{username:'alex',token:'sdfsdfsdf'}) 调用 全局的方法
////////////////////////////解读///////////////////////////
/////////////////////结束////////////////////////
//这个适用于登陆的，记录用户输入的用户名和生成的token值，并将信息写入到cookie中去
saveToken(state, userToken) {
state.username = userToken.username;
state.token = userToken.token;
Cookie.set("username", userToken.username, "20min")
Cookie.set("token", userToken.token, "20min")
},
//这个是用于注销的，将信cookie中和state中的息全部清除
clearToken(state) {
state.username = undefined
state.token = undefined
Cookie.remove('username')
Cookie.remove('token')
}
}
})
这里就引入了store中定义的url而且可以url的后边添加params
代码
import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'
Vue.use(Vuex)
export default new Vuex.Store({
// 组件中通过 this.$store.state.username 调用
state: {
username: Cookie.get('username'),
token: Cookie.get('token'),
//白名单
apiList: {
auth: 'http://127.0.0.1:8000/api/v1/auth/',
courses: 'http://127.0.0.1:8000/api/v1/courses/',
pricePolicy: 'http://127.0.0.1:8000/api/v1/price_policy/',
shopCar: 'http://127.0.0.1:8000/api/v1/shop_car/',
}
},
mutations: {
// 组件中通过 this.$store.commit('saveToken',{username:'alex',token:'sdfsdfsdf'}) 调用
//这个适用于登陆的，记录用户输入的用户名和生成的token值，并将信息写入到cookie中去
saveToken(state, userToken) {
state.username = userToken.username;
state.token = userToken.token;
Cookie.set("username", userToken.username, "20min")
Cookie.set("token", userToken.token, "20min")
},
//这个是用于注销的，将信cookie中和state中的息全部清除
clearToken(state) {
state.username = undefined
state.token = undefined
Cookie.remove('username')
Cookie.remove('token')
}
}
})