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

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

文章目录

前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）
- 1. 前端部分
- - 1. 1 前端vue平台搭建
  - - 安装vue：
    - 安装Element-UI
  - 1. 2 创建前端子项目（vue的helloworld示例项目）
  - - 用vue创建前端项目：
  - 1.3 在项目中使用ElementUI组件库
  - 1.4 修改HelloWold项目，编写单页面应用（SPA）
  - - 安装router组件库：
    - 使用ElementUI中的布局
    - 设置项目中的路由器
    - 路由原理
  - 1.5 前端使用axios 请求后端数据
  - - 安装 axios（cmd）：
    - 在main.js中设置axios
- 2. 后端部分
- - 2. 1 安装Django
  - - 安装Python：
    - 关于 pip
    - 安装 Django
  - 2.2. 创建Django项目
  - - 创建工程：
  - 2.3 准备数据库
  - 2.4 配置后端子项目
  - - 配置数据库：
    - 后端解决跨域问题
  - 2.5 后端业务接口：给前端提供数据
- 3. 前后端交互原理图

前后端分离单页面应用（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:DProjectBOOKS。
下面需要使用vue的命令在此目录中创建前端子项目的目录，目录名定为booksweb

用vue创建前端项目：

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

 C:DProjectBOOKS>

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

 C:DProjectBOOKS>vue create booksweb

d出如下选项：

选第一行回车，即选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

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

发表评论

评论列表（0条）