Python Web 前后端分离 背景管理系统 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

复制代码

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

1. 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
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>
40. <script>
41. import axios from 'axios';
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>
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. }
96. .box-card {
97.   width: 400px;
98. }
100. .login-form {
101.   margin: auto;
102. }
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
7. def login_view(request):
8.     # if request.method == 'GET':
10.     if request.method == 'POST':
11.         js = request.body.decode('utf8')
12.         data = json.loads(js)
13.         username = data['uname']
14.         password = data['password']
16.         # 使用 Django 自带的 authenticate 方法验证用户身份
17.         user = authenticate(request, username=username, password=password)
19.         if user is not None:
20.             # 登录成功，将用户添加到当前会话中
21.             login(request, user)
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': '用户名或密码错误', })
29.     # 如果不是 POST 请求，则返回错误消息
30.     return JsonResponse({'success': False, 'message': '只支持 POST 请求'})
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']
44.         # 检查用户名是否已经存在
45.         if User.objects.filter(username=username).exists():
46.             return JsonResponse({'code': 400, 'success': False, 'message': '用户名已存在'})
48.         # 创建用户
49.         user = User.objects.create_user(username=username, password=password)
51.         # 返回成功消息
52.         return JsonResponse({'code': 200, 'success': True, 'message': '注册成功', 'username': username})
54.     # 如果不是 POST 请求，则返回错误消息
55.     return JsonResponse({'code': 405, 'success': False, 'message': '只支持 POST 请求'})

复制代码

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

1. from . import views
3. from django.urls import path, re_path
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>
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>
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>
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>
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>
99. <script>
100. import axios from "axios";
101. import { MessageBox } from "element-ui";
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>
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
5. from webapp.models import CoreBusiness
8. class coreBusinessSerializers(serializers.ModelSerializer):
9.     class Meta:
10.         model = CoreBusiness
11.         fields = '__all__'
14. class coreBusinessView(APIView):
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)
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)
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)
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)
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
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='邮箱')
12.     class Meta:
13.         db_table = 'contact'

复制代码

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

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

复制代码

8.启动vue项目

1. npm run dev

复制代码

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。