Springboot+Vue前后端分离demo

一、后端工作

1、创建数据库

数据库名shop_v1.0，字符集utf8，排序规则utf8_general_ci，执行脚本。

CREATE TABLE `t_user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `username` varchar(64) NOT NULL COMMENT '用户名',
  `password` varchar(128) DEFAULT NULL COMMENT '密码',
  `name` varchar(64) DEFAULT NULL,
  `email` varchar(64) DEFAULT NULL,
  `telephone` varchar(32) DEFAULT NULL,
  `birthday` date DEFAULT NULL,
  `gender` char(1) DEFAULT NULL,
  `status` char(1) DEFAULT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `update_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

2、创建springboot工程

File -- New -- Project -- Spring Initializr。

3、添加Maven依赖，完整pom.xml

<?xml version="1.0" encoding="UTF-8"?>

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.10.RELEASE
         
    
    com.zl
    springboot-demo
    0.0.1-SNAPSHOT
    springboot-demo
    Demo project for Spring Boot

    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
        
            mysql
            mysql-connector-java
            runtime
        
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.4.1
        
        
        
            com.baomidou
            mybatis-plus-generator
            3.4.1
        
        
        
            org.springframework.boot
            spring-boot-starter-freemarker
        
        
        
            io.springfox
            springfox-swagger2
            2.7.0
        
        
            io.springfox
            springfox-swagger-ui
            2.7.0
        
        
        
            com.github.xiaoymin
            swagger-bootstrap-ui
            1.9.3
        
        
        
            org.projectlombok
            lombok
            true
        
    

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

使用lombok需安装lombok插件，如果已安装此处可忽略。

4、添加代码生成器CodeGenerator

执行生成代码，

/**
 * @author zhanglei
 * 演示例子，执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
 */
public class CodeGenerator {

    /**
     * 

     * 读取控制台内容
     * 

     */
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("请输入" + tip + "：");
        System.out.println(help.toString());
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotBlank(ipt)) {
                return ipt;
            }
        }
        throw new MybatisPlusException("请输入正确的" + tip + "！");
    }

    public static void main(String[] args) {
        // 代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir(projectPath + "/src/main/java");
        gc.setAuthor("zhanglei");
        gc.setOpen(false);
        // 实体属性 Swagger2 注解
        // gc.setSwagger2(true);
        mpg.setGlobalConfig(gc);

        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/shop_v1.0?useUnicode=true&useSSL=false&characterEncoding=utf8");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("12345678");
        mpg.setDataSource(dsc);

        // 包配置
        PackageConfig pc = new PackageConfig();
        pc.setModuleName(scanner("模块名"));
        pc.setParent("com.zl");
        mpg.setPackageInfo(pc);

        // 自定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };

        // 如果模板引擎是 freemarker
        String templatePath = "/templates/mapper.xml.ftl";
        // 如果模板引擎是 velocity
        // String templatePath = "/templates/mapper.xml.vm";

        // 自定义输出配置
        List focList = new ArrayList<>();
        // 自定义配置会被优先输出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            public String outputFile(TableInfo tableInfo) {
                // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                return projectPath + "/src/main/resources/mapper/" + pc.getModuleName()
                        + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
            }
        });

//        cfg.setFileCreate(new IFileCreate() {
//            @Override
//            public boolean isCreate(ConfigBuilder configBuilder, FileType fileType, String filePath) {
//                // 判断自定义文件夹是否需要创建
//                checkDir("调用默认方法创建的目录，自定义目录用");
//                if (fileType == FileType.MAPPER) {
//                    // 已经生成 mapper 文件判断存在，不想重新生成返回 false
//                    return !new File(filePath).exists();
//                }
//                // 允许生成模板文件
//                return true;
//            }
//        });

        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);

        // 配置模板
        TemplateConfig templateConfig = new TemplateConfig();

        // 配置自定义输出模板
        // 指定自定义模板路径，注意不要带上.ftl/.vm, 会根据使用的模板引擎自动识别
        // templateConfig.setEntity("templates/entity2.java");
        // templateConfig.setService();
        // templateConfig.setController();

        templateConfig.setXml(null);
        mpg.setTemplate(templateConfig);

        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
        // strategy.setSuperEntityClass("你自己的父类实体,没有就不用设置!");
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        // 公共父类
        // strategy.setSuperControllerClass("你自己的父类控制器,没有就不用设置!");
        // 写于父类中的公共字段
        // strategy.setSuperEntityColumns("id");
        strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
        strategy.setControllerMappingHyphenStyle(true);
        // strategy.setTablePrefix(pc.getModuleName() + "_");
        // 处理表前缀
        strategy.setTablePrefix("t_");
        mpg.setStrategy(strategy);
        mpg.setTemplateEngine(new FreemarkerTemplateEngine());
        mpg.execute();
    }
}
将生成的代码复制到对应文件夹下。

