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>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,598评论 18赞 139
  • Spring boot参考指南
    Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,744评论 6赞 342
  • 【2018.4.13】
    凌晨三点，灯火把城市照的恍如白昼，站在阳台上可以俯瞰到整个街道。刚刚洗好的头发，嘀嗒着水珠。捧着一杯凉白开，一...
    卖小妞的饼干阅读 162评论 0赞 0
  • 又是一年端午节
    又是一年端午节 时间过的真快，转眼又到农历初五了。 妈妈刚过来...
    青逸涵阅读 347评论 0赞 1
  • 一生一世两双人（2）
    第二章 新自己 我看镜子里陌生的自己，时乐站着呆楞许久默默的想：“你若离去，我必定相随。这就是我的心死身随吗？即使...
    贝金阅读 351评论 0赞 4