项目2---十次方项目开发---前端---03

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>