在input1中输入信息失去焦点后，调用php，将mysql查询结果显示在input2中

$(function(){

$('input1').focusout(function(){

$.ajax({

url:'你的路径',

type:'post',

data:'请求的参数,比如你input1的输入值,格式用json',

success:function(respond){

//把respond的值赋到input2中去

}

})

})

})

这是jQuery的

1.环境&资源问题

1.1.如果生成私钥提示没有这个目录

一般git安装成功之后，会在C:\Users\下创建.ssh目录。如果没有就会出现上述问题。

检查是否安装成功：cmd中执行：git --version (两个-)

如果没有正确提示版本号，则配置一下git环境变量（看问题1.5）

如果电脑用户名是中文名字，需要修改为英文

https://jingyan.baidu.com/article/59703552843c458fc0074005.html

可能是中文名字，导致没有创建.ssh目录

如果改完电脑用户名之后，执行ssh-keygen还是不行的话，就重装git

但是经过测试，很多同学的电脑用户名都无法修改，如果是这样，只能重装系统_

给电脑起中文名，多么痛的领悟…

1.2.无法导入mydb.sql问题

解决方法：

找到my.ini文件 ；

修改内部的数据库引擎为INNODB

#默认为MyISAM

#default-storage-engine=MyISAM

#改为INNODB

default-storage-engine=INNODB

#支持 INNODB 引擎模式。修改为　default-storage-engine=INNODB　即可。

#如果 INNODB 模式如果不能启动，删除data目录下ib开头的日志文件重新启动。

重新导入mydb.sql

1.3.导入mysql另一个问题

如果出现这个问题，说明是mysql没有启动

通过php软件启动mysql

或者cmd命令中执行，net start mysql

1.4.git环境变量配置

参考 —>Windows10下Git环境变量配置

最后一步是重启cmd

1.5.第一次push时，输错密码

删除windows凭据：Win10系统如何删除Windows凭据

1.6.postman不需要注册

1.7.vscode保存代码，直接报错

分析

这是因为默认保存时，自动格式化代码给代码前，添加了一个tab键，而tab键是4个空格，但是eslint语法要求只能是2个空格。

以及双引号，末尾分号，这些eslint都不允许。

如果我们一个一个自己修改，太麻烦了。

我们可以通过一个插件：eslint

然后在用户设置中增加：（vscode版本：1.19.1测试OK）

“eslint.autoFixOnSave”: true,

这样以上问题都可以解决：空格问题，引号问题，末尾分号问题。

补充:

如果VSCode版本比较高（1.42.1测试OK）,则换成

“editor.codeActionsOnSave”: {

“source.fixAll.eslint”: true

},

还有一种方式，可以不让代码报错，但是保存代码时不会修复空格引号问题

补充：或者我们可以直接关闭eslint的语法校验

这样做之后，末尾分号，双引号等等问题，不会再报错。

保存之后，生成了一个配置：（如果出现了关闭之后，自动打开，就自己添加如下配置

1.8.iconfont 无法正常显示，出现口

这是素材中的资源有兼容问题，我重新下载了，大家找fonts_new.zip

注意：打开demo_index.html，切换Font class，然后按照后续步骤 *** 作

2. 项目

2.1. Cannot read property ‘$createElement’ of undefined

错误如下：不能读取undefined对象的$createElement属性

解决：路由规则component写成了components，注意没有s

由于是通过components指定了/login的组件，所以相当于没指定，那么在路由初始化的时候要调用/login对应组件的 c r e a t e E l e m e n t 属 性 ， 所 以 报 错 了 。 没 指 定 ， 那 就 是 u n d e f i n e d ， 所 以 就 是 不 能 读 取 u n d e f i n e d 对 象 的 createElement属性，所以报错了。没指定，那就是undefined，所以就是不能读取undefined对象的 createElement属性，所以报错了。没指定，那就是undefined，所以就是不能读取undefined对象的createElement属性

2.2.git命令无法执行

问题如下：没有一个git仓库，没有.git文件夹

问题分析：

