ElementUI:https://element.eleme.io/#/zh-CN
-------------------------------------------------------------------------------------------------------------------------------------------------------
api:前端工程訪問後端的js
assest：原生的靜態資源
store：狀態管理
views：界面
main.js：入口
index.html:整個工程的單頁面
------------------------------------------------------------------------------------------------------------------------------------------------
啓動後臺的easymock：https://blog.csdn.net/qq_28764557/article/details/103934646
------------------------------------------------------------------------------------------------------------------------------------------------
創建接口：
環境問題：
開發環境：
生產環境：
什麼時候用取決於命令npm run dev
關於環境的網址問題：
我的本機的mock:http://192.168.244.135:7300/
實際的地址：
我項目的地址：
request是在哪裏來的？
基本的地址也是在這裏引入的。
登陸：
-----------------------------------------------------------------------------------------------------------------------------------------------------
上傳和修改活動全部列表：
{
"code": 20000,
"flag": true,
"message": "@string",
"data|30": [{
"id": "@string",
"name": "@cword(8,12)",
"summary": "@cword(20,40",
"detail": "@string",
"sponsor": "@string",
"image": "@image",
"starttime": "@date",
"endtime": "@date",
"address": "@county(true)",
"enrolltime": "@date",
"state": "@string",
"city": "@string"
}]
}
-----------------------------------------------------------------------------
登出接口。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
整體的思路：在api文件夾封裝對rest的訪問。
實際開發是分爲三層：數據層 表現層 和控制層
返回一個方法或者說是一個對象，這個方法要傳一個json。
request.js實際上是腳手架給我們封裝的。
api文件夾是封裝rest接口訪問的。
導入導出。
request是導出的。
：提交ajax請求的。
看下import和export的寫法：
------------------------------------------------------------------------08-------------------------------------------------------------------
import request from "@/utils/request"
其中的@代表在src下面找。
----------------------------------------------------------------------------09------------------------------------------------------------------------------------------
代碼：
Vue分幾個區：模板去視圖區 代碼區 樣式區
：對象，包含多個方法。
then是回調寫一個回調函數即可。
--------------------------------------------------------------------------------10---------------------------------------
寫模板：
寫表格修改路由。
----------------------------------------------------------------------11-------------------------------------------------------------------------
還是那個vue對活動進行分頁管理。
寫一般查詢的api的js。
---------------------------------------------------------12-------------------------------------------------------------------------
寫完api進行改造了。
寫分頁的api。
----------------------------------13-------------------------14----------------------------------------------------------------
添加分頁：
----------------------------------------------------------------------------------------15----------------------------------
條件查詢。對象的定義。
---------------------------------------------------------16----------------------------------------------------
新增。寫一個彈出框。
-----------------------------------------17----------------------------
畫新增的表單。畫4表單。
-------------------------------------------18---------------------------
城市下拉列表。
created() {
this.fetchData();
cityApi.getList().then(response => {
this.cityList = response.data;
});
}
then是回調函數。
<el-form-item label="選擇城市">
<el-select v-model="pojo.city" placeholder="請選擇">
<el-option
v-for="item in cityList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
工作原理：1和2是綁定的值，3是顯示的值。
-------------------------------------19---------------------------------
表單提交。
----------------------------------20------------------------------------
修改。根據ID查找數據。
----------------------------21----------------------------------------------
新增和修改區別。
----------------------------22----------------------------------------------
保存修改。
----------------------------23----------------------------------------------
消息提示。
----------------------------24----------------------------------------------
刪除。
----------------------------25----------------------------------------------
api的優化。
注意整個Restful的接口的風格。
----------------------------26----------------------------------------------
