4.5. TIY：添加新的页面

【需求】在默认生成的工程基础上，顶部导航上添加 Other 链接，点击此链接将跳转到http://localhost:8080/other，且在导航下方显示 “这是自行添加的其它页面” 字样。

1. 实现步骤如下：
   • 先在 views 下添加新的视图组件，命名为 OtherView.vue ，在此文件中的 下的
     的子级中设计需要显示的文本：
   • 在 router/index.js 的 routes 常量下添加配置，映射路径为 /other ，组件为动态导入的
     OtherView.vue ：
   • 在 App.vue 中的
     
   • 4. 在浏览器中可以看到导航中出现了 Other 链接（不需要重新启动服务），点击后效果如下图所示：

4.6. TIY：复制出新的工程

1. 由于创建工程时，每次都需要选择预设项，并且需要下载大量的依赖模块，导致创建工程耗时较长，在入门级的学习阶段，可能需要频繁创建不同的工程，以进行不同的尝试，为了提高创建工程的效率，通常可以创建好新工程后，将它保留下来，当后续需要新的工程时，将此工程复制一份即可得到新的工具。
2. 操作步骤如下：
   • 通过此前创建工程的步骤，创建新的工程，工程名可自定义，例如： vue-project-preset
   • 将 vue-project-preset 复制为 vue-project-02 ：
   • 由于工程中的部分配置中保存了工程名称，所以还需要对其中的一些文件内容进行调整：
     • 删除 .idea 文件夹
       • 如果你曾经使用IntelliJ IDEA打开过 vue-project-preset 才需要进行此操作
       • 如其中的文件内部报错，可以无视
     • 删除 .git 文件夹
       • 如果你认为不需要使用Git管理此工程，可以不进行此操作
     • 将 package.json 中的原工程名称改成新工程名称
     • 将 package0lock.json 中的原工程名称改成新工程名称
     • 将 README.md 中的标题修改为新工程名称（非必须）

提示：尽管每次创建工程时选择的预设项都相同，仍不建议在创建过程的最后一步将 Save this as a preset for future projects?（是否保存以上配置信息，作为后续将创建的新工程的预设？）这一项选择为“是”，随着学习的深入，你的预设项可能会发生一些调整。
【需求】创建出新的工程，创建完成后不做任何修改，并将其复制，得到另一个新工程。

5. 使用Element UI

5.1. 关于Element UI

1. Element UI是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型。
2. Element UI的官方网址是：https://element.eleme.cn/
3. 简单来说，Element UI预定义了几乎所有标签的常规设计样式，在绝大部分情况下，你不需要考虑例如按钮的宽度、高度、背景颜色、文本大小、文本颜色等样式规则，只需要直接使用即可，例如ElementUI提供的按钮：
4. 当然，除了按钮以外，对于表格、表单、表单中各控件、弹出框等常见的页面元素，Element UI都设计了非常简约美观的样式，例如：
5. Element UI之所以被称之为“组件库”，是因为它不再使用传统的HTML标签，而是自行定制了一系列的标签（包括 标签属性），以按钮为例，其源代码大概是这样的：

<el-button type="primary">主要按钮</el-button>

6. 除了样式以外，Element UI还提供了便利的表单控件的验证方式，执行效果例如：
7. 提示：由于Element UI定义了大量的组件，每个组件都有许多属性，所以，学习Element UI时需要记忆大量的组件特征，这将是一个非常漫长的过程，通常不建议刻意的死记硬背，应该重点Element UI可以做到什么，例如有哪些样式，各组件的核心属性等用法，然后结合官方文档（https://element.eleme.cn/#/zh-CN/component/）进行开发。

5.2. 安装ElementUI

1. 首先进入工程文件夹（如果使用IntelliJ IDEA打开了此工程，直接点击IntelliJ IDEA下面的Terminal即
   可）:
   cd d:/Vue-Workspace/vue-project-02
2. 然后使用npm命令安装Element UI，注意：以下命令区分大小写，例如最后的 -S 的字母是大写的：
   npm i element-ui -S
   或：
   npm install --save element-ui
3. 安装完成后，在工程的 main.js 中导入并使用Element UI：

   // main.js import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

   至此，已经可以在工程中使用Element UI了。

5.3. TIY：在页面中显示ElementUI组件

