An1ong
An1ong

Springboot+Vue前后端分离项目-管理系统-上

目录

一.项目介绍

1.技术栈

2.页面原型

二.创建数据库

1.用户表

2.角色表

3.菜单表

4.用户角色映射表

5.角色菜单映射表

三.前端环境搭建

1.Node环境搭建

2.创建项目

3.项目初始化

(1).安装依赖

(2).测试是否正常启动 

 4.配置修改

(1).修改首页名称项

 (2).修改登录项

(3).最终效果

 (4).个性化定制 (可省略这一步)

5.下划菜单修改

6.更改图标

四.后端环境搭建

1.创建项目

引入依赖

修改配置

测试启动类

2.接口梳理

3.创建代码生成器

 最后一步：

4.公共响应类

五.登录页接口实现

1.登录接口

 测试

​编辑

2.获取用户信息接口

 测试

3.注销接口

 测试

六.前后端对接

 跨域

 

一.项目介绍

1.技术栈

  • 前端技术
    • Vue                                                                前端框架
    • Vuex                                                              全局状态管理框架
    • ElementUI                                                     前端UI框架
    • Axios                                                             前端HTTP框架
    • vue-element-admin                                       项目脚手架
  • 后端技术
    • Springboot                                                     容器+MVC框架
    • MyBatis                                                          ORM框架
    • MyBatis-Plus                                                  Mybatis增强工具
    • Redis                                                              非关系型数据库

2.页面原型

登陆页面

Springboot+Vue前后端分离项目-管理系统-上_第1张图片

管理界面

Springboot+Vue前后端分离项目-管理系统-上_第2张图片

二.创建数据库

  • 用户表

  • 角色表

  • 菜单表

  • 用户角色映射表

  • 角色菜单映射表

1.用户表

CREATE TABLE `x_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) DEFAULT NULL,
  `email` varchar(50) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `status` int(1) DEFAULT NULL,
  `avatar` varchar(200) DEFAULT NULL,
   `deleted` INT(1) DEFAULT 0,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('1','admin','123456','[email protected]','18677778888','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('2','zhangsan','123456','[email protected]','13966667777','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('3','lisi','123456','[email protected]','13966667778','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('4','wangwu','123456','[email protected]','13966667772','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('5','zhaoer','123456','[email protected]','13966667776','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');
insert into `x_user` (`id`, `username`, `password`, `email`, `phone`, `status`, `avatar`, `deleted`) values('6','songliu','123456','[email protected]','13966667771','1','https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif','0');

2.角色表

CREATE TABLE `x_role` (
  `role_id` int(11) NOT NULL AUTO_INCREMENT,
  `role_name` varchar(50) DEFAULT NULL,
  `role_desc` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`role_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('1','admin','超级管理员');
insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('2','hr','人事专员');
insert into `x_role` (`role_id`, `role_name`, `role_desc`) values('3','normal','普通员工');

3.菜单表

