Java前端Vue-8(SPA综合案例--用户管理)

1 需求分析

需求：完成用户的CRUD操作
前台：Vue的SPA
后台：SpringBoot+Mybatis+通用Mapper

2 实践

1 创建SpringBoot后端项目

这个后端我是用的微服务做的,单独的话可以不用微服务！！！

User类：

package com.czxy.dao;

import lombok.Data;
import javax.persistence.Id;
import javax.persistence.Table;

@Table(name = "t_user")
@Data
public class User {
   

    @Id
    private Integer uid;
    private String username;
    private String password;

	}
}

Mapper类：

package com.czxy.mapper;

import com.czxy.dao.User;
import tk.mybatis.mapper.common.Mapper;

@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends Mapper<User> {
   

}

Service类：

package com.czxy.service;

import com.czxy.dao.User;
import com.czxy.mapper.UserMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import javax.annotation.Resource;
import java.util.List;

@Service
@Transactional
public class UserService {
   

    @Resource
    UserMapper userMapper;

    public List<User> findAll(){
   
       return userMapper.selectAll();
    }

    public User findBuId(Integer id){
   
        return userMapper.selectByPrimaryKey(id);
    }

    public void update(User user){
   
        userMapper.updateByPrimaryKey(user);
    }

    public void delete(Integer id){
   
        userMapper.deleteByPrimaryKey(id);
    }

}

Controller类：

package com.czxy.controller;

import com.czxy.dao.User;
import com.czxy.service.UserService;
import com.czxy.util.Result;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("user")
public class UserController {
   

    @Resource
    UserService userService;

    /**
     * 查询所有
     * @return
     */
    @GetMapping
    public Result selectAll(){
   
        List<User> users = userService.findAll();
        return Result.ok().data("user",users);
    }

    /**
     * 根据id查询
     * @param id
     * @return
     */
    @GetMapping("/{id}")
    public Result selectById(@PathVariable("id") Integer id){
   
        User user = userService.findBuId(id);
        return Result.ok().data("user",user);
    }

    /**
     * 根据id查询过后进行修改
     * @param user
     * @return
     */
    @PutMapping
    public Result updateUser(@RequestBody User user){
   
        userService.update(user);
        return Result.ok();
    }

    /**
     * 根据id进行删除
     * @param id
     * @return
     */
    @DeleteMapping("/{id}")
    public Result deleteId(@PathVariable("id") Integer id){
   
        userService.delete(id);
        return Result.ok();
    }
   
}

2 初始化Vue前端项目

1 创建项目

我们可以使用下面的命令来创建一个 SPA 的项目：

vue create 项目名称

创建项目时，会提示我们选择项目中需要使用的组件，我们可以使用默认的配置，也可以自己手动选择需要加载的组件。

• 手动选择组件

• 勾选需要安装的组件：

• 使用路由的 history 模式：

• 把配置写到 package.json 文件中：

• 不保存本次的配置：

项目创建完成。

2 安装axios

npm install  axios

3 列表查看用户信息

页面效果图：

1 创建List.vue组件

第一步：创建List.vue组件并编写基本结构

<template>
  <div class="list">

  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL="http://localhost:8090"

export default {
   
  name: 'list',
}
</script>

第二步：引入axios

<template>
  <div class="list">

  </div>
</template