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>

种树y

发布了13 篇原创文章 · 获赞 12 · 访问量 1353

私信关注

Vue CLI搭配Django快速开发前后端分离项目

1. 必要的环境、软件安装配置

2. 脚手架创建、使用webstorm打开浏览了解具体内容

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

src里目录结构

创建路由

4. 发送请求前的准备工作, 搭建django运行环境

创建django项目

修改settings.py

配置URL路由

5. 初探django 跨域代理并使用axios请求django数据

6. 从数据库取数据给vue渲染表格

7. django序列化json数据方便vue识别

猜你喜欢

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数据