零基础搭建网站django1.11+MySQL5.6+echarts动态获取数据
本博客为博主原创，如需转载，请附上本文链接https://blog.csdn.net/JasonLeeeeeeeeee/article/details/80482028，谢谢
由于实验室的需要，博主受命一周内搭一个web服务原型系统，包括前后端。具体需求是，在前端可以实现从后台数据库中调取数据，并且是可以选择的从后台数据库中动态查询数据展示数据。
这些需求对于学过或者做过web服务的同学来说很简单，但是博主基本是零基础，现在都闹不清js语法，还有jQuery什么的，只能照猫画虎，好在实验室有个具有开发web经验的师弟，想要师弟链接戳这里，可以咨询他一些逻辑上的问题，先在这里表示感谢。废话不多说，开始正文：
开发环境
- Linux系统
- django1.11
- MySQL5.6
软件安装
安装软件可以参考django安装和MySQL5.6安装这两个教程。在安装django的链接中，还有一些其他的知识，也会有很大的帮助，可以学习学习。
我在这里说几点我当时安装的时候遇到的问题吧：
为什么不安装高版本的MySQL？
当时我也下载了MySQL8.0版本，但是不知道是因为我下载源有问题还是之后的版本文件结构确实有所改动，在执行安装数据库语句 ./scripts/mysql_install_db –user=mysql 的时候报错，因为没有scripts语句，同时我也没有找到 mysql_install_db 这个文件。自己的需求本来就是从数据库里读数据，至于数据库版本没有过高要求，故选择了5.6.40的版本。
ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’（2）
按照提示的错误进入/tmp文件夹后们确实没有/mysql.sock,这怎么办？总不能自己建立吧，万一错的更离谱怎么办？继续搜。终于在一个博客中发现了一条语句 ln -s /var/lib/mysql /mysql .sock /tmp/mysql .sock ，既然找不到，那就软链接到已有的mysql.sock上，管用。
在安装完django和MySQL后，还需要安装mysqlclient，不然同样会报错
在Linux系统下安装mysqlclient比较简单，可以参考链接Django安装mysqlclient。
提示找不到libmysqlclient_r.so.xx
在这种情况下，试着用find命令找一下你的系统中有没有其他的libmysqlclient_r.so.xy，可能仅仅是xx与xy不一样的问题，也就是mysqlclient的版本与所需版本不一样，可以从这里下手进行调整。
这些问题是我现在还记得的一些问题，当然还有一些其他的问题，例如pip命令找不到之类的，这些可以在网上很容易搜到解决办法，不赘述。
开发步骤
- 按照Django基本指令新建project和app，假设新建的project，app的名称都为project，app
- 修改project/project/setting.py文件
根据教程中的说明修改INSTALLED_APPS，即在最后增加 ‘app’（新建app的名称）如果是新建的app只需修改这里就完成setting文件的修改，若新建的project，则建议以下全部修改完
ALLOWED_HOSTS = ['*'] #这里修改成这样是指允许所有的IP访问该项目
在MIDDLEWARE中在'django.middleware.csrf.CsrfViewMiddleware',前面加一个#号
#'django.middleware.csrf.CsrfViewMiddleware', 注释掉这行代码是为了在后续使用Ajax时，关闭认证，不然会报错，这样也是有风险的，详细可见教程CSRF认证这一章
若整个项目中各个页面需要继承相同的框架，可以在project/目录下新建一个templates文件夹放入其中，这就需要修改setting.py的TEMPLAETS中'DIRS': [os.path.join(BASE_DIR,'templates'),],
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'project', #数据库名称
'USER': 'root',
'PASSWORD': '123456',
'HOST': '127.0.0.1', #本地的话是这个域名
'PORT': '3306'
}若还有各个页面继承的页面框架中还有CSS、JavaScript等文件的话，需要在setting.py的最后增加语句
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'
STATIC_PATH = './static/'
HELPERS_PATH = './helpers/'到这里setting.py算是修改完成
3. 修改 project/app/models.py文件
from django.db import models
class Count(models.Model):
DATE = models.CharField(max_length = 100)
A = models.IntegerField()
B = models.IntegerField()
C = models.IntegerField()这里的格式都为Field类型，详细讲解可见教程Django模型（数据库）。
完成后，进入project/文件目录下运行
python manage.py makemigrations
python manage.py migrate在看到好几个OK之后，数据库中的数据表已经建好了，直接往里面填数据就行。
4. 修改project/project/urls.py文件
在urlpatterns中增加url(r'^app/',include('app.urls', namespace='app')), #这里是将每个相对独立的app的url打包放在这里，也可以每个url全部写在这里，只是当app多的时候，这里url会比较混乱
5. 在project/project/app文件夹中新建文件夹templates，这里存放的是该app的相关html文件，建议中间加一层app文件名称的文件夹，避免了在app较多的情况时，思路发生混乱，即文件路径为project/project/app/templates/app/xxx.html，以下将示范建立一个index.html网页，在该网页中实现echarts的动态获取数据。
6. 将index.html放在project/project/app/templates/app/目录下，其他的js文件等放在project/project/static/文件夹中，若没有static文件夹可新建。博主的echarts详细设置js代码在html文件中，所以不用再在app中再新建文件夹放置这些js。原index.html的静态网页打开是
7. 开始写动态网页，首先编写html。
在html中，新建一个下拉框
<select id="test" name="" onchange="fun(this.value)">
<option value=""></option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>onchage为当选择有变动时出发fun(str)函数，fun(str)函数在柱状图设置js中编写。
function fun(str)
{
//alert("触发选择");
$.ajax({
url: 'update', //请求url地址
type: "POST",
data: {"type":str}, //发送post请求携带的数据信息
//dataType: "json", //期望返回的数据格式，也可以不设置
success: function (data) { //请求成功后进行的函数操作，其中data为返回的数据，形参
// alert("success!");
// console.log(data); //调试时可以打开alert和console这两行代码，可以在浏览器控制台查看信息
data = JSON.parse(data);
dataAxis = [];
a =[];
b = [];
c = [];
for (var x in data){
dataAxis.push(data[x].axis);
a.push(data[x].A);
b.push(data[x].B);
c.push(data[x].C);
}
var options={
//这里把所有的options复制进来，因为触发请求后，需要重新加载图标
myChart.setOption(options);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("failed!");
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus); //这里可以帮助请求失败后，提醒错误类型，每个变量不同的值有不同的含义，可自行百度
},
complete: function(XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
});
};其中Ajax可以有很多参数，详细解析可参照该链接。
8. 编写project/project/app/urls.py
from django.conf.urls import url
from . import views
app_name = "app" # 由于之前在整个项目的urls.py中打包引入app的urls，故在这里需要定义该urls的名称
urlpatterns = [
url(r'^$', views.show_table, name = 'table'), #这里是在首次进入该网页时候，做出的回应
url(r'^update$',views.show_table_update_view,name='update') #这里的url之后的update要与ajax中请求的url保持一致，用来处理Ajax发来的请求 9.编写project/project/app/views.py
from django.shortcuts import render
from django.http import HttpResponse
import MySQLdb
import collections
import json
def get_data(sql):
conn = MySQLdb.connect("127.0.0.1","root","123456","app",port=3306,charset="utf8")
cur = conn.cursor()
cur.execute(sql)
results = cur.fetchall()
cur.close()
conn.close()
return results
def show_table(request): #该函数是第一次打开网页时，从数据库中调取的展示数据
sql = "select * from app_table"
m_data = get_data(sql)
return render(request,'app/index.html',{'show_table':m_data})
def show_table_update_view(request): #该函数是在Ajax请求时，触发的函数
if request.method == "POST":
name = request.POST.get('type') #这里get到请求携带的数据信息
if name == "1":
sql = "select * from app_table where ..." #根据不同的请求，进行不同的查询语句
update = get_data(sql)
if name == "2":
sql = "select * from app_table where ..."
update = get_data(sql)
objects_list = []
for row in update:
d = collections.OrderedDict()
d['axis'] = row[0] #把数据封装成json格式进行返回
d['A'] = row[1]
d['B'] = row[2]
d['C'] = row[3]
objects_list.append(d)
return HttpResponse( json.dumps(objects_list))10.现在该配置的都已经配置完了，可以进入到project/文件目录下启动服务了。
python manage.py runserver (IP:port)至此就可以在前端根据下拉框的选择不同，进行不同的数据展示了。
对于Django的前后台的数据传递还有疑问的，可以参考这个链接的讲解。
Ajax中的url为什么不用Django的{% url ‘name’%}格式
博主一开始就用的这种形式，然后报错，查了好久的网页，试过{% url ‘app:name’%}、加单引号不加单引号、绝对地址等等各种办法，反解析总是不成功。刚开始不知道是反解析不成功，找不到地址，不确定是由于返回数据格式有问题还是html中Ajax代码编写有问题，对于之前没有任何相关开发经验的小白来说很耗时，而且吃力。查到用error方法中的XMLHttpRequest参数来帮助确定为反解析的问题后，开始针对性搜索问题，咨询有web开发经验的师弟、同学，最后才发现用urls.py中的相对地址直接调取就可以，同时可以通过console.log(data)语句查看反馈回来的数据进行debug，感恩。