从零开始:手把手教你构建Vue + TypeScript全栈项目

前言

        在现代Web开发中,前后端分离的架构逐渐成为主流,而Vue.js作为一个轻量级的渐进式前端框架,以其简洁、易用、性能优越而广受欢迎。在此基础上,TypeScript(TS)与Vue结合能够提供更强的类型检查和开发工具支持,进一步提升开发效率和代码质量。在本文中,我们将从数据库准备入手,逐步介绍如何通过Vue + TypeScript项目实现一个基础的前后端系统,从数据库建表到项目的初始化与运行,帮助开发者快速上手该技术栈。

一、数据库准备

1、新建一个数据库名为sims 然后将以下建表语句在此数据库中执行,这样就有多张数据表啦。

2、创建数据表,将以下建表语句复制进Navicat里面去。

-- 这个数据库结构:
-- 1管理学生、教师和课程的基本信息
-- 2记录学生的选课信息
-- 3管理学生的成绩
-- 4跟踪数据的创建和更新时间
-- 根据实际需求,你可能需要添加更多的表或字段,例如添加一个部门表,或者在学生表中添加更多的字段如学生证号码等。你也可以根据需要添加索引来优化查询性能。
-- 
-- 
-- 

-- 学生表
CREATE TABLE students (
    student_id INT PRIMARY KEY AUTO_INCREMENT,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    date_of_birth DATE,
    gender ENUM('Male', 'Female', 'Other'),
    email VARCHAR(100) UNIQUE,
    phone_number VARCHAR(20),
    address TEXT,
    enrollment_date DATE,
    major VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 教师表
CREATE TABLE teachers (
    teacher_id INT PRIMARY KEY AUTO_INCREMENT,
    first_name VARCHAR(50) NOT NULL,
    last_name VARCHAR(50) NOT NULL,
    email VARCHAR(100) UNIQUE,
    phone_number VARCHAR(20),
    department VARCHAR(100),
    hire_date DATE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 课程表
CREATE TABLE courses (
    course_id INT PRIMARY KEY AUTO_INCREMENT,
    course_name VARCHAR(100) NOT NULL,
    course_code VARCHAR(20) UNIQUE,
    description TEXT,
    credits INT,
    teacher_id INT,
    FOREIGN KEY (teacher_id) REFERENCES teachers(teacher_id),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 课程注册表 (学生选课信息)
CREATE TABLE course_registrations (
    registration_id INT PRIMARY KEY AUTO_INCREMENT,
    student_id INT,
    course_id INT,
    semester VARCHAR(20),
    year YEAR,
    registration_date DATE,
    FOREIGN KEY (student_id) REFERENCES students(student_id),
    FOREIGN KEY (course_id) REFERENCES courses(course_id),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- 成绩表
CREATE TABLE grades (
    grade_id INT PRIMARY KEY AUTO_INCREMENT,
    student_id INT,
    course_id INT,
    grade DECIMAL(5,2),
    semester VARCHAR(20),
    year YEAR,
    FOREIGN KEY (student_id) REFERENCES students(student_id),
    FOREIGN KEY (course_id) REFERENCES courses(course_id),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

执行完成之后,是这样子的。

3、刷新可以看到,在sims数据库下有5张表,这样我们数据表就准备好啦。

二、创建一个 vue + ts 项目

1、点击TS+Vue 然后点击创建项目。

2、点击创建之后是这样的:

3、创建完成后,进入到此页面:

4、初始化项目

记得点击Save Project !!!

5、点击之后,就会加载前端和后端,会弹出来两个控制台,8050是前端,8060是后端。

6、安装包完成之后,就可以访问http://localhost:8050/

这样就完成了一个vue  + ts 项目的创建啦。后续操作我们下一篇csdn见啦~ 

总结

        通过本文的介绍,我们完成了从数据库的准备、表结构的创建到Vue + TypeScript项目的初始化,并成功运行了本地开发服务器。这个基础项目为我们搭建了前端与后端的沟通桥梁,奠定了后续开发的基础。通过这一过程,我们不仅理解了如何在Vue与TypeScript的框架下快速搭建应用,还为接下来深入开发和业务逻辑实现做好了准备。在下一篇文章中,我们将进一步探讨如何在此项目基础上添加更多功能。

猜你喜欢

转载自blog.csdn.net/yoona333/article/details/142853431