在本次项目开发中,使用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,创建数据库表
(5)在views.py中编写函数实现数据库数据的读取、处理
(6)在urls.py文件中,把接口添加到路由里
(7)启动服务,在项目的根目录下,输入命令
python manage.py runserver
创建vue前端项目
1、vue.js的下载与安装
要下载安装vue首先得下载安装node.js和npm。
(1)安装node.js和npm,并配置环境变量
(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)效果图
总结与反思
(1)在前端后端的学习中,有些急于求成,以致手忙脚乱,代码部分完成得不好;
(2)在用vue写前端网页的时候,是在组长的帮助之下才完成的;
(3)前后端数据交互是自己比较难的一部分;
(4)自己负责的推荐歌单前后端,由于时间和本身技术原因,推荐歌单部分没有被完全实现。