Vue项目实战应用

介绍：

这里主要使用vue框架实现列表展示与修改功能。
页面效果：

Snipaste_2019-07-12_20-44-40.png

项目目录：

Snipaste_2019-07-12_20-47-56.png
Vue部分代码采用外部引用方式
主要引入的js文件

<script  src="js/vuejs-2.5.16.js"></script>
<script  src="js/axios-0.18.0.js"></script>
<script src="js/user.js"></script>

前端绑定代码：
列表展示部分：

<tr v-for="u in users">
 <td>
<input name="ids"  type="checkbox"></td>
   <td >{{u.id}}</td>
   <td>{{u.username}}</td>
   <td>{{u.password}}</td>
    <td>{{u.gender}}</td>
    <td>{{u.age}}</td>
   <td class="text-center">{{u.email}}</td>
   <td class="text-center">
    <button type="button" class="btn bg-olive btn-xs">订单</button>
  <button type="button" class="btn bg-olive btn-xs">详情</button>
   <button type="button" class="btn bg-olive btn-xs" @click="findbyid(u.id)">编辑</button>
         </td>
             </tr>

修改遮罩页面：

<div class="box-body">
<div class="form-horizontal">
<input type="text" class="form-control" >
<div class="form-group">
<label class="col-sm-2 control-label">用户名:</label>
<div class="col-sm-5">
<input type="text" v-model:value="user.username" class="form-control">
 </div>
</div>
 <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-5">
   <input type="text" v-model:value="user.password" class="form-control">
  </div>
   </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">性别:</label>
<div class="col-sm-5">
<input type="text" v-model:value="user.gender" class="form-control">
 </div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">年龄:</label>
<div class="col-sm-5">
  <input type="text" v-model:value="user.age" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">邮箱:</label>
<div class="col-sm-5">
<input type="text" v-model:value="user.email" class="form-control">
 </div>
   </div>
  </div>
<div class="modal-footer">
<button type="button" class="btn btn-outline" data-dismiss="modal">关闭
</button>
 <button type="button" class="btn btn-outline" @click="updateuser()"  data-dismiss="modal">修改
 </button>
</div>

user.js文件代码

new Vue({
//#app是列表及修改遮罩页面父容器
    el:"#app",
    data:{
//放列表展示中数据库 查询到的代码
        users:[],
//修改框用于双向绑定
        user:{
            id:"",
            username:"",
            password:"",
            gender:"",
            age:0,
            email:""
        }
    },
//方法
    methods:{
//查询所有数据
        findall:function () {
            axios.get("/findall")
                .then((resp)=>{
                    this.users = resp.data
                })
        },
//根据id查询数据
        findbyid:function(id){
            axios.get("/findbyid/"+id)
                .then((resp)=>{
                    this.user=resp.data;
                });
            $("#myModal").modal("show");
        },
//修改数据
        updateuser:function () {
          axios.post("/findall",this.user)
              .then((resp)=>{
                  this.findall();
              })
        }
    },
    created:function () {
        this.findall()
    }
})

后台使用ssm框架编写，这是Controller部分代码

package com.gzy.web.controller;

import com.gzy.domain.User;
import com.gzy.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
//@RestController注解相当于@ResponseBody ＋ @Controller合在一起的作用。
@RestController
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/findall")
    public List<User> finsdAll(){
        System.out.println("dsd");
        List<User> all = userService.findAll();
        return all;
    }
    @RequestMapping("/findbyid/{id}")
    public User findbyid(@PathVariable(name="id") int id){
        User byId = userService.findById(id);
        return byId;
    }
    //采用请求方式判断 是修改还是查询
    @RequestMapping(value = "/findall",method=RequestMethod.POST)
    public void update(@RequestBody User user){
        System.out.println();
        userService.update(user);
    }


}