Vue项目
目录
Vue项目请求生命周期
浏览器请求 --> 匹配 router/index.js的组件映射 --> 各种视图组件和小组件渲染完成后替换根组件App.vue中的占位符：<router-view />
路由
router/index.js：
我们可以自定义在views文件夹中定义我们自己的视图组件，然后到对应的路由中配置路由即可
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../views/home.vue'
import car from '../views/car.vue'
import cardetail from '../views/cardetail.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: home
},
{
path: '/car',
name: 'car',
component: car
},
{
path: '/car/detail/:pk',
name: 'cardetail',
component: cardetail
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
配置全局CSS样式
我们可以在assets文件夹中新建几个我们自己的目录：
- css：存放我们的全局css样式文件
- js：存放我们的全局js脚本
- img：存放我们的图片
比如说我们在css文件夹下新建一个global.css的文件：
我们可以在main.js中导入这个全局css样式，全局就能生效
* {
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
ul {
list-style: none;
}
# main.js中
// 配置全局Css
require('@/assets/css/global.css')
子组件的使用
我们可以在components文件夹中定义了一些小组件，比如导航栏什么的组件，我们要使用这些组件，在其他组件中如何导入？
<template>
<div class="course">
<!--3.再使用-->
<Nav></Nav>
<div>课程</div>
</div>
</template>
<script>
// 1.先导入
import Nav from '../components/Nav'
export default {
name: "Course",
// 2.注册
components: {
Nav
}
}
</script>
组件的生命周期钩子函数
- 就是一个组件从被创建之前到被销毁之后之间的时间节点所触发的方法
- 这些钩子都是vue对象的下面的成员(方法)
<script>
import Nav from '../components/Nav'
export default {
data() {
return {
back_data: ''
}
},
components: {
Nav
},
beforeCreate() {
console.log('home组件创建之前')
},
created() {
console.log('home组件被创建之后')
},
beforeMount() {
console.log('home组件加载之前')
},
mounted() {
console.log('home组件被加载之后')
},
destroyed() {
console.log('home组件被销毁后')
}
}
</script>
路由跳转
逻辑跳转
-
this.$router.push('/')跳转到主页 -
this.$router.go(-2)浏览器后退两步 -
this.$route控制路由数据
<script>
export default {
name: "Nav",
methods: {
goHome(){
// this.$route.path当前路径
if (this.$route.path !== '/') {
// 跳转到主页
this.router.push({name: 'home'})
}
}
}
}
</script>
标签跳转
<router-link :to="/" /> 完成标签跳转
Vue的前后台交互插件-axios
"""
1）安装插件(一定要在项目目录下)：
>: cnpm install axios
2）在main.js中配置：
import axios from 'axios'
Vue.prototype.$axios = axios;
3）在任何一个组件的逻辑中发送ajax请求：
this.$axios({
url: 'http://127.0.0.1:8000/cars/',
method: 'get|post|delete|patch|put', // 默认如果写methods是get请求，post请求，默认发送application/json数据格式
params:{携带参数}, // 后台从request.GET获取携带参数
data:{数据包参数}, // 后台从request.body获取数据包参数
headers: {请求头(认证信息)}, // 后台从request.META.get('HTTP_AUTHORIZATION') // HTTP_参数名全大写
}).then(response => { // 请求回调的箭头函数
console.log(response);
// this.cars = response.data;
}).catch(error => { // 异常信息会走此步，比如网络状态码为4xx、5xx
console.log(error);
});
"""
Vue配置全局settings配置文件：
1. 在assets/js文件夹中新建一个settings.js文件，写如下内容，
export default {
base_url : 'http://127.0.0.1:8001'
}
2. 在main.js中写入如下内容
// 配置全局settings配置文件
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings
Django后端CORS跨域问题（同源策略）
"""
同源：http协议相同、ip服务器地址相同、app应用端口相同
跨域：协议、ip地址、应用端口有一个不同，就是跨域
Django默认是同源策略，存在跨越问题。
Django的解决方案：
1）Django安装cors模块：
>: pip install django-cors-headers
2）在settings注册模块，配置中间件：
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
3）在settings开启允许跨越：
CORS_ORIGIN_ALLOW_ALL = True
"""
Vue配置ElementUI插件
"""
1）安装插件(一定要在项目目录下)：
>: cnpm install element-ui
2）在main.js中配置：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3）使用：
灵魂：复制粘贴
"""
Vue配置jq+bs环境
安装插件
jQuery
>: cnpm install jquery
vue/cli 3 配置jQuery：在vue.config.js中配置(没有，手动项目根目录下新建)
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
BootStrap
>: cnpm install bootstrap@3
vue/cli 3 配置BootStrap：在main.js中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
