# Vue2进阶-ElementUI+Axios+Git基础+Gitee - ElementUI（掌握） - Axios发送异步请求（掌握） - Git基础（掌握） - Gitee远程仓库（掌握） ## 一. ElementUI ### 1. 概述 Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件 ElementUI是一个基于vue的前端UI【图形界面】框架。是由饿了么团队开发的一套桌面UI组件库 官网：https://element.eleme.cn/#/zh-CN ### 2. 入门 #### 2.1. 安装ElementUI 安装文档：https://element.eleme.cn/#/zh-CN/component/installation Element UI 可以使用cdn方式和npm方式进行安装，我们使用npm ，推荐使用 npm 的方式安装，它能更好地和 \[webpack\](https://webpack.js.org/) 打包工具配合使用 \`\`\`shell npm i element-ui -S \`\`\` #### 2.2. 导入ElementUI 在main.js中导入ElementUI \`\`\`js import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); \`\`\` #### 2.3. 使用ElementUI ##### 2.3.1. 创建单文件/页面组件 拷贝HelloWorld.vue重命名为ElementUI.vue ，内容如下： \~\~\~html 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 \~\~\~ ##### 2.3.2. 配置路由 \`\`\`js import ElementUI from '@/components/ElementUI' //import ElementUI from './components/ElementUI.vue' //同上 \`\`\` \`\`\`json { path: '/ele', component: ElementUI } \`\`\` ### 3. 常用组件 一般管理系统为了提高开发效率，都会使用脚手架项目来开发。管理系统管理一个模块：分页和高级查询，删除，添加和修改，批量删除等功能，这些功能需要什么组件：表格table，表单form，分页栏等 #### 3.1. 布局Layout !\[image-20220523222648907\](课件图片/image-20220523222648907.png) \~\~\~html \~\~\~ #### 3.2. 表格Table !\[image-20220523222921871\](课件图片/image-20220523222921871.png) \~\~\~html \~\~\~ #### 3.3. 按钮Button !\[image-20220523223420333\](课件图片/image-20220523223420333.png) \~\~\~html 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 朴素按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 圆角按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 \~\~\~ #### 3.4. 分页Pagination !\[image-20220523223635685\](课件图片/image-20220523223635685.png) \~\~\~html \~\~\~ #### 3.5. 表单Form !\[image-20220523223822375\](课件图片/image-20220523223822375.png) \~\~\~html 查询 \~\~\~ #### 3.6. 消息框Message !\[1\](课件图片/1.png) \~\~\~html 消息 成功 警告 错误 \~\~\~ #### 3.7. 对话框Dialog !\[image-20220523224829719\](课件图片/image-20220523224829719.png) \~\~\~html 点击打开 Dialog 这是一段信息 取 消 确 定 \~\~\~ #### 3.8. 图标Icon !\[image-20220523225126436\](课件图片/image-20220523225126436.png) \~\~\~html 搜索 \~\~\~ ElementUI简单的组件这个不 一 一 做演示，可以去根据官网文档去尝试 ### 4. 小试牛刀 #### 4.1. 基础框架 \~\~\~html 1. 编写单文件组件：User.vue 2. 配置路由： import User from '@/components/User' { path: '/user', component: User } 3. 访问测试：http://localhost:8080/#/user 可以去掉logo图标 \~\~\~ #### 4.2. 表格的使用 \~\~\~html 删除 编辑 \~\~\~ ## 二. Axios使用 上面只是模拟了一个接口，但是这个接口还必须得调用。vue更新到2.0之后，官方推荐使用axios请求服务器数据。axios和其他的ajax库都很类似，他是基于promise的http库，可以用在浏览器和node.js中 ### 1. 安装axios \~\~\~shell npm install axios@0.25.0 --save 注意: 默认安装的axios是1.x的启动报错,可以升级脚手架版本,可以降低axios的版本 \~\~\~ ### 2. 使用axios调用接口 \~\~\~js //User.vue中使用功能axios调用user.js中模拟的接口 \~\~\~ 注意：其实网上也有在线接口模拟工具FastMock ### 3. axios的全局使用 以上代码的问题： \~\~\~ 1. 每写一个单文件组件都需要导入axios //引入axios import axios from "axios"; 2. 地址太长，后期调用后端接口，每次发请求都要写http://localhost:8080 http://localhost:8080/user/list http://localhost:8080/user/del \~\~\~ 在main.js中： \~\~\~js //引入axios import axios from 'axios' //配置axios的全局基本路径 axios.defaults.baseURL='http://localhost:8080' //全局属性配置：在任意组件内可以使用this.$http获取axios对象 Vue.prototype.$http = axios \~\~\~ ### 4. User.vue修改路径 \~\~\~html //User.vue中使用功能axios调用user.js中模拟的接口 \~\~\~ ### 5. 分页实现 #### 5.1. 添加分页栏 \~\~\~html \~\~\~ #### 5.2. 分页栏相关参数 \~\~\~html \~\~\~ !\[image-20220511091757053\](课件图片/image-20220511091757053.png) #### 5.3. 点击分页栏实现分页 \~\~\~html //:current-page="currentPage" - currentPage 改变时会触发 \~\~\~ \~\~\~html \~\~\~ ## 三. Git基础 ### 1. 代码管理工具/版本控制器 #### 1.1. 为什么需要代码管理工具 - 实现跨区域多人协同开发 - 多人协作，代码放哪 ？ 通过工具集中存放到服务器 - 并行开发，提高开发效率 - 追踪和记载一个或者多个文件的历史记录，记录整个软件的开发过程 - 多人协作，领导要看项目？ 通过工具集中存放到服务器，权限控制 - 项目出现冲突？通过工具可以解决冲突 - 项目版本的发布问题 ？ v1 v2....提供一个tag打标签，恢复到指定版本 - 程序界的后悔药 !\[image-20220523005748179\](课件图片/image-20220523005748179.png) 以上的事情需要一个工具来管理，这种管理代码的工具。就叫代码管理工具 #### 1.2. 常见的代码管理工具 ##### 1.2.1. 集中式管理SVN 开发者能够通过局域网或者互联网进行连接到服务器 !\[image-20220523005935742\](课件图片/image-20220523005935742.png) ##### 1.2.2. 分布式管理GIT 不需要连中央服务器master都可以提交【先提交至本机】，有网络之后再提交至中央服务器 !\[image-20220523010047822\](课件图片/image-20220523010047822.png) ##### 1.2.3. Git pk SVN - 版本库本地化，支持离线提交，相对独立不影响协同开发。每个开发者都拥有自己的版本控制库，在自己的版本库上可以任意的执行提交代码，创建分支等行为 - 支持快速切换分支方便合并，合并性能好。在同一目录下即可切换不同的分支，方便合并，且合并文件速度比SVN快 - 分布式版本库，无单点故障，内容完整性好 - 全世界开源项目基本都在使用Git !\[image-20220523010343153\](课件图片/image-20220523010343153.png) !\[image-20220523010352749\](课件图片/image-20220523010352749.png) ### 2. Git #### 2.1. Git简介 Git是一个免费开源分布式版本控制工具，是由Linux的作者Linus开发的第二个伟大作品。2005年由于BitKeeper软件公司对Linux社区停止了免费使用权。Linus迫不得己自己开发了一个分布式版本控制工具，从而Git诞生了 目前使用Git作为版本控制的开源软件：Linux kernel，Android，jQuery，Ruby on Rails，github，码云Gitee等 Git官网可以下载：https://git-scm.com/ #### 2.2. Git安装 !\[1\](课件图片/1-16532816798181.png) ##### 2.2.1.Git服务器的安装 !\[1\](课件图片/1-16532820923112.png) !\[2\](课件图片/2.png) !\[3\](课件图片/3.png) !\[4\](课件图片/4.png) !\[5\](课件图片/5.png) \*\*配置环境变量：path - git.exe的路径\*\* 注意：其他没截图的没有基本默认就行。只需要选一个安装路径和使用bash输入命令即可 ##### 2.2.3. 安装客户端并汉化 !\[1\](课件图片/1-16532826113511.png) !\[2\](课件图片/2-16532826113522.png) !\[3\](课件图片/3-16532826113523.png) 安装完成后，需要重启电脑。汉化包装好之后，通过settings选择语言 !\[image-20220523012416799\](课件图片/image-20220523012416799.png) #### 2.3. Git命令操作 ##### 2.3.1. Git交互流程图 !\[image-20220523011445114\](课件图片/image-20220523011445114.png) - Clone：克隆，从共享仓库/中央仓库将代码拷贝一份下来 - Commit：提交，提交的本地仓库 - PUSH：推送，将本地仓库代码推送到远程中央仓库 - PULL：拉取，从远程仓库下载最新的代码 - Git是先提交到本地仓库，然后再推送 ##### 2.3.2. 工作区\&暂存区 !\[img\](课件图片/wps1.png) ##### 2.3.3. Git命令操作 桌面新建三个文件夹： 模拟两个开发人员本地仓库：gittest/user1 和 gittest/user2 模拟项目经理远程仓库master：gittest \~\~\~xml ==============仓库管理员或项目经理操作======================== 第一步： 创建仓库，进入gittest目录 - 右键Git Bash here git init --bare pethome -- pethome仓库名称可以改【--bare 是参数不用管】 ==============开发人员1操作============================= 第二步：克隆，进入usr1目录 - 右键Git Bash here git clone ../pethome -- 相对路径的写法【使用TAB自动补全】 第三步：设置个人信息【用户名和邮箱】 cd pethome git config user.name "user1" git config user.email "user1@163.com" 第四步：新建一个文件并写入数据 echo "User1 add content" \> index.jsp -- 会自动创建文件，并将User1 add content字符串写入index.jsp【\>\>追加写】 第五步：添加并提交文件 -- 提交到本地仓库 git add index.jsp -- 添加到暂存区 git commit -m "User1 add the file" 第六步：把自己的仓库提交到公共服务器 git push origin master ==============开发人员2操作============================= 第七步：克隆，进入usr2目录 - 右键Git Bash here git clone ../pethome -- 相对路径的写法【使用TAB自动补全】 第八步：设置个人信息【如果不这是在提交的时候会出问题】 cd pethome git config user.name "user2" git config user.email "user2@163.com" 第九步：编写代码：\>表示覆盖写，\>\>表示追加写 echo "User2 add content" \>\> index.jsp 第十步：添加并提交文件 -- 提交到本地仓库 git add index.jsp -- 添加到暂存区 git commit -m "User2 add the file!" -- 【-m表示message】 第十一步：把自己的仓库提交到公共服务器 git push origin master ==============开发人员1操作============================= 第十二步：拉取远程服务器最新数据 git pull \~\~\~ 注意：以后到linux上去操作，没有图形界面，就只有通过命令操作。会命令操作会更加方便理解图形界面 #### 2.4. 客户端操作 \~\~\~xml 清空三个文件夹的所有内容 项目经理或仓库管理员pethome 右键建库 - 勾选纯版本库 复制这个库的地址：pethome的地址 程序员user1 进入user1目录 克隆 进入pethome目录 编写index.jsp 提交 - 提交时弹出对话框，输入用户名和邮箱 提交并推送 程序员user2 进入user2目录 克隆 进入pethome目录 编写index.jsp - 追加 提交 - 提交时弹出对话框，输入用户名和邮箱 提交并推送 程序员user1 拉取 \~\~\~ 注意：客户端安装之后重启之后就可以看到不同的图标。这些图标，可以反映出当前文件或者文件夹的状态: \~\~\~ 1. 绿色的对号：正常的,表示与仓库同步 2. 红色感叹号：被修改过的 3. 蓝色的加号：新添加的 4. 蓝色的问号：未受控的（无版本控制的） 5. 灰色的减号：忽略不受控的 6. 红色的x号：删除的 7. 黄色的感叹号：有冲突的 \~\~\~ ## 四. Gitee远程仓库 引入：之前都是将代码保存在本地的中央仓库中，地址只能自己访问，别人无法访问，但是要团队协作怎么办？ gitee【码云】是中国使用最多的代码托管平台，类似的还有国外的github，gitlab等等。它是一个远程仓库，只要有网【外网】就可以访问，不仅可以进行克隆，推送和拉取，还支持分支和合并 官网：https://gitee.com/ 注意：gitee【码云】是一个远程仓库，git代码/版本控制/管理工具。代码可以通过git工具上传到Gitee ### 1. 基本操作 #### 1.1. 创建仓库 右上角和左下角都有 - 仓库名称：pethome，自动生成仓库地址 - 仓库介绍：宠物乐园后端项目 - 选择语言：Java - 使用Readme文件初始化这个仓库：也可以不要 仓库地址：点击克隆下载，复制仓库地址 !\[1619621737947\](课件图片/1619621737947.png) #### 1.2. 删除仓库 点击仓库 - 管理 - 删除仓库 - 输入Gitee的密码 ### 2. 将Idea中的项目上传到码云 #### 2.1. IDEA集成Git IDEA本身就集成了Git。settings - Version Control - Git。但是需要关联或配置一下git.exe - 选中我们安装目录下的git.exe即可 !\[1619622475351\](课件图片/1619622475351.png) #### 2.2. 上传到码云 \~\~\~xml 1. 切换到需要上库的项目 2. 点击VCS -\> Create Git Repository... -\> 选中当前项目 - Ok 3. 点击忽略文件或文件夹的提交： idea2023会克隆之后会自动生成.gitignore文件【idea影藏了】，自动忽略了.idea和node_modules 例如前端的：node_modules 例如后端的：target 操作： 选中需要忽略的文件或文件夹右键 -\> Git -\> Add to .gitignore【2020版本】 2023版本的idea可以直接在.gitignore文件添加 4. 点击提交并推送：commit and push 此时会弹出一个框 -\> 点击Define remote -\> 设置远程仓库地址 5. Push点击 如果在码云上新建远程仓库的时候没有选设置模板 - Readme文件 会push成功 如果在码云上新建远程仓库时选择了设置模板 - Readme文件 此时push会失败 拒绝 原因是远程中有两个readme文件没有pull下来 解决： 1. 先pull一下 在Termial中输入命令：git pull origin master --allow-unrelated-histories 工程中会pull两个readme文件 - 这个时候可以readme文件冲突(红色) - 点击resolve解决用 自己的方案或他们的方案然后再Pull就没问题了 2. 再提交就没有问题了 \~\~\~ #### 2.3. 与Git断连后重连 \~\~\~xml 1. 先去IDEA的工作空间中删除掉.git文件，然后去码云上删除仓库 2. 重启IDEA，右下角会出现以下错误提示：Invalid VCS root mapping -\> 点击Configure... -\> 先-点之前的仓库地址【红色的】-不然重新加了之后要重启IDEA才有效【有效项目会有Git】。也可以项目右键 - Git - Repository - Remotes... 3. 然后连Git就跟上面的步骤一样 \~\~\~ ### 3. 搜索项目 注意：在gitee上还可以搜索开源的项目克隆下来学习 !\[image-20220630163013896\](课件图片/image-20220630163013896.png) ### 4. 导入Gitee上的项目 \~\~\~xml 方式1.File - New - Project from Version Control 方式2.菜单栏 - VCS - Checkout from Version Control 注意:如果忽略了.idea目录，需要根据向导创建工程【是maven工程的话还要点击add maven...】，如果只忽略了target目录，就可以直接导入，直接使用 注意：如果要上传文件 文件右键选择Git - Commit File... 文件右键选择Git - Repository - Push 菜单栏上的Push图标 \~\~\~ #### 4.1. 忽略文件 #### 4.2. 提交文件 !\[1619623917809\](课件图片/1619623917809.png) !\[1619624038559\](课件图片/1619624038559.png) #### 4.3. 拉取代码 1. 右键菜单，通过 pull拉取代码 !\[1619624447950\](课件图片/1619624447950.png) 2. 进入如下界面，直接pull即可 !\[1619624529329\](课件图片/1619624529329.png) #### 4.4. 解决冲突 冲突是多个人同时修改了同一个文件造成的，当我们正常修改本地代码，推送代码到远程仓库的时候，如果提交的文件内容和远程不一样就会冲突 1. 正常推送代码，如果出现如下情况可能，就是发生冲突了： !\[1619656025131\](课件图片/1619656025131.png) 2. 意思是本地代码和远程代码不一样，需要我们手动合并代码，点击 Merge 合并 !\[1619656164628\](课件图片/1619656164628.png) 3. 点击Merge手动合并 !\[1619656251403\](课件图片/1619656251403.png) 4. 中间区域是最终的效果，把中间区域改成你想要的代码即可，然后点击 apply 应用 解决完冲突后，重新执行推送流程 ## 壹. 课程总结 \~\~\~ 1. elementUI - 前端ui框架 安装，引入，elementUI提供的常用组件 2. mockjs - 模拟数据和接口的工具 安装，引入 3. axios - vue中发送异步请求的工具 安装，引入，全局属性和基础路径：axios全局配置时，axios.defaults.baseURL地址没有改 4. git - 分布式的代码版本控制工具 安装 - 命令操作 - 客户端操作 5. Gitee - 国内远程仓库 创建仓库，删除仓库，搜索项目 6. 操作 将Gitee中的项目通过Git工具克隆/下载到IDEA：2种 将Idea中的项目通过Git工具推送到Gitee：2种 \~\~\~ ## 贰. 面试问题 \~\~\~ \~\~\~ ## 叁. 常见问题 \~\~\~ 入门案例常见问题： 1.开启服务npm run dev，报错：missing script "dev" 分析：输入这个命令的时候，没有找到这个dev环境 问题1：路径不对 问题2：package.json文件的问题 2.安装elementUi的时候版本号有问题 先卸载 - 重新安装 - npm i element-ui@2.15.13 -S \~\~\~ \~\~\~ 1. 成功之后的回调函数then()中写法不对 错误写法1：this.tableDate = res.data().data 错误写法2：this.tableDate = res.data.data() 2. 单文件组件中export default{}中格式写错 3. 前台页面报错【不用管，也能运行成功】 a. "Invalid prop: type check failed for prop "model". Expected Object, got Array 分析：错误是：期望对象，得到的是数组 在定义时要定义成成数组： tableData: {} - 对象 tableData: \[\] - 数组 b. \[WDS\] Disconnected! - 网上的各种方法都试过，没用 \~\~\~ ## 肆. 课后作业 \~\~\~ 一. 总结作业 二. 面试题 三. 把项目上传到Gitee \~\~\~ ## 伍. 扩展知识 \~\~\~ Me: node-sass有什么用 AI:please wait... Node-sass是一个Node.js模块，用于将Sass文件(.scss或.sass)编译成CSS文件。它提供了一种快速且高效的方式来将Sass代码转换为浏览器可读的CSS代码，可以在构建过程中自动化这个过程。Node-sass还支持许多Sass功能，如嵌套、变量、混合和继承等，使得开发者可以更加高效地编写CSS代码。 ------------------------------ Me: 脚手架项目开发管理系统必须要node-sass模块吗 AI:please wait... 不是必须的，但是如果你的项目中使用了SCSS样式预编译语言，那么就需要安装node-sass模块来将SCSS文件编译成CSS文件。如果你的项目中没有使用SCSS，那么就不需要安装node-sass模块 \~\~\~