CREATE TABLE `x_menu` (
  `menu_id` int(11) NOT NULL AUTO_INCREMENT,
  `component` varchar(100) DEFAULT NULL,
  `path` varchar(100) DEFAULT NULL,
  `redirect` varchar(100) DEFAULT NULL,
  `name` varchar(100) DEFAULT NULL,
  `title` varchar(100) DEFAULT NULL,
  `icon` varchar(100) DEFAULT NULL,
  `parent_id` int(11) DEFAULT NULL,
  `is_leaf` varchar(1) DEFAULT NULL,
  `hidden` tinyint(1) DEFAULT NULL,
  PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;


insert  into `x_menu`(`menu_id`,`component`,`path`,`redirect`,`name`,`title`,`icon`,`parent_id`,`is_leaf`,`hidden`) values (1,'Layout','/user','/user/list','userManage','用户管理','userManage',0,'N',0),(2,'user/user','list',NULL,'userList','用户列表','userList',1,'Y',0),(3,'user/role','role',NULL,'roleList','角色列表','role',1,'Y',0),(4,'user/permission','permission',NULL,'permissionList','权限列表','permission',1,'Y',0);

4.用户角色映射表

CREATE TABLE `x_user_role` (
                               `id` int(11) NOT NULL AUTO_INCREMENT,
                               `user_id` int(11) DEFAULT NULL,
                               `role_id` int(11) DEFAULT NULL,
                               PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

insert into `x_user_role` (`id`, `user_id`, `role_id`) values('1','1','1');

5.角色菜单映射表

CREATE TABLE `x_role_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `role_id` int(11) DEFAULT NULL,
  `menu_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

三.前端环境搭建

1.Node环境搭建

版本不要超过16.12.0，因为vue-admin-template不支持最新版本的Node18

如果你没有安装，安装看这里

Springboot+Vue前后端分离项目-管理系统-上_第3张图片

2.创建项目

打开模板vue-admin-template，修改为自己的项目名字 ，这个项目会为你生成一个完整的开发框架

Springboot+Vue前后端分离项目-管理系统-上_第4张图片

 Springboot+Vue前后端分离项目-管理系统-上_第5张图片

3.项目初始化

(1).安装依赖

安装淘宝镜像

npm config set registry http://registry.npm.taobao.org/

安装依赖

npm install

(2).测试是否正常启动 

npm run dev

Springboot+Vue前后端分离项目-管理系统-上_第6张图片

 4.配置修改

(1).修改首页名称项

  • vue.config.js                                        修改端口、语法校验、浏览器默认开关
  • src\settings.js                                      修改项目展示标题
  • scr\router\Index.js                               修改项目页面标题

vue.config.js

  • port：项目启动占用的端口
  • lintOnsave：语法校验，建议关闭，不然有时候多写个空格逗号也会莫名报错
  • open：自动打开页面，可关可不关

Springboot+Vue前后端分离项目-管理系统-上_第7张图片

settings.js

在搜索框中搜索Vue Admin Template，然后替换，也可以直接去settings.js文件中修改

修改完之后是这个样子

Springboot+Vue前后端分离项目-管理系统-上_第8张图片

对应这里

Springboot+Vue前后端分离项目-管理系统-上_第9张图片

 router\Index.js   

Springboot+Vue前后端分离项目-管理系统-上_第10张图片

 对应这里

Springboot+Vue前后端分离项目-管理系统-上_第11张图片

 (2).修改登录项

在src\views\login\index.vue中修改

Springboot+Vue前后端分离项目-管理系统-上_第12张图片

我们可以看到以下属性

  • Login Form
  • username
    • Springboot+Vue前后端分离项目-管理系统-上_第13张图片
  • password
    • Springboot+Vue前后端分离项目-管理系统-上_第14张图片
  • login

  •  校验提示
    • Springboot+Vue前后端分离项目-管理系统-上_第15张图片

(3).最终效果

Springboot+Vue前后端分离项目-管理系统-上_第16张图片

 (4).个性化定制 (可省略这一步)

如何查看组件的样式选择器是什么？

右键检查，点击右上角

Springboot+Vue前后端分离项目-管理系统-上_第17张图片

 可以看到背景板的样式选择器是.login-container

Springboot+Vue前后端分离项目-管理系统-上_第18张图片

我们首先将准备好的图片放入assets中，然后再选择器下面加上其URL路径

Springboot+Vue前后端分离项目-管理系统-上_第19张图片

  background-image: url('../../assets/DragonBall.jpg');
  //整张平铺100%
  background-size: 100%;

 效果：

修改一下登录框的位置，并给它来个背景板框起来，让他整齐一点


  display: flex;
  align-items: center;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 0;
    margin: 0 auto;
    overflow: hidden;
    //为登录框部分添加一个背景色板
    background-color: #283443;
    //将四角改为圆弧，好看一点
    border-radius: 8px;
    //添加一点透明度
    opacity: 0.9;
  }

 效果

 这部分的完整代码如下

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  background-image: url('../../assets/DragonBall.jpg');
  //整张平铺100%
  background-size: 100%;

  display: flex;
  align-items: center;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 0;
    margin: 0 auto;
    overflow: hidden;
    //为登录框部分添加一个背景色板
    background-color: #283443;
    //将四角改为圆弧，好看一点
    border-radius: 8px;
    //添加一点透明度
    opacity: 0.9;
  }
}

5.下划菜单修改

Springboot+Vue前后端分离项目-管理系统-上_第20张图片

src\layout\components\Navbar.vue

Springboot+Vue前后端分离项目-管理系统-上_第21张图片

 Springboot+Vue前后端分离项目-管理系统-上_第22张图片

6.更改图标

  1. 在src\views目录下创建sys模块目录，test模块目录
  2. 在sys下创建user.vue，role.vue两个组件文件
  3. 在test下创建test1.vue，test2.vue，test3.vue

 Springboot+Vue前后端分离项目-管理系统-上_第23张图片

将自己准备好的图标放在src\icons\svg目录下

Springboot+Vue前后端分离项目-管理系统-上_第24张图片

然后再router中修改

Springboot+Vue前后端分离项目-管理系统-上_第25张图片

效果

Springboot+Vue前后端分离项目-管理系统-上_第26张图片

以此为基础，创建多个让页面好看点,

这部分的全部路由代码为

{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },

  {
    path: '/sys',
    component: Layout,
    redirect: '/sys/user',
    name: 'sysManage',
    meta: { title: '系统管理', icon: 'sys' },
    //这个是二级路由
    children: [
      {
        path: 'user',
        name: 'user',
        component: () => import('@/views/sys/user'),
        meta: { title: '用户管理', icon: 'roleManage' }
      },
      {
        path: 'role',
        name: 'role',
        component: () => import('@/views/sys/role'),
        meta: { title: '角色管理', icon: 'roleManage' }
      }
    ]
  },
  {
    path: '/test',
    component: Layout,
    redirect: '/test/test1',
    name: 'test',
    meta: { title: '测试模块', icon: 'form' },
    //这个是二级路由
    children: [
      {
        path: 'test1',
        name: 'test1',
        component: () => import('@/views/test/test1'),
        meta: { title: '功能1', icon: 'el-icon-s-help' }
      },
      {
        path: 'test2',
        name: 'test2',
        component: () => import('@/views/test/test2'),
        meta: { title: '功能2', icon: 'el-icon-s-help' }
      },
      {
        path: 'test3',
        name: 'test3',
        component: () => import('@/views/test/test3'),
        meta: { title: '功能3', icon: 'el-icon-s-help' }
      },

    ]
  },


  // 404页面必须写在最后面!!!
  { path: '*', redirect: '/404', hidden: true }

