从零开始：手把手教你构建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、初始化项目
5、点击之后，就会加载前端和后端，会弹出来两个控制台，8050是前端，8060是后端。
6、安装包完成之后，就可以访问http://localhost:8050/
这样就完成了一个vue + ts 项目的创建啦。后续操作我们下一篇csdn见啦~
总结
通过本文的介绍，我们完成了从数据库的准备、表结构的创建到Vue + TypeScript项目的初始化，并成功运行了本地开发服务器。这个基础项目为我们搭建了前端与后端的沟通桥梁，奠定了后续开发的基础。通过这一过程，我们不仅理解了如何在Vue与TypeScript的框架下快速搭建应用，还为接下来深入开发和业务逻辑实现做好了准备。在下一篇文章中，我们将进一步探讨如何在此项目基础上添加更多功能。