Vue --- 前后台总结

请求生命周期：

1.先请求路由，在去替换APP.vue中的router-views

2.@表示src

3.加载全局css：

require('@/assets/....')

4.获取当前路由

this.$route.path   # 控制数据相关

5.切换到指定的路由

this.$router.push('/')   # 控制路由相关

6.清除最后一个框的margin

# 第一种
.car-tag:nth-child(5n){margin-right:0}   # 清除第五个框右边的margin

# 第二种
body.car-tag:nth-child(5n) a {margin-right:0}

7.css参数

display:none
    
width:100vw;   # vw屏幕宽度，按照百分比
height:100vh;   # vh屏幕高度，按照百分比

8.路由传参

# 获取路由中的pk值
this.$route.query.pk
this.$route.params.pk

9.django后端设置

更改时区语言

# ap：国际化配置
# TODO 国际化配置
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

标记，会提示上次写到哪里了

# TODO    #全局注释

10.vue安装ajax插件：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',
    }).then(response => {     // 成功后的操作，使用then
        console.log(response);
    }).catch(error => {  // 网络状态码为4xx、5xx，失败使用catch
        console.log(error);
    }); 
"""

11.CORS跨越问题（同源策略）

"""
同源：http协议相同，ip服务器地址相同，app应用端口相同

跨域：协议，ip地址，应用端口有一个不同，就是跨域

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

12.前后端进行数据交互的时候前端发生数据异常的处理

# 可以看到报错的信息
.catch(error => {console.log(error.response);}

13.数据包形式

GET:拼接参数
PORT:数据包参数

14.前端发送ajax数据给后台的方式

created() {
            // 完成ajax请求后台，获得数据库中的数据
            this.$axios({
                url: this.$settings.base_url + '/cars/',
                method: 'post',
                params: {  // url拼接参数：任何请求都可以携带
                    a: 1,
                    b: 2,
                    c: 3
                },
                data: {  // 数据包参数：只有get请求是无法携带的，但请求最快
                    x: 10,
                    y: 20,
                }
            }).then(response => {
                // console.log('正常', response);
                this.cars = response.data;
            }).catch(error => {  // 网络状态码为4xx、5xx
                console.log('异常', error.response);
            });
        }


# 后端接收
request.method
request.GET
request.POST
request.body   # 所有原始的数据包

15.后端见数据库字段 models

# 关于价格
price = models.DecimalField(max_digits=11, decimal_places=2)

# 关于图片
img = models.ImageField(upload_to='car', default='default.jpg')

# 其他配置
class Meta:
   db_table = 'old_boy_car'
   verbose_name = '汽车'
   verbose_name_plural = verbose_name

def __str__(self):
    return self.title

16.开设静态资源media

# settings中

# media
MEDIA_URL = '/media/'

# 项目media文件夹的绝对路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')


# urls中
from django.conf import settings  # 指向系统的settings文件

url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),

17.app注册

app注册作用是在反射的时候使用

18.拼接图片路径

from django.conf import settings

# settiongs中MEDIA_URL = '/media/'

for car in car_list:
    car['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car.get('img')))

19.vue中js全局配置

# assets >>> js >>> settings.js中进行配置
export default {
    base_url: 'http://127.0.0.1:8000'
}


# main.js中进行全局配置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;


# 使用导入
this.$settings.base_url + '需要拼接的路径',

20.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）使用：
    灵魂：复制粘贴
    
"""

21.Vue配置bootscript

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"

21.Vue中的实例成员

v     el     挂载点

data:{}   存放数据

methods:{}  定义函数,方法

delimiters:[]   分隔符

computed:{}    计算
    
watch:{}    监听
    
props:[ ]   通过字符串获取标签中属性变量对应的值

22.Vue中的指令

# 属性指令
v-bind:属性名=变量名  或  :属性名=变量名         

# 事件指令
v-on:时间名=变量名  或  @事件名=变量名

# 文本指令
{{ }}
v-text
v-html
v-once
    
# 表单指令
v-model=变量名

# 条件指令
v-show
v-if    v-else-if    v-else

# 循环指令
v-for

23.关于vue重点 $ 使用

# 自定义事件调用
this.$emit('自定义的事件名'，'需要传入的参数')

# router的逻辑跳转
this.$router.push('跳转的路径')

# router返回前进操作
this.$router.go(-1)   负为后退，正为前进

24.APP.PY

<router-view></router-view>      路由占位符

Vue --- 前后台总结

猜你喜欢