Springboot2前后端分离Vue+element-UI实现

1.安装node.js和脚手架等

此次省略，不写了，可以自行百度。
node -v  #查看node.js版本

2.使用Node.js创建项目，也可以使用vscode直接创建。

3.使用VScode打开项目，添加el-ui

点击终端安装

4.在src中mian.js中添加el

5.在src目录创建api文件夹添加axios

6.在src目录下的components下创建login.vue文件和home.vue文件

home.vue

7.配置路由

他默认的页面是src/components/HelloWorld.vue,如果项目到别的页面这个时候就要使用Router.。默认是在mian.js中配置了路由。

修改src目录的router目录学的index.js，把我们新增的login.vue和home.vue页面配置进来，用于跳转页面

8.启动项目npm run dev

9.Springboot中控制层

@RestController
@RequestMapping("/userInfo")
@CrossOrigin
public class UserInfoController {
 
    @Autowired
    private UserInfoService userInfoService;


    @Autowired
    UserInfoMapper userInfoDao;

    @Autowired
    DozerBeanMapper  dozerBeanMapper;

    @RequestMapping("/index")
    public  String index(){
       return  "index";
    }

    @RequestMapping("/add")
    public String add(){
        return  "add";
    }

    @PostMapping("/login")

    public ReturnResult loginUser(LoginUser loginUser){
         if ("zhulin".equals(loginUser.getCUsername())&&"123".equals(loginUser.getCPwd())){
             return  ReturnResult.ok();
         }

       return  ReturnResult.error();
    }
    /**
     * 根据ID获取用户信息
     * @Param  userId  用户ID
     * @Return UserInfoEntity 用户实体
     */
    @RequestMapping("/getInfo/{userId}")
    public String getInfo(@PathVariable("userId") String userId, Model model) throws  Exception{
        if ("".equals(userId)){
           // new Exception(ResultCodeEnum.NULL_ERROR);
            return null;
        }
        UserInfo userInfoEntity = userInfoService.getById(userId);
         model.addAttribute("userInfoEntity",userInfoEntity);
        return "mian";
    }

    /**
     * 查询全部信息
     * @Author Sans
     * @Return List 用户实体集合
     */

