(文章里的链接不是我写的,都是引用别人的,我只是记录查看)
编辑器:vscode
语言:python
后端:django
前端:vue
前后端分离
一、项目框架搭建
https://blog.csdn.net/weixin_58546893/article/details/124092802
这个博客是Python Web 环境搭建,写的很详细,适合小白(我,小白)。
(1)https://blog.csdn.net/Diana003/article/details/122744127
(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 目录
![](https://img-blog.csdnimg.cn/img_convert/64ee5fecb072fe865bf33cfbc825fd9a.png)
django 目录
![](https://img-blog.csdnimg.cn/img_convert/defe27a923508c186640450f2cbd0faf.png)
二、内容填充
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>
&l