spring-boot-vue-web-tomcat

1.项目结构

图片.png

2.pom.xml

    4.0.0

    com.zy
    spring-boot-vue-demo
    0.0.1-SNAPSHOT
    war

    spring-boot-vue-demo
    Demo project for Spring Boot

    
        org.springframework.boot
        spring-boot-starter-parent
        1.5.17.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            1.3.2
        

        
            mysql
            mysql-connector-java
            runtime
        
        
            org.projectlombok
            lombok
            1.16.20
        
        
            org.springframework.boot
            spring-boot-starter-tomcat
            
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
        
            com.github.pagehelper
            pagehelper
            5.1.2
        
        
            com.github.miemiedev
            mybatis-paginator
            1.2.15
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

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 getAllStu(Map map){
        List 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 getStudentByCondition(Student student);

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

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

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

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

8.2分配置文件

    
    
        
        
        
        
        
    

    
    
        select id,name,age,gender,addr
        from stu
        
            
                and id = #{id}
            
            
                and name like concat(concat('%',#{name}),'%')
            
            
                and age = #{age}
            
            
                and gender = #{gender}
            
            
                and addr like concat(concat('%',#{addr}),'%')
            
        
    

    
    
        delete from stu
        where id = #{id}
    

    
    
        
            select last_insert_id()
        
        insert into stu values(null,#{name},#{age},#{gender},#{addr})
    

    
    
        update stu
        set name=#{name},age=#{age},gender=#{gender},addr=#{addr}
        where id=#{id}
    

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.静态页面

    
    




    
v-for遍历数组/List
    

        
        

            {{stu.id}}--{{stu.name}}--{{stu.gender}}--{{stu.age}}--{{stu.addr}}
            删除
            更新
        
    
    添加