1. 必要的環境、軟件安裝配置

安裝node.js
安裝編輯器pycharm和webstorm
安裝谷歌瀏覽器
npm換源

npm config set registry https://registry.npm.taobao.org
npm config get registry
npm install -g vue-cli

2. 腳手架創建、使用webstorm打開瀏覽瞭解具體內容

創建腳手架

vue init webpack vueproject
項目名稱,項目描述,作者等4個回車
只安裝vue-router,其他全是n
使用npm來安裝,y

運行項目

cd vueproject
npm run dev

3. 路由、來看看前端是如何路由的

src裏目錄結構

assets:靜態文件
component:放組件的
router:路由
App.ve:頁面入口文件
main.js:程序入口文件，加載各種公共組件

創建路由

新建一個組件User.vue

<template>
	<div id="user">
		{ { page_info } }
	</div>
</template>
<script>
	export default {
		name: "User",
		data(){
			return {
				page_info: "this User page"
			}
		}
	}
</script>
<style scoped>
</style>

在router/index.js中配置User路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user',
      name: 'User',
      component: User,
    }
  ]
})

在App.vue中應用路由/和/user

<template>
  <div id="app">
    <img src="./assets/logo.png"><br />
    <router-link to="/">Root</router-link>
    <router-link to="/user">User</router-link>
    <hr />
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4. 發送請求前的準備工作, 搭建django運行環境

創建django項目

用pycharm直接創建django項目webproject,應用mysite
初始化數據庫python manage.py migrate

修改settings.py

允許所有主機訪問ALLOWED_HOSTS = ['*']
註釋掉'django.middleware.csrf.CsrfViewMiddleware',
語言改成中文LANGUAGE_CODE = 'zh-Hans'
時區改爲上海TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False
運行項目python manage.py runserver
靜態文件改爲前後端分離的STATIC_URL = '/api/static/'

配置URL路由

總路由

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
	path('admin/', admin.site.urls),
	path('api/', include("mysite.urls"))
]

子路由

from django.urls import path
from mysite import views

urlpatterns = [
	path("test/", views.test)
]

視圖函數

from django.http import JsonResponse

def test(request):
	return JsonResponse({"status": 0, "message": "this is message"})

在瀏覽器中訪問http://127.0.0.1:8000/api/test/

5. 初探django 跨域代理並使用axios請求django數據

安裝axiosnpm install axios --save

在main.js中註冊axios

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.use(axios);
Vue.config.productionTip = false
Vue.prototype.$axios = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在User.vue中接收後端傳過來的數據

<template>
	<div id="user">
		{ { page_info } }
	</div>
</template>
<script>
	export default {
		name: "User",
		data(){
			return {
				page_info: "this User page"
			}
		},
    created() {
      this.$axios.get("/api/test/")
        .then(response => {
          console.log(response.data)
        })
    }
	}
</script>
<style scoped>
</style>

解決跨域問題,修改config/index.js

proxyTable: {
  '/api': {
    target: 'http://127.0.0.1:8000/api/', //接口域名
    changeOrigin: true, //是否跨域
    pathRewrite: {
      '^/api':'' ,//需要rewrite重寫的
    }
  }
},

訪問http://localhost:8080/#/user就能接到數據了,但是還不能顯示出來

6. 從數據庫取數據給vue渲染表格

修改User.vue把後端傳過來的數據顯示出來

<template>
	<div id="user">
		{ { page_info } }
    <br />
    { { django_message } }
	</div>
</template>
<script>
	export default {
		name: "User",
		data(){
			return {
				page_info: "this User page",
        django_message: ""
			}
		},
    created() {
      this.$axios.get("/api/test/")
        .then(response => {
          this.django_message = response.data.message
        })
    }
	}
</script>
<style scoped>
</style>

在models.py中創建Stu表

from django.db import models

# Create your models here.
class Stu(models.Model):
	id = models.IntegerField(primary_key=True,auto_created=True)
	name = models.CharField(max_length=200)

生成遷移文件python manage.py makemigrations
執行遷移文件python manage.py migrate

在models.py中註冊Stu表

from django.contrib import admin
from . import models

# Register your models here.
admin.site.register(models.Stu)

