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

xiefandaren · 2024-2-25 12:13:49

前端架构引导：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有这个可视化操作界面，直接选填新建就可以了

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留着写这个路径（个人习惯来说不喜欢吧接口直接往根目录里面放）

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/

出现计划中得返回结果，那么就跑通基础架构了开始正式书写沟通得接口

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

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

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