element api文档 elementui开发文档

转载

mob64ca13fdd43c 2024-03-17 14:32:50

一、目录结构

/dist：执行npm run build命令后此文件夹下会自动生成文件，这些文件是真正需要发布到服务器上的文件
/node_modules：使用npm install module_name --save命令后，第三方包所存放的目录，引入时只需要 import xx from "module_name"
/public：不需要webpack处理的文件所存在的目录，如tinymce(富文本编辑器)
/src：源代码目录
4.1 /src/api：接口文件目录
此目录下文件命名规范："Api" + "业务名" + ".js" 此目录下文件方法命名规范：['add', 'list', 'detail', 'edit', 'del']为每个接口文件都具备的方法
接口调用示例

import ApiArticle from "@(注1)/api/ApiArticle.js";

ApiArticle.add( 数据放在这里 )
.then(res => {
    请求成功走这里
})
.catch(e => {
    请求失败走这里
});

接口基地址(如"http://******:8080/zhaosheng")统一配置在/src/util/request.js

关联方法(涉及两个以上的表的方法)放在主要的接口文件中，如查询一篇文章是否已经被收藏，涉及到文章表和收藏表，但是该方法放在ApiArticle.js中

ajax库使用axios，不是$.ajax()，支持promise写法(.then() .catch())

POST请求中，content-type已经统一处理为application/x-www-form-urlencoded，multipart/form-data因为项目使用base64图片上传，因此不会使用

注意： 具有分页功能的接口，前端处理后返回的数据格式为 {count：xx ,list:[{xx1},{xx2}]} 使用示例如下

this.tableData = res.list;
        this.count = res.count;

Vue.js具有双向数据绑定的特点，更改数据的时候，视图会同步变化，不需要手动拼接html模板之后插入到dom节点中

/src/util：公共函数文件目录，Helper.js集成base64图片上传函数，request.js为axios配置文件
/src/components：Vue公共组件目录，集成富文本编辑器(tinymce)
/src/view：注意： 视图文件目录
7.1 /src/view/Layout：布局文件目录，包含侧边栏，头部
7.2 /src/view/业务名：业务视图文件夹
注意： 业务视图文件夹下包含两个文件
Index.vue：列表页，关键element组件：Table
AddAndEdit.vue：新增，修改页面，关键element组件：Form Upload Pagination
/src/router.js：Vue路由文件，新增加页面时需要配置路由，路由会自动渲染成侧边栏，无需手动修改/src/view/Layout/Aside.vue文件
/src/store.js：Vuex文件，全局数据仓库
/src/main.js：webpack入口文件

注意： 命令行请在项目根目录下运行

注意： npm run serve 具有热更新效果，更改代码后无需刷新，即可看到效果(更改路由或者添加文件有可能需要刷新)

http://localhost:8080/的地址是本机地址，只有本机可以访问
http://172.21.xxx.xxx:8080/的地址是校园网(局域网)地址，链接了校园网的设备都可以访问，不限制本机

什么是Vue
Vue是一个渐进式JavaScript框架，核心思想是mvvm，即双向数据绑定。双向数据绑定的意思是视图的变化会自动同步到数据，数据的变化也会自动同步到视图。

举个例子，页面上有一个input输入框，这个input框上面有一个id属性，值为’test’，现如今用户在input输入框中输入’123456’，如何获取用户的输入值？

jQuery的做法：$("#test").val()，这样一来就获取到了输入框的值

Vue的做法：<input v-model="form.test">，这样写的话，数据就会同步到"form.test"，想要访问到这个数据，就可以使用以下语句

this.form.test

那么如何改变input框中的值呢？
jQuery的做法：$("#test").val('123456')，这样一来就改变了输入框中的值

Vue的做法：this.form.test = '123456'，这样写的话，数据就会同步到<input v-model="form.test">，就改变了输入框中的值

这就是Vue的双向数据绑定特性

jQuery的做法：$("#container").html('<span>' + data + '</span>')，需要自己手动组装html和数据

Vue的做法：

<span>{{data}}</span>

this.data = 123456

Vue改变数据的时候就会将数据自动填充到{{data}}中去(data是变量名)，如果需要根据条件判断是否显示，需要渲染列表，则需要用到v-if v-for

生命周期函数
Vue中mounted可以理解为 $(document).ready(function(){})
绑定事件
@click 理解为 onclick
引入文件
请使用import
什么是elementui，他和Vue是什么关系
elementui是一套基于Vue的组件库，不仅仅包含基础样式，如按钮样式，也包含着功能组件，如文件上传组件，对话框组件
他们两者之间的关系类似于bootstrap的依赖JavaScript的部分，与jQuery之间的关系
仔细回忆以下，bootstrap需要先引进jQuery，在引进bootstrap自己的JavaScript文件，才能使用对话框，轮播等等依赖JavaScript的部分功能
Vue这边也是这样，需要先有Vue，然后安装elementui
什么是"组件"
组件是封装了"html css js"三大件的代码块
体现为自定义的html标签，如< editor/>(html5没有这个标签，但是我们可以自己定义)