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

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

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

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');

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

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