day69

その他 2019-12-22 21:55:25 訪問数: null

ディレクトリ

レビュー

  1. 環境

    ノード：公式サイトには、インストールパッケージをダウンロードし、インストールを欺くために - https://nodejs.org/zh-cn/ =>は、NPMに基づいています

    cnpm：NPMインストール-g cnpm --registry = HTTPS：//registry.npm.taobao.org

    VUE / CLI：cnpmインストール-g @ VUE / CLI

  2. プロジェクトの作成

    CD収納プロジェクトディレクトリ

    VUEは、組立設置するプロジェクト名=>バベル、VUE-ルータ、vuexを作成します

  3. コンフィギュレーション・プロジェクト開始

    pycharm開いているプロジェクト、コンフィギュレーション・NPM開始

  4. main.jsロード完了VUE環境、ルートコンポーネントをレンダリング終了し、ロードVUE-ルータ、VUE環境負荷カスタマイズされた環境

  5. VUE-ルータコンフィギュレーションルーティング

    <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. コンポーネントのライフサイクルをフック：作成からノードコールバックの特別な時間で破壊のライフサイクル全体の組立方法

    作成（）{}完全な背景データ要求

    （）{非常に時間がかかり、要求されたデータをバックを完了する}を搭載

  7. プロトタイプのJS

    Vue.prototype.count = 100

    すべてのVueのインスタンスは、カウントにアクセスすることができます

アヤックスプラグインのVUE：axios

1、（プロジェクトディレクトリ内になければなりません）プラグインをインストールします。

ターミナルコマンド入力ボックスコードで：

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)

////代表安装成功

V-PROJの先端プロジェクトmain.jsに配置された2

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アドレス、アプリケーションポートに同じアプリ

クロスドメイン：プロトコル、IPアドレスが、別のポートを使用して、ある、クロスドメイン

デフォルトの同一生成元ポリシー、クロスドメインの問題ジャンゴ

ジャンゴソリューション：

CORSに従いジャンゴモジュール

pip install django-cors-headers

設定で登録モジュールは、ミドルウェア構成されました：

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

今度はクロスドメインの設定を許可します

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"]
            })
        ]
        }
};

ブートストラップ

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

国際化の設定

ALL

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"]
            })
        ]
    }
};

新しいsettings.js下のコード/ V-PROJ / SRC /資産/ 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

新プロジェクトは、いくつかのことを行う必要があります。

新しいプロジェクトapp.vueファイルVUEは、5つのコードを固定した後、

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

パブリックフォルダのインデックスファイル、

<html lang="zh">

「../views/Home」から最後のインポートホーム用.vueインデックス内のルータを削除します

一般HelloWorld.vue内部のコンポーネントには、About.vueとHome.vueファイルのビューを削除するのsrc /資産/ logo.png写真を削除します

新Home.vueファイル、

新しいCSSの下のフォルダの資産、JS、IMGフォルダでは、

ジョブステップ：

新Car.vueファイルビュー、ルータのインデックスファイルのインポートカー

、Nav.vueファイルコンポーネントの作成

インポートホーム・ファイルのインポートからナビ...

車のインポートファイルには、ナビゲーションをインポートします。。。。名前：車の登録とNAV

NAV、プレースホルダ、新しいグローバルファイル、CSSファイルを追加し、次のコードを書きます

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

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

cssファイル上記の導入を必要とするために利用Main.js、

文書内のnav-定義されたスタイル

<style scoped>
    .nav {
        height: 60px;
        background-color: #eee;
    }
    .nav ul {
        width: 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>

ページのレンダリングは、ホームファイル内のスパンで書かれた内容を追加し、あなたも、それらを区別するために、背景色を追加することができ、その後、車です

スパン結合事象に設定したレイアウトは、クリックしてジャンプを達成するために、スクリプトで記述された別のページ、書き込みロジックコードにジャンプします。

コンポーネントのフォルダに新しいCarTagファイル、設定されたスタイル

IMGファイル、画像を追加cardetailファイルにビューを作成し、スタイルを設定し、index.jsでルートを追加するには、よく知られたグループ設定：PKを

車のタイトル文書に車を追加し、ジャンプページを完了するためには画像をクリックし、cardetailファイルの画面の幅と高さのセット、のページのうち、ズームに変更されることはありません

プロジェクトの準備ジャンゴ背景、新しいプロジェクト良いのVUE、新しいDjangoのプロジェクトd_projは、車でのルーティングのURLを追加し、プロジェクトを実行することができますディレクトリを開き、

オフCSRF django.httpインポートJsonResponseモジュール、ミドルウェア設定NOTEから導入Get_cars関数がビューで定義され、

コンフィギュレーション・国際化を変更

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

その後、URLのルートが最初のコメントを追加する前に、そしてプロジェクトを実行する、あなたは、ページDjangoの登録が成功ドライブを表示することができるようになります

車のファイルに作成（）を示している：データベースでの取得データへの完全な背景AJAXリクエストを

書かれたcardetailファイル詳細ページロジック、ファイル内のコードを書くには、#TODO位置に直接コメントを配置することができます

そして、（プロジェクトディレクトリの下になければなりません）プラグインをインストールします。

ターミナルコマンド入力ボックスコードで：

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)

