使用vue+django寫一個我的版博客(1)

首先 咱們先建立一個vue項目 使用 vue init webpack  」項目名稱「 命令 建立完後

該項目基於element來構建的因此須要npm i element-ui -S

而後在main.js裏寫一下內容

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);new Vue({

  el: '#app',

  render: h=> h(App)

});

 

各文件的含義

而後咱們配置一個發送請求的公共方法，在js裏建立request.js  這裏須要 npm install axios 和 npm install qs

import axios from 'axios'

import qs from 'qs'

const httpService = axios.create({

    baseURL:'http://127.0.0.1:8000',

    // timeout:3000

})

httpService.interceptors.request.use(

    config => {

        if (true) {

            // config.headers['User-Token'] = ''

        }

        return config

    },

    error => {

        Promise.reject(error)

    }

)

// respone攔截器

httpService.interceptors.response.use(

    response => {

        // 統一處理狀態

        return response.data;

    }

)

/*網絡請求部分*/

/*

 *  get請求

 *  url:請求地址

 *  params:參數

 * */

export function get(url, params = {}) {

    return new Promise((resolve, reject) => {

        httpService({

            url: url,

            method: 'GET',

            params: params

        }).then(response => {

            resolve(response);

        }).catch(error => {

            reject(error);

        });

    });

}

/*

 *  post請求

 *  url:請求地址

 *  params:參數

 * */

export function post(url, params = {}) {

    return new Promise((resolve, reject) => {

        httpService({

            url: url,

            method: 'POST',

            data: qs.stringify(params),

            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }

        }).then(response => {

            console.log(response)

            resolve(response);

        }).catch(error => {

            reject(error);

        });

    });

}

/*

 *  文件上傳

 *  url:請求地址

 *  params:參數

 * */

export function fileUpload(url, params = {}) {

    return new Promise((resolve, reject) => {

        httpService({

            url: url,

            method: 'post',

            data: params,

            headers: { 'Content-Type': 'multipart/form-data' }

        }).then(response => {

            resolve(response);

        }).catch(error => {

            reject(error);

        });

    });

}

export default {

    get,

    post,

    fileUpload

}

文件建立好之後再main.js中配置

import axios from './js/request'

Vue.prototype.$ajax = axios

配置好後 咱們之後發送請求就能夠直接使用

 this.$ajax.post("',{}).then((res) => {

            if (res.status == 1) {

            } else {

            }

})

接下來就是咱們的頁面的設計和路由配置了

咱們在components文件夾下建立home.vue

<template>

  <el-container :style="`height:${bodyHeight}px`">

    <navCom></navCom>

    <el-main>

      <div style="margin-top: 15px;">

        <el-input placeholder="請輸入內容" v-model="searchCon" class="selInp">

          <el-button slot="append" icon="el-icon-search"></el-button>

        </el-input>

      </div>

      <el-divider></el-divider>

      <ul>

        <li>

          <p class="mainTitle">標題標題</p>

          <p class="mainCon">asdasdasdasdasdasdasdsadasdasdasdsadasdasdasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdsadasdasdasdsadasdsadasdasdasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdsadasdasdasdsadasdsadasdsadasdasdasdasdasdsadasdasdasdsadasdsadasdasdasdsadasdasdasdsadasdsad</p>

          <p class="mainFoot"><a>做者</a><a>發佈時間</a><a>文章類型</a></p>

        </li>

      </ul>

    </el-main>

    <el-footer>Footer</el-footer>

  </el-container>

</template>

<script>

import navCom from '../components/publicComponent/nav'

import '../css/home.css'

export default {

  name: "home",

  data() {

    return {

      bodyHeight:document.body.clientHeight,

      searchCon: "",

    };

  },

  methods: {

 

  },

  mounted(){

 

  },

  components:{

    navCom

  }

};

</script>

<style scoped>

  .el-divider--horizontal{

    margin: 15px 0;

  }

</style>

其中導航部位的代碼能夠是共通的因此咱們把它提出來做爲一個組件使用

在剛剛那個文件夾下建立一個publicComponent文件夾這裏咱們放入咱們的公共組件

在這個文件夾下建立nav.vue

<template>

  <div>

    <el-header>

      <el-menu

        :default-active="activeIndex"

        class="el-menu-demo"

        mode="horizontal"

        @select="handleSelect"

        background-color="#545c64"

        text-color="#fff"

        active-text-color="#ffd04b"

      >

        <el-menu-item :index="item.id" v-for="(item,i) in menuList" :key="i">{{item.label}}</el-menu-item>

      </el-menu>

      <p class="funP" v-if="userInfo == null">

        <a @click="toLogin">登錄</a>

      </p>

       <p class="funP" v-else>

        <a @click="tg">投稿</a>

        <el-divider class="divider" direction="vertical"></el-divider>

        <a @click="tg">{{userInfo.nickname}}</a>

        <el-divider class="divider" direction="vertical"></el-divider>

        <a @click="toLogin">退出</a>

      </p>

    </el-header>

  </div>

</template>

<script>

export default {

  data() {

    return {

      menuList: [

        {

          label: "html",

          id: "1"

        },

        {

          label: "css",

          id: "2"

        },

        {

          label: "javascaript",

          id: "3"

        },

        {

          label: "vue",

          id: "4"

        },

        {

          label: "插件",

          id: "5"

        }

      ],

      activeIndex: "1",

      userInfo:JSON.parse(localStorage.getItem('userInfo'))

    };

  },

  methods:{

    handleSelect(key, keyPath) {

      console.log(key, keyPath);

    },

    toLogin() {

      this.$router.push({

        name: "login"

      });

    },

    tg(){

      this.$router.push({

        name:'contribution'

      })

    }

  },

  mounted(){

 

  }

};

</script>

<style scoped>

.el-header{

    height: 102px !important;

    padding: 0;

    box-shadow: -1px 2px 5px #888888;

    margin: 0 0 15px 0;

}

.funP{

    padding: 0 10px;

}

</style>

這裏放上代碼

而後在router文件夾的index.js下配置路由

import Vue from 'vue'

import Router from 'vue-router'

import home from '@/components/home'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'home',

      component: home

    }

  ]

})

這樣咱們的一個首頁就能運行起來了

下期咱們將django的項目建立及數據庫的遷移

關注個人關注號回覆"博客"獲取免費源代碼

 

 

公衆號