但是这里有一个小缺陷,这里居然不是首页 

Springboot+Vue前后端分离项目-管理系统-上_第27张图片

我们在src\components\Breadcrumb\index.vue下搜索

 Springboot+Vue前后端分离项目-管理系统-上_第28张图片

四.后端环境搭建

1.创建项目

Springboot+Vue前后端分离项目-管理系统-上_第29张图片

Springboot+Vue前后端分离项目-管理系统-上_第30张图片

引入依赖


        
            com.baomidou
            mybatis-plus-boot-starter
            3.5.3.1
        

        
            com.baomidou
            mybatis-plus-generator
            3.5.3.1
        

        
            org.freemarker
            freemarker
        

        
            org.springframework.boot
            spring-boot-starter-data-redis

修改配置

将application的后缀名改为yml格式

Springboot+Vue前后端分离项目-管理系统-上_第31张图片

server:
  port: 8888

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql:///an1ong
#    不需要配置连接池，springboot有自带的连接池
#    也不需要配置驱动类driver-class-name,会默认配置，除非想要覆盖
  redis:
    port: 6379
    host: localhost

#打印日志信息
logging:
  level:
    com.wal: debug

测试启动类

 启动成功 

2.接口梳理

接口 url method
登录 /user/login POST
获取用户信息 /user/info GET
注销 /user/logout POST

3.创建代码生成器

我可以不用，但是我不能没有

注意不要放在java文件夹下，要放在test文件夹下

package com.wal;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;

import java.util.Collections;

public class CodeGenerator {
    public static void main(String[] args) {
        //使用时修改这个模块名就行了
        String moduleName = "sys";
        String mapperLocation = "D:\\JAVA_project\\hyrule-admin\\src\\main\\resources\\mapper\\" + moduleName;

//        设置你需要的表对应的实体类名
        String tables = "x_user,x_role,x_menu,x_user_role,x_role_menu";

        FastAutoGenerator.create("jdbc:mysql:///an1ong",
                        "root",
                        "123456")
                .globalConfig(builder -> {
                    builder.author("20101403wal") // 设置作者
//                            .enableSwagger() // 开启 swagger 模式
//                            .fileOverride() // 覆盖已生成文件
                            .outputDir("D:\\JAVA_project\\hyrule-admin\\src\\main\\java"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.wal") // 设置父包名
                            .moduleName(moduleName) // 设置父包模块名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, mapperLocation)); // 设置mapperXml生成路径
                })
                .strategyConfig(builder -> {
                    builder.addInclude(tables) // 设置需要生成的表名
                    .addTablePrefix("x_"); // 设置过滤表前缀
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();
    }
}

运行查看结果

Springboot+Vue前后端分离项目-管理系统-上_第32张图片

 最后一步：

  • 在启动类上加上@MapperScan注解

因为生成的Mapper类上没有@Mapper注解，也可以在Mapper类上直接加，但是直接在启动类上使用@MapperScan就可以一劳永逸了

Springboot+Vue前后端分离项目-管理系统-上_第33张图片

 在测试类中测试一下

测试select * from user

mybatis-plus把此类的crud封装了起来，所以可以直接使用

@SpringBootTest
class HyruleAdminApplicationTests {

    @Resource
    private UserMapper userMapper;

    @Test
    void testMapper() {
        List users = userMapper.selectList(null);
        users.forEach(System.out::println);
    }

}

可以在日志中看到其对应的查询语句

Springboot+Vue前后端分离项目-管理系统-上_第34张图片

 完成初始化创建

4.公共响应类

这个类是为了前后端分离之后的前后端交互统一结果的响应

这里注意，因为我们使用的vue-element-admin模板，前端接受的返回值code就是20000和20001等，如果有自己的需求就去前端处自己更改，否则返回值code就用20000

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

//这个类是为了前后端分离之后的前后端交互统一结果的相应
@Data
//这个注解可以自动为属性生成get&set方法
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    private Integer code;   //响应码 20000-成功 20001失败
    private String message; //响应信息 描述字符串
    private T data;         //返回的数据

    public static  Result success(){
        //增删改 成功响应
        return new Result<>(20000,"success",null);
    }

    public static  Result success(T data){
        //查询 成功响应
        return new Result<>(20000,"success",data);
    }

    public static  Result success(T data,String message){
        return new Result<>(20000,message,data);
    }

    public static  Result success(String message){
        return new Result<>(20000,message,null);
    }

    public static  Result error(){
        return new Result<>(20001,"fail",null);
    }

    public static  Result error(Integer code){
        return new Result<>(code,"fail",null);
    }

    public static  Result error(Integer code, String message){
        return new Result<>(code,message,null);
    }

    public static  Result error(String message){
        return new Result<>(20001,message,null);
    }

}

使用测试

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private IUserService userService;

    @GetMapping("/all")
    public Result> getAll(){
        List users = userService.list();
        return Result.success(users);
    }
}

Springboot+Vue前后端分离项目-管理系统-上_第35张图片

五.登录页接口实现

1.登录接口

从数据库查询是否有该用户，若该用户存在，则生成token返回Result，并将个人信息存入Redis

Controller层

