一、结构展示
二、实现的功能
- 登录
- 条件查询（根据学号，姓名（模糊查询）查询）
- 新增
- 修改学生信息
- 删除（逻辑删除）
- 查看学生成绩（多表查询）
三、成果展示
可以使用学号和姓名进行条件查询
增加表单
修改表单，数据回显
查看学生的成绩（多表查询）
四、数据库
两个表，student和score表
1.student表（逻辑删除字段deleted记得设置默认值为0哦~）
2.score表（设置id自动递增）
五、后端部分
1.建立一个maven项目（不再演示）
2.pom文件，加载依赖
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>day11-3SSM</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>day11-3SSM Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<!-- spring-context 核心基础功能 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.3.18</version>
</dependency>
<!-- spring-webmvc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.18</version>
</dependency>
<!-- servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!-- spring-jdbc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.3.18</version>
</dependency>
<!-- aop 面向切面(事务管理) -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.3.18</version>
</dependency>
<!-- 阿里数据源 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<!-- mybatis框架 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.2</version>
</dependency>
<!-- spring整合mybatis的插件包 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
<!-- mysql驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.33</version>
</dependency>
<!-- 日志：log4j -->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
</dependency>
<!--Jackson依赖-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
</dependencies>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.encoding>UTF-8</maven.compiler.encoding>
<java.version>17</java.version>
<maven.compiler.source>17</maven.compiler.source>
<maven.compiler.target>17</maven.compiler.target>
</properties>
<build>
<finalName>day11-3SSM</finalName>
</build>
</project>
3.在resources目录下建立spring.xml配置文件
注意在配置数据源处修改自己的数据库配置
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--扫描service层-->
<context:component-scan base-package="com.stu.service"/>
<!--配置数据源-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://127.0.0.1:3306/ssm_test"/>
<property name="username" value="root"/>
<property name="password" value="111111"/>
</bean>
<!--配置SqlSessionFactory-->
<bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--指定数据源-->
<property name="dataSource" ref="dataSource"/>
<!--配置实体类别名-->
<property name="typeAliasesPackage" value="com.stu.model"/>
<!-- 指定映射文件的路径 -->
<property name="mapperLocations" value="classpath:mapper/*.xml"/>
</bean>
<!--配置Mapper代理-->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.stu.dao"/>
<property name="sqlSessionFactoryBeanName" value="sessionFactory"/>
</bean>
</beans>4.在resources目录下建立springMVC.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--处理访问静态资源的请求-->
<mvc:default-servlet-handler/>
<!--扫描控制层-->
<context:component-scan base-package="com.stu.controller"/>
<!--开启SpringMVC注解扫描器-->
<mvc:annotation-driven/>
</beans>5.在resources目录下建立log4j.properties日志文件
log4j.appender.stdout.Target = System.out
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern = %d{ABSOLUTE} %5p %c{1}:%L - %m%n
log4j.logger.com.stu.dao=TRACE
log4j.rootLogger=INFO, stdout6.修改web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--配置Spring框架配置文件的路径-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</context-param>
<!--注册Spring框架的核心监听器-->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--配置SpringMVC框架的中央控制器-->
<servlet>
<servlet-name>DispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--配置SpringMVC框架配置文件的路径-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springMVC.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>DispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--配置编码过滤器-->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>7.如图所示建立文件夹和类，接口等等。。。
（1）ResultCode接口
public interface ResultCode {
Integer SUCCESS = 200;
Integer ERROR = 500;
}（2）RestResult类
@Data
public class RestResult {
private Boolean success;
private Integer code;
private String message;
private Map<String, Object> data = new HashMap<String, Object>();
private RestResult() {
}
public static RestResult ok() {
RestResult restResult = new RestResult();
restResult.setSuccess(true);
restResult.setCode(ResultCode.SUCCESS);
restResult.setMessage("成功");
return restResult;
}
public static RestResult error() {
RestResult restResult = new RestResult();
restResult.setSuccess(false);
restResult.setCode(ResultCode.ERROR);
restResult.setMessage("失败");
return restResult;
}
public RestResult success(Boolean success) {
this.setSuccess(success);
return this;
}
public RestResult message(String message) {
this.setMessage(message);
return this;
}
public RestResult code(Integer code) {
this.setCode(code);
return this;
}
public RestResult data(String key, Object value) {
this.data.put(key, value);
return this;
}
public RestResult data(Map<String, Object> map) {
this.setData(map);
return this;
}
}
（3）先写model层的实体类吧，Score类
@Data
public class Score {
private Integer id;
private Integer sid;
private String cname;
private Integer score;
}（4）ScoreVo类
@EqualsAndHashCode(callSuper = true)
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ScoreVo extends Score {
private String name;
}（5）Student类
@NoArgsConstructor
@AllArgsConstructor
@Data
public class Student {
private Integer id;
private String name;
private Integer age;
private String sex;
private String password;
private Integer deleted;
}实体类创建结束~
（6）mapper层下的StudentDao.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.stu.dao.StudentDao">
<!-- 条件分页查询-->
<select id="pageSelect" resultType="com.stu.model.Student">
select *
from student
<where>
deleted = 0
<if test="name != null and name != ''">
and student.name like '%' #{name} '%'
</if>
<if test="id != null and id != ''">
and student.id = #{id}
</if>
</where>
</select>
<!-- 查询符合条件的总记录数-->
<select id="selectCount" resultType="java.lang.Integer">
select count(*)
from student
<where>
deleted = 0
<if test="name != null and name != ''">
and student.name like '%' #{name} '%'
</if>
<if test="id != null and id != ''">
and student.id = #{id}
</if>
</where>
</select>
<!-- 学号和密码查询-->
<select id="selectLogin" resultType="com.stu.model.Student">
select *
from student
where
id = #{id}
and password = #{password}
</select>
<insert id="insertStu">
insert into student (id, name, sex, age)
VALUES (#{id}, #{name}, #{sex}, #{age})
</insert>
<update id="updateStu">
update student
set id=#{id},
name=#{name},
sex=#{sex},
age=#{age}
where id = #{id}
and deleted = 0
</update>
<!-- 根据id查询-->
<select id="selectById" resultType="com.stu.model.Student">
select *
from student
where id=#{id}
and deleted=0
</select>
<!--逻辑删除-->
<delete id="delete">
update student set deleted=1 where deleted=0 and id =#{id}
</delete>
<!-- 根据id查成绩-->
<select id="selectScore" resultType="com.stu.model.ScoreVo">
select student.name as name,
score.sid as sid,
score.cname as cname,
score.score as score
from student,score
where student.id=#{id} and student.id = score.sid and deleted = 0
</select>
</mapper>（7）StudentDao接口
public interface StudentDao {
public Student selectLogin(Student student);
public List<Student> pageSelect(@Param("name") String name,
@Param("id") Integer id,
@Param("startIndex") Integer startIndex,
@Param("limit") Integer limit
);
public Integer selectCount(@Param("name") String name,
@Param("id") Integer id);
public boolean insertStu(Student student);
public boolean updateStu(Student student);
public Student selectById(Integer id);
public boolean delete(Integer id);
public List<ScoreVo> selectScore(Integer id);
}（8）service层接口IStudentService
public interface IStudentService {
public RestResult login(Student student);
public RestResult pageSelect(String name, Integer id,Integer current,Integer limit);
public RestResult insertStu(Student student);
public RestResult updateStu(Student student);
public RestResult selectById(Integer id);
public RestResult delete(Integer id);
public RestResult selectScore(Integer id);
}（9）service层实现类StudentService
@Service()
public class StudentService implements IStudentService {
@Autowired
private StudentDao studentDao;
public RestResult login(Student student) {
Student student1 = studentDao.selectLogin(student);
if(student1 != null){
System.out.println(RestResult.ok().data("student",student1));
return RestResult.ok().data("student",student1);
}else{
return RestResult.error();
}
}
@Override
public RestResult pageSelect(String name,Integer id,Integer current, Integer limit) {
System.out.println(name+"------"+id);
int total = studentDao.selectCount(name,id);
System.out.println("总记录数"+total);
int pages = (total+limit-1)/limit;
int startIndex = (current-1)*limit;
List<Student> students = studentDao.pageSelect(name,id,current, limit);
System.out.println(students+" .."+current+" "+limit);
return RestResult.ok().data("total", total).data("pages", pages).data("rows", students).data("current", current).data("limit", limit);
}
@Override
public RestResult insertStu(Student student) {
System.out.println(student);
boolean b = studentDao.insertStu(student);
if(b==true){
return RestResult.ok();
}else{
return RestResult.error();
}
}
@Override
public RestResult updateStu(Student student) {
boolean b = studentDao.updateStu(student);
if(b==true){
return RestResult.ok();
}else{
return RestResult.error();
}
}
@Override
public RestResult selectById(Integer id) {
Student student = studentDao.selectById(id);
System.out.println("chagenjuid"+student);
return RestResult.ok().data("student",student);
}
@Override
public RestResult delete(Integer id) {
boolean delete = studentDao.delete(id);
if(delete==true){
return RestResult.ok();
}else{
return RestResult.error();
}
}
@Override
public RestResult selectScore(Integer id) {
List<ScoreVo> scoreVos = studentDao.selectScore(id);
System.out.println(scoreVos);
return RestResult.ok().data("score",scoreVos);
}
}（10）controller层StudentController类
@RestController
@RequestMapping("/stu")
public class StudentController {
@Autowired
private StudentService service;
@PostMapping("/login")
public RestResult login(@RequestBody Student student){
System.out.println(student);
return service.login(student);
}
@PostMapping("/pageSelect/{current}/{limit}")
public RestResult pageSelect(
@RequestParam(required = false) String name,
@RequestParam(required = false) Integer id,
@PathVariable Integer current,
@PathVariable Integer limit
){
System.out.println(name+"---"+id);
return service.pageSelect(name,id,current, limit);
}
@PostMapping("/insert")
public RestResult insertStu(@RequestBody Student student){
return service.insertStu(student);
}
@PostMapping("/update")
public RestResult updateStu(@RequestBody Student student){
return service.updateStu(student);
}
@GetMapping("/selectById/{id}")
public RestResult selectById(@PathVariable Integer id){
System.out.println(id);
return service.selectById(id);
}
@PostMapping("/delete/{id}")
public RestResult delete(@PathVariable Integer id){
return service.delete(id);
}
@GetMapping("/selectScore/{id}")
public RestResult selectScore(@PathVariable Integer id){
System.out.println("controller"+id);
return service.selectScore(id);
}
}后端代码结束~撒花~~~~~
六、前端部分
前端我使用的是在html中嵌入vue和element ui~
1.首先~看一下项目结构
axios.min.js文件需要大家自己下载一下，放在js文件夹下，这个大家自行百度下载~很简单，我就不做赘述了~
2.index.html文件（登录页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入 element-ui 的样式，-->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="./css/login.css">
<script src="./js/axios.min.js"></script>
</head>
<body>
<div>
<div id="login">
<p class="title">学生信息管理</p>
<el-form
:model="student"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="学号" prop="id">
<el-input v-model="student.id"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="student.password"></el-input>
</el-form-item>
<el-form-item class="btn">
<el-button type="primary" @click="login()">登录</el-button>
<span></span>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
<script>
new Vue({
el:"#login",
data() {
return {
student: {
id: "",
password: "",
},
rules: {
name: [
{ required: true, message: "请输入学号", trigger: "blur" },
{
min: 3,
max: 12,
message: "长度在 3 到 12 个字符",
trigger: "blur",
},
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{
min: 3,
max: 16,
message: "长度在 3 到 16 个字符",
trigger: "blur",
},
],
},
};
},
methods: {
// 登录方法
login() {
axios({
method: "post", // 请求类型
url: "/stu/login", // 请求路径
data: this.student, // 请求对象
}).then((res) => {
console.log(res);
if (res.data.code == 200) {
// 登录成功
// 可以全局存储数据（JavaScript中的基本数据类型）
localStorage.setItem("name", res.data.data.student.name);
localStorage.setItem("id", res.data.data.student.id); // 跳转至主页面
this.jumpHtml();
}
});
}, // 清空表单
resetForm(formName) {
this.$refs[formName].resetFields();
},
jumpHtml(){
window.location.href="./studentList.html"
}
},
})
</script>
</body>
</html>3.StudentList.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生管理</title>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./css/studentList.css">
<link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="myTable">
<div id="queryForm">
<el-form :inline="true" :model="query">
<el-form-item>
<el-col :span="16">
<el-input v-model="query.id" placeholder="学号"></el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-col :span="16">
<el-input v-model="query.name" placeholder="姓名"></el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="querySearch">查询</el-button>
<el-button type="primary">
<i class="el-icon-plus el-icon--right" @click="goSavePage">增加</i></el-button>
</el-form-item>
</el-form>
</div>
<!-- 数据表格 -->
<el-table :data="studentList" style="width: 100%" border="1">
<el-table-column
width="100"
type="index"
label="序号"
:index="indexMethod">
</el-table-column>
<el-table-column label="学号" width="180" prop="id" align="center"></el-table-column>
<el-table-column label="姓名" width="180" prop="name" align="center"></el-table-column>
<el-table-column label="性别" width="180" prop="sex" align="center"></el-table-column>
<el-table-column label="年龄" width="180" prop="age" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="goUpdatePage(scope.row.id)">编辑
</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="delStudent(scope.row.id)">删除
</el-button>
<el-button size="mini" type="primary" @click="viewScore(scope.row.id)">查看成绩</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
:page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit"
layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
<!-- 增加修改-->
<div>
<el-drawer :title="title" width="50%" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer"
ref="drawer">
<el-form label-width="100px" :model="student">
<el-form-item label="姓名">
<el-input v-model="student.name"></el-input>
</el-form-item>
<el-form-item label="学号">
<el-input v-model="student.id"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="student.sex"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="student.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-plus" @click="saveStu">保存</el-button>
<el-button type="danger" icon="el-icon-delete" @click="resetForm2">重置</el-button>
</el-form-item>
</el-form>
</el-drawer>
</div>
<!-- 成绩表单-->
<div>
<el-dialog
:visible.sync="dialog2"
width="50%">
<el-table :data="scoreList" border style="width: 100%">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="sid" label="学号" width="180"></el-table-column>
<el-table-column prop="cname" label="课程名称" width="180"></el-table-column>
<el-table-column prop="score" label="成绩" width="180"></el-table-column>
</el-table>
</el-dialog>
</div>
</div>
<script>
new Vue({
el: "#myTable",
data() {
return {
dialog: false, // 用户增加和修改页面的开关
dialog2: false,
query: {}, // form表单条件查询
current: 1, // 当前页
limit: 10, // 每页显示的记录数
total: 0, // 总记录数,
title: "",
student: {},
studentList: [], // 数据表格绑定的数据
imageUrl: '',
flag: 0,
scoreList: [],
};
},
created() {
this.getData(this.current, this.limit);
},
methods: {
indexMethod(index) {
return index +1;
},
// form表单条件查询
querySearch() {
this.pageSelect(this.current, this.limit);
},
getData(current, limit) {
axios({
method: 'post',
url: `/stu/pageSelect/${current}/${limit}`,
data: this.student,
}).then(res => {
this.studentList = res.data.data.rows;
this.total = res.data.data.total;
console.log('丹青: ', this.studentList)
})
},
pageSelect(current, limit) {
axios({
method: 'post',
url: `/stu/pageSelect/${current}/${limit}`,
params: {
id: this.query.id,
name: this.query.name
}
}).then(res => {
this.studentList = res.data.data.rows;
this.total = res.data.data.total;
})
},
// 当前页显示记录数发生变化时
handleSizeChange(val) {
this.limit = val;
this.pageSelect(this.current, this.limit);
},
// 当前页发生变化时
handleCurrentChange(val) {
this.current = val;
this.pageSelect(this.current, this.limit);
},
// 删除学生
delStudent(id) {
this.$confirm('是否删除选中的数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios({
method: 'post',
url: `/stu/delete/${id}`,
}).then(res => {
if (res.data.code == 200) {
this.$message({
message: '删除成功',
type: 'success'
});
this.pageSelect(this.current, this.limit);
} else {
this.$message({
message: '删除失败',
type: 'error'
});
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//跳转到增加
// 跳转到增加页面
goSavePage() {
this.flag = 1;
this.dialog = true;
this.title = "添加学生";
this.student = {};
},
// 保存用户业绩信息
saveStu() {
console.log("000000000000")
console.log(this.student)
if (this.flag == 0) {// 用户编辑操作
this.updatedStu();
} else {
this.save();
}
},
//新增
save() {
axios({
method: 'post',
url: `/stu/insert`,
data: this.student,
}).then(res => {
if (res.data.code == 200) {
this.$message({
message: '保存成功',
type: 'success'
});
this.pageSelect(this.current, this.limit);
} else {
this.$message({
message: '保存失败',
type: 'error'
});
}
});
this.dialog = false;
},
// 修改学生信息
updatedStu() {
axios({
method: "post",
url: "/stu/update",
data: this.student
}).then(res => {
if (res.data.code == 200) {
this.dialog = false;
this.$message({
type: 'success',
message: '修改成功!'
});
this.pageSelect(this.current, this.limit);
}
});
},
// 跳转到用户编辑页面
goUpdatePage(id) {
this.flag = 0;
this.dialog = true;
this.title = "修改学生信息";
axios({
method: "GET",
url: `/stu/selectById/${id}`
}).then(res => {
this.student = res.data.data.student
})
},
viewScore(id) {
this.dialog2 = true;
this.total = "学生成绩查看";
axios({
method: "get",
url: `/stu/selectScore/${id}`
}).then(res => {
this.scoreList = res.data.data.score
console.log(res.data.data.score);
})
}
}
})
</script>
</body>
</html>4.login.css
* {
margin: 0;
padding: 0;
}
#login {
padding-top: 200px;
}
.title {
font-size: 24px;
font-weight: bold;
letter-spacing: 20px;
text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}
.demo-ruleForm {
width: 350px;
margin: 20px auto;
padding: 30px 50px 10px 0;
text-align: center;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
}
#login p {
text-align: center;
}
.btn {
text-align: center;
}
.btn span {
display: inline-block;
width: 30px;
}5.StudentList.css
.myTable {
width: 98%;
height: 850px;
margin: 10px auto;
text-align: center;
overflow: hidden scroll;
}
.block {
margin-top: 15px;
}
#queryForm {
width: 100%;
height: 50px;
text-align: left;
padding: 10px 0 0 15px;
margin-bottom: 10px;
border-radius: 5px;
}
#queryForm .el-input {
width: 100px;
margin-right: 30px;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}代码部分全部结束~~~~
七、运行
我使用的Tomca8.5.90，运行即可~
结束
