day69

目录

复习

  1. 环境

    node:官网下载安装包，傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm

    cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

    vue/cli：cnpm install -g @vue/cli

  2. 项目创建

    cd 存放项目的目录

    vue create 项目名 =>需要安装的组件babel、vue-router、vuex

  3. 配置项目启动

    pycharm打开项目，配置npm启动

  4. main.js完成vue环境加载、完成根组件的渲染、加载vue-router、vue等环境、加载自定义环境

  5. vue-router配置路由

    <router-link to=""></router-link> | this.$router.push()完成跳转
<router-view/> 完成页面组件的占位
在router/index.js中 完成路由配置  路径-视图组件  映射关系
两种路由传参
配置				       跳转               获取
path：'/user'       to='/user?pk=1'     $router.query.pk  
path：'/user/:pk'   to='/user/1'        $router.params.pk  

:to="{name:'user'}"

  6. 组件声明周期钩子：组件从创建到销毁的整个生命周期中特殊时间节点回调的方法

    created() {完成后台数据的请求}

    mounted(){完成极其耗时的后台数据请求}

  7. js原型

    Vue.prototype.count = 100

    所有Vue实例都可以访问count

vue的ajax插件：axios

1、安装插件（一定要在项目目录下）：

在Terminal命令框中输入代码：

cnpm install axios

D:python12期day67代码d_proj>cnpm install axios
√ Installed 1 packages
√ Linked 4 latest versions
√ Run 0 scripts
√ All packages installed (5 packages installed from npm registry, used 2s(network 2s), speed 80.5kB/s, json 5(1
5.93kB), tarball 107.87kB)

////代表安装成功

2、在前端项目v-proj的main.js中配置

在任何一个组件的逻辑中发送ajax请求：

this.$axios({
	url:'http://127.0.0.1:8000/cars/',
	method:'get',
}).then(response =>{
	console.log(response);
	//this.cars = response.data;
}).catch(error => { //网络状态码为4xx、5xx
	console.log(error);
});

CORS跨域问题（同源策略）

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

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

django默认是同源策略，存在跨域问题

django的解决方案：

django按照cors模块

pip install django-cors-headers

在settings注册模块，配置中间件：

   INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

在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. 使用

    cv大法

Vue配置jq+bs：

JQuery

cnpm install jquery

vue/cli 3 配置jQuery:在vue.config.js中配置（没有，手动项目根目录下新建）

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中配置

js
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

分离的前后端交互

后台处理跨域

安装插件

pip install django-cors-headers

插件参考地址：https://github.com/ottoyiu/django-cors-headers/

项目配置：dev.py

注册app
INSTALLED_APPS = [
	...
	'corsheaders'
]
添加中间件
MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]
允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

国际化配置

TODO

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'   
USE_TZ = False

在项目根目录新建vue.config.js文件

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

在代码/v-proj/src/assets/js/下新建settings.js

export default {
    base_url: 'http://127.0.0.1:8000'
}
注意：所有的js文件，开头都是export default

url: this.$settings.base_url + '/cars/',
url拼接参数：任何请求都可以携带
data：{} //数据包参数：get请求是无法携带的

created（）{}   //可以拿到路由传递来的car主键
let pk = this.$route.query.pk || this.$route.params.pk;
主键不存在，就直接结束方法
if （！pk） return false；
主键存在才求后台

vw:屏幕宽度   
vh：屏幕高度
不会随页面的改变而改变，是固定的
json可以解码翻译页面上的英文，可以设置为中文
asill先设置为false

新建的项目需要做的一些事情：

以后新建的vue项目app.vue文件里固定五句代码

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

public文件夹中的index文件，

<html lang="zh">

去掉router中的index的.vue最后为 import Home from '../views/Home'

一般把components里面的HelloWorld.vue删除，views中的About.vue和Home.vue文件，删除src/assets/logo.png图片

新建Home.vue文件,

在assets文件夹下新建css、js、img文件夹，

作业步骤：

在views中新建Car.vue文件，在router的index文件中导入Car

在components中创建Nav.vue文件，

在home文件中导入import Nav from...

去car文件中导入import Nav。。。。名字：car和注册nav

nav中添加占位符，在css文件中新建global文件，写以下代码

html,body,h1,h2,h3,h4,h5,h6,p,ul{
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}

a {
    color: black;
    text-decoration: none;
}

去main.js中利用require导入上面的css文件，

在Nav文件中定义样式

<style scoped>
    .nav {
        height: 60px;
        background-color: #eee;
    }
    .nav ul {
         1100px;
        margin: 0 auto;
    }
    .nav li {
        float: left;
        padding: 15px 20px 0;
    }
    .nav a {
        border-bottom: 3px solid transparent;
        padding-bottom: 2px;
    }
    .nav a.router-link-exact-active {
        color: orange;
        border-bottom-color: orange;
    }
</style>

