HTML+CSS-Day06

综合示例(ajax 小项目) 用户管理系统 (增;删;改;查) #用百度网盘视频[先看一遍 模仿完成] 1:用户登录功能

(1)分析功能

下面写一个完整功能小项目

(1)用户登录   (前端网页    后端程序   数据库)

(1.1)分析数据库与表     -库 mydb  utf8编码     -userinfo   普通用户       u_id      用户编号   u_names  用户名       u_phone  用户手机号 u_member 是否会员(1,0) 1会员 0不是会员     -admin     超级管理       a_id    管理员编号   a_names 管理员名称 a_pwd   管理员密码       1   zhangsan   123

(1.2)分析服务器端接口     (1)管理员登录     -接收请求方式  post     -接收请求地址  http://127.0.0.1:3000/admin/login     -接收请求参数  aname apwd                     -返回数据格式         {"code":1,"msg":"有该管理员信息"}   登录成功       {"code":0, "msg":"没找到数据"}       登录失败

(1.3)找写网页哪个位置      service_v4/view/login.html   用户登录     service_v4/view/main.html   主页

项目中出错点

跨域常见错误     理解下面错误 #如果浏览器程序访问其它域名或者端口不同程序 则报错 #(1)http://127.0.0.1:8848/login.html     #(2)Ajax请求    http://127.0.0.1:3000/admin/login  #通常解决办法在服务器下载安装 cors配置

(1)浏览器地址栏     (跨域) No 'Access-Control-Allow-Origin' header is present on the requested resource -常见示例一: [file://login.html] -常见示例二: [c:/login.html] 解决办法:修改地址栏 http://127.0.0.1:8848/main.html

(2)url地址        (跨域) 常见示例一: xhr.open(“POST”,”127.0.0.1:3000/admin/login”,true); 常见示例二: xhr.open(“POST”,”http:127.0.0.1:3000/admin/login”,true); 正确 xhr.open(“POST”,”http://127.0.0.1:3000/admin/login”)

(3)参数名        (用户名密码失败) 常见错误一: xhr.send(`uname=${uname.value}&upwd=${upwd.value}`); 解决问题: xhr.send(`aname=${uname.value}&apwd=${upwd.value}`); -决定参数名字叫什么是服务器决定 服务器程序: req.body.aname   req.body.apwd 客户端程序xhr.send(`aname=${uname.value}&apwd=${upwd.value}`);

(4)设置数据类型  (用户名密码失败) xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

(5)常见错误后台服务器错误(没有响应) Failed to load resource: the server responded with a status of 500 (Internal Server Error)

解决问题:查看服务器工作控制台(node index.js 命令窗口查看哪里) Error: connect ECONNREFUSED 127.0.0.1:3306

#无法连接到3306(mysql)程序  解释:mysql己经停止工作 (重新启动)