项目实训——网页转文字前后端

芒果@

已于 2022-06-12 00:20:42 修改

阅读量168

点赞数

分类专栏：项目实训文章标签：前端 json vue.js

于 2022-06-11 23:58:40 首次发布

本文链接：https://blog.csdn.net/weixin_46346504/article/details/125240177

版权

本文介绍了一个网页转文字的项目实战，涵盖了前端使用el-input和el-button组件获取用户输入，通过POST方法传输数据到后端。后端采用Spring MVC，使用@RequestMapping和@RequestBody处理请求，用JSoup解析网页提取文本。最后展示了项目完成后的功能效果。

摘要由CSDN通过智能技术生成

前端页面实现

主要组件

1、el-input：输入框
相关属性:
placeholder：输入框占位文本
clearable：可清空属性
prepend：输入框前置内容，只对 type=“text” 有效
v-model：绑定值
style：设置大小等外观

<el-input v-model="website" placeholder="Please input" clearable style="width: 500px">
    <template #prepend>Http://</template>
  </el-input>

2、el-button：按钮
属性：@click事件

  <el-button style="margin-left: 10px;" @click="submitUpload">转文字</el-button>

数据传输

submitUpload() {
  this.axios({
    url: '/common/web2txt/submitUpload',
    method: 'post',
    transformRequest: [function (data) {      //在请求之前对data传参进行格式转换
      data = JSON.stringify(data)
      return data
    }],
    data: