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

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

2024-07-03 240
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 文本，三步走构思，富文本点击提交能够存储到数据库当中（下）,最快的方法，还是会看资料，因此会整合资料最好，直接看资料最快，因为是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登录
文本数据库
爱你三千遍斯塔克
目录
相关文章
大数据文摘
|
10月前
|
人工智能 运维 关系型数据库
数据库运维：mysql 数据库迁移方法-mysqldump
本文介绍了MySQL数据库迁移的方法与技巧，重点探讨了数据量大小对迁移方式的影响。对于10GB以下的小型数据库，推荐使用mysqldump进行逻辑导出和source导入；10GB以上可考虑mydumper与myloader工具；100GB以上则建议物理迁移。文中还提供了统计数据库及表空间大小的SQL语句，并讲解了如何使用mysqldump导出存储过程、函数和数据结构。通过结合实际应用场景选择合适的工具与方法，可实现高效的数据迁移。
大数据文摘
1517 1
游客kufrkwrbkmpsa
|
数据库
【YashanDB知识库】数据库一主一备部署及一主两备部署时，主备手动切换方法及自动切换配置
【YashanDB知识库】数据库一主一备部署及一主两备部署时，主备手动切换方法及自动切换配置
游客kufrkwrbkmpsa
405 0
【YashanDB知识库】数据库一主一备部署及一主两备部署时，主备手动切换方法及自动切换配置
蓝易云
|
7月前
|
SQL Java 关系型数据库
Java连接MySQL数据库环境设置指南
请注意，在实际部署时应该避免将敏感信息（如用户名和密码）硬编码在源码文件里面；应该使用配置文件或者环境变量等更为安全可靠地方式管理这些信息。此外，在处理大量数据时考虑使用PreparedStatement而不是Statement可以提高性能并防止SQL注入攻击；同时也要注意正确处理异常情况，并且确保所有打开过得资源都被正确关闭释放掉以防止内存泄漏等问题发生。
蓝易云
314 13
蓝易云
|
8月前
|
存储 关系型数据库 MySQL
MySQL数据库中进行日期比较的多种方法介绍。
以上方法提供了灵活多样地处理和对比MySQL数据库中存储地不同格式地日子信息方式。根据实际需求选择适当方式能够有效执行所需操作并保证性能优化。
蓝易云
732 10
蓝易云
|
9月前
|
SQL Oracle 关系型数据库
比较MySQL和Oracle数据库系统，特别是在进行分页查询的方法上的不同
两者的性能差异将取决于数据量大小、索引优化、查询设计以及具体版本的数据库服务器。考虑硬件资源、数据库设计和具体需求对于实现优化的分页查询至关重要。开发者和数据库管理员需要根据自身使用的具体数据库系统版本和环境，选择最合适的分页机制，并进行必要的性能调优来满足应用需求。
蓝易云
417 11
游客nsyhaoxcmeiq6
|
11月前
|
存储 算法 Java
实现不同数据库的表间的 JOIN 运算的极简方法
跨库计算是数据分析中的常见难题，尤其涉及多数据库系统时，表间 JOIN 操作复杂度显著提升。esProc 提供了一种高效解决方案，能够简化跨库 JOIN 的实现。例如，在车辆管理、交管和公民信息系统中，通过 esProc 可轻松完成如下任务：按城市统计有车公民事件数量、找出近一年获表彰的车主信息，以及按年份和品牌统计车辆违章次数。esProc 支持不同关联场景（如维表关联与主子表关联）的优化算法，如内存索引、游标处理和有序归并，从而大幅提升编码和运算效率。无论是同构还是异构数据源，esProc 均能灵活应对，为复杂数据分析提供强大支持。
游客nsyhaoxcmeiq6
315 17
蓝易云
|
12月前
|
Oracle 安全 关系型数据库
【Oracle】使用Navicat Premium连接Oracle数据库两种方法
以上就是两种使用Navicat Premium连接Oracle数据库的方法介绍，希望对你有所帮助！
蓝易云
2341 28
青云交（Java大数据AI云原生Python）
|
12月前
|
SQL 关系型数据库 MySQL
大数据新视界--大数据大厂之MySQL数据库课程设计：MySQL 数据库 SQL 语句调优方法详解（2-1）
本文深入介绍 MySQL 数据库 SQL 语句调优方法。涵盖分析查询执行计划，如使用 EXPLAIN 命令及理解关键指标；优化查询语句结构，包括避免子查询、减少函数使用、合理用索引列及避免 “OR”。还介绍了索引类型知识，如 B 树索引、哈希索引等。结合与 MySQL 数据库课程设计相关文章，强调 SQL 语句调优重要性。为提升数据库性能提供实用方法，适合数据库管理员和开发人员。
青云交（Java大数据AI云原生Python）
400 11
蓝易云
|
SQL 数据库连接 Linux
数据库编程：在PHP环境下使用SQL Server的方法。
看看你吧，就像一个调皮的小丑鱼在一片广阔的数据库海洋中游弋，一路上吞下大小数据如同海中的珍珠。不管有多少难关，只要记住这个流程，剩下的就只是探索未知的乐趣，沉浸在这个充满挑战的数据库海洋中。
蓝易云
390 16
1639437117631681
|
数据库
【YashanDB 知识库】数据库一主一备部署及一主两备部署时，主备手动切换方法及自动切换配置
**数据库主备切换简介** 在数据库正常或异常情况下，实现主备切换至关重要。若配置不当，主节点故障将影响业务使用，尤其在23.2版本中。原因包括资源紧张或主节点异常。解决方法涵盖手动和自动切换： 1. **一主一备部署**： - **手动切换**：支持Switchover（同步正常时）和Failover（主库损坏时）。 - **自动切换**：启用yasom仲裁选主开关。 2. **一主两备部署**： - 默认最大保护模式，自动切换开启。 需检查并配置自动切换以确保高可用性。经验总结：一主一备默认关闭自动切换，需手动开启；一主两备默认开启。
1639437117631681
423 2

