AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

文本，三步走构思，富文本点击提交能够存储到数据库当中（下）,最快的方法，还是会看资料，因此会整合资料最好，直接看资料最快，因为是JWT的资料，我们要设置好登录的内容，看登录的地方怎样写的

2024-07-03 273
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 文本，三步走构思，富文本点击提交能够存储到数据库当中（下）,最快的方法，还是会看资料，因此会整合资料最好，直接看资料最快，因为是JWT的资料，我们要设置好登录的内容，看登录的地方怎样写的

最后自己想要的效果是： 点击提交之后，能够将内容存到数据库当中

先登录之后，才能够发送请求

----------------------------------------------------------------------------------------------

先把登录页面写好：这里随便写一个页面：

有承装数据模型写法：

<script setup>
import { ref } from 'vue'
// 定义数据模型
const registerData = ref({
    username: '',
    password: '',
    rePassword: ''
})
 
</script>
<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" :model="registerData">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="registerData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false">
                        ← 返回
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
 
        </el-col>
    </el-row>
</template>

主页编写好之后，编写接口，登录接口：

import request from '@/utils/request.js'
// 提供调用注册接口的函数
// 
export const userRegisterService = (registerData) => {
    // 借助于UrlSearchParams
    const params = new URLSearchParams()
    for (let key in registerData) {
        params.append(key, registerData[key]);
    }
    return request.post('/user/register', params);
}

之后绑定在button中绑定点击事件@click

编写注册接口，利用import进行导入

绑定事件之后能够发送完成代码：

<script setup>
import { ref } from 'vue'
// 定义数据模型
const registerData = ref({
    username: '',
    password: '',
    rePassword: ''
})
import { userRegisterService } from '@/api/user'
const register = async () => {
    //registerData是一个响应式对象,如果要获取值,需要.value
    let result = await userRegisterService(registerData.value);
    if (result.code === 0) {
        //成功了
        alert(result.msg ? result.msg : '注册成功');
    } else {
        //失败了
        alert('注册失败')
    }
}
</script>
<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" :model="registerData">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="registerData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <el-form-item prop="rePassword">
                    <el-input type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="register">
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false">
                        ← 返回
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
 
        </el-col>
    </el-row>
</template>

这样已经实现发送了，点击注册，显示注册成功了就行了

我之前在端口中添加了，才导致了跨域问题没有出现：

跨域的参考资料：

https://mp.csdn.net/mp_blog/creation/editor/136929980

----------------------------------------------------------------------------------------------

登录篇，现在搞定他（登录篇搞定他，要继续参考资料），先实现数据绑定：

第一步在click中添加login方法：

导入login函数

提供登录接口的函数

//提供调用登录接口的函数
export const userLoginService = (loginData)=>{
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key])
    }
    return request.post('/user/login',params)
}

import 进行导入

登录成功的代码：

<script setup>
import { ref } from 'vue'
//调用后台接口,完成注册
import { userLoginService } from '@/api/user.js'
const login = async () => {
    //registerData是一个响应式对象,如果要获取值,需要.value
    let result = await userLoginService(registerData.value);
    if (result.code === 0) {
        //成功了
        alert(result.msg ? result.msg : '登录成功');
    } else {
        //失败了
        alert('登录失败')
    }
}
// 定义数据模型
const registerData = ref({
    username: '',
    password: '',
    rePassword: ''
})
 
 
</script>
<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" :model="registerData">
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="registerData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="login">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
 
        </el-col>
    </el-row>
</template>
 
<script>
export default {
 
}
</script>
 
<style></style>

----------------------------------------------------------------------------------------------

登录成功之后，看怎样跳转，需要配置相应的路由：

自动对应/这个组件

定义好router.js相关的文件

登录篇:axios同源策略设置

跨域设置 -------------baseURL = '/api';

这里点击button能够将富文本的数据存放到axios当中

在能够使用postman发送请求之后，现在证明接口已经可以用了

再发送请求，就要考虑axios如何发送请求：

统一API接口管理，参考资料：

