简迩音乐网站笔记(三) 基于django+vue实现歌单推荐和歌曲搜索功能

在本次项目开发中,使用Vue.js作为前端框架,Django作为服务端提供api接口,使得前后端实现完全分离。本篇博客主要记录歌单推荐后端和和搜索前端的实现步骤。

 

创建django项目

1、django简介

Django是使用python语言开发的一套免费开源的后台web框架,主要为前端html提供后台数据支持,后台项目的运行需要依托于服务器,从而接收前端发送的请求,后台予以响应。

 

2、安装django框架

pip install Django

 

3、创建项目

(1)创建django项目myMusic

django-admin startproject myMusic

(2)创建APP

python manage.py startapp recommend

(3)进入根项目的setting.py配置文件,把默认的sqllite3数据库换成mysql数据库,并把创建的app加入到installed_apps列表里

(4)编写model.py,创建数据库表

简迩音乐网站笔记(三) 基于django+vue实现歌单推荐和歌曲搜索功能

 简迩音乐网站笔记(三) 基于django+vue实现歌单推荐和歌曲搜索功能

(5)在views.py中编写函数实现数据库数据的读取、处理

(6)在urls.py文件中,把接口添加到路由里

(7)启动服务,在项目的根目录下,输入命令

python manage.py runserver

 

创建vue前端项目

1、vue.js的下载与安装

要下载安装vue首先得下载安装node.js和npm。

(1)安装node.js和npm,并配置环境变量

官网https://nodejs.org/en/

(2)安装vue.js

在命令行中安装,输入命令

npm install vue

安装webpack

 npm install global webpack -g 

 

2、创建项目

(1)安装vue-cli脚手架工具

npm install -g vue-cli

(2)安装vue所需要的node依赖

npm insatll

(3)创建vue组件,编写代码;在src/router目录的index.js中,我们把新建的组件,配置到vue-router路由中

(4)启动服务

npm run dev

(5)效果图

简迩音乐网站笔记(三) 基于django+vue实现歌单推荐和歌曲搜索功能

 

总结与反思

(1)在前端后端的学习中,有些急于求成,以致手忙脚乱,代码部分完成得不好;

(2)在用vue写前端网页的时候,是在组长的帮助之下才完成的;

(3)前后端数据交互是自己比较难的一部分;

(4)自己负责的推荐歌单前后端,由于时间和本身技术原因,推荐歌单部分没有被完全实现。

简迩音乐网站笔记(三) 基于django+vue实现歌单推荐和歌曲搜索功能

上一篇:http请求方法


下一篇:C++ ORM ODB 入门介绍(一)