devbox
喵喵爱编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Python Web 前后端分离 后台管理系统 Django+vue（完整代码）_python+django+vue搭建前后端分离项目

作者：喵喵爱编程 | 2024-07-25 10:48:46

赞

踩

python+django+vue搭建前后端分离项目

1.前后端分离的架构

在前后端分离的架构中，前端和后端分别作为独立的项目进行开发和部署。前端项目通过API与后端项目进行通信。

  • 前端：使用Vue.js构建用户界面，调用后端提供的RESTful API获取和发送数据。
  • 后端：使用Django构建API，处理业务逻辑和数据存储

2.创建django项目及vue项目

创建app的时候需要进入项目的目录下  win10 cd xmmc

  1. django-admin startproject xmmc
  2. django-admin startapp app01

以管理员身份打开命令行界面，进入任意一个想要创建项目的文件夹
 

vue create vueproject

然后按自己的需求选择，可以去专门搜一下创建vue的教程

3.配置setting

（1）配置数据库

  1. DATABASES = {
  2.     'default': {
  3.         'ENGINE': 'django.db.backends.mysql',  # 加载mysql引擎
  4.         'NAME': 'db_goods',  # 数据库名称
  5.         'USER': 'root',  # mysql账户名
  6.         'PASSWORD': '123456',  # mysql账户密码
  7.         'PORT': 3306,  # 端口号
  8.         'HOST': 'localhost'
  9.     }
  10. }
'
运行

（2）配置模板文件

  1. TEMPLATES = [
  2.     {
  3.         'BACKEND': 'django.template.backends.django.DjangoTemplates',
  4.         'DIRS': [os.path.join(BASE_DIR, 'templates')],
  5.         'APP_DIRS': True,
  6.         'OPTIONS': {
  7.             'context_processors': [
  8.                 'django.template.context_processors.debug',
  9.                 'django.template.context_processors.request',
  10.                 'django.contrib.auth.context_processors.auth',
  11.                 'django.contrib.messages.context_processors.messages',
  12.             ],
  13.         },
  14.     },
  15. ]

（3）配置静态文件

  1. STATIC_URL = 'static/'
  2. STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

（4）注册app(使用创建 django-admin startapp app名称)

（5）解决跨域问题

  1. MIDDLEWARE = [
  2.     'django.middleware.security.SecurityMiddleware',
  3.     'django.contrib.sessions.middleware.SessionMiddleware',
  4.     'corsheaders.middleware.CorsMiddleware',  # 跨域，一定要写在第三行
  5.     'django.middleware.common.CommonMiddleware',
  6.     # 'django.middleware.csrf.CsrfViewMiddleware',
  7.     'django.contrib.auth.middleware.AuthenticationMiddleware',
  8.     'django.contrib.messages.middleware.MessageMiddleware',
  9.     'django.middleware.clickjacking.XFrameOptionsMiddleware',
  10. ]
'
运行
  1. CORS_ORIGIN_ALLOW_ALL = True
  2. CORS_ALLOW_CREDENTIALS = True
  3.  
  4. # 允许所有的请求头
  5. CORS_ALLOW_HEADERS = ('*')
'
运行

4.查看目录结构

  1. web_django/
  2. ├── static/
  3. ├── templates/
  4. ├── user/
  5. │   ├── migrations/
  6. │   ├── __init__.py
  7. │   ├── admin.py
  8. │   ├── apps.py
  9. │   ├── models.py
  10. │   ├── tests.py
  11. │   ├── urls.py
  12. │   ├── views.py
  13. ├── web_django/
  14. │   ├── __init__.py
  15. │   ├── asgi.py
  16. │   ├── settings.py
  17. │   ├── urls.py
  18. │   ├── wsgi.py
  19. ├── webapp/
  20. │   ├── migrations/
  21. │   ├── views/
  22. │   ├── __init__.py
  23. │   ├── admin.py
  24. │   ├── apps.py
  25. │   ├── models.py
  26. │   ├── tests.py
  27. │   ├── urls.py
  28. │   ├── views.py

5.前后端实现登录

