day69

zoukankan html css js c++ java

day69
目录
复习
vue的ajax插件：axios
CORS跨域问题（同源策略）
Vue配置ElementUI
Vue配置jq+bs：
分离的前后端交互
国际化配置
复习
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的样式，
查看全文

相关阅读:
Dubbo服务提供者Provider启动流程下(四)
修改超链接的默认格式
 给 3Com 3C940 Gigabit LOM 安装Windows Server 2008 驱动
 Express版SQL定时备份BAK文件（SQL2005，SQL2008）
DataGridView的行、列调整
 更新DNS缓存
 VB.Net类型转换——全角半角间转换（StrConv）
VB.Net 获取或者转换时间不受系统时间格式影响
 Active Desktop
VB.Net类型转换——全角半角间转换（StrConv）

原文地址：https://www.cnblogs.com/gfhh/p/12081047.html

复习

vue的ajax插件：axios

CORS跨域问题（同源策略）

Vue配置ElementUI

Vue配置jq+bs：

分离的前后端交互

国际化配置