一次基于Vue和Django的前后端开发实践

python manager.py runserver

# 首先更新NOdejs的软件源，基于基于需要的版本修改其中的版本号 14/16

# 接着使用apt命令下载nodejs 和 npm
sudo apt-get install npm, nodejs

# 查看版本验证安装是否成功
node -V
npm -V

cd /web-design-group10/view-design
# 执行如下命令可直接根据项目的进行package的安装
# npm install 可以简写为 npm i
npm install

# 启动前端项目在view-design目录下
npm run dev 
# 启动后可以看到对应的端口和ip（建议首先使用localhost对前后端进行调试）

# install mysql(in ubuntu)
sudo apt-get install mysql-client
sudo apt-get install mysql-server

# 进入mysql
sudo mysql

mysql> 
alter user 'root'@'localhost' indentify with mysql_native_password by 'passwd@of@my';

# 退出mysql数据库，验证是否正确初始化
mysql>
exit;

mysql -u root -p
# 输入密码，如果正确的话会进入数据库，到这里已经可以了，我们开始创建后续django使用的数据库
# 通过show databases; 可以查看现在创建好的所有数据库

# 创建数据库并设定utf8编码，避免编码问题
mysql>
create database <project-name> character set utf8;
# 使用show databass查看是否正确创建
mysql>
show databases;
# 使用use <database-name> 进入对应的数据库
mysql>
use <databases-name>;
# 使用show tables查看已经创建好的表格
mysql>
show tables;

# 如果没有pip的话试试pip3，如果是pip3安装的，最后启动服务的时候要记得用python3来启动
pip install django

pip install mysqlclient

django-admin startproject <my-project-name>

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py         # 接口的路由管理,也就是我们的接口在哪边访问
        asgi.py
        wsgi.py

# 初始化APP
python manager.py startapp webapi

webapi/
    __init__.py 
    admin.py            # 包含django管理界面的设置
    apps.py             # 包含webapi配置的设置
    migrations/
        __init__.py
    models.py            # 定义数据库中的表
    tests.py
    views.py             # 定义API

vim vuebackend/vuebackend/setting.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders',
    'webapi',
]

python manage.py runserver
# 如果希望除了localhost都能访问启动的时候可以监听所有的ip
# 然后在allow url中填上自己的ip
python manager.py runserver 0.0.0.0:8000

vim vuebackend/vuebackend/setting.py

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'vuebackend',
        'USER': 'root',
        'PASSWORD': '__',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

from django.db import models
# Create your models here.


class Gamerecords(models.Model):
    """
    the table for saving abs and the create info
    """

    m_id = models.AutoField(primary_key=True)
    game_name = models.CharField(max_length = 150)
    author = models.CharField(max_length = 150)
    file_type = models.CharField(max_length = 150, default="Java")
    create_time = models.DateTimeField()   # 对应python中的Datetime类型

python manage.py makemigrations (应用名，选填)
python manage.py migrate (应用名，选填)
python manager.py runserver 启动服务

pip install django-cors-headers

# books_demo/settings.py
INSTALLED_APPS = [
    ...
    # demo
    'corsheaders',
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可
    ...
]

# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True 

<tempalte>
	样式布局，也就是基本的外观，按钮，乱七八糟的，去tdesign vue之类的网站上找模版，进行组合即可
</tempalte>

<script>
  
  export default{
    data
    	初始化和设置各种变量
  	created
    	里面的函数在页面创建的时候执行
  	mounted
  		里面的函数在页面挂载时候执行
		method
  		定义的各种奇奇怪怪的函数，与后端交互的函数，
  }

</script>

<style>
  定义一些加粗之类的样式，用来对template的的基本组件进行加工
</style>

	{
		"path": "modelbase",
		"name": "modelbase",
		"component": () => import("@/pages/list/modelbase/index.vue"),
		"meta": {
			"title": "上传模型"
		}
	},

    handleClickDetail( row ) {
      const m_id_detail = row['row'].m_id;
      this.$router.push({ name: 'modelbase', query: { ids: m_id_detail } });
    },

  created() {
    this.$watch(() => this.$route.query, (to_params, old_params) => {
      console.log(this.$route.query);
      this.gettaskinfo();  // your function here  using the route.query中的参数
      console.log(this.$route.query);
    });
  },

loadLocalHtml(){
  windows.open('/result/index.html');
}

from django.db import models

Class CoverageInfo(models.Model):
  m_id = models.AutoField(primary_key=True)
  task_name = models.CharField(max_length = 150, default = "coverage test")
  author = models.CharField(max_length = 150, default = "anmous")
  create_time = models.DateTimeField()
  lang_type = models.CharField(max_length = 150, default = "JAVA")
  res_path = models.CharField(max_length = 1000, defailt = "~/workspace/coverage-res/author_default/")
  code_path = models.CharField(max_length = 1000, default = '~/workspace/coverage-code/author_default/')

