ant design pro of vue+django

开发过程记录

前端使用基于 Ant Design of Vue 实现的 Ant Design Pro

后端使用django

前期准备

你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、Vue.Js、Vuex、Vue-Router、g2 和 antd-vue，提前了解和学习这些知识会非常有帮助。

1、安装nodejs

百度

2、安装yarn

npm install -g yarn

3、安装git

官网下载并安装对应版本

4、下载Ant Design Pro

https://pro.antdv.com/docs/getting-started

$ git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git my-project
$ cd my-project

$ yarn install

$ yarn run serve

运行127.0.0.1:8000

5、创建django项目

python -m django startproject mysite

python manage.py makemigrations

python manage.py migrate

python manage.py runserver 8001

整合前后端

1、vue项目的my-project/vue.config.js

意思就是当请求地址包含/api时，请求将发送至http://127.0.0.1:8001（django后台），并且请求中的/api将被替换为''

这样前后端就整合在一起了

devServer: { // development server port 8000 port: 8000, // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 proxy: { '/api': { target: 'http://127.0.0.1:8001', ws: false, changeOrigin: true, pathRewrite: { '^/api': '' //需要rewrite的 } } } },

2、src/main.js注释mock

3、yarn run serve登录页面登录，点击提交django后台将发现登录请求，处理登录请求，返回结果有格式要求，格式在E:\antdv\my-project\src\mock\services下面找，比如登录的

from django.http import JsonResponse
​
def auth_login(request):
    """
    管理员用户登录
    :param request: 从前端框架传过来的请求
    :return: 按这种格式返回
    """
    print (request.body)
    result={
        'id': 1,
        'name': 'name',
        'username': 'admin',
        'password': '',
        'avatar': 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
        'status': 1,
        'telephone': '',
        'lastLoginIp': '27.154.74.117',
        'creatorId': 'admin',
        'deleted': 0,
        'roleId': 'admin',
        'lang': 'zh-CN',
        'token': '4291d7da9005377ec9aec4a71ea837f'
      }
    return JsonResponse({"result":result,"code":200,"message":""})

from django.conf.urls import url
from django.contrib import admin
from mysite.views import auth_login,get_user_info,return_2_step_code
​
​
urlpatterns = [
    url(r'^auth/login',auth_login),
    url(r'^user/info',get_user_info),
    url(r'^auth/2step-code',return_2_step_code),
    url(r'^admin/', admin.site.urls),
]

命名规范：驼峰法则