项目_10.02_注册功能_封装接口方法完成调用_哔哩哔哩_bilibili

axios如何统一编写接口进行测试：

看大事件的资料，最快：

项目_06_项目_封装请求库_哔哩哔哩_bilibili

API统一写法：第一步写axios，之后在src的utils下添加request.js文件

import axios from "axios";
const myAxios = axios.create({
    baseURL: 'http://localhost:9090'
})
// 导出axios自定义函数
export default myAxios

request.js中的baseURL要跟前端路径一致

之后再使用就要再api下使用index.js，不同的数据格式有不同写法，这里参考资料

看相关接口的文档

固定写法，第一步添加request.js文件的内容，util中填写，request.js文件中，async填写到另一个API文件当中

Src下，until的request.js文件写法：

import axios from "axios";
const baseURL = 'http://localhost:9090';
const instance = axios.create({
    baseURL:baseURL
});
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert('服务异常');
        return Promise.reject(err);
    }
)
// 导出axios自定义函数
export default instance

接下来：定义好router之后

  {
    path: '/editor',
    name: 'editorView',
    component: () => import('@/views/simple/editorView.vue')
  },

接下来，对应Vue Router，看他怎样跳转的，这里添加

接下来使用他，先用import进行导入，然后使用router.push('/进行跳转')

跳转的写成这样就行：

<script setup>
import { ref } from 'vue'
//调用后台接口,完成注册
import { userLoginService } from '@/api/user.js'
import { ElMessage } from "element-plus";
import router from '@/router';
 
const login = async () => {
    //registerData是一个响应式对象,如果要获取值,需要.value
    let result = await userLoginService(registerData.value);
    // if (result.code === 0) {
    //     //成功了
    //     alert(result.msg ? result.msg : '登录成功');
    // } else {
    //     //失败了
    //     alert('登录失败')
    // }
    ElMessage.success(result.data.msg ? result.data.msg : '注册成功')
    router.push('/editor')
}
// 定义数据模型
const registerData = ref({
    username: '',
    password: '',
    rePassword: ''
})
 
 
</script>
<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" :model="registerData">
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="registerData.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space @click="login">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
 
        </el-col>
    </el-row>
</template>
 
<script>
export default {
 
}
</script>
 
<style></style>

这样就实现了基本页面的跳转了

之后这里自己想要点击button能够提交数据，这里该怎样写:看登录怎么写的

1、第一步定义数据模型，利用v-model绑定数据，绑定事件

1、先定义好数据模型：

<template>
    <div class="editorContainer">
        <el-form ref="ruleFormRef" style="max-width: 900px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="标题" prop="name">
                <el-input v-model="articleData.title" />
            </el-form-item>
            <div class="editorContent">
                <div class="leftcontentContainer">内容</div>
                <div class="editor">
                    <quill-editor content-type='html' v-model:content='articleData.content' :options='options'
                        @blur='editorBlur($event)' />
                    <!-- <quill-editor content-type='html' :content='content' :options='options'
                        @blur='editorBlur($event)' /> -->
                    <!-- <quill-editor content-type='html' :content='content' :options='options'
                        @blur='editorBlur($event)' /> -->
                </div>
            </div>
            <div class="mb-4">
                <el-button round>保存</el-button>
                <el-button type="primary" round>提交</el-button>
            </div>
        </el-form>
    </div>
</template>
 
<script setup>
import { ref } from 'vue';
const articleData = ref({
    title: '',
    content: ''
})
 
// let content = ref("<p> 初始内容。。。</p>");
let options = {
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ align: [] }], // 对齐方式
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ font: [] }], // 字体种类
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ direction: 'ltl' }], // 文本方向
            [{ direction: 'rtl' }], // 文本方向
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            ['blockquote', 'code-block'], // 引用  代码块
            ['clean'], // 清除文本格式
            ['link', 'image', 'video'], // 链接、图片、视频
        ],
    },
};
 
</script>
<script>
 
</script>
<style lang="less">
.demo-ruleForm {
    margin: 0 auto;
}
 
