modi000的博客

原文链接：https://blog.youkuaiyun.com/m0_64294969/article/details/138760906。5.点击mock地址，发现返回的数据格式和我们自己需要的不一样，可以点击高级mock,添加自己的期望，也就是json类型。1.打开yapi官网，网址为https://yapi.pro/project/384499/interface/api。YAPI：是高效 易用的功能强大的api管理平台，目的为开发 产品 测试 提供更优雅的管理服务（接口文档管理平台）

3）启动nigix.exe,进程一闪而过，在logs目录汇总的erro.log查看有无错误信息，没有的话，就表示启动成功了。2）修改nignx的端口号，默认的是80，与windows某进程端口号冲突，故需要修改，例如改为8000；打包完成后，目录中，会生成dist文件。打包后，数据占用空间更小，比如把换行都去掉了。可以通过vscode通过命令打包，也可以通过vscode的图形化界面命令。前端主流部署服务器是 Ngix ，后端主流部署服务器是tomcat。1）将html文件中的默认文件删掉。

效果如上图，目前已通过element的布局，完成了包含head aside main 三部分的布局。其中head 及左侧的aside 在部门和员工组件中都保持不变，不修改代码，只修改main部分的内容，完成页面切换。在DeptView.vue和 EmpView.vue两个组件中分别加上路由链接（类似超链接，所以需要在各自的页面中添加）示例：点击左侧的导航栏，地址栏只是#/后边的内容发生变化，这是通过路由功能实现的。1）在vue项目中的views目录中，创建自定义的组件（页面）2）在路由表中配置路由。

关于前端开发模式MVVM，之前学习的vue是侧重于VM开发的，主要用于数据绑定到视图的，那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架，主要用于开发美观的页面的。Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比。

转载：https://blog.youkuaiyun.com/l15655495902/article/details/133033721。-router是安装，后面的@3.5.1是版本号，也可以选择安装其他版本号。在router文件夹中的index.js中配置如下指令。2.在new Vue中引入。

Vue Router 是 Vue.js 的官方路由管理器，它允许你构建单页应用（SPA），并能让你用 Vue.js 开发具有多视图的应用程序。Vue Router 遵循 Vue.js 的设计哲学，因此它和 Vue.js 核心深度集成，让构建路由变得简单而自然。

中的标签绑定的，此时就可以显示后端数据。1.将element相应的布局容器代码layout，粘贴到vue项目中的自定义组件（页面）<template>

3、v-bind可以给任何属性赋值，v-model只能给表单类，也就是具有value属性的元素进行数据双向绑定，如text、radio、checkbox、selected。这个原因也很好理解，从页面流向data，v-model是捕获用户的输入值，如果没有value,捕获不了，所以这个流向没有意义，v-model就是收集value值。1、v-bind是单向绑定，用来绑定数据和属性以及表达式，数据只能从data流向页面。2、v-model是双向绑定，数据能从data流向页面，也能从页面流向data。

事件绑定属性，是以on开头，例如，onclick单击。例如：当点击按钮后，会触发事件，弹窗。1.在DOM中直接绑定。2.在js代码中绑定。

标签2）在页面中，引入.js文件，推荐放在内中最下部分。也可以放在外。2.内部引用JavaScript代码必须位于

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为操作元素是DOM核心内容一般地，节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue(节点值）这三个基本属性元素节点 nodeType 为1属性节点 nodeType 为2文本节点 nodeType 为3（文本节点包含文字，空格，换行等）

如使用get方式，则提交的数据会在url中显示；如使用post方式，提交的数据会在数据体中显示（如下图所示，按下F12键，查看。），如此action属性并未写后端的url地址，则默认是向当前页面推送（ps：如果，图中显示的链接是一串英文符号，是因为当前页面的url中有中文，中文被转换）。前端是通过html中的表单，通过method属性定义发送表单数据的方式是get还是post。通过action属性，

3．TH：英文全称是＂tableheadercell＂的缩写，在中文中是“表头单元格”的意思。1．TD：英文全称是＂tabledatacell＂，中文意思是“表中的数据单元”。2．TR：英文全称是＂tablerow＂的缩写”的缩写。

本篇文章是2023年最新黑马JavaWebHTML表格、表单、表单项标签的总结，帮助需要学习Web开发的朋友温故而知新。HTML表格标签HTML表单标签HTML表单项标签表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。表单标签: < form >表单项标签: 不同类型的input元素、下拉列表、文本域等。< input >: 定义表单项，通过type属性控制输入形式< select >: 定义下拉列表: 定义文本域表单属性action: 规定表单提交时，

大概逻辑 就是建立一个首页，然后将页面分为左右两部分，左边负责切换，右侧负责页面展示，通过标签的顺序号进行 页面切换，左边点击第三个，右边则显示第三个页面连接对应的页面，UI优化就不多做描述了。方法二逻辑是利用多个div区域进行轮动切换，举个例子，左侧有五个需要切换，我只需要展现其中一个，隐藏其余四个就实现效果了，代码如下，默认其余区域是隐藏的，首先，在HTML中创建一个左侧栏目和一个右侧区域的容器。然后，使用JavaScript来添加事件监听器，当栏目被点击时，切换对应的内容区域。

首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”的方式。作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及。

一、YAML 简介YAML（YAML Ain't Markup Language的缩写）是一种人类可读的完整的数据序列化语言。YAML 官网首页就很 YAML，这很有意思。通常用作软件的配置文件；文件的标准扩展名为 .yaml，也可接受.yml扩展名；YAML基本语法规则（基于缩进的Block Style）：大小写敏感；使用缩进表示层级关系（类似Python风格）；缩进不允许使用Tab制表符，只允许使用空格字符；缩进的空格数不重要，但官方推荐使用2个空格字符；

全称超文本传输协议，是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP 是一种应用层协议，是基于TCP/IP 通信协议来传递数据的，其中 HTTP1.0、HTTP1.1、HTTP2.0 均为 TCP 实现，HTTP3.0 基于 UDP 实现。现主流使用 HTTP1.0 和 HTTP3.0为了使数据在网络上从源头到达目的，网络通信的参与方必须遵循相同的规则，这套规则称为协议，它最终体现为在网络上传输的数据包的格式。

当然仅此是不够的，因为不同的应用系统有着不同的域名，尽管 Session 共享了，但是由于 Session ID 是往往保存在浏览器 Cookie 中的，因此存在作用域的限制，无法跨域名传递，也就是说当用户在 app1.com 中登录后，Session ID 仅在浏览器访问 app1.com 时才会自动在请求头中携带，而当浏览器访问 app2.com 时，Session ID 是不会被带过去的。用户统一在认证中心进行登录，登录成功后，认证中心记录用户的登录状态，并将 Token 写入 Cookie。

本文重在阐明对于前后端分离设计的一些小思考，同时利用ajax结合SSM框架,实现的一个简单的交互案例。ps:笔者仅仅是一名学生，观点不免有些局限性，如果您读后有有更好的实现方式。欢迎在文末留言，笔者感激不尽。提出问题我们在平时学习javaweb开发时经常是页面展示信息和后台逻辑代统统在idea或者eclipse进行编写，笔者今天突然有了这样的思考：在实际工作中我们往往会各司其职，在开发一个项目时不可能一直等待前端开发将页面写好，然后在交由后端开发人员进行后台逻辑的编写。

前端调用RESTful API时，只需要发送请求URL和请求参数，后端返回对应的JSON数据，在前端进行展示。这样可以实现前后端完全分离，前端只需要关注如何展示数据，后端只需要关注如何处理请求和返回数据。前后端分离是一种新型的web应用程序开发技术，它的核心理念就是将前端与后端进行分离，前端负责展示界面，后端负责处理业务逻辑和数据存储。前端与后端建立WebSocket连接后，可以实现双向数据传输，前端可以发送请求消息，后端可以返回响应消息。前端通过GraphQL查询后端数据，后端返回符合查询条件的数据。

1.Vue的组件文件以.vue结尾，每个组件由三个部分组成： （模板部分，由它生成HTML代码）、（控制模板的数据来源和行为）、（CSS样式部分）1.介绍：YApi是 高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。前端工程化：是指在企业 级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。2.组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

2.在main.js中导入element.ui组件库。1.在vscode终端中执行命令（需要联网）同上，自定义的组件需要先在根组件中引入。3.访问官网，复制调整代码。

热部署：在不停止程序、不刷新页面的情况下，修改了App.vue中的代码，网页中http://localhost:9000/#/会自动展示。App.vue中的script中使用export，在main.js中就可以使用import。在views文件中创建自定义组件，注意组件名必须是以View结尾，且扩展名为.vue。在自定义的组件中，中，一定要使用布局标签根组件中，标签中，按照自定义组件的名称写标签，会自动补全。二、在根组件App.vue中引入自定义组件。

src中 APP.vue（以前的页面是.html结尾的，脚手架中都是以.vue结尾，没有.html文件了） 代表的就是页面，这里也称组件。是vue已经定义好的组件；main.js、App.vue、views、router四个文件（夹）重点关注。可以使用html、css、javascpript ,以及使用vue、axios等技术搭建前端页面，但效率低、结构乱。通过Local中的 http://locatehost:8080可以访问 vue-cli项目。两种启动方式，图形化界面、命令行。

目前，网站主流开发方式是前后端分离。因此前后端必须遵循一套统一的规范，才能保证前后端进行正常的数据（JSON数据格式）请求、影响，这套规范即是 YAPI.YAPI用来管理接口文档并模拟前端测试数据。（因为前后端是并行分离开发的，一开始，前端是拿不到后端的数据的，所以需要先有测试数据。前端或后端撰写接口文档。