（1）编写登录的前端（完整代码）

  1. <template>
  2.   <div class="login-background">
  3.     <div class="login-container">
  4.       <el-card class="box-card" style="opacity: 0.9;">
  5.         <h2>登录</h2>
  6.         <el-form
  7.           :model="ruleForm"
  8.           status-icon
  9.           :rules="rules"
  10.           ref="ruleForm"
  11.           label-position="left"
  12.           label-width="70px"
  13.           class="login-form"
  14.         >
  15.           <el-form-item label="用户名" prop="uname">
  16.             <el-input v-model="ruleForm.uname"></el-input>
  17.           </el-form-item>
  18.           <el-form-item label="密码" prop="password">
  19.             <el-input
  20.               type="password"
  21.               v-model="ruleForm.password"
  22.               autocomplete="off"
  23.             ></el-input>
  24.           </el-form-item>
  25.         </el-form>
  26.         <div class="btn-group">
  27.           <el-button type="primary" @click="submitForm('ruleForm')"
  28.             >登录</el-button
  29.           >
  30.           <el-button @click="resetForm('ruleForm')">重置</el-button>
  31.           <router-link to="/register">
  32.             <el-button style="margin-left:10px">注册</el-button>
  33.           </router-link>
  34.         </div>
  35.       </el-card>
  36.     </div>
  37.   </div>
  38. </template>
  39.  
  40. <script>
  41. import axios from 'axios';
  42.  
  43. export default {
  44.   data() {
  45.     return {
  46.       ruleForm: {
  47.         uname: "",
  48.         password: "",
  49.       },
  50.       rules: {
  51.         uname: [
  52.           { required: true, message: "用户名不能为空！", trigger: "blur" },
  53.         ],
  54.         password: [
  55.           { required: true, message: "密码不能为空！", trigger: "blur" },
  56.         ],
  57.       },
  58.     };
  59.   },
  60.   methods: {
  61.     async submitForm(formName) {
  62.       try {
  63.         const response = await axios.post('http://127.0.0.1:8005/user/login/', this.ruleForm);
  64.         // 在这里处理后端响应
  65.         console.log(response.data);
  66.         if (response.data.success) {
  67.           sessionStorage.setItem('username', JSON.stringify(response.data))
  68.           // 登录成功，跳转到 Index 页面
  69.           this.$router.push('/components/News');
  70.         } else {
  71.           // 登录失败，显示错误消息或其他处理
  72.           console.error('登录失败:', response.data.message);
  73.         }
  74.       } catch (error) {
  75.         console.error('提交表单时发生错误:', error);
  76.       }
  77.     },
  78.     resetForm(formName) {
  79.       this.$refs[formName].resetFields();
  80.     },
  81.   },
  82. };
  83. </script>
  84.  
  85. <style scoped>
  86. .login-background {
  87.   background-image: url('https://pic4.zhimg.com/v2-b730c73ebd78bd5f22293aab0d343f4b_r.jpg?source=1940ef5c');
  88.   background-size: cover;
  89.   background-position: center;
  90.   height: 100vh;
  91.   display: flex;
  92.   justify-content: center;
  93.   align-items: center;
  94. }
  95.  
  96. .box-card {
  97.   width: 400px;
  98. }
  99.  
  100. .login-form {
  101.   margin: auto;
  102. }
  103.  
  104. .btn-group {
  105.   margin-top: 20px;
  106. }
  107. </style>

登录效果图

（2）编写登录后端views(视图文件)

  1. from django.http import JsonResponse
  2. from django.contrib.auth import authenticate, login
  3. from django.contrib.auth.models import User
  4. import json
  5.  
  6.  
  7. def login_view(request):
  8.     # if request.method == 'GET':
  9.  
  10.     if request.method == 'POST':
  11.         js = request.body.decode('utf8')
  12.         data = json.loads(js)
  13.         username = data['uname']
  14.         password = data['password']
  15.  
  16.         # 使用 Django 自带的 authenticate 方法验证用户身份
  17.         user = authenticate(request, username=username, password=password)
  18.  
  19.         if user is not None:
  20.             # 登录成功，将用户添加到当前会话中
  21.             login(request, user)
  22.  
  23.             print(user)
  24.             return JsonResponse({'code': 200, 'success': True, 'message': '登录成功', 'username': str(user)})
  25.         else:
  26.             # 登录失败，返回错误消息
  27.             return JsonResponse({'code': 500, 'success': False, 'message': '用户名或密码错误', })
  28.  
  29.     # 如果不是 POST 请求，则返回错误消息
  30.     return JsonResponse({'success': False, 'message': '只支持 POST 请求'})
  31.  
  32.  
  33.  
  34. def register_view(request):
  35.     if request.method == 'POST':
  36.         # 从请求体中获取JSON数据
  37.         js = request.body.decode('utf8')
  38.         data = json.loads(js)
  39.         print(data)
  40.         username = data['uname']
  41.         password = data['password']
  42.  
  43.  
  44.         # 检查用户名是否已经存在
  45.         if User.objects.filter(username=username).exists():
  46.             return JsonResponse({'code': 400, 'success': False, 'message': '用户名已存在'})
  47.  
  48.         # 创建用户
  49.         user = User.objects.create_user(username=username, password=password)
  50.  
  51.         # 返回成功消息
  52.         return JsonResponse({'code': 200, 'success': True, 'message': '注册成功', 'username': username})
  53.  
  54.     # 如果不是 POST 请求，则返回错误消息
  55.     return JsonResponse({'code': 405, 'success': False, 'message': '只支持 POST 请求'})

