使用Vue+Axios+element UI+Json-server做后台管理系统（一）

拼搏现实的明天。 2021-11-02 09:44 438阅读 0赞

## **前言** ##

1.首先vue框架是基于MVVM模式的，MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。  
2.在bootstarp和element UI中选择了后者，只因为使用组件库开发更加方便。

## 本文要点： ##

1.  使用Json-server搭建本地的服务器
2.  Vue的组件化编程思想
3.  Vue的路由传参问题
4.  Axios的使用
5.  ElementUI的使用

## 代码： ##

### 一：使用使用Json-server搭建本地的服务器 ###

1新建一个文件夹Jsonserver  
2 cd到这个文件夹  
3使用npm init 初始化项目![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70]  
4安装JSON服务器  
`npm install -g json-server`  
5创建db.json包含一些数据的文件

{
       "users": [
          {
            "name": "mj",
            "phone": "123456789",
            "email": "444@qq.com",
            "age": "45",
            "id": 4,
            "companyId": 3
          },
          {
            "name": "misswu",
            "phone": "123456789",
            "email": "222@qq.com",
            "age": "30",
            "companyId": 2,
            "id": 5
          },
          {
            "name": "misswu",
            "phone": "123456789",
            "email": "222@qq.com",
            "age": "30",
            "companyId": 2,
            "id": 8
          }
        ]
    }

6启动JSON服务器

json-server --watch db.json

7现在，如果你去http://localhost:3000/users，你就会得到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70 1]

### 二搭建项目 ###

1项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70]: /images/20211101/f1f4c7dd2d5a419b84a485e05e6fd1b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70 1]: /images/20211101/863862a72e6e4f67aae368f04ac7a4f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjEyNzYx_size_16_color_FFFFFF_t_70 2]: /images/20211101/62f42fc39ef44d87a647574de673504f.png