python manage.py makemigrations 
python manage.py migrate

from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from django.core import serializers

@require_http_methods(['GET'])
def get_games_index(request):
    response = {}
    try:
      
      # using get to get value from front ---->
      receive = {}
      reveive['info1'] = request.GET.get('info1')
      ... # like that ， 应该也可以循环取出
      # <----- using get to get value from front 

      
      
      # your function here 「-----------------
      # 基于我们从前端获取到的数据，做任何事情，执行任何函数
      # -------------- your function here 」

      
      
      # 可以给前端返回一些数据 response['res'] = ... 之类的,传过去之前要对数据进行序列话处理
      # yourdata需要时{}存kv形式
      response['res'] = json.loads(serializers.serialize("json", yourdata))

      
      
      response['msg'] = 'success'
      response['error_num'] = 0

    except Exception as e:
      response['msg'] = str(e)
      response['error_num'] = 1

      return JsonResponse(response)

@require_http_methods(["POST"])
def get_info_games(request):
      response = {}
    try:
      
      
      # 获取前端post过来的文件什么的
      post_message = json.loads(request.body)
      # 获取前端post过来的参数什么的还是使用get
      reveive['params'] = request.GET.get('params')
      
      
      games = json.loads(serializers.serialize("json", games))
      response['games'] = games
      response['mag'] = 'success'
      response['error_num'] = 0
      
    except Exception as e:
      response['msg'] = str(e)
      response['error_num'] = 1

      return JsonResponse(response)

# 增：实际上就是获取数据（post），将数据存储进数据库中，所以我们首先使用post协议，在根据上述的八股文，用json.load(request.body)获取post传过来的数据，其表现为字典的形式。
# 由于文件传输的类型是2进制数据流，没办法用json load，所以和普通的post处理比较不同，我们后面讲，这里先讲基本的post。
from models import CoverageInfo

@require_http_methods(["POST"])
def update_task(request):
    response = {}
    try:
        post_message = json.loads(request.body)
        # print(post_message)
        # 讲数据存进我们定义的类结构中。
        tasks = CoverageInfo(task_name = post_message['task_name'],
                            author = post_message['author'],
                            lang_type = post_message['lang_type'],
                            create_time = datetime.datetime.now(),
                            )
        # 使用save命令将其存进数据库中
        task.save()
        
        #可以返回一下我们存储起来的数据
        response['task'] = json.loads(serializers.serialize("json", games))

        response['mag'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 2

    return JsonResponse(response)

# 显示近期的5个task
@require_http_methods(['GET'])
def recent_tasks(request):

    response = {}
    num_to_show = 5
    try:
      	# .objects.filter()会返回符合filter条件的所有记录，如果是空的就会返回所有
        # 所以删，改，查，就是从前端传递一个id回来，然后我们用filter找到他，然后print、覆盖、删除。
        tasks = CoverageInfo.objects.filter()
        response['tasks'] = json.loads(serializers.serialize("json", models))
        response['tasks'] = response['tasks'][-num_to_show:]
        # print(response['models'])
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)

@require_http_methods(["GET"])
def delete_models(request):

    response = {}
    try:
      
        get_id = request.GET.get("ID") # ID是在前端定义好的传回来的key，随便定啥都行
        # 查询
        results = CoverageInfo.objects.filter(m_id = get_id)
        # 删除
        CoverageInfo.objects.filter(m_id=get_id).delete()
        # 修改（基于查询那一步）
        results.author = request.GET.get('Author')
        ... # 重复操作每一条属性
        
        response['mag'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)

