目录AjaxAxios前后端分离开发介绍YAPI前端工程化环境准备工程化的Vue项目Vue项目的开发流程Element快速入门组件Table表格pagination分页Dialog对话框Form表单补充vue路由打包部署打包部署b站上黑马程序员的课程笔记在之前我们自己写出了几个简单的页面如下可以看出表单的样子并不好看并且这个表格里面的数据也是自己随便写的我们应该在服务器端接收数据。所以现在我来解决这个问题。这就涉及到了企业级web前端开发所涉及的技术Ajax异步交互技术通过Ajax就可以从服务端接收数据。1、概念Asynchronous JavaScript And XML异步的Javascript和XML。2、作用数据交换通过Ajax可以给服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。open方法表示请求的方式以及要请求的地址。图中这个代码是基于原生Ajax来实现的可以看出比较繁琐很多企业都不会再用这种方式一般都用基于原生Ajax包装起来的AxiosAxios介绍Axios 对原生的Ajax进行了封装简化书写快速开发。官网https://www.axios-http.cn/因为post它需要请求体所以data来指定请求体要传递的参数而console.log(result.data)表示服务器端响应回来的数据。第一步引入官网下载下来的依赖Axios又对这些做了一个简化前后端分离开发介绍早期的前后端混合开发前端代码后端代码写在一个工程中要求后端人员既需要熟悉前端的开发栈有需要熟悉服务器端的开发栈。沟通成本高分工不明确不便维护和扩展现在主流的是前后端分离开发。前端和后端在开发的时候就必须要遵守某种开发规范而这个开发规范我们是要定义在一份专门的文档当中的这份文档我们叫接口文档。这里的接口不是interface而是功能一个业务功能就是一个接口比如删除一个员工添加一个员工YAPI是接口文档的管理平台介绍YApi是高效、易用、功能强大的api管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。地址http://yapi.smart-xwork.cn/添加完接口就可以来规定接口的功能以及各种需要的参数以及服务器响应的格式等同时也能自动生成一个Mock地址方便前端人员进行测试。前端工程化之前我们所讲的就是需要那个资源直接在工程中引入对应的资源然后直接使用最终形成了如下图的工程结构而企业级的前端开发不长这样缺点每次开发一个项目都要从0开始页面的组件、功能复用性不好。企业级的前端项目开发但是这些规定我们自己规定的话浪费成本所以vs官方提供了脚手架来解决这个环境准备环境准备就是准备脚手架的基本环境Vue-cli1、介绍Vue-cli 是Vue官方提供的一个脚手架用于快速生成一个 Vue 的项目模板。2、Vue-cli提供了如下功能统一的目录结构本地调试热部署我们应用程序的代码改变了不需要再次运行就可以加载最新程序单元测试集成打包上线3、依赖环境NodeJs前端工程化运行的环境类似于Java的JDK一样安装NodeJs以及Vue-cli可以参考别人的文章步骤。工程化的Vue项目项目创建两种方法图形化界面创建方式1、在桌面上新建一个文件夹vue2、点开之后如下输入cmd回车。3、打开cmd然后如下打开图形化界面4、创建项目Git还没学所以先关闭5、之后选择手动---RouterRouter是路由功能只用额外再选这一项就好了。6、创建好了之后点开vue文件夹中的vue-project可以看到有很多文件夹以及文件。7、打开VS code把vue这个文件夹导入进去就可以了。创建好了之后来说一下标准的目录结构Vue项目的启动Vue项目配置端口ctrlc然后输入y将当前项目停掉然后重新启动项目占用的端口号就改了。再来解释一下之前说的热部署就是把VS code的源代码改变网页不用刷新直接就会跟着源代码改Vue项目的开发流程如下图index.html默认引入了入口文件。$mounted(#app)这个等同于el:#app表示把new Vue挂载到index.html中的div中通过Render创建了虚拟的DOM元素。而这一部分的DOM元素是在App.vue这个根组件中定义的。标准的.vue格式Element快速入门引入ElementUI之后从官网中找到自己喜欢的按键、颜色、图标或者边框等类型的代码复制到.vue文件中。这里写的是按键所以如下如上如果有数据模型或者vue中的方法也需要复制到script中。以上这样运行package.json是不行的因为它默认运行App.vue这个文件所以要把Elemnet.vue写进App.vue中如下组件学习组件其实就是查看官网找到对应的组件复制代码然后粘贴的过程。Table表格pagination分页当数据量过多时使用分页分解数据。简单属性layout等事件Dialog对话框Form表单补充导入axios是在当前的要使用axios的页面.vue中的script标签中导入。什么时候需要通过axios发送异步请求加载数据呢其实我们只需要在vue当中的钩子方法当中来发送这个请求那么这样只要vue对象一创建挂载完成他就会自动执行mounted方法这个方法与methods平级而不是在methods里面发送这个请求加载数据。vue路由点击部门管理那么显示的就是部门信息点击员工管理那么显示的就是员工信息。这是由Vue路由实现的。前端路由URL中的hash#号之后的部分如/dept与组件之间的对应关系。如果访问的hash时/dept那么可以设置要访问的就是部门管理的组件如果访问的是/emp那么可以设置要访问的就是员工管理的组件。router-view标签写在App.vue里面的div里面。因为我们在创建项目的时候已经选择了Router所以这里就不用下载了。定义路由在index.js格式如下是固定的格式在构建项目时已经main.js中自动有路由的导入了所以我们就不用管。这个路由还需要加上一个因为如果重新启动默认访问的就是/没有路径是/所以还需要加上如下配置。如果访问的路径是/那么就会转到‘/dept’打包部署打包部署Nginx默认占用80端口号如果80端口号被占用可以在nginx.conf中修改端口号。如下是查看哪个进程占用了80端口号。一切都弄好了之后双击nginx.exe启动然后在浏览器输入localhost:端口号就可以访问到页面了。