然后就是汽车页面渲染，在home文件中添加span里面写内容，也可以给他们添加背景颜色加以区别

设置布局，给span绑定事件，点击就会跳转到另一个页面，在script中写逻辑代码编写实现跳转。

在components文件夹中新建CarTag文件，设置样式

添加图片到img文件中，在views中新建cardetail文件，设置样式，在index.js中添加路由，设置有名分组：pk

在car文件中添加汽车的标题，点击图片完成页面跳转，在cardetail文件中设置屏幕的宽高，不会随着页面的缩小放大变化

后台django项目准备，打开新建好的vue项目所在的目录，新建django项目d_proj，就能运行项目，在urls中添加cars路由，

在views中定义get_cars函数，导入from django.http import JsonResponse模块，settings中注掉csrf中间件，

修改国际化配置

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False

然后先把之前添加的urls路由注释掉，然后运行项目，就能显示成功注册一个django驱动的页面，

在car文件created（）标明：完成ajax请求后台，获取数据库中的数据

cardetail文件中编写，页面详情逻辑，在文件代码中写#TODO可以直接定位你注释的位置

然后安装插件（一定要在项目目录下）：

在Terminal命令框中输入代码：

cnpm install axios

D:python12期day67代码d_proj>cnpm install axios
√ Installed 1 packages
√ Linked 4 latest versions
√ Run 0 scripts
√ All packages installed (5 packages installed from npm registry, used 2s(network 2s), speed 80.5kB/s, json 5(1
5.93kB), tarball 107.87kB)

////代表安装成功

2、在前端项目v-proj的main.js中配置

在任何一个组件的逻辑中发送ajax请求：

this.$axios({
	url:'http://127.0.0.1:8000/cars/',
	method:'get',
}).then(response =>{
	console.log(response);
	//this.cars = response.data;
}).catch(error => { //网络状态码为4xx、5xx
	console.log(error);
});

然后在前端的main.js中配置axios，首先导入axios

import axios from ‘axios’

vue.prorotype......

去前端car文件中this.$axios({.....})设置url，请求，返回数据，在后端views打印信息，

CORS跨域问题（同源策略）

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

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

django默认是同源策略，存在跨域问题

django的解决方案，django项目中安装

pip3 install django-cors-headers

在Terminal命令框中输入代码：

pip3 install django-cors-headers

安装成功显示信息

Collecting django-cors-headers
  Downloading https://pypi.doubanio.com/packages/21/93/b1efe344f5b7e60ea2aa4e54f76d8b50c93d7db73d69dd95e9e97a696
c96/django_cors_headers-3.2.0-py3-none-any.whl
Requirement already satisfied: Django>=1.11 in e:pythonlibsite-packages (from django-cors-headers)
Requirement already satisfied: pytz in e:pythonlibsite-packages (from Django>=1.11->django-cors-headers)
Installing collected packages: django-cors-headers
Successfully installed django-cors-headers-3.2.0

然后在后端的settings中添加（MIDDLEWARE）中间件，

'corsheaders.middleware.CorsMiddleware',

在中间件上面导入corsheaders，import corsheaders

在中间件上面注册‘corsheaders’，在中间件下面添加打开跨域资源：CORS_ORIGIN_ALL = True

在django项目中安装cors模块（pip3 install django-cors-headers），注册模块，配置中间件，开启允许跨域

在前端的car中设置ajax请求后台，获得的数据库中的数据，返回的数据是正常还是异常

设置url的params拼接参数，data数据包参数，get请求无法携带数据，任何请求都可以携带，比如delete请求

在后端django的models中定义car类，继承model添加title，price，img，info（详情字段，大文本）字段

在car类中定义meta方法，定义反射方法，

在根目录下新建media文件夹，去settings文件中配置绝对路径

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

在urls中定义url路由

url（r'media/(?P.*)',server {'decoument_root':}）,导入文件from django.views.static import server

继续导入文件from django.cong import settings

然后去admin.py中导入from django.contrib import admin

admin.site.register(models.Car)，然后执行数据库迁移命令，创建超级用户，

登录admin用户后，录入数据，

后台所有cars数据返回，car详情接口与渲染（全局js配置），

在cardetail文件中可以通过created拿到路由传来的car主键，判断一下，如果主键不存在，就直接结束方法

主键存在才会请求后台，新建js文件，代码如下：

export default {
	base_url = 'http://127.0.0.1:8000'
}

在main.js中设置全局css、js，在carDetail判断car.msg,

Vue配置elementUI，在views中新建Element文件，

element和bootstrap的区别：element布局是24份，bootstrap是12份

在element文件中设置布局，样式，弹框等

在Terminal命令框中安装jQuery,bootstrap

cnpm install jquery
cnpm install bootstrap@3

在根目录创建js文件vue.config，代码如下：

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

在前端main.js中配置bootstrap，前提配置好jQuery，

然后重启项目，可以添加bootstrap的样式，

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gfhh/p/12081047.html