Django结合vue同步开发项目配置

vue-cli从零开始构建，快速了解如何搭配django快速开发及使用
地址：https://www.bilibili.com/video/av58223092?p=1
vant文档
地址：https://youzan.github.io/vant/#/zh-CN/

安装node
node官网地址：https://nodejs.org/en/

查看是否安装成功

node -v
npm -v
cnpm -v

首先pycharm创建一个Django后端项目mypro
项目名：mypro
选择虚拟环境
创建一个backend目录
后端完成后创建前端项目
安装cnpm
使用npm安装依赖模块可能会很慢，建议换成[cnpm]

<!---g表示全局安装 -->
cd mypro
# npm get registry                                                    // 查看npm仓库地址
# npm config set registry http://registry.npm.taobao.org/             // 更换npm仓库地址为淘宝源
# npm config set registry https://registry.npmjs.org/                 // 换回原来仓库地址
npm install -g cnpm --registry=http://registry.npm.taobao.org

安装vue-cli脚手架工具

npm install -g @vue/cli              // 安装 Vue Cli
npm install -g @vue/cli-init         //安装完后 就还可以使用 vue init 命令
# npm install --save-dev webpack      // 加快webpack速度

然后创建前端项目

<!--frontend是前端项目名-->
vue init webpack frontend

完成后的文件

前后端项目创建完毕，进行初始化配置
先配置后端，修改mypro/mypro/settings.py文件，如下



修改mypro/mypro/urls.py文件，如下

创建mypro/backend/urls.py文件，如下

修改mypro/backend/views.py文件，如下

数据库迁移文件，此时在总项目mypro下运行命令

python manage.py inspectdb       // 根据数据库自动生成models.py文件
python manage.py inspectdb > backend/models.py   //将模型写入到models.py文件中
python manage.py makemigrations (app)      // 生成迁移文件  单独生成就在后面加上表名
python manage.py migrate (app)
# python manage.py migrate --fake-initial    // （报错1050）针对数据表已经存的情况
# set global time_zone='+8:00';              // 数据库测试报错

运行

python manage.py runserver

如果遇到报错：

参照https://blog.csdn.net/weixin_33127753/article/details/89100552来解决
此时打开浏览器，输入地址：http://127.0.0.1:8000/api/test/
即可看到

后端配置完成

开始配置前端

进入前端frontend项目内，安装vue-resource依赖

cd frontend
#pip install mysqlclient
npm install axios -save-dev          // 处理http应用请求的包
npm i vant -S
npm i babel-plugin-import -D

修改my-project/index.js文件
替换

<meta name="viewport" content="width=device-width,initial-scale=1.0">

为下面文件

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

修改my-project/.babelrc文件

"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]]
}

将自适应函数文件 rem.js reset.css 复制到my-project/src/assets目录下
修改mypro/frontend/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 './assets/rem'
import './assets/reset.css'
import Vue from 'vue'
import App from './App'
import router from './router'

import { Button } from 'vant'
Vue.use(Button)

import axios from 'axios'
Vue.prototype.axios = axios;

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});

修改mypro/frontend/src/components/HelloWorld.vue文件

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: '',
}
},
created () {
this.axios.get('/api/test').then(response => {
this.msg = response.data;
console.log(response.data)
})
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

修改mypro/frontend/config/index.js文件，解决跨域问题

运行代码

cd mypro
python manage.py runserver                    // 运行后端服务
cd mypro/frontend
npm run dev                                   // 运行前端

成功从Django后端获取数据展示到前端

下面从mysql数据库获取数据展示到前端
修改mypro/backend/views.py文件，如下

重启服务，刷新浏览器，看到如下

说明已成功从mysql获取到数据并展示到前端。

• 点赞
• 收藏
• 分享
• 文章举报