    @PostMapping("/login")
    //这个user接收过来时是一个json格式，需要用@RequestMapping转换为实体类
    public Result> login(@RequestBody User user){
        Map data = userService.login(user);
        if (data != null){
            return Result.success(data);
        }
        return Result.error(0,"用户名或密码错误");
    }

Service层 

package com.wal.sys.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.wal.sys.entity.User;
import com.wal.sys.mapper.UserMapper;
import com.wal.sys.service.IUserService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;

/**
 * 

 *  服务实现类
 * 

 *
 * @author 20101403wal
 * @since 2023-05-28
 */
@Service
public class UserServiceImpl extends ServiceImpl implements IUserService {
    @Autowired
    private RedisTemplate redisTemplate;

    @Override
    public Map login(User user) {
        //根据用户名与密码查询结果
        LambdaQueryWrapper wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,user.getUsername());
        wrapper.eq(User::getPassword,user.getPassword());
        User loginUser = this.baseMapper.selectOne(wrapper);

        //若结果不为空，则生成token，并将用户信息存入redis
        if (loginUser!=null){
            //暂时用UUID，终极方案应为jwt
            String key = "user:" + UUID.randomUUID();

            //存入redis
            loginUser.setPassword(null);    //密码不要存进去
            //默认这是永久有效的，要设置timeout时间
            redisTemplate.opsForValue().set(key,loginUser,30, TimeUnit.MINUTES);

            //返回数据
            Map data = new HashMap<>();
            data.put("token",key);
            return data;
        }
        return null;
    }

}

 这里没有@AutoWired UserMapper是因为Mybatis-plus生成的mapper没有@Mapper注解，你可以使用老办法在Mapper类中加上注解然后在这里引入，后面的例子会展示到

也可以像这样使用通用Service

然后这样使用引入的mapper

我们这里使用redis来存储用户的登录信息

引入依赖

        
            org.springframework.boot
            spring-boot-starter-data-redis

创建redis的配置类 

package com.wal.config;

import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonTypeInfo;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.MapperFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.fasterxml.jackson.databind.jsontype.impl.LaissezFaireSubTypeValidator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;

import java.text.SimpleDateFormat;
import java.util.TimeZone;

@Configuration
public class MyRedisConfig {

    @Autowired
    private RedisConnectionFactory factory;

    @Bean
    public RedisTemplate redisTemplate(){
        RedisTemplate redisTemplate = new RedisTemplate<>();
        //连接redis
        redisTemplate.setConnectionFactory(factory);

        //处理你之前做的序列化处理
        redisTemplate.setKeySerializer(new StringRedisSerializer());

        Jackson2JsonRedisSerializer serializer = new Jackson2JsonRedisSerializer(Object.class);
        redisTemplate.setValueSerializer(serializer);


        ObjectMapper om = new ObjectMapper();
        om.setVisibility(PropertyAccessor.ALL,JsonAutoDetect.Visibility.ANY);
        om.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"));
        om.setTimeZone(TimeZone.getDefault());
        om.configure(MapperFeature.USE_ANNOTATIONS,false);
        om.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES,false);
        om.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS,false);
        om.activateDefaultTyping(LaissezFaireSubTypeValidator.instance,ObjectMapper.DefaultTyping.NON_FINAL, JsonTypeInfo.As.PROPERTY);
        om.setSerializationInclusion(JsonInclude.Include.NON_NULL);
        serializer.setObjectMapper(om);


        return redisTemplate;
    }
}
 
  
 
  
 
  
 测试
 
  
我们在postman中测试接口
 
  
Springboot+Vue前后端分离项目-管理系统-上_第36张图片
 
  
 查看redis中的信息
 
  
Springboot+Vue前后端分离项目-管理系统-上_第37张图片
 
  
 
  
2.获取用户信息接口
 
  
 
    
    
 
     接口属性 
     值 
    
 
    
 
     url 
     /user/info?token=xxx 
    
 
    
 
     method 
     get 
    
 
    
 
     请求参数 
     token 
    
 
    
 
     返回参数 
      
{
 
        "code":1,
 
        "message":"success",
 
        "data":{
 
                role:[
 
                ],
 
                "name":“admin”
 
                "avatar":""
 
        }
 
}
 		 
    
 
    
  
 
  
 
  
 
   
Controller层
 
  
 
  
    @GetMapping("/info")
    //参数是在url后面的，用@RequestParam可以获取到
    public Result> getUserInfo(@RequestParam("token") String token){
        //根据token从redis中获取用户信息
        Map data = userService.getUserInfo(token);
        if (data != null){
            return Result.success(data);
        }
        return Result.error(0,"用户名或密码错误");
    }
 
  
 
   
Service层
 
  
 
  
需要引入依赖fastjson来反序列化
 
  

        
            com.alibaba.fastjson2
            fastjson2
            2.0.25
        
 
  
 在这里实现的功能主要是获取token后对其反序列化返回给controller
 
  
    @Override
    public Map getUserInfo(String token){
        //根据token在redis中获取用户信息,
        Object obj = redisTemplate.opsForValue().get(token);
//        对obj处理成json
        //因为是序列化存储的，使用时要反序列化
        if (obj != null){
            User loginUser = JSON.parseObject(JSON.toJSONString(obj),User.class);
            //取数据
            Map data = new HashMap<>();
            //这个参数中的名字要与前端对应上
            data.put("name",loginUser.getUsername());
            data.put("avatar",loginUser.getAvatar());

            //得到角色列表
            List roleList = this.baseMapper.getRoleNameByUserId(loginUser.getId());
            data.put("roles",roleList);

            return data;
        }
        return null;
    }
 
  
 
   