創建超級管理員python manage.py createsuperuser,用戶名caoyang,密碼Mm23456
運行項目,訪問127.0.0.1:8000/admin/login
往學生表中添加幾個用戶

在views.py中返回表中數據

from django.http import JsonResponse
from .models import Stu

# Create your views here.
def test(request):
	return JsonResponse({"status": 0, "message": "this is django_message"})

def ret_user(request):
	if request.method == "GET":
		db = Stu.objects.all()
		db = [i.name for i in db]
		return JsonResponse({"status":0,"data":db})
	else:
		return JsonResponse({"status":1,"message":"you need GET method"})

配置子路由path("user/",views.ret_user)
訪問http://127.0.0.1:8000/api/user/就能返回數據了

修改前端界面User.vue

<template>
	<div id="user">
		{ { page_info } }
    <br />
    { { django_message } }
    <br />
    <table>
      <tr>
        <th>user</th>
      </tr>
      <tr v-for="user in user_list" :key='user'>
        <td>{ { user } }</td>
      </tr>
    </table>
	</div>
</template>
<script>
	export default {
		name: "User",
		data(){
			return {
				page_info: "this User page",
        django_message: "",
        user_list: [],
			}
		},
    created() {
      this.$axios.get("/api/test/")
        .then(response => {
          this.django_message = response.data.message
        });
      this.$axios.get("/api/user/")
        .then(response => {
          this.user_list = response.data.data
        })
    }
	}
</script>
<style scoped>
</style>

訪問http://localhost:8080/#/user即可接受到數據了

7. django序列化json數據方便vue識別

在views.py中導入from django.core import serializers序列化的模塊,可以將queryset轉化爲json

修改ret_user視圖函數,訪問http://127.0.0.1:8000/api/user/

def ret_user(request):
	if request.method == "GET":
		json = serializers.serialize("json",Stu.objects.all())
		return JsonResponse({"status":0,"data":json})
	else:
		return JsonResponse({"status":1,"message":"you need GET method"})

修改前端界面User.vue,訪問http://localhost:8080/#/user

<template>
	<div id="user">
		{ { page_info } }
    <br />
    { { django_message } }
    <br />
    <table>
      <tr>
        <th>id</th>
        <th>user</th>
      </tr>
      <tr v-for="user in user_list" :key='user'>
        <td>{ { user.pk } }</td>
        <td>{ { user.fields.name } }</td>
      </tr>
    </table>
	</div>
</template>
<script>
	export default {
		name: "User",
		data(){
			return {
				page_info: "this User page",
        django_message: "",
        user_list: [],
			}
		},
    created() {
      this.$axios.get("/api/test/")
        .then(response => {
          this.django_message = response.data.message
        });
      this.$axios.get("/api/user/")
        .then(response => {
          this.user_list = JSON.parse(response.data.data)
        })
    }
	}
</script>
<style scoped>
</style>

Vue CLI搭配Django快速開發前後端分離項目

1. 必要的環境、軟件安裝配置

2. 腳手架創建、使用webstorm打開瀏覽瞭解具體內容

3. 路由、來看看前端是如何路由的

src裏目錄結構

創建路由

4. 發送請求前的準備工作, 搭建django運行環境

創建django項目

修改settings.py

配置URL路由

5. 初探django 跨域代理並使用axios請求django數據

6. 從數據庫取數據給vue渲染表格

7. django序列化json數據方便vue識別

生動理解Java面向對象

關係型數據庫和非關係型數據庫的區別與聯繫

JetBrains公司軟件版本控制

計算機英語常見縮寫總結

GitHub開源項目合作流程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Vue CLI搭配Django快速開發前後端分離項目

1. 必要的環境、軟件安裝配置

2. 腳手架創建 、使用webstorm打開瀏覽瞭解具體內容

3. 路由、來看看前端是如何路由的

src裏目錄結構

創建路由

4. 發送請求前的準備工作, 搭建django運行環境

創建django項目

修改settings.py

配置URL路由

5. 初探django 跨域代理 並使用axios請求django數據

6. 從數據庫取數據給vue渲染表格

7. django序列化json數據方便vue識別

2. 腳手架創建、使用webstorm打開瀏覽瞭解具體內容

5. 初探django 跨域代理並使用axios請求django數據