通过脚手架创建的项目，已经默认勾选了git初始化，所以默认在项目根目录会有一个.git文件夹，有了这个文件夹就说明我们的项目已经被git管理起来了

如果想执行，git相关命令，需要在有.git文件夹的目录下才能执行、

出现上述问题，可能有两个原因：

1.创建项目时，没有勾选git初始化

2.执行git命令时，项目目录进错了

问题解决：

找到包含.git文件夹的目录，再执行git命令

或者：在vue_shop目录下执行git init命令，进行git初始化，它会帮助你创建.git文件夹

2.3.this relative module was not found

问题如下：这个相关的模块没有找到

问题分析：

在main.js中没找到iconfont.css，这种问题，一般都是路径问题

问题解决：

在mian.js中确定引入iconfont.css的路径，看是否有误

2.4.代码切换分支合并分支时被删除

问题描述: 当我们切换master分支之后，发现login分支的代码消失

问题分析：

login分支，创建login.html

当切换到master的时候，login.html消失（这是因为master本来就没有这个文件，肯定会消失）

但是，在merge login之后，login.html就回来了

如果想回退版本：

git log（查看想要回退的版本号）

git reset --hard 版本号

git reset --hard f31cf29afe79a6374e12183541994624221a0e1d 902b8494192a9bc8c3947e39c8494ee6d3878ec8

2.5. POST http://localhost:8080/login 404 （Not Found）其他问题雷同

问题描述:

问题分析：

发送的接口请求地址错了

解决问题：

检查两个地方：

A）main.js中配置请求的根路径是否出错，包括单词大小写：

axios.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’

B）Login.vue中发送的请求接口地址是否写错：

const {data:res} = await this.$http.post(“login”, this.loginForm)

2.6.Element-ui表单总结

2.6.1.表单数据双向绑定

在这里进行双向数据绑定的时候，我们是将要绑定的data属性放到了loginForm对象中，然后再进行的绑定，这样做方便后续数据的提交，等到提交数据的时候，直接将loginForm对象提交到后台即可

2.6.2.表单校验规则

loginFormRules是一个对象，在对象中可以指定多个字段的校验规则

username是其中一个校验规则，而这个校验规则是有必填和长度这两个校验规则组成的

每一个校验规则都是一个对象，对象中有三项信息

1.校验规则：required必填，min-max长度

2.校验失败时的提示信息：message

3.何时触发校验：trigger（触发器）：blur（失去焦点），意味失去焦点触发此校验规则

2.6.3.表单提交

失去焦点需要校验表单，但是最后表单提交的时候，也需要再次校验表单

因为程序员可以通过程序，让表单数据自动填充，所以界面的失去焦点方法校验表单并不完全可靠

其实最后表单提交的时候再次校验，程序员也是可以跳过的，比如通过postman发起请求，不通过界面发起请求，所以前端所有的校验都不靠谱，后端servlet收到数据之后，也还是会重新校验的

注意：这里的validate是el-form的方法，我们需要获取el-form对象之后才能调用，如何获取呢？因为Vue不再通过原始方式获取DOM元素对象，所以采用ref引用名的方式：

只要标签添加ref属性，就会给当前标签创建对象，并且将对象存储到$refs中

vue实例有一个属性 $refs , 存储当前界面中所有带有ref属性的标签的对象

比如此界面中有俩标签添加有ref：

(1)

那么$refs对象就长这样： {“loginForm”:el-form,“item1”:el-form-item}

所以可以通过如下方式获取：

(1)this. r e f s . l o g i n F o r m t h i s . refs.loginForm this. refs.loginFormthis.refs.item1

(2)this. r e f s [ " l o g i n F o r m " ] t h i s . refs["loginForm"] this. refs["loginForm"]this.refs[“item1”]（这个$refs比较特殊，可以通过中括号方式获取属性）

validate方法的参数是一个回调函数，函数的参数是校验结果

校验通过，valid=true

校验失败，valid=false

最后需要注意，validate方法内部用到了el-form的model属性，所以如果没有写如下属性：

会报错：

