Vue學習筆記-vue-element-admin 前端學習

本文轉載自查看原文 2020-10-05 20:46 2115

一使用環境　　

　　開發系統: windows

　　后端IDE: PyCharm　

　　前端IDE: VSCode　

　　數據庫: msyql,navicat

　　編程語言: python3.7 (Windows x86-64 executable installer)

　　虛擬環境: virtualenvwrapper

　　開發框架: Django 2.2

二 Vue學習筆記-vue-element-admin 前端學習

官網: https://panjiachen.gitee.io/vue-element-admin-site/zh/

在線預覽: https://panjiachen.gitee.io/vue-element-admin/#/dashboard

二次開發基礎模板(vue-admin-template): https://github.com/PanJiaChen/vue-admin-template

1.下載按裝

# 克隆項目(下載,兩個都要用) # 下載二次開發基礎模板地址:https://github.com/PanJiaChen/vue-admin-template # 中文集成方案下載(i18n版):https://github.com/PanJiaChen/vue-element-admin/tree/i18n

# 進入項目目錄 # cd vue-element-admin

# 安裝依賴,建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題  # npm install --registry=https://registry.npm.taobao.org

# 本地開發 啟動項目  # npm run dev

2.目錄結構

├── build                       # 構建相關 ├── mock # 項目mock 模擬數據 ├── plop-templates # 基本模板 ├── public # 靜態資源 │ │── favicon.ico # favicon圖標 │ └── index.html # html模板 ├── src # 源代碼 @ 路徑 │ ├── api # 所有請求 │ ├── assets # 主題 字體等靜態資源 │ ├── components # 全局公用組件 │ ├── directive # 全局指令 │ ├── filters # 全局 filter │ ├── icons # 項目所有 svg icons │ ├── lang # 國際化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局樣式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有頁面 │ ├── App.vue # 入口頁面 │ ├── main.js # 入口文件 加載組件 初始化等 │ └── permission.js # 權限管理 ├── tests # 測試 ├── .env.xxx # 環境變量配置 ├── .eslintrc.js # eslint 配置項 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自動化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json

3.登錄學習

　　模板同后台通訊標准的確定方法:

前端發的什么請求(url)?
數據格式是什么?
提交的是哪些數據?
后台返回的是哪些數據,數據格式是什么?

3.1 點登錄發送的請求: dev-api/vue-admin-template/user/login

1. 前端請求url(接口):http://127.0.0.1:8000/user/login

2.請求方式:post

3.提交數據格式: {"username":"admin","password":"111111"}

　4.后台返回的數據 : {"code":20000,"data":{"token":"admin-token"}} ,登錄成功后返回一個 token.

圖解:

-1. 前端請求url(接口1):http://127.0.0.1:8000/user/login ===> base_url + url (不要改admin的路由名稱)

base_url : 'http://127.0.0.1:8000' ,改后要重啟前端一下.

url : '/user/login/' 不要改admin的路由名稱,

-2.請求方式:post

-3.傳送的數據和格式: {"username":"admin","password":"111111"}

4.后台返回的數據和格式: {"code":20000,"data":{"token":"admin-token"}} ,登錄成功后返回一個 token.

3.2 上面登錄驗證完后要跳轉頁面還需要增加user/info接口

1. 前端請求url(接口2):http://127.0.0.1:8000/user/info?token=admin-token

2.請求的參數:?token=admin-token

3.請求方式:get

4.返回數據格式:

{
    "code":20000,
    "data":{
        "roles":[
            "admin"
        ],
        "introduction":"I am a super administrator",
        "avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
        "name":"Super Admin"
    }
}