.div span {
    text-align: left;
}
 
.editorContent {
    display: flex;
}
 
.editorContainer {
    margin-top: 15px;
}
 
.leftcontentContainer {
    margin-right: 9px;
}
 
.editor {
    width: 857px;
    margin-bottom: 60px;
}
 
.ql-container {
    height: 400px;
}
 
.demo-ruleForm {
    width: 1000px;
}
 
.mb-4 button {
    margin: 0 0 0 760px;
}
</style>

2、先定义好数据模型，先定义好数据模型

3、接下来绑定事件和调用接口，这里用import 导入函数

4、导入接口时候，要配合APi的方法，添加

5、剩下资料看这篇

文本----富文本数据如何存入到数据库当中，解决方法，看其他大佬写的文章

文章标签：
数据库
API
存储
JavaScript
前端开发
关键词：
数据库设置
数据库存储
数据库登录
jwt登录
文本数据库
爱你三千遍斯塔克
目录
相关文章
1436047922066202
|
10月前
|
存储 Oracle 关系型数据库
服务器数据恢复—光纤存储上oracle数据库数据恢复案例
一台光纤服务器存储上有16块FC硬盘，上层部署了Oracle数据库。服务器存储前面板2个硬盘指示灯显示异常，存储映射到linux操作系统上的卷挂载不上，业务中断。 通过storage manager查看存储状态，发现逻辑卷状态失败。再查看物理磁盘状态，发现其中一块盘报告“警告”，硬盘指示灯显示异常的2块盘报告“失败”。 将当前存储的完整日志状态备份下来，解析备份出来的存储日志并获得了关于逻辑卷结构的部分信息。
1436047922066202
288 4
数据库知识学习者
|
11月前
|
存储 关系型数据库 数据库
高性能云盘：一文解析RDS数据库存储架构升级
性能、成本、弹性，是客户实际使用数据库过程中关注的三个重要方面。RDS业界率先推出的高性能云盘（原通用云盘），是PaaS层和IaaS层的深度融合的技术最佳实践，通过使用不同的存储介质，为客户提供同时满足低成本、低延迟、高持久性的体验。
数据库知识学习者
765 4
1436047922066202
|
SQL 存储 分布式数据库
分布式存储数据恢复—hbase和hive数据库数据恢复案例
分布式存储数据恢复环境： 16台某品牌R730xd服务器节点，每台服务器节点上有数台虚拟机。 虚拟机上部署Hbase和Hive数据库。 分布式存储故障： 数据库底层文件被误删除，数据库不能使用。要求恢复hbase和hive数据库。
1436047922066202
503 12
赵渝强老师
|
存储 SQL 安全
【赵渝强老师】达梦数据库的物理存储结构
本文介绍了达梦数据库的存储结构及各类物理文件的作用。达梦数据库通过逻辑和物理存储结构管理数据，包含配置文件（如dm.ini、sqllog.ini）、控制文件（dm.ctl）、数据文件（*.dbf）、重做日志文件（*.log）、归档日志文件、备份文件（*.bak）等。配置文件用于功能设置，控制文件记录数据库初始信息，数据文件存储实际数据，重做日志用于故障恢复，归档日志增强数据安全性，备份文件保障数据完整性，跟踪与事件日志辅助问题分析。这些文件共同确保数据库高效、稳定运行。
赵渝强老师
675 0
顾翔
|
8月前
|
缓存 关系型数据库 BI
使用MYSQL Report分析数据库性能（下）
使用MYSQL Report分析数据库性能
顾翔
524 158
翼龙云TG_yilongcloud
|
8月前
|
关系型数据库 MySQL 数据库
自建数据库如何迁移至RDS MySQL实例
数据库迁移是一项复杂且耗时的工程，需考虑数据安全、完整性及业务中断影响。使用阿里云数据传输服务DTS，可快速、平滑完成迁移任务，将应用停机时间降至分钟级。您还可通过全量备份自建数据库并恢复至RDS MySQL实例，实现间接迁移上云。
翼龙云TG_yilongcloud
280 1
游客vphb4ae2je2zi
|
8月前
|
关系型数据库 MySQL 数据库
阿里云数据库RDS费用价格：MySQL、SQL Server、PostgreSQL和MariaDB引擎收费标准
阿里云RDS数据库支持MySQL、SQL Server、PostgreSQL、MariaDB，多种引擎优惠上线！MySQL倚天版88元/年，SQL Server 2核4G仅299元/年，PostgreSQL 227元/年起。高可用、可弹性伸缩，安全稳定。详情见官网活动页。
游客vphb4ae2je2zi
1365 152
上云就上阿狸云
|
8月前
|
关系型数据库 MySQL 数据库
阿里云数据库RDS支持MySQL、SQL Server、PostgreSQL和MariaDB引擎
阿里云数据库RDS支持MySQL、SQL Server、PostgreSQL和MariaDB引擎，提供高性价比、稳定安全的云数据库服务，适用于多种行业与业务场景。
上云就上阿狸云
986 156
顾翔
|
8月前
|
缓存 监控 关系型数据库
使用MYSQL Report分析数据库性能（中）
使用MYSQL Report分析数据库性能
顾翔
557 156
顾翔
|
8月前
|
缓存 监控 关系型数据库
使用MYSQL Report分析数据库性能（上）
最终建议：当前系统是完美的读密集型负载模型，优化重点应放在减少行读取量和提高数据定位效率。通过索引优化、分区策略和内存缓存，预期可降低30%的CPU负载，同时保持100%的缓冲池命中率。建议每百万次查询后刷新统计信息以持续优化
顾翔
668 161