（3）子视图文件（在user app中创建一个urls）

  1. from . import views
  2.  
  3. from django.urls import path, re_path
  4.  
  5. urlpatterns = [
  6.     path('login/', views.login_view, name='login'),
  7.     path('register/', views.register_view, name='register'),
  8. ]

（4）在主路由中配置user app（主路由跟setting在同一个文件夹）

6.管理页面的前后端完整代码

（1）管理页面前端代码（业务范围页面）

  1. <template>
  2.   <div>
  3.     <el-row style="height: 50px;">
  4.       <el-col :span="1" class="grid">
  5.         <el-button
  6.           type="success"
  7.           @click="showAddDialog"
  8.           icon="el-icon-circle-plus-outline"
  9.           size="mini"
  10.           round
  11.         >新增</el-button>
  12.       </el-col>
  13.     </el-row>
  14.     <el-dialog title="新增" :visible.sync="addDialogVisible" width="42%">
  15.       <el-form :model="addFormData" :rules="addFormRules" ref="addForm" label-width="120px">
  16.         <el-form-item label="标题" prop="title">
  17.           <el-input v-model="addFormData.title"></el-input>
  18.         </el-form-item>
  19.         <el-form-item label="图片链接" prop="image_url">
  20.           <el-input v-model="addFormData.image_url"></el-input>
  21.         </el-form-item>
  22.         <el-form-item label="内容" prop="content">
  23.           <el-input v-model="addFormData.content"></el-input>
  24.         </el-form-item>
  25.         <el-form-item label="图片详情链接" prop="details_image_url">
  26.           <el-input v-model="addFormData.details_image_url"></el-input>
  27.         </el-form-item>
  28.       </el-form>
  29.       <span slot="footer" class="dialog-footer">
  30.         <el-button @click="addDialogVisible = false">取 消</el-button>
  31.         <el-button type="primary" @click="submitAddForm">确 定</el-button>
  32.       </span>
  33.     </el-dialog>
  34.  
  35.     <el-dialog title="编辑" :visible.sync="editDialogVisible" width="40%">
  36.       <el-form :model="editFormData" :rules="editFormRules" ref="editForm" label-width="100px">
  37.         <el-form-item label="标题" prop="title">
  38.           <el-input v-model="editFormData.title"></el-input>
  39.         </el-form-item>
  40.         <el-form-item label="图片链接" prop="image_url">
  41.           <el-input v-model="editFormData.image_url"></el-input>
  42.         </el-form-item>
  43.         <el-form-item label="内容" prop="content">
  44.           <el-input v-model="editFormData.content"></el-input>
  45.         </el-form-item>
  46.         <el-form-item label="图片详情链接" prop="details_image_url">
  47.           <el-input v-model="editFormData.details_image_url"></el-input>
  48.         </el-form-item>
  49.       </el-form>
  50.       <span slot="footer" class="dialog-footer">
  51.         <el-button @click="editDialogVisible = false">取 消</el-button>
  52.         <el-button type="primary" @click="submitEditForm">确 定</el-button>
  53.       </span>
  54.     </el-dialog>
  55.  
  56.     <el-table
  57.       :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
  58.       style="width: 100%; margin-top: 10px;"
  59.       border
  60.       stripe
  61.       ref="multipleTable"
  62.       tooltip-effect="dark"
  63.     >
  64.       <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
  65.  
  66.       <el-table-column prop="title" width="100px" label="标题"></el-table-column>
  67.       <el-table-column prop="image_url" width="150px" label="图片链接"></el-table-column>
  68.       <el-table-column prop="content" width="120px" label="内容"></el-table-column>
  69.       <el-table-column prop="details_image_url" label="图片详情链接"></el-table-column>
  70.       <el-table-column width="190px" label="操作">
  71.         <template slot-scope="scope">
  72.           <el-button type="primary" icon="el-icon-edit" size="mini" @click="editBook(scope.row)">编辑</el-button>
  73.           <el-button
  74.             icon="el-icon-delete"
  75.             size="mini"
  76.             type="danger"
  77.             @click="confirmDelete(scope.row)"
  78.           >删除</el-button>
  79.         </template>
  80.       </el-table-column>
  81.     </el-table>
  82.  
  83.     <div class="pagination">
  84.       <el-pagination
  85.         @size-change="handleSizeChange"
  86.         @current-change="handleCurrentChange"
  87.         :current-page="currentPage"
  88.         :page-sizes="[5, 10, 20, 40]"
  89.         :page-size="pagesize"
  90.         layout="total, sizes,prev, pager, next"
  91.         :total="tableData.length"
  92.         prev-text="上一页"
  93.         next-text="下一页"
  94.       ></el-pagination>
  95.     </div>
  96.   </div>
  97. </template>
  98.  
  99. <script>
  100. import axios from "axios";
  101. import { MessageBox } from "element-ui";
  102.  
  103. export default {
  104.   name: "app",
  105.   data() {
  106.     return {
  107.       currentPage: 1, // 默认显示页面为1
  108.       pagesize: 5, // 每页的数据条数
  109.       tableData: [], // 需要 data 定义一些，tableData 定义一个空数组，请求的数据都是存放这里面
  110.       addDialogVisible: false,
  111.       activeIndex2: "1",
  112.       addFormData: {
  113.         title: "",
  114.         image_url: "",
  115.         content: "",
  116.         details_image_url: ""
  117.       },
  118.       addFormRules: {
  119.         title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  120.         image_url: [
  121.           { required: true, message: "请输入图片地址", trigger: "blur" }
  122.         ],
  123.         content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  124.         details_image_url: [
  125.           { required: true, message: "请输入图片详情", trigger: "blur" }
  126.         ]
  127.       },
  128.       editDialogVisible: false,
  129.       editFormData: {
  130.         id: null,
  131.         title: "",
  132.         image_url: "",
  133.         content: "",
  134.         details_image_url: ""
  135.       },
  136.       editFormRules: {
  137.         title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  138.         image_url: [
  139.           { required: true, message: "请输入图片地址", trigger: "blur" }
  140.         ],
  141.         content: [{ required: true, message: "请输入内容", trigger: "blur" }],
  142.         details_image_url: [
  143.           { required: true, message: "请输入图片详情", trigger: "blur" }
  144.         ]
  145.       }
  146.     };
  147.   },
  148.   mounted() {
  149.     this.getData();
  150.   },
  151.   methods: {
  152.     getData() {
  153.       axios.get(" http://127.0.0.1:8005/web_drf/coreBusinessView/").then(
  154.         response => {
  155.           console.log(response.data);
  156.           this.tableData = response.data;
  157.         },
  158.         error => {
  159.           console.log("error");
  160.         }
  161.       );
  162.     },
  163.     handleSizeChange(size) {
  164.       this.pagesize = size;
  165.     },
  166.     handleCurrentChange(currentPage) {
  167.       this.currentPage = currentPage;
  168.     },
  169.     showAddDialog() {
  170.       this.addDialogVisible = true;
  171.     },
  172.     submitAddForm() {
  173.       this.$refs.addForm.validate(valid => {
  174.         if (valid) {
  175.           axios
  176.             .post(
  177.               " http://127.0.0.1:8005/web_drf/coreBusinessView/",
  178.               this.addFormData
  179.             )
  180.             .then(response => {
  181.               console.log("新增成功", response.data);
  182.               this.addDialogVisible = false;
  183.               this.getData();
  184.               this.addFormData = {
  185.                 title: "",
  186.                 image_url: "",
  187.                 content: "",
  188.                 details_image_url: ""
  189.               };
  190.             })
  191.             .catch(error => {
  192.               console.error("新增失败", error);
  193.             });
  194.         }
  195.       });
  196.     },
  197.     confirmDelete(book) {
  198.       MessageBox.confirm("确定删除该条记录吗？", "提示", {
  199.         confirmButtonText: "确定",
  200.         cancelButtonText: "取消",
  201.         type: "warning"
  202.       })
  203.         .then(() => {
  204.           this.deleteBook(book);
  205.         })
  206.         .catch(() => {
  207.           // 取消删除操作
  208.         });
  209.     },
  210.     deleteBook(book) {
  211.       const url = ` http://127.0.0.1:8005/web_drf/coreBusinessView/${book.id}/`;
  212.       console.log(book.id);
  213.       axios
  214.         .delete(url)
  215.         .then(response => {
  216.           console.log("删除成功");
  217.           this.getData();
  218.         })
  219.         .catch(error => {
  220.           console.error("删除失败", error);
  221.         });
  222.     },
  223.     editBook(book) {
  224.       this.editFormData = { ...book };
  225.       this.editDialogVisible = true;
  226.     },
  227.     submitEditForm() {
  228.       this.$refs.editForm.validate(valid => {
  229.         if (valid) {
  230.           const url = ` http://127.0.0.1:8005/web_drf/coreBusinessView/${this.editFormData.id}/`;
  231.           axios
  232.             .put(url, this.editFormData)
  233.             .then(response => {
  234.               console.log("编辑成功", response.data);
  235.               this.editDialogVisible = false;
  236.               this.getData();
  237.             })
  238.             .catch(error => {
  239.               console.error("编辑失败", error);
  240.             });
  241.         }
  242.       });
  243.     }
  244.   }
  245. };
  246. </script>
  247.  
  248. <style>
  249. .pagination {
  250.   margin-top: 20px;
  251.   text-align: center;
  252. }
  253. </style>

