采用vue+mysql和express框架实现以下项目: 通过数据库实现登录的功能(登录成功与否均需要跳转到相应的组件)。 实现对学生信息的增删查改。 实现对学生成绩的查询(输入学号,显示每个科目的成绩)。 用户表(编号,用户名,密码,备注) 学生表(编号,学号,姓名,年龄,专业) 成绩表(编号,学号,课程编号,课程名称,成绩),帮我写出代码
时间: 2024-03-26 18:42:21 浏览: 13
很抱歉,由于篇幅限制,无法在这里为您编写完整的代码。但是,我可以提供一些代码片段和思路供您参考。
首先是后端部分,使用Express框架和MySQL数据库:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const Sequelize = require('sequelize');
// 创建数据库连接
const sequelize = new Sequelize('database', 'username', 'password', {
dialect: 'mysql'
});
// 定义用户模型
const User = sequelize.define('user', {
id: { type: Sequelize.INTEGER, primaryKey: true, autoIncrement: true },
username: Sequelize.STRING,
password: Sequelize.STRING,
remark: Sequelize.STRING
});
// 定义学生模型
const Student = sequelize.define('student', {
id: { type: Sequelize.INTEGER, primaryKey: true, autoIncrement: true },
studentId: Sequelize.STRING,
name: Sequelize.STRING,
age: Sequelize.INTEGER,
major: Sequelize.STRING
});
// 定义成绩模型
const Score = sequelize.define('score', {
id: { type: Sequelize.INTEGER, primaryKey: true, autoIncrement: true },
studentId: Sequelize.STRING,
courseId: Sequelize.STRING,
courseName: Sequelize.STRING,
score: Sequelize.INTEGER
});
// 创建Express应用程序
const app = express();
// 解析请求体
app.use(bodyParser.json());
// 登录接口
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
User.findOne({ where: { username, password } }).then(user => {
if (user) {
// 登录成功,创建JWT令牌并返回
const token = createToken(user.id);
res.json({ token });
} else {
// 登录失败,返回错误信息
res.status(401).json({ message: '用户名或密码错误' });
}
});
});
// 学生信息增删查改接口
app.get('/api/students', (req, res) => {
Student.findAll().then(students => {
res.json(students);
});
});
app.post('/api/students', (req, res) => {
const { studentId, name, age, major } = req.body;
Student.create({ studentId, name, age, major }).then(student => {
res.json(student);
});
});
app.put('/api/students/:id', (req, res) => {
const { id } = req.params;
const { studentId, name, age, major } = req.body;
Student.update({ studentId, name, age, major }, { where: { id } }).then(() => {
res.json({ message: '更新成功' });
});
});
app.delete('/api/students/:id', (req, res) => {
const { id } = req.params;
Student.destroy({ where: { id } }).then(() => {
res.json({ message: '删除成功' });
});
});
// 学生成绩查询接口
app.get('/api/scores/:studentId', (req, res) => {
const { studentId } = req.params;
Score.findAll({ where: { studentId } }).then(scores => {
res.json(scores);
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
```
接下来是前端部分,使用Vue框架和Axios插件:
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import App from './App.vue';
import Login from './components/Login.vue';
import Students from './components/Students.vue';
import Scores from './components/Scores.vue';
// 配置Axios默认请求头
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
axios.defaults.baseURL = 'http://localhost:3000';
// 使用Vue Router插件
Vue.use(VueRouter);
// 定义路由
const router = new VueRouter({
routes: [
{ path: '/', component: Login },
{ path: '/students', component: Students },
{ path: '/scores', component: Scores },
]
});
// 路由守卫,用于检查用户是否登录
router.beforeEach((to, from, next) => {
if (to.path !== '/' && !localStorage.getItem('token')) {
next('/');
} else {
next();
}
});
// 创建Vue实例
new Vue({
el: '#app',
router,
render: h => h(App)
});
```
以上代码片段仅供参考,具体实现细节需要根据实际情况进行调整。