5、添加配置文件

server.port=8089

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/shop_v1.0?characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=12345678

6、添加MybatisPlusConfig

/**
 * @author zhanglei
 */
@Configuration
@MapperScan("com.zl.mapper")
public class MybatisPlusConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

7、添加Swagger2Config

/**
 * @author zhanglei
 */
@Configuration
@EnableSwagger2
@EnableSwaggerBootstrapUI
public class Swagger2Config {

    @Bean
    public Docket docket() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(new ApiInfoBuilder().title("springboot+vue前后端分离demo接口文档").build());
    }

}

8、添加通用返回

package com.zl.entity;

import java.util.HashMap;

public class R extends HashMap {

    private static final int OK = 200;
    private static final int ERROR = 400;

    private int code;
    private String msg;
    private Object data;

    public R(int code, String msg, Object data) {
        this.put("code", code);
        this.put("msg", msg);
        this.put("data", data);
    }

    public R(int code, String msg) {
        this.put("code", code);
        this.put("msg", msg);
    }

    public R() {

    }

    public int getCode() {
        return (Integer) this.get("code");
    }

    public void setCode(int code) {
        this.put("code", code);
    }

    public String getMsg() {
        return (String) this.get("msg");
    }

    public void setMsg(String msg) {
        this.put("msg", msg);
    }

    public Object getData() {
        return this.get("data");
    }

    public void setData(Object data) {
        this.put("data", data);
    }

    public static R ok() {
        return new R(OK, "操作成功");
    }

    public static R ok(String msg) {
        return new R(OK, msg);
    }

    public static R ok(Object data) {
        return new R(OK, "操作成功", data);
    }

    public static R ok(String msg, Object data) {
        return new R(OK, msg, data);
    }

    public static R ok(int code, String msg, Object data) {
        return new R(code, msg, data);
    }

    public static R error() {
        return new R(ERROR, "操作失败");
    }

    public static R error(String msg) {
        return new R(ERROR, msg);
    }

    public static R error(int code, String msg) {
        return new R(code, msg);
    }

}

9、修改UserController

@Api(tags = "用户管理")
@Slf4j
@CrossOrigin
@RestController
public class UserController {

    @Resource
    private IUserService userService;

    @GetMapping("/user")
    public R queryUsers(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum,
                        @RequestParam(value = "pageSize", defaultValue = "5") int pageSize,
                        HttpServletRequest request) {
        String username = request.getParameter("username");
        String name = request.getParameter("name");

        Page page = new Page<>(pageNum, pageSize);
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("create_time");
        if (!StringUtils.isEmpty(username)) {
            queryWrapper.like("username", username);
        }
        if (!StringUtils.isEmpty(name)) {
            queryWrapper.like("name", name);
        }
        userService.page(page, queryWrapper);

        log.info("当前页数" + page.getCurrent());
        log.info("总页数" + page.getPages());
        log.info("每页条数" + page.getSize());
        log.info("总条数" + page.getTotal());
        log.info("是否有上一页" + page.hasPrevious());
        log.info("是否有下一页" + page.hasNext());

        return R.ok(page);
    }

    @GetMapping("/user/{id}")
    public R queryUserById(@PathVariable("id") Long id) {
        return R.ok(userService.getById(id));
    }

    @PostMapping("/user")
    public R insertUser(@RequestBody User user) {
        userService.save(user);
        return R.ok();
    }

    @PutMapping("/user")
    public R updateUser(@RequestBody User user) {
        userService.updateById(user);
        return R.ok();
    }

    @DeleteMapping("/user/{id}")
    public R deleteUserById(@PathVariable("id") Long id) {
        userService.removeById(id);
        return R.ok();
    }

