vue-element-admin 和 python django 前后端分离 开撸（新手学习，高手指点）

一、python django 项目建立

 

1、django安装方法：运行命令：pip3 install django。(pip3和python3安装方法请自行百度)；

2、创建django项目

　　在linux等命令行界面下，使用django提供的命令  django-admin startproject back   注：back你的项目名。创建之后的目录结构如图红框：

可以运行 python3 manage.py runserver 127.0.0.1:8081 看项目是否创建成功。

 

3、新建应用：python3 manage.py startapp adminApi  注：我给我的后台新建立了一个叫adminApi的应用，结构如图红框：

在back文件夹下找到setting.py 项目配置文件，把应用名添加进去，这样django应用才可以使用，应用名用引号包裹。如图：

4、配置数据库：settings.py文件 DATABASES 

   default 为项目默认的数据库连接地址，如果项目中需要连接多个库 可依次添加到DATABASES中如图：使用时可指定要连接的库，不指定默认为default连接。

注意：NAME即数据库的名字，在mysql连接前该数据库必须已经创建，而上面的sqlite数据库下的db.sqlite3则是项目自动创建。

USER和PASSWORD分别是数据库的用户名和密码。设置完后，再启动我们的Django项目前，需要激活我们的mysql。

然后，启动项目，会报错：no module named MySQLdb

这是因为django默认你导入的驱动是MySQLdb，可是MySQLdb对于py3有很大问题，所以我们需要的驱动是PyMySQL

所以，我们只需要找到项目里的全局配置里的__init__,py配置数据库驱动

在里面写入：

import pymysql

pymysql.install_as_MySQLdb()

5、项目中应用到的model，注意 如果需要自定义表名的话 需要在models.py中 指定具体model的class Meta 的da_table 如图： 

6、数6、据库建表：

      python3 manager.py magrations 生成数据库变更文件 文件位于migrations下，这里会记录你每次运行 python manager.py magrations 的变更记录；

       接下来运行 python3 manager.py migrte 时 django才会生成数据库表，如果报错请看标题4是否涵盖 或者 是否已安装django PyMysql插件

7、urls路由：

例：logout 对外暴漏api path为  /api/logout 

 

8、登录、登出实现：(图片有点大，可放大后缩小浏览器尺寸看全图)

登录中间件：UserAuthMiddle 需要添加到settings中

所有路由通过中间件后才会分发到具体的views中

9、自定义原生sql查询用法：

10：使用django ORM模型：

获取对象有以下方法：

1. models.AdminUser.objects.all()

2. models.AdminUser.objects.all()[:10] 切片操作，获取10个人，不支持负索引，切片可以节约内存

3. models.AdminUser.objects.filter(name="abc")  # 名称中包含 "abc"的人

4. values_list 获取元组形式结果  models.AdminUser.objects.filter(name='twz915').values_list('name', flat=True)

5. values 获取字典形式的结果 list(models.AdminUser.objects.values('name', 'qq')) 

如：

二、element-admin-ui前台vue项目搭建：

 1、请按照文档搭建element-admin-ui 框架到项目  该框架地址：https://github.com/PanJiaChen/vue-element-admin

搭建文档很详细，就不过多叙述了，搭建过程中遇到的问题一般都可以在上边地址中的文档中找到；

配置完成，启动项目如图：

2、nginx 配置如图：

location / 配置为前端vue项目

localtion /api 配置为后台django项目

生产环境 此配置适用于前端项目已经生产编译(npm run build:prod)后,root 指向已编译目录dist；

server {
        listen 80;
        index index.html;
        server_name dev-mysite.com;
        root /home/devops/adminVue-xue/dist;
        location / {
            try_files $uri $uri/ /index.html;
           # proxy_pass http://127.0.0.1:9527;
        }
        location /api {
            proxy_pass http://127.0.0.1:8081;
       }
}

开发环境时 vue 实时编译（npm run dev）,需要监听vue文件的变化，些时 nginx配置可如下图：

server {
        listen 80;
        # index index.html;
        server_name dev-mysite.com;
        # root /home/devops/adminVue-xue/dist;
        location / {
           # try_files $uri $uri/ /index.html;
            proxy_pass http://127.0.0.1:9527;
        }
        location /api {
            proxy_pass http://127.0.0.1:8081;
       }
}

三、搭建的前后台项目源码地址：

django后台：https://github.com/perfectTeam-test/mysite-xue.git

vue前台：https://github.com/perfectTeam-test/adminVue-xue.git

四：说点啥吧！

      以上内容纯属个人玩玩，内容浅薄，欢迎批评指导 改不改再说...