业务范围管理页面效果图

（2）业务范围管理系统后端代码views

  1. from rest_framework.response import Response
  2. from rest_framework.views import APIView
  3. from rest_framework import serializers
  4.  
  5. from webapp.models import CoreBusiness
  6.  
  7.  
  8. class coreBusinessSerializers(serializers.ModelSerializer):
  9.     class Meta:
  10.         model = CoreBusiness
  11.         fields = '__all__'
  12.  
  13.  
  14. class coreBusinessView(APIView):
  15.  
  16.     def get(self, request):
  17.         coreBusiness = CoreBusiness.objects.all()
  18.         ser = coreBusinessSerializers(instance=coreBusiness, many=True)
  19.         print(ser.data)
  20.         return Response(ser.data)
  21.  
  22.     def post(self, request):
  23.         ser = coreBusinessSerializers(data=request.data)
  24.         if ser.is_valid():
  25.             CoreBusiness.objects.create(**ser.validated_data)
  26.             return Response(ser.validated_data)
  27.         else:
  28.             return Response(ser.errors)
  29.  
  30.  
  31. class coreBusinessdetailview(APIView):
  32.     def get(self, request, pk):
  33.         coreBusiness = CoreBusiness.objects.get(pk=pk)
  34.         ser = coreBusinessSerializers(instance=coreBusiness, many=False)
  35.         return Response(ser.data)
  36.  
  37.     def put(self, request, pk):
  38.         ser = coreBusinessSerializers(data=request.data)
  39.         if ser.is_valid():
  40.             CoreBusiness.objects.filter(pk=pk).update(**ser.validated_data)
  41.             return Response(ser.validated_data)
  42.         else:
  43.             return Response(ser.errors)
  44.  
  45.     def delete(self, request, pk):
  46.         CoreBusiness.objects.get(pk=pk).delete()
  47.         return Response('删除成功')

（3）配置子路由

（4）在主路由中配置该app（主路由跟setting在同一个文件夹）

7.创建数据库表

在任意一个models中都可以创建数据库表

  1. from django.db import models
  2.  
  3.  
  4. # 联系我们表
  5. class Contact(models.Model):
  6.     id = models.AutoField(primary_key=True)
  7.     company_name = models.CharField(max_length=100, verbose_name='公司名称')
  8.     phone = models.CharField(max_length=20, verbose_name='电话')
  9.     address = models.CharField(max_length=200, verbose_name='地址')
  10.     email = models.CharField(max_length=255, verbose_name='邮箱')
  11.  
  12.     class Meta:
  13.         db_table = 'contact'

创建表完成之后进行数据库的迁移，在项目的根目录下的控制台进行

  1. python manage.py makemigrations
  2. python manage.py migrate

8.启动vue项目

npm run dev

9.打开浏览器访问http://localhost:8080/#/user/login/ 即可登录

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/879817
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号