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----------------------------------------------