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

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

2024-07-03 7
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 文本，三步走构思，富文本点击提交能够存储到数据库当中（下）,最快的方法，还是会看资料，因此会整合资料最好，直接看资料最快，因为是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
存储数据库设置
文本存储数据库
富文本数据库
爱你三千遍斯塔克
目录
相关文章
weixin_836869520
|
1天前
|
SQL 存储 Oracle
Oracle数据库中游标的工作原理与优化方法
Oracle数据库中游标的工作原理与优化方法
weixin_836869520
8 1
爱你三千遍斯塔克
|
2天前
|
前端开发 数据库
文本----富文本数据如何存入到数据库当中，解决方法，看其他大佬写的文章
文本----富文本数据如何存入到数据库当中，解决方法，看其他大佬写的文章
爱你三千遍斯塔克
7 0
文本----富文本数据如何存入到数据库当中，解决方法，看其他大佬写的文章
朝阳39
|
1天前
|
小程序 JavaScript 安全
【微信小程序-原生开发】转发给好友/群，分享到朋友圈（含单页模式访问云开发数据库的方法）
【微信小程序-原生开发】转发给好友/群，分享到朋友圈（含单页模式访问云开发数据库的方法）
朝阳39
6 0
爱你三千遍斯塔克
|
2天前
|
关系型数据库 MySQL 数据库
生成订单的过程------支付系统21------支付宝支付----统一收单下单并支付页面接口----创建订单，下订单，我们要在我们数据库的订单表中，设置订单，订单表常用数据库设置格式
生成订单的过程------支付系统21------支付宝支付----统一收单下单并支付页面接口----创建订单，下订单，我们要在我们数据库的订单表中，设置订单，订单表常用数据库设置格式
爱你三千遍斯塔克
6 0
1483290837038108
|
2天前
|
安全 NoSQL Java
JWT和Security 登录权限判断和token访问和让token失效
JWT和Security 登录权限判断和token访问和让token失效
1483290837038108
8 0
省赚客_123456
|
3天前
|
Java 数据库连接 应用服务中间件
数据库连接管理与性能优化方法
数据库连接管理与性能优化方法
省赚客_123456
4 0
程序三两行
|
2月前
|
安全 数据安全/隐私保护
Springboot+Spring security +jwt认证+动态授权
Springboot+Spring security +jwt认证+动态授权
程序三两行
132 0
weixin_836869520
|
1天前
|
JSON 安全 Java
Spring Boot中使用JWT进行安全认证
Spring Boot中使用JWT进行安全认证
weixin_836869520
12 1
百锦再@新空间代码工作室
|
4天前
|
存储 算法 安全
SpringBoot之整合JWT
SpringBoot之整合JWT
百锦再@新空间代码工作室
11 0
泥腿子架构师
|
8天前
|
JSON 安全 Java
Spring Boot中使用JWT进行安全认证
Spring Boot中使用JWT进行安全认证
泥腿子架构师
15 0

热门文章

最新文章

  • 1
    查询提速11倍、资源节省70%，阿里云数据库内核版 Apache Doris 在网易日志和时序场景的实践
  • 2
    数据库索引回表困难？揭秘PolarDB存储引擎优化技术
  • 3
    Doris和Greenplum数据库简单对比
  • 4
    关系型数据库选择合适的数据库管理系统
  • 5
    RAG：AI大模型联合向量数据库和 Llama-index，助力检索增强生成技术
  • 6
    在IntelliJ IDEA中通过Spring Boot集成达梦数据库：从入门到精通
  • 7
    性能诊断工具DBdoctor如何快速纳管数据库PolarDB-X
  • 8
    数据库性能诊断工具DBdoctor通过阿里云PolarDB产品生态集成认证
  • 9
    关系型数据库选择合适的数据库管理系统
  • 10
    【JAVA基础篇教学】第十六篇：Java连接和操作MySQL数据库
  • 1
    JWT解密：探秘令牌魔法与Java的完美交互
    34
  • 2
    Springboot+Spring security +jwt认证+动态授权
    132
  • 3
    面试官：Session和JWT有什么区别？
    60
  • 4
    云原生最佳实践系列 6：MSE 云原生网关使用 JWT 进行认证鉴权
    890
  • 5
    jwt-auth插件实现了基于JWT(JSON Web Tokens)进行认证鉴权的功能。
    95
  • 6
    【java苍穹外卖项目实战四】JWT令牌技术（完善登录功能）
    277
  • 7
    JWT令牌技术
    69
  • 8
    SpringBoot通过拦截器和JWT令牌实现登录验证
    385
  • 9
    [JavaWeb]——JWT令牌技术,如何从获取JWT令牌
    54
  • 10
    spring boot3登录开发-1(整合jwt)
    96

    • 相关课程

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

    • 相关电子书

    更多
  • 2022 DTCC-阿里云一站式数据库上云最佳实践
  • 云时代的数据库技术趋势
  • 超大型金融机构国产数据库全面迁移成功实践

    • 相关实验场景

    更多
  • 快速体验PolarDB开源数据库
  • 基于Kibana Discover筛选数据，自由搜索航班信息
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）