一.路由跳转
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
```