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>

<script>

import axios from "axios";
axios.defaults.baseURL="http://localhost:8090"
</font>
export default {
  name: 'list',
}
</script>

第三步：定义data，发起ajax请求

<template>
  <div class="list">

  </div>
</template>

<script>

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

export default {
  name: 'list',
  data(){
    return {
        users:[]
    }
  },
  created(){
    axios.get("/user").then(res => {
        this.users = res.data
    })
  }
}
</script>

第四步：页面遍历显示效果

<template>
  <div class="list">
    <table border="1">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>操作</th>
      </tr>
      <tr v-for="(v,k) in users" :key="k">
        <td>{{v.uid}}</td>
        <td>{{v.username}}</td>
        <td>{{v.password}}</td>
        <td>
          新增  修改   删除
        </td>
      </tr>
    </table>
  </div>
</template>

<script>

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

export default {
  name: 'list',
  data(){
    return {
        users:[]
    }
  },
  created(){
    axios.get("/user").then(res => {
        this.users = res.data
    })
  }
}
</script>

2 配置router/index.js路由

第一步：打开router/index.js文件

第二步：新增如下代码

2 修改App.vue页面

第一步：修改如下

测试，OK

4 新增用户信息

1 初始化新增页面

第一步：创建Add.vue，并编写基本结构

<template>
  <div>
   
  </div>
</template>
<script>
export default {
  data(){
    return {

    }
  }

}
</script>
<style scoped>

</style>

第二步：编写表单

<template>
  <div>
    <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="添加"></td>
            </tr>
        </table>
  </div>
</template>
<script>
export default {
  data(){
    return {
       user:{} 
    }
  }

}
</script>
<style scoped>

</style>

第三步：配置router/index.js路由

const routes = [
  {
    path: '/',
    name: 'list',
    component: List
  },
  {
    path: '/add',
    name: 'add',
    component: () => import('../views/Add.vue')
  }
]

第四步：修改List.vue页面的连接

第五步：测试，运行

2 新增功能的提交

第一步：在"新增"按钮中添加点击事件

 <td colspan="2"><input type="button" value="添加" @click="addUser()"></td>

第二步：在vue中编写代码

<template>
  <div>
    <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="添加" @click="addUser()"></td>
            </tr>
        </table>
  </div>
</template>
<script>
import  axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
export default {
  data(){
    return {
       user:{} 
    }
  },
  methods: {
     addUser(){
       axios.post("/user",this.user).then(res =>{
         alert("新增成功")
         // 编程时路由导航
         this.$router.push("/")
       })
     } 

  }
}
</script>
<style scoped>

</style>

第三步：测试,ok

5 修改用户信息

1 修改回显

第一步：编写修改Update.vue页面

<template>
    <div>
         <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="修改"></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data(){
        return {
            user:{}
        }
    }
}
</script>
<style scoped>

</style>

第二步：接收参数

<template>
    <div>
         <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="修改"></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data(){
        return {
            user:{}
        }
    },
    created() {
        //方式1： /update/1
        let uid = this.$route.params.uid;
        //方式2： /update?uid=1
        // this.$route.query.uid
    },
}
</script>
<style scoped>

</style>

第三步：引入axios，发送ajax，根据id查找用户信息，回显

<template>
    <div>
         <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="修改"></td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
axios.defaults.baseURL="http://localhost:8090"
export default {
    data(){
        return {
            user:{}
        }
    },
    created() {
        //方式1： /update/1
        let uid = this.$route.params.uid;
        //方式2： /update?uid=1
        // this.$route.query.uid
        axios.get("/user/"+uid).then(res => {
            this.user = res.data
        })
    },
}
</script>
<style scoped>

</style>

第四步：配置router/index.js路由

第五步：修改List.vue页面链接

第六步：运行

2 修改提交

第一步：给修改按钮添加点击事件

 <td colspan="2"><input type="button" value="修改"  @click="updateUser()"></td>

第二步：编写提交方法

<template>
    <div>
         <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="button" value="修改" @click="updateUser()"></td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
axios.defaults.baseURL="http://localhost:8090"
export default {
    data(){
        return {
            user:{}
        }
    },
    created() {
        //方式1： /update/1  
        // 页面<router-link :to="'/update/' + user.uid">修改</router-link>
        let uid = this.$route.params.uid;
        //方式2： /update?uid=1
        // this.$route.query.uid  
        // 页面<router-link :to="{path:'/update',query:{uid:user.uid}}">修改(测试) 
        axios.get("/user/"+uid).then(res => {
            this.user = res.data
        })
    },
    methods:{
        updateUser(){
            axios.put("/user",this.user).then(res => {
                alert("修改成功")
                this.$router.push("/")
            })
        }
    }
}
</script>
<style scoped>
</style>

第三步：测试，ok

6 删除用户信息

第一步：给删除按钮添加点击事件

<a href="#" @click="deleteUser(v.uid)" >删除</a>

第二步：编写代码

<template>
  <div class="list">
    <table border="1">
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>操作</th>
      </tr>
      <tr v-for="(v,k) in users" :key="k">
        <td>{{v.uid}}</td>
        <td>{{v.username}}</td>
        <td>{{v.password}}</td>
        <td>
         <router-link to="/add">新增</router-link>   
         <router-link :to="'/update/'+v.uid">修改 </router-link>   
         <a href="#" @click="deleteUser(v.uid)" >删除</a>
        </td>
      </tr>
    </table>
  </div>
</template>

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

export default {
  name: 'list',
  data(){
    return {
        users:[]
    }
  },
  created(){
    axios.get("/user").then(res => {
        this.users = res.data
    })
  },
  methods:{
    deleteUser(uid){
      axios.delete("/user/"+uid).then(res=>{
        alert("删除成功")
        axios.get("/user").then(res => {
          this.users = res.data
        })
      })
    }
  }
}
</script>