python django vue +VSCode 前后端分离_用vccode 开发django+vue前后分离

（文章里的链接不是我写的，都是引用别人的，我只是记录查看）

编辑器：vscode

语言：python

后端：django

前端：vue

前后端分离

一、项目框架搭建

https://blog.csdn.net/weixin_58546893/article/details/124092802

这个博客是Python Web 环境搭建，写的很详细，适合小白（我，小白）。

（1）https://blog.csdn.net/Diana003/article/details/122744127

（2）https://blog.csdn.net/somenzz/article/details/100815458?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167177645716800188599496%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167177645716800188599496&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-100815458-null-null.142^v68^control,201^v4^add_ask,213^v2^t3_esquery_v1&utm_term=python%20django%20vue%20%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%20%E6%95%B0%E6%8D%AE%E8%81%94%E8%B0%83&spm=1018.2226.3001.4187

（3）https://blog.csdn.net/mxsgoden/article/details/116307448

这几个我是一起看的，写的是前后端分离项目的创建，还有数据联调（跨域），但是小白可以先不把前端项目打包（当然，这只是建议）。

因为我就这样干了，后面想在后端一个视图类中设置session数据，然后在另一个视图类里获取前面设置的session数据，获取的数据总是None，百度了好久都没有百度出来原因。

其中一个文章 https://uoften.com/article/186856.html （我记得刚查看的不是这个链接，是在CSDN 里的一个博客，需要￥） 说是 mock.js 这个东西的原因，我后面也给搞掉了，但还是不行。（这是我的问答，还没结题，希望能够有大佬帮助 http://t.csdn.cn/64fpI）

不知道不先打包会不会像我这样遇到这个情况，所以我上面只是建议，不听也可以的。

到这里项目框架就搭好了

vue 目录

django 目录

二、内容填充

vue 中的main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
import axios from 'axios'
//全局设置
Vue.prototype.$axios=axios
 
// 跨域前端请求携带cookie
axios.defaults.withCredentials=true 
 
// require('./mock')
 
Vue.use(ElementUI)
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

vue components文件夹中的一个 Login.vue 文件

<template>
    <div class="login">
        <div class="mylogin" align="center">
            <h4>登录</h4>
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px">
                <el-form-item label="" prop="account" style="margin-top: 10px">
                    <el-row>
                        <el-col :span="2">
                            <span class="el-icon-s-custom"></span>
                        </el-col>
                        <el-col :span="22">
                            <el-input class="inps" placeholder="账号" v-model="loginForm.account">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="" prop="passWord">
                    <el-row>
                        <el-col :span="2">
                            <span class="el-icon-lock"></span>
                        </el-col>
                        <el-col :span="22">
                            <el-input class="inps" type="password" placeholder="密码"
                                v-model="loginForm.passWord"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="margin-top: 55px">
                    <el-button type="primary" round class="submitBtn" @click="submitForm">登录
                    </el-button>
                </el-form-item>
                <div class="unlogin">
                    <router-link :to="{ path: '/forgetpwd' }"> 忘记密码? </router-link>
                    |
                    <router-link :to="{ path: '/register' }">
                        <a href="Register.vue" target="_blank" align="right">注册新账号</a>
                    <