vue-cli+Django

vue-cli:
1、下载nodejs
2、npm换源
持久使用
npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或npm info express
3、安装脚手架
npm install -g vue-cli
4、创建一个vue的脚手架
可以先 cd desktop【将当前目录切换到桌面】
方便找到创建的脚手架,
npm install -g @vue/cli-init,
vue init webpack vueproject(vueproject是项目名)
5、使用ide打开该项目，npm run dev启动

src

-router:路由
在index.js中添加：
 {
 path: "/user",
 name: "User",
 component: User
}
在App.vue中使用<router-link to="/user">User</router-link>,
使得点击该链接经由路由替换<router-view/>的显示。
 -components:组件,显示界面的子组件
 添加User.vue,name与index.js中的name一致。

App.vue: 显示界面的根组件

使用pip安装Django
使用pycharm新建Django项目，
[location：djangoProject
project name: mysite]
py manage.py migrate ,创建数据库
settings.py :

修改：ALLOWED_HOSTS = ["*"]
# 'django.middleware.csrf.CsrfViewMiddleware',
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
STATIC_URL = '/api/static'--此处选择不更改，
见下文建立数据'/static/'

py manage.py runserver 开启web服务

使用Django项目在服务器端建立数据并准备使用Vue项目获取该数据。
还需更改的另外3个文件：

mysite.views:
from django.http import JsonResponse
# Create your views here.
def test(request):
return JsonResponse({"status":0, "message":"This is Django Message"})
---------------------------------
mysite.urls:
from django.urls import path
from mysite import views

urlpatterns = [
path("test/", views.test)
]
-------------------------------------
djangoProject.urls:
from django.contrib import admin
from django.urls import path, include


urlpatterns = [
path('admin/', admin.site.urls),
# 在键入''后键入 test,即调用对test的请求，显示数据
# STATIC_URL = '/static/' 因为此处static前面的/可意为
#在该处键入'/'[此时请求为http://127.0.0.1:8000//test]
# 或是''[此时请求为http://127.0.0.1:8000/test]
path('', include("mysite.urls"))
]

启动服务后，浏览器键入http://127.0.0.1:8000/test即可访问到json数据。

使用axios获取django搭建的数据:

main.js:
import axios from 'axios'

//配置使用axios
//Vue.use(axios);
Vue.prototype.$axios = axios
----------------------------
User.vue:
created() {
//发送axios请求，获取数据
 this.$axios.get("/a/test/")
  .then((response) =>{
      console.log(response.data)
  })
}
---------------------------------
config.index.js:
//代理配置表
//只能在开发环境中进行跨域，上线后要进行反向代理nginx设置
proxyTable: {
  //使用'/a'代替target中的地址，
  //这里是告诉node,我的接口只要是使用'/a'开头的才用代理。
  '/a': {
  //测试环境
  //接口域名
  target:'http://127.0.0.1:8000/',
  //如果是https接口，需要配置这个参数
  //secure:true,
  // 该参数用来回避跨站问题，
  // 配置后发请求时会自动修改http header里面的host,但不修改别的
  //解决跨域问题：true:本地会虚拟一个服务端接收你的请求
  //并代你发送该请求--这只适用于开发环境
  changeOrigin: true,
  pathRewrite: {
    '^/a':''
    //因为上面已经告诉/a要使用代理,
    //但真实的请求路径中没有a怎么办？
    //这时候可以在此处将 前缀a 用 ’‘替换即可
  }
  }

从Django自带的数据库获取数据：
在Django项目中创建并获取数据到Django搭建的平台上：[vue渲染，Django从后端取数据]

***mysite.views.py:***
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
-------------------------------------------
//注册
***mysite.admin.py:***
from django.contrib import admin
from . import models

# Register your models here.

admin.site.register(models.Stu)
------------------------------------------------
//创建超级管理员
py manage.py createsuperuser
-----------------------------------------
py manage.py runserver   '/admin 浏览器访问'
---------------------------------------
增加Stu数据
---------
***mysite.views.py:***
import json
from django.http import JsonResponse, HttpResponse
from .models import Stu

def ret_user(request):
    if request.method == 'GET':
        db = Stu.objects.all()
        db = [i.name for i in db]
        print(db)
        # return JsonResponse({'status': 0, 'data': db})
        # 使用下面的代码,不使用ASCII码输出，即可输出中文
        return HttpResponse(json.dumps({'status': 0, 'data': db}, ensure_ascii=False)
                            , content_type='application/json')
    else:
        return JsonResponse({'status': 1, 'message': 'you need GET method'})
------------------------------------------
***mysite.urls.py:***    //增加路由
path("user/", views.ret_user)

Django序列化json数据方便vue识别:
上述Django取数据时效率比较慢,Django中有一个序列化的模块,可以将取出来的query site转化为json，python虽然不识别json，但会将其识别为字符串，但在js中是可以识别json的。这里将其转换一下。

***mysite.views.py:***
//改变取值方式，其余基本不变
from django.core import serializers
 # db = Stu.objects.all()
 # db = [i.name for i in db]
 # print(db)
 #序列化为json 增加取数据的效率
 #注意变量不要命名为'json',否则会覆盖命名空间中的json包
 json_data = serializers.serialize('json', Stu.objects.all())#序列化
 ----------------------------
 在对应的vue-cli项目中更改取值方式
 User.vue:
 //js方法：将一个 JSON 字符串转换为对象
 //获取序列化后的json数据
 this.user_list = JSON.parse(response.data.data);