    @DeleteMapping("/user")
    public R deleteUsersByIds(@RequestBody List ids) {
        userService.removeByIds(ids);
        return R.ok();
    }
}

完整工程结构。

最后修改下User实体，解决日期字符串与LocalDate转化问题。

@JsonFormat(pattern = "yyyy-MM-dd")
private LocalDate birthday;

完成后启动。

10、接口测试

访问 http://localhost:8089/swagger-ui.html 或者 http://localhost:8089/doc.html 测试一下接口。

二、前端工作

1、安装node.js

进入官网(http://nodejs.cn/)，下载长期支持版并安装。

检查是否安装成功。

node -v
npm -v

2、安装vue脚手架vue-cli

npm install -g @vue/cli

3、vue可视化管理工具创建项目

vue ui

  • 创建

  • 填写项目名称

  • 手动配置项目

  • 功能配置（注意红框位置，其余保持默认）

  • 选择Vue2.x

  • 创建项目，不保留预设

4、安装依赖

npm install
# 或者
npm install --registry=https://registry.npm.taobao.org

5、项目启动

npm run serve

6、安装element-ui、axios

element-ui

npm install element-ui --save

// 在main.js中引入
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)

axios

npm install axios --save

// 在main.js中引入
import axios from 'axios'
Vue.prototype.$axios = axios

7、添加工具类

src下创建utils文件夹，在文件夹下新建request.js。

import axios from 'axios'
import {Message} from 'element-ui';

// create an axios instance
const service = axios.create({
    baseURL: "http://localhost:8089",
    // timeout: 5000 // request timeout
})

// response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data
        // store.commit('SET_LOADING',false);

        // if the custom code is not 20000, it is judged as an error.
        if (res.code !== 200) {
            Message.error({message: res.msg});
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('error' + error)
        if (error.response.status) {
            switch (error.response.status) {
                case 401:
                    Message.error({message: '登录状态已过期'});
                    //跳至登录页
                    break;
                case 403:
                    Message.error({message: '您的权限不足'});
                    break;
                case 404:
                    Message.error({message: '您访问的网页不存在'});
                    break;
                case 504:
                    Message.error({message: '服务器宕机了，( ╯□╰ )'});
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    if (error.response.data.msg) {
                        Message.error({message: error.response.data.msg})
                    } else {
                        Message.error({message: '未知错误'});
                    }
            }
        }
        return Promise.reject(error)
    }
)

export default service

8、添加接口API

src下创建api文件夹，在文件夹下新建user.js。

import request from '@/utils/request'

// 查询列表
export function queryUsers(params) {
    return request({
        url: '/user',
        method: 'get',
        params: params
    })
}

// 查询单条
export function queryUserById(id) {
    return request({
        url: '/user/' + id,
        method: 'get'
    })
}

// 新增
export function insertUser(data) {
    return request({
        url: '/user',
        method: 'post',
        data: data
    })
}

// 修改
export function updateUser(data) {
    return request({
        url: '/user',
        method: 'put',
        data: data
    })
}

// 单条删除
export function deleteUserById(id) {
    return request({
        url: '/user' + id,
        method: 'delete'
    })
}

// 批量删除
export function deleteUsersByIds(ids) {
    return request({
        url: '/user',
        method: 'delete',
        data: ids
    })
}

9、添加页面

在views文件夹下新建User.vue。

10、添加路由

src/router/index.js中添加路由。

{
  path: '/user',
  name: 'user',
  component: () => import('../views/User.vue')
}

11、修改App.vue

将样式和部分页面代码注释掉。

完整工程结构。

重新启动。

12、访问测试

浏览器输入：http://localhost:8080/#/user

后端技术vuespringboot

相关

微信小程序+SpringBoot(Shiro)登录后，调用接口还是跑到了login。

eclipse搭建springboot开发环境

创建vue项目的第一步——之安装vue 命令更新了

vue打包报错

springboot学习之路31（整合minio服务）

vue登录页面后台返回验证码图片

Springboot配置tk-mybatis

springboot配置信息

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

vue axios 1 创建项目及简单配置axios

vue两层list循环后，内层循环页面选择类型

HMVue1.5【Source Map】

标签