前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）

最新推荐文章于 2025-06-27 11:08:04 发布

cnls_lx

最新推荐文章于 2025-06-27 11:08:04 发布

阅读量6.7k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js npm 前端

本文链接：https://blog.youkuaiyun.com/cnls_lx/article/details/121512920

本文介绍了使用Vue、ElementUI、Axios和Django构建前后端分离的单页面应用（SPA）项目的过程。前端部分详细讲解了Vue平台搭建、创建项目、使用ElementUI组件库、配置路由和使用axios请求后端数据。后端部分涵盖了Django的安装、项目创建、数据库配置、解决跨域问题以及设置业务接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）

前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）

1. 前端部分

1. 1 前端vue平台搭建

安装vue：

vue官网：https://cn.vuejs.org/

安装vue有三种方式：

推荐安装方式： npm安装脚手架（vue CLI）方式。
需要先安装npm，npm是Node.js包管理器，需要先安装Node.js:
进入官网https://nodejs.org/en/，下载windows版本安装文件双击安装，安装过程一直下一步就行。

Node.js安装完成后，win + R 键打开命令行窗口（cmd）依次运行以下命令：
```
node -v
```
```
npm -v
```
如果都显示版本号则安装成功。
cmd中运行以下命令，设置npm下载镜像为淘宝镜像：
```
npm config set registry https://registry.npm.taobao.org
```
安装cnpm
由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.
在cmd中输入
```
npm install -g cnpm --registry=http://registry.npm.taobao.org
```
全局安装vue脚手架vue CLI
cmd中运行以下命令：
```
npm install -g @vue/cli
```
安装成功后查看脚手架版本号
```
vue -V
```

安装Element-UI

官方文档：https://element.eleme.cn/#/zh-CN/component/installation
在powershell中安装：
```
npm i element-ui -S
```

1. 2 创建前端子项目（vue的helloworld示例项目）

首先建立项目总目录BOOKS，如：C:\D\Project\BOOKS。
下面需要使用vue的命令在此目录中创建前端子项目的目录，目录名定为booksweb

用vue创建前端项目：

在BOOKS目录上 shift+右键，选择“在此处打开powershell”（或命令行），或者在cmd中通过cd命令进入BOOKS目录，如下：

 C:\D\Project\BOOKS>

在上述命令行目录位置输入命令：vue create booksweb

 C:\D\Project\BOOKS>vue create booksweb

弹出如下选项：
在这里插入图片描述
选第一行回车，即选vue版本为2，babel功能为es6 转换为 es5 ，eslint 为语法检查工具。

出现上图，表示项目创建成功。按上图要求，运行蓝色的命令：
1、进入booksweb目录，

cd booksweb

2、执行npm run serve命令,注意不是“server”

npm run serve

运行命令后出现如下窗口，表示服务已启动，访问http://localhost:8080/或http://127.0.0.1:8080/即可。
注意：也有可能是其他端口，按实际端口访问即可。
在这里插入图片描述
用浏览器访问出现下图说明HelloWorld项目创建成功！

新创建的“hello world”项目,目录结构如下图：
在这里插入图片描述
注意：如果用vscode打开并编写vue项目，需要按提示安装vetur插件，这样才会有语法高亮显示。

1.3 在项目中使用ElementUI组件库

参看官网中 “组件–>开发指南–>快速上手–>引入 Element 中代码”，将相关代码加入自己项目的main.js文件中。
https://element.eleme.cn/#/zh-CN/component/quickstart

然后将官网对应组件代码复制到自己项目的vue的template中（以button为例）：
在这里插入图片描述

在左侧组件中找到某组件，在右侧查看样式，通过显示代码，在下方找到对应代码复制到自己项目的vue组件的的template中。
在这里插入图片描述
显示效果：

1.4 修改HelloWold项目，编写单页面应用（SPA）

实现点击左侧导航栏，右侧内容区跟着变，
即根据导航栏点击的对象不同，右侧内容区加载不同的vue组件，
整个页面为单页面，页面内某个区域内不同组件切换。
需要用到vue的router组件库。

安装router组件库：

在cmd中，或在vscode中打开终端，执行下面命令，安装vue-router路由组件库：

npm i vue-router

使用ElementUI中的布局

在elementUI中找到如下布局实例
在这里插入图片描述
将代码拷贝至项目的App.vue中的template中，
将右侧下部的主内容区里的东西删掉，换成router-view标签：

在这里插入图片描述
制作两个待切换显示的组件：ShowBooks.vue和 ShowStudents.vue
其中template部分可以只放一个h1标签，分别写上不同文字，做测试用，下节再进行扩展。

设置项目中的路由器

在main.js中导入并使用router：
在这里插入图片描述
在src目录中新建router目录，其中新建index.js

import VueRouter from "vue-router";
//引入ShowBooks组件对象并命名为SBook（下面routes中用到）
import SBook from '../components/ShowBooks';
import SStudent from '../components/ShowStudents';
export default new VueRouter({
   
   
    mode: 'history',  //去掉url中的#
    routes:[
        {
   
   
            //设置路由项：即/shbook 访问路径对应SBook组件即ShowBooks组件
            path: '/shbook',
            component: SBook
        },
        {
   
   
            path: '/shstudent',
            component: SStudent
        }
    ]
})

在这里插入图片描述
下图：在main.js中导入router文件夹下的index.js,因为index为默认文件名，所以导入时可以省略，然后在new vue对象时，设置router项为导入的router对象，此处同名，也可不同名，例如：import router1 from ‘./router’; 则下面要改为： router：router1
设置好路由器后，路由器就可以监听访问路径的变化，从而根据路由项配置加载不同组件。
在这里插入图片描述

路由原理

在这里插入图片描述

1、router-link 监视点击操作，并指出点击操作的路由。
2、router index.js 路由器中配置了路由对应的组件。
3、找到相应组件后，在router view标签中加载

1.5 前端使用axios 请求后端数据

安装 axios（cmd）：

npm i axios -S

在main.js中设置axios

写在导入路由器的import语句下面

import axios from 'axios';
axios.defaults.withCredentials = false; //禁止ajax携带cookie
Vue.prototype.$axios = axios; //挂载到vue中，以后使用不用导包

修改App.vue

<template>
  <div id="app">
    <el-container style="border: 1px solid #eee">
      <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>信息查询</template>
            <el-menu-item index="1-1"><router-link to="/shbook">图书查询</router-link></el-menu-item>
            <el-menu-item index="1-2"><router-link to="/shstudent">学生查询</router-link></el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2