基于vue+Django的简迩音乐用户界面实现

应这次软件工程课程要求，我们团队着力打造一个音乐播放器软件。

软件实现主要采用基于Vue.js+Python Django，前后端分离架构实现网页。

用户界面主要功能：呈现用户收藏歌单歌曲信息，并且提供删除收藏歌曲歌曲操作

界面呈现效果：

主要实现过程：

<1>搭建Vue框架，实现前端界面呈现

node安装

node 安装地址：http://nodejs.cn/download/

vue-cli全局安装

npm install -g vue-cli

npm install cnpm -g --registry=https://registry.npm.taobao.org；

初始化项目

vue init webpack Janer

启动程序

npm install

npm run build

npm run dev

<2>搭建Django框架，实现后台数据库操作，向前端传送数据

pip install django

行如下命令检查Django是否安装好，并且查看安装的Django版本；

> python -m django --version

<3>通过接口

我们可以创建 d:\projects 作为我们的项目所在的目录。

然后从命令行窗口中进入到 d:\projects 目录，执行下面的命令创建项目目录

django-admin startproject Jianer

django虽然只是 wsgi web application 的框架，但是它也有一个简单的 wsgi web server。供调试时使用。

首先进入到项目根目录，然后执行如下命令

python manage.py runserver 0.0.0.0:80

这样服务就会被启动。我们就可以在浏览器访问web服务

前后台连接，实现功能

重点实现问题：

<1>vue前端实现我主要使用element实现，vue框架为我们提供了简便、快速的界面实现工具，具体element工具可参考https://element.eleme.cn/#/zh-CN；

对于一些基本界面内容，可直接取用改网站代码。

<2>后台搭建django，在前期并没有接触这个框架，只是学习过Python语言，所以就进行了学习，通过视频学习成功搭建后台，详细视频网址见http://www.python3.vip/tut/webdev/django/；

Django 无需数据库就可以使用，它提供了对象关系映射器，通过此技术，可以直接使用 Python 代码来描述数据库结构。Django 里面，数据库表的操作，包括表的定义、表中数据的增删改查，都可以通过 Model 类型的对象进行。

<3> 前后端接口跨域问题：因为前后端分离，在接口部分出现了跨域问题。

我采用了前端和后台共同更改的方法解决了这个问题

前端vue设置：

后端设置：在settings.py中添加

基于vue+Django的简迩音乐用户界面实现的更多相关文章