前端通信(+ 一些react基础问题解答)

文章目录前端端通信HTTP请求方法json注册/登入获取列表要写接口吗代码解析反引号页面跳转(路由)svgtextarea里面有横线的效果console.logmap在react里面最常见的用法前端端通信HTTP请求方法get获取数据(查看)api:前端必须通过api去请求服务器前端不能直接访问数据库GET/api/messages的意思是服务器把留言列表给我post提交数据(注册)两者最主要的区别数据发送方式不同get参数在url里面apifox对应params(不适合密码)post参数在body里面apifox对应body(更适合提交敏感信息)//url是请求地址 http://localhost:3000/api/messages 结构协议//域名端口/api/路径 //Query是url后面的参数(apifox里填在params) http://localhost:3000/api/messages?page1size10 这里面的?page1size10就是query参数 结构?参数1值1参数2值2put修改delete删除json一种数据格式(用文本表示数据的格式){ username:tom, password:123456 } //键值对键必须加双引号注册/登入注册创建一个新用户服务器给这个新用户一个唯一的编号userId登入服务器会验证用户名和密码如果正确就生成一个tokentoken就像一个登入通行证获取列表要写接口吗首先要知道留言列表怎么出现用户打开留言板页面浏览器会请求服务器获取留言数据这个请求就是get/api/messages然后服务器返回数据(如下)然后前端把这些数据显示在页面上{code:200,message:获取成功,data:[{id:1,username:zoe,content:你好}代码解析const register async () { // 网络请求异步操作(不是立刻完成需要等一下) // 定义一个叫register的异步函数来做注册请求 const res await fetch( // fetch是浏览器提供的用来发送网络请求的工具(帮我们向服务器发东西) fecth参数1请求地址告诉浏览器把请求发送到哪 fetch参数2{请求的方法method请求说明书,请求体(真正发给服务器的数据内容 注记得把js的对象转换成json字符串)} // await是等请求返回结果后再继续执行下面的代码 http://127.0.0.1:4523/m1/7904789-7655572-default/api/register, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ username: username, password: password, }), }, ); // 把服务器的响应转换成我们能用的json格式 const data await res.json(); console.log(注册返回:, data); alert(data.message); };反引号创建一种模板字符串可以在字符串里面插入变量;${}作用是在字符串里面放变量变量名 c s s 属性的 l e f t / b o t t o m 必须要是 数值 单位 这里我们的 s h o w B o t t l e . l e f t 是通过 m a t h 随机生成的数字比如 34 没有单位而 ‘ ‘ ( 反引号 ) 和 {变量名} css属性的left/bottom必须要是数值单位这里我们的showBottle.left是 通过math随机生成的数字比如34没有单位 而(反引号)和变量名css属性的left/bottom必须要是数值单位这里我们的showBottle.left是通过math随机生成的数字比如34没有单位而‘‘(反引号)和{}的作用也就是字符串拼接constleft35;//模板字符串constcssLeft${left}%;//也就是35%//传统写法constcssLeftleft%;页面跳转(路由)终端安装npm install react-router-dommain.jsx里面启动路由import {BrowserRouter} from react -router-dom //并把APP/包裹在BrowserRouter 的里面App.jsx里面配置页面import {RoutesRoute} from react-router-dom import Register from ./register/register import Login from ./login/login import Messages from ./messages/messages function App() { return ( Routes Route path/ element{Register /} / Route path/login element{Login /} / Route path/messages element{Messages /} / /Routes ) } export default App4.注册成功跳转到登入//先导入 import { useNavigate } from react-router-dom; //再创建 const navigate useNavigate(); //修改函数svgsvg就是矢量图画布也就是一个可以画图的坐标系viewBox“0 0 1440 700”意思是x起点0y起点0宽1440高700xmlns是xml命名空间告诉浏览器这是svg图形rectrectangle(矩形)意思是画一个矩形path是路径可以画曲线svg里面x向右变大y向下变大三次贝塞尔曲线d是画画的指令m是移动到某个点作为起点c是画贝塞尔曲线(c x1 y1,x2 y2,x3 x y这里面的(x1,y1)(x2,y2)是控制点(x,y)是这段曲线的终点)L是画直线Z是闭合路径二次贝塞尔曲线Q 控制点 终点 T自动继续波浪 V画一条垂直线到某个点 H0画一条水平线到x0 Z自动闭合曲线textarea里面有横线的效果line-height文字行高(每一行的文字占多少空间)linear-gradient线性渐变(前31px透明第32px有颜色)background-size宽 高linear-gradient()本质是一张背景图片背景图片默认都会重复而backgound-size的作用是控制图片大小console.log在js语法里面字符串需要“,例如123”console.log(参数1参数2),可以打印多个东西map在react里面最常见的用法把数组里的每一项都变成jsx的元素names.map((item)li{item}li); {/* item指数组的每一项index是当前这一项在数组中的下标 key是用来区分每一个列表元素的身份证 */}