Strapi+Vue+MySQL项目实战_strapi vue-CSDN博客

本文链接：https://blog.csdn.net/dwzsw/article/details/119480398

本文介绍了一个使用Strapi、Vue和MySQL的项目实战，涵盖了登录/注册界面的实现，包括在Strapi中创建用户并授权，以及Vue中创建登录和注册表单。同时，文章讨论了表单页面的数据准备，展示了如何通过Strapi API进行增删改查操作，以及在遇到403、404、500、401等错误时的解决策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Strapi+Vue+Element+MySql项目实战

软件：VSCode
前端：Vue3
接口：Strapi
后端：MySql
简介：创建Strapi和Vue部分网上有很多文章就不再赘述啦，本文主要是运用结合Strapi的api接口对数据库进行增删改查等操作
Strapi的使用可以参考官方文档

1.登录/注册界面

1.1数据准备
需要先在Strapi中先创建用户，如下图：
在这里插入图片描述
而且！！！用户所对应的角色需要对以下操作进行授权：

其中callback可以用于获取角色的token，register是用于注册新用户的。
1.2登录页面
首先是在Vue中创建一个表单，填写登录信息。
表单的用户名（param.username）和密码（param.password）分别用v-model进行双向绑定。

<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
    <el-form-item prop="username">
        <el-input v-model="param.username" placeholder="username">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
        </el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input type="password" placeholder="password" v-model="param.password" @keyup.enter.native="submitForm()">
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
        </el-input>
    </el-form-item>
    <div class="login-btn">
        <el-button type="primary" @click="submitForm()">登录</el-button>
        <el-button type="primary" @click="register()">注册</el-button>
    </div>
</el-form>

在vue的export的data中需要定义：
其中rules是用于在表单输入时进行表单验证，详情可以参考Element的官方文档

return {
   
    param: {
   
        username: '',
        password: ''
    },
    rules: {
   
        username: [{
    required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{
    required: true, message: '请输入密码', trigger: 'blur' }]
    }
};

登录界面还设定了登录和注册按钮，点击分别触发submitForm和register：

submitForm() {
   
     axios
     .post('http://localhost:1337/auth/local', {
   
         identifier: this.param.username,
         password: this.param.password
     })
     .then((Response) => {
   
         this.$message.success('登录成功');
         localStorage.setItem('token', Response.data.jwt)
         this.$router.push('/');
     })
     .catch((e) => {
   
         this.$message.error('请重新输入账号和密码');
     });
 },
 register() {
   
     localStorage.setItem('ms_username', 0);
     this.$router.push('/register');
 }

post代码中的除了url中的端口号，identifier和password都不可以修改不然会报错！！！

postman测试效果：
在这里插入图片描述

界面效果：
在这里插入图片描述
1.3注册界面
注册界面与登录界面同理，只不过需要在headers里增加Authorization以及api接口改变了，api的接口可以在Strapi的设置中查询。

Strapi用户注册时需要提供用户名(param.username)、邮箱(param.email)及密码(param.password)

<div style="text-align: center; padding-top: 20px"><h1 style="font-family: '方正毡笔黑简体'">注册账号</h1></div>
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
    <el-form-item prop="username">
        <el-input v-model="param.username" placeholder="username">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
        </el-input>
    </el-form-item>
    <el-form-item prop="email">
        <el-input placeholder="email" v-model="param.email">
            <el-button slot="prepend" icon="el-icon-lx-message"></el-button>
        </el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input type="password" placeholder="password" v-model="param.password" @keyup.enter.native="submitForm()">
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
        </el-input>
    </el-form-item>
    <div class="login-btn">
        <el-button type="primary" @click="login()">返回登录</el-button>
        <el-button type="primary" @click="register()">提交注册</el-button>
    </div>
</el-form>

提交注册信息需要有token进行权限认证，因此简单的话可以在注册界面直接复制粘贴之前生成的token（jwt）

data: function () {
   
    return {
   
        param: {
   
            username: '',
            email: '',
            password: ''
        },
        rules: {
   
            username: [{
    required: true, message: '请输入用户名', trigger: 'blur' }],
            email: [{
    required: true, message: '请输入邮箱', trigger: 'blur' }],
            password: [{
    required: true, message: '请输入密码', trigger: 'blur' }]
        }
    };
},
methods: {
   
    register() {
   
        axios
        .post('http://localhost:1337/auth/local/register', {
   
            Authorization:'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjI3Mjc0OTgxLCJleHAiOjE2Mjk4NjY5ODF9.cCq6tnXmqb8s5tYQhSSHLSR6v-5rII9NRVCFeztB8kc',
            email: this.param.email,
            username: this.param.username,
            password: this.param.password
        })
        .then((Response) =>