////代表安装成功

V-PROJの先端プロジェクトmain.jsに配置された2

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

「axios」からインポートaxios

vue.prorotype ......

フロントエンドの車へのファイルこれ。$ Axios（{...}）に配置されたURLを、要求されたデータが返され、後端ビューでの印刷情報、

CORSクロスドメインの問題（同一生成元ポリシー）

相同：HTTP同じプロトコル、同じサーバのIPアドレス、アプリケーションポートに同じアプリ

クロスドメイン：プロトコル、IPアドレスが、別のポートを使用して、ある、クロスドメイン

デフォルトの同一生成元ポリシー、クロスドメインの問題ジャンゴ

ジャンゴ・ソリューション、Djangoのプロジェクトのインストール

pip3 install django-cors-headers

ターミナルコマンド入力ボックスコードで：

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:\python\lib\site-packages (from django-cors-headers)
Requirement already satisfied: pytz in e:\python\lib\site-packages (from Django>=1.11->django-cors-headers)
Installing collected packages: django-cors-headers
Successfully installed django-cors-headers-3.2.0

次いで、中間体の後端部に（ミドルウェア）の設定を加え、

'corsheaders.middleware.CorsMiddleware',

Corsheadersは、上で紹介した輸入corsheadersミドルウェア

「corsheaders」の上にミドルウェアに登録し、次のミドルウェアで開いてクロスドメイン・リソースを追加しますCORS_ORIGIN_ALL =真を

DjangoのプロジェクトCORSは、登録モジュール構成ミドルウェア、オープン許容クロス（PIP3ジャンゴ-CORS-ヘッダをインストール）モジュールを搭載しました

自動車バックAJAXリクエストの先端に設けられ、データベースに得られたデータは、データを返すことは正常であるか異常です

設定されたURLのパラメータは、GETリクエストデータを運ぶことができない、一例を運ぶことができる任意の要求、削除要求スプライシング、データパケットのパラメータを、paramsは

ジャンゴで定義された車のクラスのバックエンドモデルでは、継承モデルの追加タイトル、価格、IMG、情報（詳細フィールド、大きなテキスト）フィールド

メソッド定義されたメタ、反射法で定義されたクラスの車、

新しいメディアフォルダのルートに、コンフィギュレーション・ファイルの絶対パスに設定に移動

MEDIA_ROOT = os.path.join（BASE_DIR、 'メディア'）

URLで定義されたルーティングのURL

URL（r'media /（？P 。*） 'サーバー{' decoument_root「：}）、django.views.staticインポートサーバーからのインポートファイル

インポート設定をdjango.congからインポートファイルに進みます

そして、admin.py django.contribインポート管理から導入行きます

admin.site.register（models.Car）、その後スーパーユーザを作成するために、データベース移行コマンドを実行し、

管理者ユーザでログインした後、データエントリー、

すべての車のバックグラウンドデータが返され、車は、インターフェースとレンダリング（グローバルJS構成）詳細

cardetailファイルでは、主キー、主キーが存在しない場合は、何を決定し、直接法の端を作成して来た車を経由してルーティングすることができます

次のように主キーを要求します背景には、新しいJSファイルが存在します：

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

carDetailの決意のcar.msgのグローバルCSSに設けMain.js、JS、

Vueの設定elementUI、新しい要素ファイルビュー、

ブートストラップによって24部、12部のレイアウト要素：要素とストラップとの間の差

設定したレイアウト、スタイル、ファイルボックス内の弾性要素など

jQueryの、ターミナルボックス内のブートストラップコマンドをインストールします。

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ブートストラップ構成は、構成のjQueryを提供しました

プロジェクトを再起動し、ブートストラップのスタイルを追加することができ、

おすすめ

転載: www.cnblogs.com/gfhh/p/12081047.html
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com