一.路由跳转
1.1 项目的初始化
vue create m-proj >>>创建vue项目
精简vue项目的
views 视图 About(基本是删除的) Home.(可以作为主业去设置 搭建一些基本的样式)
scr 下创建一个css 作为全局的样式 设置
最后将设置好的全局样式 在mian.js 文件中 导入 作为 项目的入口 类似执行文件(start.py)
基础的完成了
二.路由传参的几种方法
2.1 导航栏的显示设置
<template>
<div class="nav">
<ul><li :class="{active: currentPage==='/'}">
<!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">-->
<!--<a href="/" >主页</a>-->
<router-link to="/">主页</router-link>
</li>
<li :class="{active: currentPage==='/course'}">
<!--<li @click="changePage('/')" :class="{active: currentPage==='/'}">-->
<!--<a href="/" >主页</a>-->
<router-link to="/Course">课程</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Nav",
// changePage()加括号表示有数据需要传参
data(){
return{
// 需要将数据的返回
// 每渲染一个页面，都会出现加载Nav组件，currentPage就会被重置，
// 1）在点击跳转事件中，将跳转的页面用 数据库 保存，在钩子函数中对currentPage进行数据更新
currentPage:'',
}
},
// 方法:
// methods: {
// // 点击事件
// changePage(page){
// // 进行路由的跳转
// this.$router.push(page);
//
//
//
// }
//
// },
// 当前组件加载成功，要根据当前实际所在的路径，判断单选激活标签
cerate(){
// 获取路径 导航栏每被加载一次 被点击的页面 就被显示高量 : 也就是显示
this.currentPage=this.$route.path;
}
}
</script>
<style scoped>
.nav {
width: 100%;
height: 60px;
background-color: dodgerblue;
}
.nav li {
float: left;
padding: 15px 30px;
font: normal 30px/30px '微软雅黑';
}
/*.nav li:hover {*/
/*cursor: pointer;*/
/**/
/*}*/
/*.nav li.active {*/
/*cursor: pointer;*/
/**/
/*}*/
/*!*这里的设置主要为了 我们能搞在导航栏进行 点击一整块 扩大范围*!*/
/*.nav li a {*/
/*display: block;*/
/*height: 30px;*/
/*}*/
.nav li:hover {
cursor: pointer;
background-color: aquamarine;
}
.nav li.active {
cursor: pointer;
background-color: aquamarine;
}
</style>
将导航栏组件() 在 view 中注册
// 将导航栏进行 导入和注册 上面写Nav 标签
import Nav from '@/components/Nav.vue'
export default {
name: 'home',
components: {
Nav,
},
<div class="home">
<Nav></Nav> 引入组件
</div>
2.2 路由进行跳转的四大方法
<template>
<div class="home">
<Nav></Nav>
<!--// 自己设计一个页面跳转-->
<div class="router">
<!--设置路由 设计点击按钮-->
<!--方法 1 path --> 方法
<button type="button" @click="goPage('/course')">课程页</button>
<button type="button" @click="goPage('/')">主页</button>
<!--// 方法 2 go(数字)-->方法
<button type="button" @click="goBack">返回上一页</button>
<!--// 方法3 name -->方法
<!-- 拓展性-->
<button type="button" @click="goPageName('course')">通过name进行跳转</button>
<!--// 方法(4) 将 name router 中的应用--> 运用a标签的特性
<!--//原来的条状 to ='' a 标签的属性-->
<!--<router-link to="/course">课程页的name </router-link>>-->
<!--// 换成变量 {} :to属性的要特别注意 'course' 是取值所以要字符串-->
<router-link :to="{name:'course'}">课程页的name </router-link>>
</div>
<h1>主页</h1>
</div>
</template>
<script>
// 将导航栏进行 导入和注册 上面写Nav 标签
import Nav from '@/components/Nav.vue'
export default {
name: 'home',
components: {
Nav,
},
methods: {
goPage(page) {
// 逻辑跳转 (1)
let currentPage = this.$route.path; // router.path 取值
// 若是home 页面就不让他进行跳转
if (currentPage !==page){
this.$router.push(page)
}
},
// (2)
goBack(){
// ji逻辑使用history 返回上一层
// this.$router.go(-1)
// 返回上量页
// this.$router.go(-2);
// 前进一页
// this.$router.go(1);
// 前进页
// this.$router.go(2);
},
// (3)
// 总结路由跳转的方式 点击事件
goPageName(goPageName){
this.$router.push(goPageName)
}
}
}
</script>
2.2 三种传参方式
<template>
<div class="course-card">
<!--// {{// 变量相关}}-->
<h1 @click="goDetail">{{course.name}}</h1>
<!--方法二:link 直接跳转-->
<router-link :to="`course/${course.id}/detail`">{{course.name}}</router-link>
</div>
</div>
</template>
<script>
export default {
name: "CourseCard",
// 从父标签
// <div class="main">
// <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard>
// </div>
props:['course'],
方法
methods:{
// goDetail(){
// this.$router.push({
// // 跳转到详情页 进行页面详情展示
// name:'course-detail',
// 点击的同时发送id 详情页可以通过param query 获取
//Object fullPath: "/course/detatil"
// hash: ""
// matched: [{…}]
// meta: {}
// name: "course-detail"
// params: {}
// path: "/course/detatil"
// query: {}
// __proto__: Object
// 这是可以 详情页可以进行接收的参数
// 第一种传参方式
// params: {id:this.course.id},
// 第一种传参过去 跳转后页面会刷新
// 第二种传参方式
// query: {id:this.course.id}
// 第一种传参过去 跳转后页面不会刷新
// 第三种常用比较灵活()
goDetail(){
// 跳转到详情页 进行页面详情展显示 >>> 手动拼接不再通过name
// params: {id: "2"} d第三种的话是将 $是前端的站位符号 %s
this.$router.push(`/course/${this.course.id}/detail`)
}
}
}
</script>
<style scoped>
/*// 设置一下 我们课程列表的样式*/
.course-card h1{
width: 250px;
height: 250px;
background-color:lightsalmon;
border-radius: 50%;
font:normal 22px/250px 'STSong';
float: left;
text-align: center;
cursor: pointer;
margin: 20px;
}
</style>
三.vue-cookies 插件的 下载-配置-使用
D:\MY-vue\my-vueprj2>cnpm install vue-cookies
万一安装错了
D:\MY-vue\my-vueprj2>cnpm uninstall vue-cookies
再次安装cnpm install vue-cookies
配置
这里出错了 ???? 回去整理
四.axios -- vue 中的ajax 异步提价数据
安装
D:\MY-vue\my-vueprj2>cnpm install axios
配置
main,js
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false; // 项目的初始化全局样式的配置 import '@/assets/css/global.css' // 配置全局的cookies import cookies from 'vue-cookies' // 直接舍给vue原型 Vue.prototype.$cookies=cookies; // 配置axios 请求后台的ajax import axios from 'axios' Vue.prototype.$axios=axios; new Vue({ router, store, render: h => h(App) }).$mount('#app');
使用
<template>
<div class="test-page">
<Nav></Nav>
<h1>测试页面</h1>
<p>
<input type="text" v-model=" tokenInput">
<button @click="getToken">获取token</button>
</p>
<hr>
<div class="ajax">
<input type="text" v-model="username">
<button @click="ajaxAction">提交按钮</button>
</div>
</div>
</template>
<script>
import Nav from '@/components/Nav.vue'
export default {
name: "TestPage",
components:{
Nav
},
data(){
return{
tokenInput:'',
token:'',
username:'',
}
},
// 获取token
methods:{
getToken(){
// 什么是token
// 谁产生的 后台的存储(session表,文件,缓存) 前台存储cookie
// 怎么用 服务器生成反给 前台 登录认证 登录后的请求
// if (this.token){
// let token=this. tokenInput ;
// // token获取后需要前台自己进行存储cookie
// // 增 查 更改 删
// // 安装vue-cookies
// }
},
// ajax
ajaxAction(){
if (this.username){
//
this.$axios({
url:"http://127.0.0.1:8000/test/ajax",
methods:'get',
// 请求发送数据 下面的参数
params:{
username:this.username,
}
// 回调函数
// 成功是
}).then(function (response) {
console.log(response)
// 失败是 打印
}).catch(function (error) {
console.log(error)
});
data 也可以发数据 方法二
this.$axios({
url:"http://127.0.0.1:8000/test/ajax",
methods:'post',
// 请求发送数据 下面的参数
data:{
username:this.username,
}
// 回调函数
// 成功是
}).then(function (response) {
console.log(response)
// 失败是 打印
}).catch(function (error) {
console.log(error)
})
}
}
}
}
</script>
<style scoped>
</style>
下载-安装-使用
后端提交数据 -=--cookio(跨域问题)同源策略
不是同一服务器发来的请求 拒绝请求 同源策略(CORS)
如何解决
django解决跨域问题
后台安装django-cors-headers 模块
(1) D:\day67_djproj>pip install django-cors-headers)
(2))注册
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app01.apps.App01Config',
'corsheaders'
]
(3) 设置中间件
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware'
]
(4)设置跨域
# 设置苦于问题 允许跨域
CORS_ORIGIN_ALLOW_ALL = True
上线指定 传输的路径
五.element-ui
下载 一定要会用多练啊 在研究一下 老师的视屏
还有就是cookies 的增改 查 删
D:\day67_djproj>npm i element-ui -S
-配置-
main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用
文档
## 路由传参 ### 第一种 ##### router.js ```js routes: [ // ... { path: '/course/:id/detail', name: 'course-detail', component: CourseDetail }, ] ``` ##### 跳转.vue ```vue <template> <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link> </template> <script> // ... goDetail() { this.$router.push(`/course/${this.course.id}/detail`); } </script> ``` ##### 接收.vue ```js created() { let id = this.$route.params.id; } ``` ### 第二种 ##### router.js ```js routes: [ // ... { path: '/course/detail', name: 'course-detail', component: CourseDetail }, ] ``` ##### 跳转.vue ```vue <template> <router-link :to="{ name: 'course-detail', query: {id: course.id} }">{{ course.name }}</router-link> </template> <script> // ... goDetail() { this.$router.push({ name: 'course-detail', query: { id: this.course.id } }); } </script> ``` ##### 接收.vue ```js created() { let id = this.$route.query.id; } ``` ``` export default new Vuex.Store({ state: { title: '默认值' }, mutations: { // mutations 为 state 中的属性提供setter方法 // setter方法名随意，但是参数列表固定两个：state, newValue setTitle(state, newValue) { state.title = newValue; } }, actions: {} }) 赋值 this.$store.state.title = 'newTitle' this.$store.commit('setTitle', 'newTitle') 取值 console.log(this.$store.state.title) ``` ## vue-cookie插件 安装 ``` >: cnpm install vue-cookies ``` main.js 配置 ```js // 第一种 import cookies from 'vue-cookies' // 导入插件 Vue.use(cookies); // 加载插件 new Vue({ // ... cookies, // 配置使用插件原型 $cookies }).$mount('#app'); // 第二种 import cookies from 'vue-cookies' // 导入插件 Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies ``` 使用 ```js // 增(改): key，value，exp(过期时间) // 1 = '1s' | '1m' | '1h' | '1d' this.$cookies.set('token', token, '1y'); // 查：key this.token = this.$cookies.get('token'); // 删：key this.$cookies.remove('token'); ``` 注：cookie一般都是用来存储token的 ```js // 1) 什么是token：安全认证的字符串 // 2) 谁产生的：后台产生 // 3) 谁来存储：后台存储（session表、文件、内存缓存），前台存储（cookie） // 4) 如何使用：服务器先生成反馈给前台(登陆认证过程)，前台提交给后台完成认证(需要登录后的请求) // 5) 前后台分离项目：后台生成token，返回给前台 => 前台自己存储，发送携带token请求 => 后台完成token校验 => 后台得到登陆用户 ``` ## axios插件 安装 ``` >: cnpm install axios ``` main.js配置 ```js import axios from 'axios' // 导入插件 Vue.prototype.$axios = axios; // 直接配置插件原型 $axios ``` 使用 ```js this.axios({ url: '请求接口', method: 'get|post请求', data: {post等提交的数据}, params: {get提交的数据} }).then(请求成功的回调函数).catch(请求失败的回调函数) ``` 跨域问题（同源策略） ```js // 后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 CORS） // 导致跨域情况有三种 // 1) 端口不一致 // 2) IP不一致 // 3) 协议不一致 // Django如何解决 - django-cors-headers模块 // 1) 安装：pip3 install django-cors-headers // 2) 注册： INSTALLED_APPS = [ ... 'corsheaders' ] // 3) 设置中间件： MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware' ] // 4) 设置跨域： CORS_ORIGIN_ALLOW_ALL = True ``` ## element-ui插件 安装 ``` >: cnpm i element-ui -S ``` main.js配置 ```js import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 使用 ``` 依照官网 https://element.eleme.cn/#/zh-CN/component/installation api ```