随着Web前端技术的迅猛发展,现在的Web开发已经明显分为两大阵营:Web前端和Web后端,接着UI设计又从Web前端分离出去,成为专门的团队。当我们从JavaScript开始,一路经过jQuery、Bootstrap、React,一直追逐到Vue时,是否还有人记得曾经的Web开发是前后端一体的?
本文给出的前后端一体的Web服务器例子,这种开发方式绝对不值得提倡,但是这个例子,将有助于我们加深理解HTTP和HTML。
1、需求定义
本次开发,要求在网页上显示某个培训班的所有学生信息。
我们用MySQL保存学生信息,使用SpringBoot构建程序框架,使用MyBatis与数据库对接。
下面是详细开发过程。
2、在MySQL服务器上执行下面的SQL语句创建db_train数据库,在db_train库中建立t_student表:
create database db_train default character set utf8;use db_train;create table t_student(
student_id int unsigned not null,
student_name varchar(32) not null,
student_age int unsigned not null,
student_gender int not null,
primary key(student_id)
)engine=InnoDB default charset=utf8;
3、使用下面的SQL语句向t_student表中插入一些实验数据:insert into t_student(student_id, student_name, student_age, student_gender) values(1, '张三', 36, 1);insert into t_student(student_id, student_name, student_age, student_gender) values(2, '李明', 31, 0);insert into t_student(student_id, student_name, student_age, student_gender) values(3, '王麻', 28, 0);insert into t_student(student_id, student_name, student_age, student_gender) values(4, '郑丽', 27, 1);insert into t_student(student_id, student_name, student_age, student_gender) values(5, '赵进', 39, 0);insert into t_student(student_id, student_name, student_age, student_gender) values(6, '郭霞', 33, 1);insert into t_student(student_id, student_name, student_age, student_gender) values(7, '杨浩', 37, 0);
4、查询数据库,确认上面的SQL语句执行已经成功:
5、启动IDEA,创建一个空的工程train:
6、在工程中创建一个SpringBoot模块student,Group输入com.flying,Java版本选择8,Dependencies选择Lombok、SpringWeb、MyBatis Framework:
7、修改pom.xml文件,加入mysql数据库连接的依赖,以及打包生成jar文件的内容。修改后的pom.xml文件为:
<?xml version='1.0' encoding='UTF-8'?>
xsi:schemaLocation='http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd'>
4.0.0
org.springframework.boot
spring-boot-starter-parent
2.3.3.RELEASE
com.flying
student
0.0.1-SNAPSHOT
student
Demo project for Spring Boot
1.8
mysqlmysql-connector-javaruntime
org.springframework.boot
spring-boot-starter-web
org.mybatis.spring.boot
mybatis-spring-boot-starter
2.1.3
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-test
test
org.junit.vintage
junit-vintage-engine
student
org.apache.maven.plugins
maven-jar-plugin
*.properties
*.txt
*.xml
true
student_lib/
false
com.flying.student.StudentApplication
./resources/
${project.build.directory}
org.apache.maven.plugins
maven-dependency-plugin
copy-dependencies
package
copy-dependencies
${project.build.directory}/student_lib/
maven-resources-plugin
copy-resources
package
copy-resources
src/main/resources
${project.build.directory}/resources
8、在src\main\java\com\flying\student目录中增加entity包,然后在entity包中增加StudentEntity数据类,代码如下:package com.flying.student.entity;import lombok.Data;@Datapublic class StudentEntity { private int studentId; private String studentName; private int studentAge; private int studentGender;
}
9、在src\main\java\com\flying\student目录中增加dao包,然后在dao包中增加数据据库操作接口StudentDao,代码如下:
package com.flying.student.dao;import com.flying.student.entity.StudentEntity;import org.apache.ibatis.annotations.Mapper;import java.util.List;@Mapperpublic interface StudentDao { List queryAllStudents();
}
10、在src\main\resources目录中增加mapper子目录,然后在mapper子目录中增加StudentMapper.xml文件,文件内容如下:<?xml version='1.0' encoding='UTF-8' ?>mapper
PUBLIC '-//mybatis.org//DTD Mapper 3.0//EN'
'http://mybatis.org/dtd/mybatis-3-mapper.dtd'>
select student_id as studentId, student_name as studentName, student_age as studentAge, student_gender as studentGender
from t_student
11、在src\main\java\com\flying\student目录中增加controller包,然后在controller包中增加StudentController类,代码如下:
package com.flying.student.controller;import com.flying.student.dao.StudentDao;import com.flying.student.entity.StudentEntity;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;
@Controller
public class StudentController {
@Autowired
private StudentDao studentDao;
@RequestMapping('/all_students')
public @ResponseBody String getAllStudents(){
StringBuffer stringBuffer = new StringBuffer();
stringBuffer.append('');
stringBuffer.append('
');stringBuffer.append('
培训学生信息查询');stringBuffer.append(' ');
stringBuffer.append('
');stringBuffer.append('
stringBuffer.append('
');stringBuffer.append('
');stringBuffer.append('
节点信息查询
');stringBuffer.append('
');stringBuffer.append('
');stringBuffer.append('
');stringBuffer.append('
学生ID');stringBuffer.append('
学生姓名');stringBuffer.append('
学生年龄');stringBuffer.append('
学生性别');stringBuffer.append('
');List nodeEntityList = studentDao.queryAllStudents(); int recordCount; if (nodeEntityList == null){
recordCount = 0;
}else{
recordCount = nodeEntityList.size();
} for (int i=0; i
StudentEntity studentEntity = nodeEntityList.get(i);
stringBuffer.append('
');stringBuffer.append('
').append(studentEntity.getStudentId()).append('');stringBuffer.append('
').append(studentEntity.getStudentName()).append('');stringBuffer.append('
').append(studentEntity.getStudentAge()).append(''); if (studentEntity.getStudentGender() == 0){stringBuffer.append('
男');}else{
stringBuffer.append('
女');}
}
stringBuffer.append(' ');
stringBuffer.append(''); return stringBuffer.toString();
}
}
12、修改application.properties文件,设置服务器监听端口为8000,设置MySQL和MyBatis的信息:server.port=8000spring.datasource.url=jdbc:mysql://127.0.0.1/db_train?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=truespring.datasource.username=rootspring.datasource.password=123456spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.max-idle=10spring.datasource.max-wait=10000spring.datasource.min-idle=5spring.datasource.initial-size=5mybatis.typeAliasesPackage=spring.SpringBoot.mappermybatis.mapperLocations=classpath:mapper/*.xml
13、在IDEA的Terminal窗口执行 mvn clean package -DskipTests 命令,进行编译和打包:
14、编译后将会生成resources目录、student_lib目录和student.jar文件,将这些文件拷贝到Linux运行环境(我比较喜欢Linux环境,其实Windows环境也是可以的哈):
15、在Linux环境下执行生成的student.jar文件:
16、打开浏览器,输入 http://:8000/all_students
可以看到,网页上以表格形式显示了培训班的所有学生信息,我们通过前后端一体的方式,实现了数据库表内容查询的功能。
谢谢阅读!欢迎收藏。