1. 在浏览器中打开官方文档（https://element.eleme.cn/#/zh-CN/component/），在左侧菜单中找到你希望加入到你的视图中的组件，在右侧演示区域的下方“显示代码”（需要将鼠标移动到演示区域下方的箭头那一栏），然后将代码复制到你的视图中即可。
2. 【需求】将“典型表单”加入到 vue-project-02 的首页并显示。
3. 操作步骤如下：
   1. 在浏览器中打开官方文档，在左侧菜单中找到“Form 表单”，在右侧找到“典型表单”，并将鼠标移动到演示区域下方的箭头那一栏，原本灰色的箭头会变成蓝色，并显示了“显示代码”的字样：
   2. 点击“显示代码”一栏的任意位置，会展开此演示区域对应的源代码：
   3. 接下来，将这些代码复制到你的视图组件中去即可，通过之前的学习，你应该知道：
      • 主页的视图组件是 App.vue 文件，所以，当你需要将以上内容显示在主页时，应该将代码粘贴到此文件中
      • 在视图组件中的 节点是设计页面元素的，并且只能有1个直接子节点，所以，从Element UI官网上复制过来的代码中，页面设计部分的代码应该入在 节点下的
        节点之下
      • 复制过来的 节点及其下的所有代码是在 的结束标签之后的
      • 处理完成后，你的代码应该是这样的：
   4. 执行 npm run serve 命令，当服务启动后，在浏览器中访问，效果如下:
   5. 如果你认为这些页面元素占据了100%宽度，并且默认是靠左对齐的（当占据100%宽度时你可能看不出来），这样的显示效果不够美观，你可以自行做一些调整：
      • 使用你已经掌握的CSS样式进行调整，例如：

        <div style="width: 500px; margin: 0 auto;"></div>

      • 学习更多的Element UI的做法，例如:

        <el-row type="flex" justify="center"> <el-col :span="12">  </el-col> </el-row>

      • 以Element UI的实现方案为例，代码如下图所示：
      • 调整完毕后的效果为：
   6. 通过此前的学习，你应该知道有些文件在此工程中是可以不必保留的，应该将这些文件删除，例如：
      • 删除 main.js 中不必要的配置，包括：
        • 删除 import HomeView from ‘…/views/HomeView.vue’
        • 删除 routes 常量中各对象（值为空数组即可）
      • 删除 src/components/HelloWorld.vue
      • 删除 src/views/HomeView.vue
      • 删除 src/views/AboutView.vue

5.4. TIY：设计登录界面

