pycharm+django+vue+element ui前后端分离开发环境搭建

下载安装pycharm开发工具以及python编译环境

 我选择的是  pycharm的版本是2021.1的版本,python 3.6

安装好python后,管理员权限打开CMD输入:python 出现截图内容则安装

然后再pip 命令安装  django

管理员权限打开CMD 输入:pip install django

成功后 可以用   python -m django --version 查看版本

当然也可以选择在pycharm工具中去下载django。

创建django工程项目:

创建好后的目录结构如下:

创建应用app

找到Terminal;这个一般在开发工具左下角,如果没有的话就按图片指示选择

命令行输入 :python manage.py startapp 应用模块名   如下:

把刚刚创建的app模块添加到setting.py文件中,然后配置数据库  我用的是mysql 修改 setting.py 文件如下:

然后开始编写后台接口:关于数据库建表,做数据自行百度,也可以用django创建models.py文件创建模型自动生成表在数据库中,自行百度吧。

在刚创建的app模块中的views.py文件中写函数如下:

# 查询
def user_login(request):
    user_id = request.POST.get('uid')
    user_pwd = request.POST.get('pwd')
    response = {}
    cursor = connection.cursor()
    cursor.execute('select * from user_blog_user where user_id = %s and user_pwd = %s' %(user_id, user_pwd))
    rows = cursor.fetchone()
    if rows is not None:
        response['msg'] = 'success'
        response['code'] = 1
        response['list'] = rows
        response['error_num'] = 0
    else:
        response['msg'] = 'bust'
        response['code'] = 0
        response['list'] = rows
        response['error_num'] = 1
    return JsonResponse(response)

配置路由  在新建app模块下 新建一个  urls.py文件

from django.urls import path, re_path
from user import views
urlpatterns = [
    re_path('login', views.user_login)
]

然后在自动生成的文件夹中  找到urls配置路由管理app的路由 如下:

这样一个简单的后端接口配置就完了   然后在测试下后台接口能否接收返回数据。  下载 Postman 来测试   安装教程百度  傻瓜式安装  注册账号即可

首先启动后端项目:

命令行输入:  python manage.py runserver

然后在postman里面访问接口:

填好地址以及参数后 点击send

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个使用 Django Rest Framework (DRF)、Vue 3 和 Element Plus 搭建的前后端分离模板。 ### 后端 (Django Rest Framework) 1. 创建一个 Django 项目和应用程序: ``` $ django-admin startproject myproject $ cd myproject $ python manage.py startapp myapp ``` 2. 安装 DRF: ``` $ pip install djangorestframework ``` 3. 在 `myproject/settings.py` 中添加 DRF 和 CORS 的配置: ```python INSTALLED_APPS = [ # ... 'rest_framework', ] MIDDLEWARE = [ # ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework.authentication.TokenAuthentication', 'rest_framework.authentication.SessionAuthentication', ), 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), } CORS_ORIGIN_ALLOW_ALL = True ``` 4. 在 `myapp/views.py` 中定义一个视图: ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def hello(request): return Response({'message': 'Hello, world!'}) ``` 5. 在 `myproject/urls.py` 中添加路由: ```python from django.urls import path, include from myapp.views import hello urlpatterns = [ path('api/', include([ path('hello/', hello), ])), ] ``` 6. 运行服务器: ``` $ python manage.py runserver ``` 访问 `http://localhost:8000/api/hello/` 应该会返回 `{"message": "Hello, world!"}`。 ### 前端 (Vue 3 + Element Plus) 1. 使用 Vue CLI 创建一个新项目: ``` $ vue create myproject-frontend ``` 2. 安装 Element Plus: ``` $ npm install element-plus --save ``` 3. 在 `main.js` 中引入 Element Plus 和样式: ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App) .use(ElementPlus) .mount('#app') ``` 4. 在 `App.vue` 中添加一个按钮和一个文本框: ```vue <template> <div class="container"> <el-input v-model="name" placeholder="Enter your name"></el-input> <el-button type="primary" @click="sayHello">Say hello</el-button> <div class="result">{{ result }}</div> </div> </template> <script> import axios from 'axios' export default { name: 'App', data() { return { name: '', result: '' } }, methods: { sayHello() { axios.get('/api/hello/', { headers: { 'Authorization': 'Token ' + sessionStorage.getItem('token') } }) .then(response => { this.result = response.data.message }) .catch(error => { console.error(error) }) } } } </script> <style> .container { max-width: 800px; margin: 0 auto; padding: 20px; } .result { margin-top: 20px; font-weight: bold; } </style> ``` 5. 运行服务器: ``` $ npm run serve ``` 访问 `http://localhost:8080/` 应该会显示一个文本框和一个按钮。在文本框中输入你的名字,然后点击按钮,应该会显示 `Hello, world!`。 这是一个简单的模板,你可以根据自己的需要进行扩展和定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cy_橘子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值