@require_http_methods(['POST'])
def accept_code_file(request): # 原版test_api

    response = {}
    # （存在本地）定义一个存储文件的基本地址，（本地先新建这个目录）
    base_path = "/data/home/metis/workspace/code_file"
    try:
      	# 用作者名来管理文件的存储地址
        author_name = request.GET.get('author')
        if not author_name: 
            author_name = 'tmp'
        # 把地址和提交者名拼起来，没有的话新建文件夹
        real_path = os.path.join(base_path, author_name)
        if not os.path.exists(real_path):
            os.mkdir(real_path)
        
        # 循环存储传过来的所有文件
        for filename, file in request.FILES.items():
            print(filename, file)
            tmp = file.read() # 文件的二进制数据流，也就是实际要存下来的数据
            newfilename = random_filename(file.name) # 可以对文件名进行简单的处理
            final_path = os.path.join(real_path, newfilename) # 拼接地址
            print(final_path)
            # 讲文件存起来(使用chunk便于大文件的断点续传，避免大文件传输出现问题)
            # (TBD) 测试验证是否正确 （可能需要使用request.FILES['file']替代后面的file.chunks）
            with open(final_path, 'wb') as f:
                for chunk in file.chunks():
                  f.write(chunk)
            # 小文件传输的例子
            with open(final_path, 'wb') as f:
             		f.save(tmp)
                 
        
        # 获取代码的类型,执行对应的代码,生成html文件,返回文件的地址
        lang_type = request.GET.get('lang_type')
        # 逻辑是这样，如果处理覆盖率的时间比较长，可能要在后台跑，这个研究下怎么处理。
        # 关键词 Django后台、Django多线程、还没查好，先放一些参考资料，可能就是用一个线程来执行任务
        # https://www.tioit.cc/index.php/archives/6/
        # https://zhuaxia.xyz/detail/11847
        
        html_path = coverage_test(final_path, lang_type)
        
        # 建立数据库词条，可以新增一条代码存储的路径(数据)
        tasks = CoverageInfo(
          									task_name = request.GET.get('task_name'),
                            author = request.GET.get('author'),
                            lang_type = request.GET.get('lang_type'),
                            create_time = datetime.datetime.now(),
                            res_path = request.GET.get('html_path'),
          									code_path = final_path,
                            )
        task.save() # 将词条存进数据库里。
        response['task'] = json.loads(serializers.serialize("json", tasks))
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)

"""vuebackend URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
import vueapi.urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(vueapi.urls)),   # 改这里可以了（就初始化的时候改一下就行）
]

# from django.urls import path, re_path
from django.urls import re_path
from . import views

urlpatterns = [
    re_path(r'accept_code_file$', views.accept_code_file),
    
]

curl  http://127.0.0.1:8000/api/<api_name>?<key>=<value>

curl http://127.0.0.1:8000/api/accept_code_file?author=aiken&task_name=test

curl -d "Key=Value" 'http://127.0.0.1:8000/api/accept_code_file?author=aiken7task_name=test' 

    getModelList() {
      this.$request
        .get('http://9.134.13.0:8000/api/recent_models')  # url
        .then((res) => {                                  # 前端返回的数据在res中
          const m_model_list = res.data.models;           
          # 通过 res.data.<key>的方式取出数据，就是我们返回的一整个json
          看前端的console.log打印出来的值，可以知道其是一个列表形式的，而我们返回值是列表中的list[i].field.将其存进临时的列表中
          const m_list_test = [];

          for (let i = 0; i < m_model_list.length; ++i){  
            m_list_test.push(m_model_list[i].fields);
          }
          # this取全局变量，在data中定义好的，我们更新这个值用来渲染数据
          this.model_list = m_list_test;
          console.log(this.model_list);
        })
        .catch((e) => {
          console.log(e)
        });
    },

    getGameInfo() {
      console.log("start")
      this.$request
      	 // 将上个路由界面穿过来的id作为参数，传到后端去，然后请求后端返回特定的数据
        .post('http://9.134.13.0:8000/api/get_info_games', this.$route.query['ids'])
        .then((res) => {
          const task_list = res.data.games[0].fields;
          console.log(JSON.stringify(res));
          const m_list_res = Array();
          // 赋值变量
          for (var key in task_list) {
            m_list_res.push({
              name: key,
              value: task_list[key],
            })
          }
          console.log(m_list_res);
          // 赋值全局变量
          this.baseInfoData = m_list_res;

        })
        .catch((e) => {
          console.log(e);
        });
    },

    onSubmitPost() {
      console.log('submit! post');
      this.$request
      	// 将全局参数中的formdata用post传递到后端，接受后端返回到信息
        .post("http://9.134.13.0:8000/api/create_battel", this.formData)
        .then((res) => {
          console.log(JSON.stringify(res));
          console.log('---------------------------');
          console.log(JSON.stringify(this.formData));
        })
        .catch((e) => {
          console.log(e);
          alert(' create battel fail');
        });
    }

    submit_file(file) {
      console.log(file)
      // 获取文件到临时的变量formdatas中
      let formdatas = new FormData()
      formdatas.append('file', file)
      
      console.log(this.formData.author)
      axios({
        url: 'http://9.134.13.0:8000/api/test_api',
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        // data传递文件数据 params传递参数数据
        data: formdatas,
        params: { 'author': this.formData.author },
        
      }).then((res) => {
        console.log(res)
        this.$message.success(`文件 ${file.name} 上传成功`);
      }).finally(() => {
        // this.handleSuccess();
      });
    },

rm -rv node_modules # del those files we downlaods
rm package-lock.json # del the install info 
npm cache clear --force
npm install