1. 【需求】使用新的工程，在主页显示登录界面，界面中的必要控件有：输入框（用户名）、输入框（密码）、按钮（提交）、按钮（重置），表单居中，占页面的1/3宽度。
2. 具体操作步骤如下：
   • 在命令提示符中打开 vue-project-preset 工程，在此工程中安装Element UI
     • 使得以后通过此工程复制出来的新工程都是已经安装了Element UI的
   • 在 vue-project-preset 工程中的 main.js 中添加导入并使用Element UI的代码
   • 复制 vue-project-preset ，得到 vue-project-03 ，并根据前序说明修改必要的配置
   • 由于本次仍只需要1个页面，则可参考前次练习的步骤删除不必要的文件
   • 在官方文档中找到与本次需求最贴近的演示，例如：
   • 将对应的代码复制到 App.vue 中，例如：
   • 为检验此次操作是否成功，此时你可以启动此工程的服务，并尝试访问，应该是成功的，例如：
   • 参考前次案例的 与 的使用，调整表单宽度并居中，此次的需求是占据1/3宽度，由于Element UI的设计中将把页面宽度分为24等份，其1/3则是8，所以，将 :span 的值设置为 8 ，另外，你还可以根据自己的审美或设计思路添加一些其它元素。简单的调整如下：
   • 以上调整后的运行效果为：
   • 接下来，调整表单中的控件：
     • 在视图设计代码中，将“年龄”对应的代码移动到“密码”对应的代码上方
     • 在视图设计代码中，删除“确认密码”对应的代码
     • 在视图设计代码中，将“年龄”文本改为“用户名”，且对应源代码区域中的2处 age 改为 username
     • 在JavaScript代码中，将 checkAge 改为checkUsername ，将原本为空时的提示文本 “年龄不 能为空” 改为 “用户名不能为空” ，删除 setTimeout() 函数的全部代码，并在 if 结束后补充 callback();
     • 在JavaScript代码中，删除 validatePass 值中 else 代码块，并在 if 结束后补充callback();
     • 在JavaScript代码中，删除关于 validatePass2 变量的全部代码
     • 在JavaScript代码中，在 return 对象中，将 ruleForm 中的 checkPass 删除，并将 age 改 为 username
     • 在JavaScript代码中，在 return 对象中，将 rules 中checkPass 删除，将 age 改为username ，且其下的validator:checkAge 改为 validator: checkUsername
     • 调整完成后， App.vue 的全部代码如下：

     <template><div id="app"><el-row type="flex" justify="center"><el-col :span="8"><h2 style="text-align: center">用户登录</h2><el-divider></el-divider><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model.number="ruleForm.username"> </el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v- model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置    </el-button></el-form-item></el-form></el-col></el-row></div></template><style>   *{   font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";   }</style><script>   export default {   data() {   var checkUsername = (rule, value, callback) => {   if (!value){     return callback (new Error('用户名不能为空''));   }   callback ();   };   var validatePass =  (rule, value, callback) => {   if(value === ' ' ) {   callback((new Error('请输入密码'));   }   callback () ;   };   return{     ruleForm:{     pass:' ',     username:' '   },   rules:{    pass;[    {validator: checkusername,trigger:'blur'}     ]   }   };   },   methods:{   submitFrom(formname) {   this.$refs[fromName].validate((valid) =>{   if (valid) {      alert(' submit ! ');   }else{   console.log('error submit!!');   return  false;   }   });   },   resetFrom(formName){   this.$refs[formName].resetFieds();   }   }   }</script>

   11. 在浏览器中访问，当输入有效信息时，页面效果如下：
   12. 当未输入信息时，页面效果如下：
   13. 目前关于用户名的验证规则是“必须存在有效值”，关于密码的验证规则是“不允许为空字符串”，这些规则在 checkUsername 和 validatePass 的 if 语句中，如果你有更好的设计，可自行调整
   14. 目前触发验证的事件是“当输入框丢失焦点时”，是由 return 对象中 rules 下各属性下的 trigger设置的，并且在提交表单时也会先调用这些验证

6. 使用axios

6.1. 关于aixos

1. axios是一个易用、简洁且高效的http库，主要用于发起HTTP请求，并获取响应的结果。
2. axios的官方网址是：http://www.axios-js.com/
3. axios的主要特点有：
   • 从浏览器中创建 XMLHttpRequests
   • 从 node.js 创建 http 请求
   • 支持 Promise API
   • 拦截请求和响应
   • 转换请求数据和响应数据
   • 取消请求
   • 自动转换 JSON 数据
   • 客户端支持防御 XSRF

6.2. axios基本使用

1. 发起GET请求示例：

// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response);  })  .catch(function (error) {   console.log(error);  });  // 上面的请求也可以这样做axios.get('/user', {     params: {     ID: 12345     }  })   .then(function (response) { console.log(response);     })     .catch(function (error) {   console.log(error);     });

2. 发起POST请求示例：

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'  })  .then(function (response) {     console.log(response);   })   .catch(function (error) {      console.log(error);   });

3. 更多示例请参考axios官方文档：http://www.axios-js.com/zh-cn/docs/

6.3. 安装axios

1. 与此前的Element UI的安装方式类似，当需要安装axios时，应该先切换到Vue脚手架工程的文件夹下，然后再运行命令以安装axios，安装命令为：

npm i axios -S

或：

npm install --save axios

2. 安装完成后，也需要在 main.js 中添加配置，配置代码为：

import axios from ‘axios’
Vue.prototype.axios = axios

6.4. TIY：使用axios与后端服务器交互

【需求】基于此前设计的登录页面，向后端服务器发起登录请求，如果登录成功，则跳转到主页（页面元素可自行设计），如果登录失败，则使用某种方式在页面中进行提示。

1. 为了达到更好的练习效果，老师已经提前准备好了一个后端服务工程，你可以直接启动这个工程的服务，并向它发起请求，此服务将会向你响应一些结果。
2. 关于这个后端服务工程：

   • 你需要找老师获取此工程的jar包文件

   • 你至少需要在计算机中安装JDK才可以启动此工程的服务

   • 此工程的服务默认占用 18080 端口，如端口被占用，将无法启动此服务

     • 如果端口被占用，你可以通过 netstat -ano |findstr 18080 找出占用端口的进程的id，并通过 taskkill /f /t /im 进程id 来终止进程

   • 你可以使用 java -jar 工程jar包文件 命令启动此服务

     • 例如，把工程jar包文件放在D盘，并且当前位置也在D盘，直接执行命令即可

       java -jar vue-project-server-0.0.1.jar

     • 执行效果如下图所示：

   • 当成功启动服务后，不要关闭命令提示符窗口

   • 当成功启动服务后，你可以通过Ctrl + C停止服务

   • 当成功启动服务后，你可以通过http://localhost:18080/doc.html查看此服务的API文档，如下图所示：

   • 此服务提供的所有数据操作都只是模拟的，并没有真实的使用某数据库存储数据当准备好后端服务后，接下来将开发Vue脚手架工程，具体步骤为：

     • 由于axios也是常用库，在 vue-project-preset 中安装axios:
     • 在 vue-project-preset 的 main.js 中添加导入axios：
     • . 基于 vue-project-preset 复制出新的工程 vue-project-04 ，并在配置文件中修改必要参数（工程名称等）
     • 在 App.vue 的 中，删除
       
     • 默认的工程中有 views/HomeView 和 views/AboutView ，其中， HomeView 可作为主页的视图组件，而 AboutView 不是必须的，则将 AboutView 重命名为 LoginView ，将作为登录的视图组件：
     • 配置 router/index.js 中的路由配置，目标为：
       • HomeView 是动态加载的，映射的路径是 /home
       • LoginView 是默认即加载的，映射的路径是 /login
     • 将 vue-project-03 工程中的 App.vue 的全部代码复制到 vue-project-04 工程中的 LoginView中，覆盖原所有代码，此时，启动 vue-project-04 服务，在浏览器中通http://localhost:8080/login将可以看到与 vue-project-03 相同的页面：
     • 请注意：如果此时访问服务的根路径，即访问http://localhost:8080时，页面中将显示一片空白，因为在路由中并没有配置根路径（ / ）如何处理，此问题可暂时忽略，并不是本次练习的重点
     • 在 HomeView 中进行一些简单的设计，表现出它是主页，例如：
     • 将axios发出POST请求的示例代码粘贴到 LoginView.vue 中原本通过格式验证弹出警告框的位置，如下图所示：
     • 修改请求路径与请求参数，为了便于排查可能的故障，建议将它们声明为变量，除了在发送请求时使用以外，还应该在控制台输出，并且，需要注意以下问题：
       • 提交的请求参数名称必须与服务器要求的相同，即用户名为 username ，密码为 password
       • 可以通过 this.ruleForm.username 和 this.ruleForm.pass 获取表单控件中输入的值，其中 ruleForm 是与表单绑定的Vue属性
       • 需要使用 this 引用 axios
     • 请确保后端服务已经启动，打开浏览器，按下F12进入开发者模式，输入正确的用户名 admin 及密码 888888 后，在控制台可以看到响应结果的正文（ data ）中包括了 state : 200 和一个名为data 的对象，此 data 对象中是用户的信息（ id 、 username 、 avatarUrl ），如下图所示：
     • 如果使用其它用户名，可以看到响应的结果中的 state 值为 400 ，并有名为 message 的属性，是错误信息的描述文本，如下图所示：
     • 如果用户名正确，而密码是错误的，可以看到响应的结果中的 state 值为 409 ，且 message 也有对应的提示：
     • 回到 LoginView.vue 的代码中，可以看到 then() 内部的函数中有名为 response 的参数，在浏览器的控制台输出的就是这个参数，它的值中包括一个名为 data 的对象，这个对象就是服务器端
       响应的数据（下图仅框出需要关注的部分，未改动代码）：
     • 所以，通过 response.data 即可得到服务器端响应的数据，而服务器端响应的数据格式为：

       {state: 200,message: "登录失败，用户名不存在！",data: {id: 9527,username: "admin",avatarUrl: "https://tedu.cn/zhuzhan/img/logo.png"}}

       为了更加清晰的看到服务器端响应的结果，可以将响应时的输出进行细化，例如：

     17. 经过调整，再次尝试访问，可以看到控制台中的信息清晰了许多，如下图所示：
     18. 可以看到，仅当登录成功时，响应的 state 值为 200 ，则可以将 state 作为判断登录成功与否的依赖，例如，当此值不是 200 时，将响应的 message 提示到界面中：
     19. 在页面中使用错误的用户名或错误的密码尝试登录时，都会弹出错误提示：
     20. 当登录成功时，跳转到 /home 即可，如下图所示：