Mapper层
 
  
 
  
public interface UserMapper extends BaseMapper {
    public List getRoleNameByUserId(Integer userId);
}
 
  
 
   
在xml文件中配置sql语句，因为这个功能mybatis中没有，需要自己定义
 
   
     
    
  • id要与方法名对应一致
    •  
    
  • parame要与参数类型对应一直
    •  
    
  • 动态sql参数userId要与方法参数userId对应
    •  
    
  • 返回值类型String要与List<>中的类型一致
    •  
   
 
  
 
  


    
    

 
  
 测试
 
  
Springboot+Vue前后端分离项目-管理系统-上_第38张图片
 
  
 
  
将post返回的token通过get请求提交 
 
  
 Springboot+Vue前后端分离项目-管理系统-上_第39张图片
 
  
 成功运行
 
  
3.注销接口
 
  
 
   
退出登录，从redis中清除token
 
  
 
  
 
    
    
 
     接口属性 
     值 
    
 
    
 
     url 
     /user/login 
    
 
    
 
     method 
     post 
    
 
    
 
     请求参数 
     token 
    
 
    
 
     返回参数 
      
{
 
        "code":1,
 
        "message":"success",
 
        "data":null
 
}
 		 
    
 
    
  
 
  
 
   
Contoller层 
 
  
 
  
    @PostMapping("/logout")
    //传入的是token，要用RequestHeader注解接收
    public Result logout(@RequestHeader("X-Token") String token){
        userService.logout(token);
        return Result.success();
    }
 
  
 
   
Service层 
 
  
 
  
    @Override
    public void logout(String token){
        //从redis中删除
        redisTemplate.delete(token);
    }
 
  
 测试
 
  
Springboot+Vue前后端分离项目-管理系统-上_第40张图片
 
  
Springboot+Vue前后端分离项目-管理系统-上_第41张图片
 
  
 
  
六.前后端对接
 
  
我们来到vue中修改前端接口代码，将接口url与后端接口对应
 
  
Springboot+Vue前后端分离项目-管理系统-上_第42张图片
 
  
 修改配置
 
  
     
   
  • 在本地直接部署就在development中修改配置
    •  
   
  • 打包部署在production中修改配置
    •  
   
  • 两配置文件中内容是一样的，仅仅是环境不一样
    •  
  
 
  
 
  
base_api中修改根端口，调用接口的时候会用这一节拼接上这个base api 
 
  
Springboot+Vue前后端分离项目-管理系统-上_第43张图片
 
  
在vue.config中关闭mock服务
 
  
 
 
  
 跨域
 
  
我们启动项目，发现出现了跨域问题
 
  
Springboot+Vue前后端分离项目-管理系统-上_第44张图片
 
  
解决方法看这里：解决跨域问题
 
  
直接使用cors配置类
 
  
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class MyCorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration config = new CorsConfiguration();
        //允许谁来异步访问
//        config.addAllowedOrigin("*");    //允许所有人访问，不安全不推荐
        config.addAllowedOrigin("http://localhost:7777");   //这里写允许访问的前端服务器
        config.setAllowCredentials(true);    //传递cookie

        config.addAllowedMethod("*");    //允许哪些方法访问(*是全部方法)
//        config.addAllowedMethod("OPTIONS");
//        config.addAllowedMethod("HEAD");
//        config.addAllowedMethod("GET");
//        config.addAllowedMethod("PUT");
//        config.addAllowedMethod("POST");
//        config.addAllowedMethod("DELETE");
//        config.addAllowedMethod("PATCH");

//        允许的头信息
        config.addAllowedHeader("*");

        //过滤资源
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**",config);

        return new CorsFilter(configSource);
    }
}
 
  
 页面成功跳转，前后端对接成功
 
  
Springboot+Vue前后端分离项目-管理系统-上_第45张图片
 
  
 
  
 
  
七.管理页面
 
  
1.用户管理布局
 
  
搜索栏
 
  
我们使用element标签来创建页面 组件 | Element
 
  
使用什么样式就直接在里面找就可以了，不需要死记
 
  





 
  
Springboot+Vue前后端分离项目-管理系统-上_第46张图片
 
  
为了美观，我们使用card样式将其套起来
 
  
 Springboot+Vue前后端分离项目-管理系统-上_第47张图片
 
  
但是此时卡片的边界与左栏上栏默认的贴在了一起，依旧不美观，我们可以直接修改一下卡片外边距，但是并不推荐这种做法，因为之后还有别的组件需要修改边距，我们这里修改整个区域的css
 
  
 
   
整个区域指的这里
 
   
Springboot+Vue前后端分离项目-管理系统-上_第48张图片
 
   
 
  
 
  
 我们打开F12查看此区域叫什么名字
 
  
Springboot+Vue前后端分离项目-管理系统-上_第49张图片
 
  
 我们在根组件App.vue中设置style，定义一个全局边距
 
  
 
  
Springboot+Vue前后端分离项目-管理系统-上_第50张图片
 
  
再来修改一下框的宽度、右边距以及查询按钮的图案，这里仅修改这个地方的框大小就行了，没必要设置全局属性
 
  





 
  