    @RequestMapping("/getList")
    public ReturnResult getList(String name) throws Exception{
        if (name!=null&&!"".equals(name)){
            List userInfoEntities = userInfoService.likeName(name);
            return ReturnResult.ok().data("userInfoList",userInfoEntities);
        }

        List userInfoEntityList = userInfoService.list();

        return ReturnResult.ok().data("userInfoList",userInfoEntityList);
    }
    /**
     * 分页查询全部数据
     * @Return IPage 分页数据
     */
    @RequestMapping("/getInfoListPage")
    public ReturnResult getInfoListPage(String pageNo, Model model) {
        //需要在Config配置类中配置分页插件
        Map map = new HashMap<>();

        QueryWrapper queryWrapper =  new QueryWrapper<>();
        queryWrapper.orderByDesc("id");

        Page page = new Page<>(Integer.parseInt(pageNo),3);  // 查询第1页，每页返回5条
        IPage infoEntityIPage = userInfoDao.selectPage(page, queryWrapper);
        boolean searchCount = infoEntityIPage.isSearchCount();
        System.out.println(searchCount);

        //System.out.println(sql);
       // model.addAttribute("c",infoEntityIPage);
        return  ReturnResult.ok().data("pageInfo",infoEntityIPage);
    }
    /**
     * 根据指定字段查询用户信息集
     * @Return Collection 用户实体集合
     */
    @RequestMapping("/getListMap")
    public Collection getListMap(){
        Map map = new HashMap<>();
        //kay是字段名 value是字段值
        map.put("age",20);
        Collection userInfoEntityList = userInfoService.listByMap(map);
        return userInfoEntityList;
    }
    /**
     * 新增用户信息
     */
    @PostMapping("/saveInfo")
    @ResponseBody
    public ReturnResult saveInfo(@Valid UserVO userVO) throws  Exception{
        BeanUtils.copyProperties(userVO, new UserInfo());
        UserInfo userInfoEntity = dozerBeanMapper.map(userVO, UserInfo.class);
            userInfoService.save(userInfoEntity);
        Long id = userInfoEntity.getId();//插入数据后直接可以获取插入的主键id。
        System.out.println(id);
        return  ReturnResult.ok();
    }
    /**
     * 批量新增和更新用户信息
     */
    @RequestMapping("/saveInfoList")
    public void saveInfoList(){
        //创建对象
        UserInfo sans = new UserInfo();
        sans.setName("Sans");
        sans.setSkill("睡觉");
        sans.setAge(18);
        sans.setFraction(60L);
        sans.setEvaluate("Sans是一个爱睡觉,并且身材较矮骨骼巨大的骷髅小胖子");
        UserInfo papyrus = new UserInfo();
        papyrus.setName("papyrus");
        papyrus.setSkill("JAVA");
        papyrus.setAge(18);
        papyrus.setFraction(58L);
        papyrus.setEvaluate("Papyrus是一个讲话大声、个性张扬的骷髅，给人自信、有魅力的骷髅小瘦子");
        //批量保存
        List list =new ArrayList<>();
        list.add(sans);
        list.add(papyrus);
        userInfoService.saveBatch(list);
        userInfoService.updateBatchById(list,1000);//每次更新多少条
        //userInfoService.updateBatchById(list);//全部更新
    }
    /**
     * 更新用户信息
     */
    @PostMapping("/updateInfo")
    @ResponseBody
    public ReturnResult updateInfo(@Valid UserVO userVO){
        //根据实体中的ID去更新,其他字段如果值为null则不会更新该字段,参考yml配置文件
        UserInfo userInfoEntity = dozerBeanMapper.map(userVO, UserInfo.class);
        boolean update = userInfoService.updateById(userInfoEntity);
        if (update){
            return ReturnResult.ok();
        }else{
          return   ReturnResult.error();
        }
    }
    /**
     * 新增或者更新用户信息
     */
    @RequestMapping("/saveOrUpdateInfo")
    public void saveOrUpdate(){
        //传入的实体类userInfoEntity中ID为null就会新增(ID自增)
        //实体类ID值存在,如果数据库存在ID就会更新,如果不存在就会新增
        UserInfo userInfoEntity = new UserInfo();
        userInfoEntity.setId(1L);
        userInfoEntity.setAge(20);
        userInfoService.saveOrUpdate(userInfoEntity);
    }
    /**
     * 根据ID删除用户信息
     */
    @RequestMapping("/deleteInfo")
    public ReturnResult deleteInfo(String userId){

        userInfoService.removeById(userId);
       return ReturnResult.ok().data("success",true);
    }
    /**
     * 根据ID批量删除用户信息
     */

    @RequestMapping("/deleteInfoList")
    public void deleteInfoList(){
        List userIdlist = new ArrayList<>();
        userIdlist.add("12");
        userIdlist.add("13");
        userInfoService.removeByIds(userIdlist);
    }
    /**
     * 根据指定字段删除用户信息
     */
    @RequestMapping("/deleteInfoMap")
    public void deleteInfoMap(){
        //kay是字段名 value是字段值
        Map map = new HashMap<>();
        map.put("skill","删除");
        map.put("fraction",10L);
        userInfoService.removeByMap(map);
    }


}

在config中可以配置端口号

10.访问http://localhost:9528

根据数据的登录名称填写登录账号密码成功之后

为了清晰一点附上源码吧！可以直接下载运行前端的项目。后端导入项目。

链接: https://pan.baidu.com/s/1f27IZaGalpXyxohQ41Maxg 提取码: whip

11.建表语句

CREATE TABLE `user_info` (
  `id` INT(20) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(10) DEFAULT NULL,
  `age` INT(3) DEFAULT NULL,
  `skill` VARCHAR(50) DEFAULT NULL,
  `evaluate` VARCHAR(100) DEFAULT NULL,
  `sex` INT(1) DEFAULT NULL,
  `pwd` VARCHAR(20) DEFAULT NULL,
  `fraction` INT(3) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8