spring-boot-vue-web-tomcat

1.项目结构

图片.png

2.pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.zy</groupId>
    <artifactId>spring-boot-vue-demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>spring-boot-vue-demo</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.17.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.20</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <!--<scope>provided</scope>-->
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
<!--        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>-->
        <!--配置分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>
        <dependency>
            <groupId>com.github.miemiedev</groupId>
            <artifactId>mybatis-paginator</artifactId>
            <version>1.2.15</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

3.application.yml

spring:
  # 配置数据库连接
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/stu
    username: root
    password: 123456
  # 配置jsp的解析
  mvc:
    view:
      prefix: /
      suffix: .html
    static-path-pattern: /**
  resources:
    static-locations: classpath:/static/
  # 配置HTML的解析
#  thymeleaf:
#    prefix: classpath:/templates/
logging:
  pattern:
    level: debug
  level:
    com.zy.controller: error
    com.zy.service: info
    com.zy.mapper: debug
  file: D:/springboot.log
# mybatis中，静态资源不发布:此处指的是resources文件夹下的文件
mybatis:
  mapper-locations: classpath:mybatis/mapper/*.xml
  config-location: classpath:mybatis/sqlMappingConfig.xml
# 使用pageHelper进行分页
pagehelper:
  helperDialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

4.启动类

package com.zy;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.zy.mapper")
public class SpringBootVueDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootVueDemoApplication.class, args);
    }
}

5.model层

package com.zy.model;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class Student implements Serializable {

    private Integer id;
    private String name;
    private Integer age;
    private String gender;
    private String addr;
}

6.controller层

package com.zy.controller;

import com.zy.mapper.StudentMapper;
import com.zy.model.Student;
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;
import java.util.Map;

@Controller
@RequestMapping("/stu")
public class StudentController {

    @Autowired
    private StudentMapper studentMapper;

    @RequestMapping("getAllStu")
    @ResponseBody
    public List<Student> getAllStu(Map map){
        List<Student> list = studentMapper.getStudentByCondition(null);
        map.put("list", list);
        return list;
    }
}

7.mapper层(此处省略了service层)

package com.zy.mapper;

import com.zy.model.Student;

import java.util.List;

public interface StudentMapper {


    // 查询学生信息，多条件查询
    List<Student> getStudentByCondition(Student student);

    // 删除学生
    void deleteStu(Integer id);

    // 增加学生信息
    int addStu(Student student);

    // 修改学生信息
    void updateStu(Student student);
}

8.mybatis配置文件
8.1全局配置文件sqlMappingConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--设置全局配置环境-->
    <settings>
        <!--开启全局缓存-->
        <setting name="cacheEnabled" value="true"/>
        <!--开启懒加载-->
        <setting name="lazyLoadingEnabled" value="true"/>
        <!--关闭延迟加载-->
        <setting name="aggressiveLazyLoading" value="false"/>
    </settings>
    <!--配置分页插件pageHelper的拦截器：5.0版本之后的配置-->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>
</configuration>

8.2分配置文件

<?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.zy.mapper.StudentMapper">

    <!--封装结果集-->
    <resultMap id="studentResultMap" type="com.zy.model.Student">
        <id column="id" property="id" jdbcType="INTEGER"/>
        <result column="name" property="name" jdbcType="VARCHAR"/>
        <result column="age" property="age" jdbcType="INTEGER"/>
        <result column="gender" property="gender" jdbcType="VARCHAR"/>
        <result column="addr" property="addr" jdbcType="VARCHAR"/>
    </resultMap>

    <!--
        // 查询学生信息，多条件查询
        List<Student> getStudentByCondition(Student student);
    -->
    <select id="getStudentByCondition" resultMap="studentResultMap">
        select id,name,age,gender,addr
        from stu
        <where>
            <if test="id != null">
                and id = #{id}
            </if>
            <if test="name != null and name.trim() != &quot;&quot;">
                and name like concat(concat('%',#{name}),'%')
            </if>
            <if test="age != null">
                and age = #{age}
            </if>
            <if test="gender != null and gender.trim() != &quot;&quot;">
                and gender = #{gender}
            </if>
            <if test="addr != null and addr.trim() != &quot;&quot;">
                and addr like concat(concat('%',#{addr}),'%')
            </if>
        </where>
    </select>

    <!--
        // 删除学生
        void deleteStu(Integer id);
    -->
    <delete id="deleteStu">
        delete from stu
        where id = #{id}
    </delete>

    <!--
        // 增加学生信息
        int addStu(Student student);
    -->
    <insert id="addStu">
        <selectKey keyProperty="id" order="AFTER" resultType="int">
            select last_insert_id()
        </selectKey>
        insert into stu values(null,#{name},#{age},#{gender},#{addr})
    </insert>

    <!--
        // 修改学生信息
        void updateStu(Student student);
    -->
    <update id="updateStu">
        update stu
        set name=#{name},age=#{age},gender=#{gender},addr=#{addr}
        where id=#{id}
    </update>

</mapper>

9.静态js文件
9.1axios.min.js下载地址

https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js

https://www.bootcdn.cn/axios/

9.2vue.js下载地址

https://vuejs.org/js/vue.js

https://cn.vuejs.org

10.静态页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->
<div id="demo">
    <h2>v-for遍历数组/List</h2>
    <ul>
        <!-- 这里Key是唯一的,类似于数据库中的主键 -->
        <li v-for="stu in items" :key="stu.id">
            {{stu.id}}--{{stu.name}}--{{stu.gender}}--{{stu.age}}--{{stu.addr}}
            <button @click="deleteP(index)">删除</button>
            <button @click="updateP(index)">更新</button>
        </li>
    </ul>
    <button @click="addP()">添加</button>

</div>
</body>
<script type="text/javascript" src="public/vue.js"></script>
<script type="text/javascript" src="public/axios.min.js"></script>
<script>
    let vm=new Vue({
        el: "#demo",
        data: {
            items:{

            }
        },
        methods:{
            deleteP(index){
                // this.persons.splice(index, 1);
            },
            updateP(index){
                // this.persons[index].name=this.persons[index].name+"1";
            },
            addP(){
                this.$nextTick(function () {
                    var self = this;
                    axios.get('/stu/getAllStu')
                        .then(function(res){
                            self.items = res.data
                        })
                        .catch(function(err){
                            console.log(err);
                        })
                });
            }
        }
    });

</script>
</html>