文章目录
Git地址、项目所需文件
SQL数据文件和用户需求文件 提取码 1111
Git克隆地址
zip下载
其中第一个连接是数据文件，后两个连接选一个即可
总体效果展示
一、项目环境所需
本项目所使用Python3.8、Node.js v16、MySQL8
其中Python代码编辑器为 PyCharm、Vue代码编辑器为VScode、MySQL编辑器和可视化容器为Navicat
若环境缺失、不存在等可按照下面的教程自行安装
若需要Vue的教程
以上两个教程皆为基础教程并只学习了Vue2x，并没有涉及Vue3x，最多只是提了一些区别。
注意：Django在根目录进入命令行输入 python manage.py runserver 即可运行程序，若中途缺失包请使用 pip install 包名 下载
Vue项目 请在根目录下使用 **npm i -g **下载环境 下载好之后 使用 **npm run serve **运行程序，并访问前端页面即可
若需要学习视频可自行访问bilibili搜索 黑马程序员Vue全套视频教程 即可，或点击下面的连接
二、Django代码解析
2.1、执行文件
文件根目录有一个manage.py，是整个程序的启动文件，后续在控制台（Terminal）中执行即可
2.2、注册app01
在djangoProject（即总项目）中的settings.py里注册app01项目
数据库参数自己按照自己的数据改
2.3、写SQL语句执行文件
途中代码是执行查询语句的代码，其中传入的sql是你的select语句。
2.4、定义接口文件
图中的views.py是用来写接口的，其中每定义一个函数就是一个接口，函数中的request是网页提交的内容，承接2.3在这里我们调用SQL执行文件的函数并传入SQL语句，并将其返回值进行json格式化。
其中有一些仍然有date_format，这是因为MySQL的date格式查询出来之后与python的格式不同，所以需要进行一次转换，再进行json格式转换。
2.5、接口路径文件
这里urls.py文件需要使用2.4里的函数，其中 ， 之前的是你在前端所需要写的请求路由，而后面则是写的你2.4中文件里的一个个函数，并一 一对应。
三、Vue代码讲解
3.1、路由文件
由于该项目只有一个网页。所以我们的路由文件只有一个
涉及到路由，其中我们避免再发起请求的时候路由过长，所以我们将前一部分相同的封装，并放在根目录下的vue.config.js文件内
这里的target是我们后端的地址，并设置可以跨域传输数据，不然传输的时候会被后端拦截。
3.2、主要的项目插件引导文件
在这里main.js的作用是部署全局变量，比如 axios 这样我们就能在每个文件都能访问 axios。
3.3、echars代码列解析
下面的代码是图表所占用的html
<div class="panel bar">
<h2>最受欢迎前十商品</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
下面的代码是图表请求的数据，数据的展示等js代码
data() {
return {
//初始化数据
barDataHeadList: [],
barDataNumList: [],
}
}
mounted() {
this.getBarDataList()
setTimeout(() => {
this.initChartBar()
}, 500)
}
method:{
// 获取柱状图数据
getBarDataList() {
this.axios.get('/very_like').then(e => {
// console.log(e.data);
for (let i = 0; i < e.data.length; i++) {
this.barDataHeadList.push(e.data[i][0]), this.barDataNumList.push(e.data[i][1])
}
})
},
// 柱状图
initChartBar() {
// console.log(this.dataHeadList[0]);
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 线条样式
type: 'shadow'
}
},
// x轴的备注
legend: {
data: ['点击次数']
},
// 样式
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.barDataHeadList //数据
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '点击次数',
type: 'bar',
data: this.barDataNumList,
itemStyle: {
normal: {
color: '#EE6666' // 修改线条的颜色
}
},
label: {
// 是否显示以及显示位置
show: true,
position: 'top'
}
}
]
}
this.chartBar = echarts.init(document.querySelector('.bar .chart')) // 找到绘制的位置
this.chartBar.setOption(option) // 初始化
window.addEventListener('resize', () => {
this.chartBar.resize() // 绘制
})
},
}
上面的代码有些注释，可以边看代码边理解。
最后，防止刷新之后无图像，又写了一个函数来让重载之后重绘所有图像
// 刷新重绘地图
beforeDestroy() {
// 销毁 Echarts 实例
if (this.chart !== null) {
this.chart.dispose()
this.chart = null
}
}
四、总结
最后一开始的图中的中国地图是静态数据，也是以前跟着写的一个代码。
本文所有所需文件和代码全在本文开头就有，可直接下载并运行
有帮助就点个赞