Springboot+Vue前后端分离项目-管理系统-上_第51张图片
 
  
十分甚至九分的美观啊（喜
 
  
若是想在这卡片末尾添加一个小按钮，我们可以使用Layout布局页面
 
  
这部分的完整代码如下
 
  





 
  
 
  
 
  
结果栏
 
  
我们同样将结果列表放入card组件，就是为了美观，不放也行
 
  
Springboot+Vue前后端分离项目-管理系统-上_第52张图片测试发现两个卡片距离太近，我们可以依照上面那样在根组件App.vue中设置全局底边距，这样别的该种类组件也能用，如果只是想在本组件生效那就写在本类文件的style中
 
  
先查看该组件css名称
 
  
Springboot+Vue前后端分离项目-管理系统-上_第53张图片
 
  
.el-card{
  /* 底部边距 */
  margin-bottom: 10px ;
}
 
  
 Springboot+Vue前后端分离项目-管理系统-上_第54张图片
 
  
 我们来使用表格替换掉xxx
 
  
Springboot+Vue前后端分离项目-管理系统-上_第55张图片
 
  
 直接使用的话会报错，因为数据绑定不正常
 
  
 我们先在script中创建空数据，因为data中返回的searchModel是对象类型，所以调用的时候要使用“对象.属性”的形式，而userList是数组，直接使用即可
 
  
 
  
修改我们之前的代码绑定的数据 
 
  
Springboot+Vue前后端分离项目-管理系统-上_第56张图片
 
  
添加/修改我们需要的字段，对应数据库字段即可
 
  
Springboot+Vue前后端分离项目-管理系统-上_第57张图片
 
  
 添加分页组件，在element中查找分页组件组件 | Element
 
  
    
    
 
  
这里面绑定了两个方法4个参数，所以不能直接使用，要先在script中定义出来，不然会报错
 
  
 
  
更改一下分页展示的语言
 
  
 
  
最终效果
 
  
Springboot+Vue前后端分离项目-管理系统-上_第58张图片
 
  
这部分的全部代码
 
  





 
  
 
  
 2.用户管理接口 
 
  
我们首先要实现分页查询，具体可以查看mybatis的官网插件主体 | MyBatis-Plus (baomidou.com)
 
  
创建分页插件拦截器
 
  
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MpConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}
 
  
 我们使用mybatis自带的page方法，发现需要传入wrapper对象
 
  
 
   
Controller层
 
  
 
  
    @GetMapping("/list")
    //                                                required表示查询时Params不必带上该参数
    public Result> getUserList(@RequestParam(value = "username",required = false) String username,
                                              @RequestParam(value = "phone",required = false) String phone,
                                              @RequestParam("pageNo") Long pageNo,
                                              @RequestParam("pageSize") Long pageSize){
        LambdaQueryWrapper wrapper = new LambdaQueryWrapper<>();
        //判断长度是否大于零，其实判断你username是不是非空
        wrapper.eq(StringUtils.hasLength(username),User::getUsername,username);
        wrapper.eq(StringUtils.hasLength(phone),User::getPhone,phone);
        Page page = new Page<>(pageNo, pageSize);

        userService.page(page,wrapper);

        Map data = new HashMap<>();
        data.put("total",page.getTotal());
        data.put("rows",page.getRecords());

        return Result.success(data);
    }
 
  
测试
 
  
Springboot+Vue前后端分离项目-管理系统-上_第59张图片
 
  
 3.接口对接
 
  
我们若是想要对接，首先在vue中需要定义api，前面做登录接口时，模板已经帮我们定义好了登录接口部分，现在我们需要自己来实现
 
  
一个模块一个js文件，我们在api文件夹下创建userManage.js
 
  
import request from '@/utils/request'

export default {
    // searchModel是前端传来的数据
    getUserList(searchModel){
        return request({
            url: '/user/list',
            method: 'get',
            // post上传的是json格式,get上传的params
            params:{
                pageNo: searchModel.pageNo,
                pageSize: searchModel.pageSize,
                username: searchModel.username,
                phone: searchModel.phone
            }
        });
    },
    // 有别的方法在这里写
}
 
  
在user.vue中引入
 
  
Springboot+Vue前后端分离项目-管理系统-上_第60张图片
 
  
我们为查询按钮绑定一下事件
 
  
Springboot+Vue前后端分离项目-管理系统-上_第61张图片
 
  
 查看效果
 
  
Springboot+Vue前后端分离项目-管理系统-上_第62张图片
 
  
 
   
 此时我们看到并没有1页展示5条数据，是因为没有定义这两个方法,当变量发生改变时调用方法
 
   
Springboot+Vue前后端分离项目-管理系统-上_第63张图片
 
  
 
  
        handleSizeChange(pageSize){
            this.searchModel.pageSize = pageSize;
            this.getUserList();
        },
        handleCurrentChange(pageNo){
            this.searchModel.pageNo = pageNo;
            this.getUserList();
        },
 
  
Springboot+Vue前后端分离项目-管理系统-上_第64张图片
 
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(vue.js,java,前端)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • LocalDateTime 转 String
                        igotyback
java开发语言
                        
    importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
    
                    
    • 
                    
  • Linux下QT开发的动态库界面弹出操作（SDL2）
                        13jjyao