热门文章

最新文章

  • 1
    如何在SpringBoot中集成JWT(JSON Web Token)鉴权
  • 2
    使用JWT简化http接口鉴权，告别烦人的加密、解密代码吧
  • 3
    SpringBoot整合Spring Security + JWT实现用户认证
  • 4
    API接口JWT方式的Token认证（上），服务器(Laravel)的实现
  • 5
    JSON Web Token（缩写 JWT） 目前最流行、最常见的跨域认证解决方案
  • 6
    JWT（JSON Web Token）
  • 7
    SpringBoot+SpringSecurity 前后端分离 + Jwt 的权限认证
  • 8
    Spring Cloud实战 | 最七篇：Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
  • 9
    Golang语言使用 jwt-go 库生成和解析 token
  • 10
    Spring boot框架 JWT实现用户账户密码登录验证
  • 1
    现代化实时数仓 SelectDB 再次登顶 ClickBench 全球数据库分析性能排行榜！
    882
  • 2
    Python 操作 MySQL 数据库
    365
  • 3
    为什么数据库字符编码不一致会导致索引失效
    613
  • 4
    关系型数据库考虑索引的选择性
    386
  • 5
    关系型数据库选择正确的索引类型
    496
  • 6
    关系型数据库识别常查询字段
    475
  • 7
    SQL DB - 关系型数据库是如何工作的
    213
  • 8
    认识常见的一些数据库分类
    1686
  • 9
    关系型数据库中对索引的数目
    380
  • 10
    关系型数据库针对常查询的字段建立索引
    268

    • 相关课程

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

    • 相关电子书

    更多
  • 开源数据库工作室推广计划
  • 国产数据库研制人才培养实践
  • 阿里云&信通院《Serverless数据库技术研究报告》
    • 下一篇
    PHP：将本地文件上传到阿里云OSS存储