注册登录后上传文件到本地数据库项目

        在上一篇的基础上我有添加了登录注册功能文件上传

更新一下代码添加登录注册功能

app.js

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const db = require('./models/db');
const User = require('./models/userModel');
const File = require('./models/fileModel');
const uploadRoutes = require('./routes/upload');
const authRoutes = require('./routes/auth');

const app = express();
const PORT = 5000;

// 中间件
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 路由
app.use('/upload', uploadRoutes);
app.use('/auth', authRoutes);

// 同步数据库
db.sync().then(() => {
    console.log('数据库连接成功...');
}).catch(err => console.log('错误: ' + err));

app.listen(PORT, () => {
    console.log(`服务器正在运行在 http://localhost:${PORT}`);
});

 // routes/auth.js

// routes/auth.js
const express = require('express');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/userModel');

const router = express.Router();
const secret = 'your_jwt_secret';

// 用户注册
router.post('/register', async (req, res) => {
    try {
        const { username, password } = req.body;
        const hashedPassword = await bcrypt.hash(password, 10);
        const newUser = await User.create({ username, password: hashedPassword });
        res.status(201).json({ message: '用户注册成功', user: newUser });
    } catch (error) {
        res.status(500).json({ message: '注册失败', error });
    }
});

// 用户登录
router.post('/login', async (req, res) => {
    try {
        const { username, password } = req.body;
        const user = await User.findOne({ where: { username } });
        if (!user) {
            return res.status(404).json({ message: '用户不存在' });
        }
        const isPasswordValid = await bcrypt.compare(password, user.password);
        if (!isPasswordValid) {
            return res.status(401).json({ message: '密码错误' });
        }
        const token = jwt.sign({ userId: user.id }, secret, { expiresIn: '1h' });
        res.status(200).json({ message: '登录成功', token });
    } catch (error) {
        res.status(500).json({ message: '登录失败', error });
    }
});

module.exports = router;

 // models/userModel.js

// models/userModel.js
const { Sequelize, DataTypes } = require('sequelize');
const db = require('./db');

const User = db.define('User', {
    username: {
        type: DataTypes.STRING,
        allowNull: false,
        unique: true
    },
    password: {
        type: DataTypes.STRING,
        allowNull: false
    }
});

module.exports = User;

 <!-- src/components/Login.vue -->

<!-- src/components/Login.vue -->
<template>
    <div>
        <h2>用户登录</h2>
        <form @submit.prevent="login">
            <div>
                <label for="username">用户名:</label>
                <input type="text" id="username" v-model="username" required />
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" v-model="password" required />
            </div>
            <button type="submit">登录</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        async login() {
            try {
                const response = await fetch('http://localhost:5000/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username: this.username, password: this.password })
                });
                const data = await response.json();
                if (response.ok) {
                    localStorage.setItem('token', data.token);
                    alert('登录成功！');
                     this.$router.push('/upload');
                } else {
                    alert('登录失败：' + data.message);
                }
            } catch (error) {
                alert('登录失败：' + error.message);
            }
        }
    }
};
</script>

 <!-- src/components/Register.vue -->

<!-- src/components/Register.vue -->
<template>
    <div>
        <h2>用户注册</h2>
        <form @submit.prevent="register">
            <div>
                <label for="username">用户名:</label>
                <input type="text" id="username" v-model="username" required />
            </div>
            <div>
                <label for="password">密码:</label>
                <input type="password" id="password" v-model="password" required />
            </div>
            <button type="submit">注册</button>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        async register() {
            try {
                const response = await fetch('http://localhost:5000/auth/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username: this.username, password: this.password })
                });
                const data = await response.json();
                if (response.ok) {
                    alert('注册成功！');
                } else {
                    alert('注册失败：' + data.message);
                }
            } catch (error) {
                alert('注册失败：' + error.message);
            }
        }
    }
};
</script>

// src/router/index.js 

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Register from '../components/Register.vue';
import Login from '../components/Login.vue';
import FileUpload from '../components/FileUpload.vue';

const routes = [
    { path: '/register', component: Register },
    { path: '/login', component: Login },
    { path: '/upload', component: FileUpload, meta: { requiresAuth: true } }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

// 导航守卫
router.beforeEach((to, from, next) => {
    const loggedIn = localStorage.getItem('user');

    if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
        next('/login');
    } else {
        next();
    }
});

export default router;

 app.vue

<template>
    <div id="app">
        <header>
            <h1>我的应用</h1>
            <nav v-if="!loggedIn">
                <ul>
                    <li @click="goTo('/login')">登录</li>
                    <li @click="goTo('/register')">注册</li>
                </ul>
            </nav>
            <nav v-else>
                <ul>
                    <li @click="goTo('/upload')">文件上传</li>
                    <li @click="logout">退出</li>
                </ul>
            </nav>
        </header>
        <main>
            <router-view></router-view>
        </main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loggedIn: false
        };
    },
    created() {
        // 检查本地存储中是否有用户登录信息
        const token = localStorage.getItem('token');
        if (token) {
            this.loggedIn = true;
        }
    },
    methods: {
        goTo(path) {
            this.$router.push(path);
        },
        logout() {
            localStorage.removeItem('token');
            this.loggedIn = false;
            this.$router.push('/login');
        }
    }
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

header {
    background-color: #35495e;
    padding: 10px 0;
    color: white;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
    cursor: pointer;
}
</style>

 // src/main.js

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Register from './components/Register.vue';
import Login from './components/Login.vue';
import FileUpload from './components/FileUpload.vue';

const routes = [
    { path: '/register', component: Register },
    { path: '/login', component: Login },
    { path: '/upload', component: FileUpload }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

const app = createApp(App);
app.use(router);
app.mount('#app');

记得安装对应的包和更新依赖！！！

请记得一键三连（点赞、收藏、分享）哦！