QT类qt开发语言sdl2linux
                        
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
                        若博豆
java算法华为javascript
                        
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
    
                    
    • 
                    
  • 【加密社】Solidity 中的事件机制及其应用
                        加密社
闲侃区块链智能合约区块链
                        
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • Java 重写(Override)与重载(Overload)
                        叨唧唧的

                        
    Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
    
                    
    • 
                    
  • 简单了解 JVM
                        记得开心一点啊
jvm
                        
    目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
    
                    
    • 
                    
  • 1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven
                        Energet!c
开发语言
                        
    1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
    
                    
    • 
                    
  • Java企业面试题3
                        马龙强_
java
                        
    1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
    
                    
    • 
                    
  • JVM、JRE和 JDK：理解Java开发的三大核心组件
                        Y雨何时停T
Javajava
                        
    Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
    
                    
    • 
                    
  • Java面试题精选：消息队列(二)
                        芒果不是芒
Java面试题精选javakafka
                        
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
    
                    
    • 
                    
  • 白骑士的Java教学基础篇 2.5 控制流语句
                        白骑士所长
Java教学java开发语言
                        
    欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
    
                    
    • 
                    
  • python语法——三目运算符
                        HappyRocking
pythonpython三目运算符
                        
    在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
    
                    
    • 
                    
  • ArrayList 源码解析
                        程序猿进阶
Java基础ArrayListListjava面试性能优化架构设计idea
                        
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
    
                    
    • 
                    
  • Java爬虫框架（一）--架构设计
                        狼图腾-狼之传说
java框架java任务html解析器存储电子商务
                        
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
    
                    
    • 
                    
  • Java：爬虫框架
                        dingcho
Javajava爬虫
                        
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
    
                    
    • 
                    
  • python怎么将png转为tif_png转tif
                        weixin_39977276

                        
    发国外的文章要求图片是tif，cmyk色彩空间的。大小尺寸还有要求。比如网上大神多，找到了一段代码，感谢！https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
                        跳房子的前端
前端面试javascript开发语言ecmascript
                        
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    
                    
    • 
                    
  • JAVA·一个简单的登录窗口
                        MortalTom
java开发语言学习
                        
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
    
                    
    • 
                    
  • WebMagic：强大的Java爬虫框架解析与实战
                        Aaron_945
Javajava爬虫开发语言
                        
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • 00. 这里整理了最全的爬虫框架（Java + Python）
                        有一只柴犬
爬虫系列爬虫javapython
                        
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
    
                    
    • 
                    
  • JAVA学习笔记之23种设计模式学习
                        victorfreedom
Java技术设计模式androidjava常用设计模式
                        
    博主最近买了《设计模式》这本书来学习，无奈这本书是以C++语言为基础进行说明，整个学习流程下来效率不是很高，虽然有的设计模式通俗易懂，但感觉还是没有充分的掌握了所有的设计模式。于是博主百度了一番，发现有大神写过了这方面的问题，于是博主迅速拿来学习。一、设计模式的分类总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器
    
                    
    • 
                    
  • JavaScript `Map` 和 `WeakMap`详细解释
                        跳房子的前端
JavaScript原生方法javascript前端开发语言
                        
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    
                    
    • 
                                
  • jdk tomcat 环境变量配置
                                    Array_06
javajdktomcat
                                    
    Win7 下如何配置java环境变量 
 
1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 
2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 
3。分别配置高级环境变量。 
   电脑-->右击属性-->高级环境变量-->环境变量。 
 
 
分别配置 : 
 
path   
 &nbs
    
                                
    • 
                                
  • Spring调SDK包报java.lang.NoSuchFieldError错误
                                    bijian1013
javaspring
                                    
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 
org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
    
                                
    • 
                                
  • LeetCode[位运算] - #136 数组中的单一数
                                    Cwind
java题解位运算LeetCodeAlgorithm
                                    
    原题链接：#136 Single Number 
要求： 
给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 
注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 
难度：中等 
分析： 
题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
    
                                
    • 
                                
  • qq登陆界面开发
                                    15700786134
qq
                                    
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： 
public class First {         public void initul(){        jf=ne
    
                                
    • 
                                
  • Linux的程序包管理器RPM
                                    被触发
linux
                                    
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
    
                                
    • 
                                
  • socket通信遇到EOFException
                                    肆无忌惮_
EOFException
                                    
    java.io.EOFException 
at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) 
at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
    
                                
    • 
                                
  • 基于spring的web项目定时操作
                                    知了ing
javaWeb
                                    
    废话不多说，直接上代码，很简单 配置一下项目启动就行 
1，web.xml 
 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="h
    
                                
    • 
                                
  • 树形结构的数据库表Schema设计
                                    矮蛋蛋
schema
                                    
    原文地址： 
http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488 
 
 
    程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
    
                                
    • 
                                
  • maven将jar包和源码一起打包到本地仓库
                                    alleni123
maven
                                    
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository 
 
 
 
<project>
  ...
  <build>
    <plugins>
      <plugin>
        <groupI
    
                                
    • 
                                
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！
                                    百合不是茶

                                    
    类 File 
File是指文件和目录路径名的抽象表示形式。 
1，何为文件： 
标准文件（txt doc mp3...） 
目录文件（文件夹） 
虚拟内存文件 
  
2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
    
                                
    • 
                                
