一.路由跳转
1.1 项目的初始化
vue create m-proj >>>创建vue项目
精简vue项目的
views 视图 About(基本是删除的) Home.(可以作为主业去设置 搭建一些基本的样式)
src 下创建一个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
```