热门文章

最新文章

  • 1
    如何在SpringBoot中集成JWT(JSON Web Token)鉴权
  • 2
    使用JWT简化http接口鉴权，告别烦人的加密、解密代码吧
  • 3
    SpringBoot集成Shiro权限+Jwt认证
  • 4
    JSON Web Token（缩写 JWT） 目前最流行、最常见的跨域认证解决方案
  • 5
    FastAPI（59）- 详解使用 OAuth2PasswordBearer + JWT 认证（上）
  • 6
    JWT（JSON Web Token）
  • 7
    spring boot3登录开发-1(整合jwt)
  • 8
    SpringBoot+SpringSecurity 前后端分离 + Jwt 的权限认证
  • 9
    Spring Cloud实战 | 最七篇：Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
  • 10
    JSON Web Token (JWT) 指南
  • 1
    除了JDBC，还有哪些常见的数据库访问技术？
    628
  • 2
    Python SQLAlchemy模块：从入门到实战的数据库操作指南
    869
  • 3
    云栖大会｜AI时代关系型数据库创新突破：软硬协同赋能企业数智化转型
    1494
  • 4
    云栖大会｜AI时代的数据库变革升级与实践：Data+AI驱动企业智能新范式
    1478
  • 5
    云栖大会｜AI浪潮下的NoSQL演进：下一代数据库的破局之道
    731
  • 6
    【赵渝强老师】使用NetManager创建Oracle数据库的监听器
    377
  • 7
    探究ClickHouse数据库的Mutation机制
    370
  • 8
    阿里云RDS云数据库全解析：产品功能、收费标准与活动参考
    1470
  • 9
    云栖重磅｜瑶池数据库：从云原生数据底座向“AI就绪”的多模态数据底座演进
    1040
  • 10
    AI大模型应用实践 八：如何通过RAG数据库实现大模型的私有化定制与优化
    1677

    • 相关课程

    更多
  • 数据库的前世今生
  • 数据库核心概念
  • 从传统数据库到云数据库演进
  • 数据库常见问题排查
  • 数据库及SQL/MySQL基础
  • 高校精品课-西安交通大学 -数据库理论与技术

    • 相关电子书

    更多
  • 开源数据库工作室推广计划
  • 国产数据库研制人才培养实践
  • 阿里云&信通院《Serverless数据库技术研究报告》
    • 下一篇
    阿里云重磅新品：Agent安全中心，全新安全框架下AI Agent一体化防御平台