  • Spring注入有继承关系的类（2）
                                    bijian1013
javaspring
                                    
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 
package com.bijian.spring.test4;

public class AClass {

    private String a;
    private String b;
   
    public String getA() {
        retu
    
                                
    • 
                                
  • 30岁转型期你能否成为成功人士
                                    bijian1013
成长励志
                                    
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
    
                                
    • 
                                
  • 【Velocity四】Velocity与Java互操作
                                    bit1129
velocity
                                    
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础， 
     POJO 
   
package com.tom.servlets;

public
    
                                
    • 
                                
  • 【Hive十一】Hive数据倾斜优化
                                    bit1129
hive
                                    
    什么是Hive数据倾斜问题 
  
 
 操作：join,group by,count distinct 
 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 
 原因：key分布不均匀 
 倾斜度衡量：平均记录数超过50w且
    
                                
    • 
                                
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等
                                    ronin47
nginx lua csrf
                                    
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com 
Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 
location /{
    
                                
    • 
                                
  • java-3.求子数组的最大和
                                    bylijinnan
java
                                    
    package beautyOfCoding;


public class MaxSubArraySum {

	/**
	 * 3.求子数组的最大和
题目描述：
输入一个整形数组，数组里有正数也有负数。
数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。
求所有子数组的和的最大值。要求时间复杂度为O(n)。
例如输入的数组为1, -2, 3, 10, -4,
    
                                
    • 
                                
  • Netty源码学习-FileRegion
                                    bylijinnan
javanetty
                                    
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 
可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： 
 


		//pipeline（没有诸如“FileRegionEncoder”的handler）：
		public ChannelPipeline ge
    
                                
    • 
                                
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
                                    cngolon
跨浏览器复制到粘贴板Zero Clipboard
                                    
    Zero Clipboard的实现原理 
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 
Zero Clipboard的安装方法 
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js 
    
                                
    • 
                                
  • 单例模式
                                    cuishikuan
单例模式
                                    
    第一种（懒汉，线程不安全）： 
public class Singleton {   2     private static Singleton instance;   3     pri
    
                                
    • 
                                
  • spring+websocket的使用
                                    dalan_123

                                    
    一、spring配置文件 
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
    
                                
    • 
                                
  • 细节问题：ZEROFILL的用法范围。
                                    dcj3sjt126com
mysql
                                    
       1、zerofill把月份中的一位数字比如1，2，3等加前导0 
 
      
mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
    
                                
    • 
                                
  • Android开发10——Activity的跳转与传值
                                    dcj3sjt126com
Android开发
                                    
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。 
  
一、Activity跳转 
方法一Intent intent = new Intent(A.this, B.class); startActivity(intent) 
  
方法二Intent intent = new Intent();intent.setCla
    
                                
    • 
                                
  • jdbc 得到表结构、主键
                                    eksliang
jdbc 得到表结构、主键
                                    
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 
假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
    
                                
    • 
                                
  • Android 应用程序开关GPS
                                    gqdy365
android
                                    
    要在应用程序中操作GPS开关需要权限： 
 

<uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" />
 
但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 
1、方法一：将项目放到Android源码中编译； 
2、方法二：网上有人说cl
    
                                
    • 
                                
  • Windows上调试MapReduce
                                    zhiquanliu
mapreduce
                                    
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
    
                                
    • 
                                
  • 如何看待一些知名博客推广软文的行为？
                                    justjavac
博客
                                    
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 
互联网上的两种典型心态： 
 
  当初求种像条狗，如今撸完嫌人丑  
  当初搜贴像条犬，如今读完嫌人软  
 
你为啥感觉不舒服呢？ 
难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 
就如同 Google 关闭了 Gooled Reader，那是
    
                                
    • 
                                
  • sql优化总结
                                    macroli
sql
                                    
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！ 
  
要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。 
  
一、简单的统计语句执行时间 
declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
    
                                
    • 
                                
  • Linux Oracle中常遇到的一些问题及命令总结
                                    超声波
oraclelinux
                                    
    1.linux更改主机名 
  
(1)#hostname oracledb　　　　临时修改主机名 
(2) vi /etc/sysconfig/network 　　修改hostname 
(3) vi /etc/hosts　　　　　　　　修改IP对应的主机名 
  
2.linux重启oracle实例及监听的各种方法 
（注意操作的顺序应该是先监听，后数据库实例） 
&nbs
    
                                
    • 
                                
  • hive函数大全及使用示例
                                    superlxw1234
hadoophive函数
                                    
      
具体说明及示例参 见附件文档。  
  
  
文档目录： 
  
目录 
一、关系运算： 4 
1. 等值比较: = 4 
2. 不等值比较: <> 4 
3. 小于比较: < 4 
4. 小于等于比较: <= 4 
5. 大于比较: > 5 
6. 大于等于比较: >= 5 
7. 空值判断: IS NULL 5
    
                                
    • 
                                
  • Spring 4.2新特性-使用@Order调整配置类加载顺序
                                    wiselyman
spring 4
                                    
    4.1 @Order 
 
 Spring 4.2 利用@Order控制配置类的加载顺序 
  
4.2 演示 
 
 两个演示bean 
 
package com.wisely.spring4_2.order;

public class Demo1Service {

}

 
package com.wisely.spring4_2.order;

public class
    
                                
    •