model是校验工作必须的属性

2.6.4.表单数据重置

el-form还有一个方法resetFields，重置字段，会将用户输入的信息以及校验信息都清空 。

3.

3.1. TypeError: cannt read property ‘cancelToken’ of undefined

问题描述：

问题分析：

在main.js的拦截器中没有return返回值

解决问题：

在main.js的拦截器中return config,固定写法

3.2.bug调试-network

如果写完代码没有出现你想要的效果，排错步骤如下：

1.右键，查看console，如果有错误，其实是好事，因为最起码有错误提示

2.仔细查看错误，在此文档中查找看有没有类似的错误，如果有按照笔记解决

3.如果没有，那么就将错误翻译成中文，尝试理解错误是什么意思

4.实在不行，将错误放入百度，进行搜索

5. 3-5分钟搞不定的，立马问老师，经过老师的调试，错误搞定之后，一定要将错误收录到此文档中，积累错误文档，是一件非常重要的事情，这些错误就是你的经验

6.如果console里没有错误，那么我们就需要查看network，看一下请求是否有问题

7. 比如，用户列表

8. 先看General

注意会发现有两个users请求，看第二个

查看Request URL，Request Method，Status Code是否有问题

9. 查看请求参数，是否有问题

10. 查看响应数据

<script type="text/javascript">

function init(){

document.getElementById("username").focus()

}

function validate(userfield) {

if (trim(userfield.value).length != 0) {

var xmlHttpRequest = null

var url = "../AccountIsExistServlet?account=" + userfield.value

var usermsg = document.getElementById("usermsg")

if (window.XMLHttpRequest) {//表示当前浏览器不是IE

xmlHttpRequest = new XMLHttpRequest()

} else if (window.ActiveXObject) {

xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP")

}

xmlHttpRequest.open("GET", url, true)//设置请求方式为GET，设置请求的URL，设置为异步提交

xmlHttpRequest.onreadystatechange = function(){//将方法地址复制给onreadystatechange属性

if(xmlHttpRequest.readyState == 4){//Ajax引擎状态为成功

if(xmlHttpRequest.status == 200){//HTTP协议状态为成功

if(trim(xmlHttpRequest.responseText) != ""){

usermsg.innerHTML = "<font color='red'>" + trim(xmlHttpRequest.responseText) + "</font>"

userfield.focus()

}else{

usermsg.innerHTML = "恭喜您，用户名可以使用。 "

}

}else{

alert("请求失败，错误码=" + xmlHttp.status)

}

}

}

xmlHttpRequest.send(null)//将设置信息发送到Ajax引擎

}else{

usermsg.innerHTML = ""

}

} <tr height="30px">

    <td><font color="#FF0000">*</font>用户名：</td>

    <td><input type="text" name="account" id="username" maxlength="12" onblur="validate(this)"/></td>

    <td width="220px"><span id="usermsg"></span></td>

</tr> import java.io.IOException

import java.io.PrintWriter

import javax.servlet.ServletException

import javax.servlet.annotation.WebServlet

import javax.servlet.http.HttpServlet

import javax.servlet.http.HttpServletRequest

import javax.servlet.http.HttpServletResponse

import com.gas.bo.UserInfoBO

@WebServlet("/AccountIsExistServlet")

public class AccountIsExistServlet extends HttpServlet {

protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// 阻止缓存

response.setContentType("text/xml")

response.setHeader("Cache-Control", "no-store") // HTTP1.1

response.setHeader("Pragma", "no-cache") // HTTP1.0

response.setDateHeader("Expires", 0) // prevents catching at proxy

// server

PrintWriter out = response.getWriter()

//js传过来的汉字进行转码，避免汉字的时候会出现乱码

String account = request.getParameter("account")

UserInfoBO userInfoBO = new UserInfoBO()

boolean b = userInfoBO.accountIsExist(account)

if (b) {

out.print("用户名已存在，请重新输入。")

}

}

}

第一部分js，ajax。第二部分html。第三部分servlet。。。有不理解的地方继续问我。

---