引言
经过前面六章的学习，我们已经有了很多知识的储备，本次我们来制作文章生成器的前端部分。
数据的传递
接下来这里我们的传递方式主要通过form表单和axios两种方式来传递数据。
传统的form表单传递
传统的form表单传递方式首先通过<form></form>标签来完成。
传统的form表单传递---练习测试
我们建立 csss.html和csss.js文件夹
csss.html代码如下:
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
</head>
<body>
<form action="http://localhost:8080/cs" method="post">
<input type="text" name="shuju">
<input type="submit">
</form>
</body>
</html>解释一下上面的代码，通过form标签包裹了两个input(type="text"和type="submit")即：输入框和提交按钮，form中两个----action和method,action是指定传递的接口，我们服务器启动在http://localhost:8080/ 上，并且为其挂载了cs的路径，所以我们访问http://localhost:8080/cs 来传递数据 method则是指定方式，如：get和post......
这里指定Post
csss.js部分代码如下:
import express from 'express';
const app = express();
app.use(express.urlencoded({extended:false}));
app.post('/cs',(req,resp)=>{
const result = req.body;
console.log(result);
resp.send(result);
})
app.listen(8080,()=>{
})同样的，我们采用ES Moudle的方式，所以我们通过import来导入，然后创建app,接下来 挂载post请求，接下来启动服务器。
接下来我们在输入框中输入数据 hhhhhhh 点击提交
相应的页面如下:
控制台的输出数据:
[Object: null prototype] { shuju: 'hhhhhhh' }
我们已完成了form表单的交互。
axios的传递
这里介绍一个框架axios
首先我们可以下载axois.js文件，并在页面引入axois.js
然后我们就可以通过使用axois来发送请求了。
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
</head>
<body>
<input type="text" id="text">
<button id="btn">提交</button>
</body>
<script src="axios.js"></script>
<script>
let btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
axios({
method:"post",
url : "http://localhost:8080/cs",
data:"shuju="+document.getElementById('text').value
}).then((resp)=>{
console.log(resp.data);
})
})
</script>
</html>上面是axios版本的代码,我们可以看到，axios({}).then(function)这是axois的结构，url是发送请求，data是传递的数据，method是请求的方法。我们将他绑定在一个btn的addEventListener中，这样我们能更轻松的控制其请求。比如设置一些触发的条件......
