前端vue+后端django项目架构逻辑整理

[复制链接]
查看: 987   回复: 0

268

主题

268

帖子

1509

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1509
2024-2-25 12:13:49   显示全部楼层   阅读模式  
项目草稿流程.jpg


前端架构引导:https://www.xiefansq.cn/forum.php?mod=viewthread&tid=78

后端架构引导:https://www.xiefansq.cn/forum.ph ... =135&extra=page%3D2

数据方面配置引导:https://www.xiefansq.cn/forum.ph ... =134&extra=page%3D2

跨域协作:https://www.xiefansq.cn/forum.ph ... =138&extra=page%3D2

1.前端vscode起一个vite+vue得项目
npm create vite@latest my-xiefan-map -- --template vue
2.安装less 必备得css处理小工具
npm i less-loader less --save-dev
3.安装ajx前后端沟通得一个库
npm install axios
4.安装前端得router路由插件
npm install vue-router
5.做前端整体项目得router拉配

a.router.js配置
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import index from '../index_u.vue'
import list from '../admin.vue'
const routers = [
    { path: '/', component: index },
    { path: '/list', component: list }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes:routers
})

export default router
b.main.js引入router路由配置
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './components/router/router'

let app= createApp(App).use(router)
app.mount('#app')

// createApp(App).mount('#app')
c.在index.vue拉一下router 得渲染窗口
<script setup>
import { reactive, toRefs, ref, onMounted, watch } from "vue";

onMounted(() => {});
</script>
<template>
  <div>
    <router-view class="rotuerView"></router-view>
  </div>
</template>

<style scoped lang='less'>
.rotuerView {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
</style>
d.做一个渲染跳转你得配置roter_push.js
const r_toLogin = (url,router) => {
    router.push(url);
    setTimeout(() => {
        location.reload();
    }, 10);
    //router. replace(url)
    //console.log(router);
}

export default r_toLogin
e.拉两个vue一个前台渲染界面组件  有一个后台浅浅跳转下项目

前台
<!--
 * @Author: xiefan2333 1668903208@qq.com
 * @Date: 2024-02-25 11:11:23
 * @LastEditors: xiefan2333 1668903208@qq.com
 * @LastEditTime: 2024-02-25 11:29:56
 * @FilePath: \7e:\project\2024\2\25 python+django\font\user\src\components\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEnpm 
-->
<script setup>
import { reactive, toRefs, ref, onMounted, watch } from "vue";

import r_toLogin from './router/roter_push'
import {useRouter} from 'vue-router'
const router=useRouter()

onMounted(() => {
  document.title='前后端项目交互首页'
});
</script>
<template>
  <div>
    <h1>前端首页</h1>
    <hr>
    <p @click="r_toLogin('./list',router)">后台首页<span>-------|</span></p>
  </div>
</template>

<style scoped lang='less'>
h1 {
  font-size: 40px;
  letter-spacing: 5px;
}
p{
  color: blue;
}

</style>
后台
<script setup>
import { reactive, toRefs, ref, onMounted, watch } from "vue";
import r_toLogin from './router/roter_push'
import {useRouter} from 'vue-router'
const router=useRouter()

onMounted(() => {
    document.title='后台主页'
});
</script>
<template>
  <div>
    <p>修改显示内容</p>
    <hr>
    <p @click="r_toLogin('./',router)">前台首页<span>-------|</span></p>
  </div>
</template>

<style scoped lang='less'>
</style>
5.新建django工程,使用pycharm有这个可视化操作界面,直接选填新建就可以了
1.png

6.设置Django中主目录中setting.py 把后台以及引导页面得界面弄成国际语言中文
# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'zh-hans'
7.几个新增项目后的常用口令
a.新建新得app子目录
创建一个名字为app1得app项目
python manage.py startapp app1
b.安装mysql插件口令 并配置连接我们得mysql数据库
pip install mysqlclient
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        "NAME": "test",
        "USER": "root",
        "PASSWORD": "12345678",
        "HOST": "127.0.0.1",
        "PORT": "3306",
    }
}
c.关于model.py模型文件生成迁移生成两条常见口令
生成迁移文件
python manage.py makemigrations
执行迁移命令
python manage.py migrate  
d.口令启动项目 当然,pycharmIDE有可视化按钮操作并不常用
 python .\manage.py runserver
e.model.py常见得生成模型得小模板
class user(models.Model):
    name = models.CharField(max_length=10,unique=True)
    password = models.CharField(max_length=50,default=random_string)
    age = models.IntegerField(default=18)

    class Meta:
        db_table = 'tb_user'

8.拉跑一下整体得django项目,把测试app内urls.py测试页面跑通一下 然后拉一个sql得表出来 作为起始框架

a.在app目录下面新建一个urls.py留着写这个路径 (个人习惯来说不喜欢吧接口直接往根目录里面放)
2.png

b.在view.py视图文件中把测试函数拉起来
from django.http import HttpResponse
from django.shortcuts import render


# Create your views here.

def test(request):
    return HttpResponse("返回测试结果")
c.写一下新建得app里面的urls.py的测试路由给他干上去
from django.urls import path,include
from app.views import *
urlpatterns = [
    # path('admin/', admin.site.urls)
    path('test/',test,name='test')
]
d、光有测试路由现在还是不能方案 我们得吧测试得app路由 include到主路由里面
主路由得url.py弄一下
from django.contrib import admin
from django.urls import path, include
from app.urls import *

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('app/', include(('app.urls', 'app'), namespace='uapp'))
e.启动项目跑浏览器访问看下测试情况
http://localhost:8000/app/test/
3.png
出现计划中得返回结果,那么就跑通基础架构了 开始正式书写沟通得接口

9. 为了方便点不在pycharm和datagrip两个软件之间来回切我们可以直接在pycharm得数据库功能中配置上链接我们得数据库方便查看调试

5.png

pycharm侧边栏有这个数据库链接功能

10.设计数据model,然后执行迁移,给数据上表,然后手动增加一些数据




回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司