13 练习案例

springboot + vue 的案例纯手动没用第三方架子

2.前后端分离开发思路

登录页面 Login.vue

shell

<template>
  <div class="login-box">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <h3>欢迎登录</h3>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ;

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSubmit(formName) {
      var vm = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: "post",
            url: "http://localhost:8088/user/login",
            data: {
              name: vm.form.username,
              password: vm.form.password,
            },
          })
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                //把登陆成功的用户信息 存入 state
                let user = res.data.data.user;
                
                vm.$store.dispatch("asyncUpdateUser", user);
                vm.$message({
                  message: "登录成功",
                  type: "success",
                });
                setTimeout(function () {
                  vm.$router.push("/home");
                }, 2000);
              }
            })
            .catch((err) => {});
        } else {
          this.$message.error("用户名或密码格式错误");
          return false;
        }
      });
    },
  },
  //生命周期 -创建完成 （可以访问当前this 实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 -创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 -更新之后
  beforeDestroy() {}, //声明周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive 缓存功能 这个函数会触发
};
</script>
<style scoped>
/* //@import url();引入公共css类 */
.login-box {
  width: 500px;
  height: 300px;
  border: 1px solid #dcdfe6;
  margin: 150px auto;
  padding: 20px 50px 20px 30px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px #dcdfe6;
}
</style>

收获

element ui 的基本用法
axios 的用法
常用vue指令
vuex的使用

shell

state: {
    user:{

    }
  },
  getters: {
    getUser(state){
      return state.user;
    }
  },
  mutations: {
    updateUser(state,user){
        state.user = user;
    }
  },
  actions: {
         // 在组件中是通过 this.$store.dispatch('jian'); 来调用 actions
         asyncUpdateUser(context,user){    //解构 context 对象  可以拿到对象属性  commit  和  state
            context.commit('updateUser',user)
        }
  },

编程式路由跳转
前端接受后端数据
后端接受前端数据

Home.vue

直接拿官网的模版

修改菜单

用户列表

java

<template>
<div>
    <!-- 模糊查询的表单开始 -->
    <el-form :inline="true" :model="dataForm" class="demo-form-inline">
      <el-form-item label="名字">
        <el-input v-model="dataForm.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <!-- <el-input v-model="formInline.registerdate" placeholder="注册日期"></el-input> -->
        <el-date-picker
          v-model="dataForm.birthday"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getUsers()">查询</el-button>
        <el-button type="primary" @click="add()">新增</el-button>
      </el-form-item>
    </el-form>

     <!-- 模糊查询的表单结束 -->

     <!-- 用户列表开始 -->
     <el-table :data="users" style="width: 100%" fit>
      <el-table-column prop="id" label="编号" > </el-table-column>
      <el-table-column prop="name" label="姓名" >
      </el-table-column>
      <el-table-column prop="sex" label="性别" >
      </el-table-column>
      <!-- <el-table-column prop="avatarurl" label="头像"> 
         <template slot-scope="scope">
          <el-image :src="scope.row.avatarurl" style="width:100px;height:100px;"></el-image>
        </template> 
      </el-table-column> -->
      <el-table-column prop="birthday" label="生日" >
      </el-table-column>
      <el-table-column prop="registtime" label="注册日期" >
      </el-table-column>
      <el-table-column fixed="right" label="操作" >
        <template slot-scope="scope">
          <el-button
            @click="handleClickEdit(scope.row)"
            type="text"
            size="small"
            >编辑</el-button
          >
          <el-button
            @click="handleClickDelete(scope.row)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 用户列表结束 -->

    <!-- 分页组件开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 分页组件结束 -->

</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ; 

export default {
//import 引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
    currentPage:1,   // 当前页码
    pageSize:10,  // 每页显示几条数据
    total:0,  // 一共多少条数据
    dataForm:{
        name:'',
        birthday:''
    },
    users:[
        {
            id:1,
            name:'zs',
            sex:'男',
            birthday:'1999-11-11',
            registtime:'1999-12-12'
        }
    ]

};
},
//计算属性 类似于data概念
computed: {},
//监控data 中的数据变化
watch: {},
//方法集合
methods: {
    getUsers(){
        //ajax 请求  这个请求 是一个 post   带的参数格式  是  json 
        this.axios.post("http://localhost:8088/user/users",{
            page:this.currentPage,  // 第几页
            limit:this.pageSize,
            name:this.dataForm.name,
            birthday:this.dataForm.birthday,
        }).then((res)=>{
          // 注意  使用 axios 的ajax 请求的响应的数据结构 
           console.log(res);     
           this. users = res.data.data.page.records;  // 分页的列表数据
           this.total = res.data.data.page.total; // 总记录数


        }).catch((error)=>{

        })
    },
    add(){

    },
    handleClickEdit(row){
        console.log('edit')
    },
    handleClickDelete(row){
        console.log('delete')
    },
    handleSizeChange(val){
        console.log(val);
    },
    handleCurrentChange(val){
        //翻页时  触发
        console.log(val);
        this.currentPage = val;
        this.getUsers();
    }



},
//生命周期 -创建完成 （可以访问当前this 实例）
created() {

},
//生命周期-挂载完成（可以访问DOM 元素）
mounted() {
  //当页面被渲染完毕  就查询列表数据
    this.getUsers();
},
beforeCreate() {}, //生命周期 -创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, // 生命周期 - 更新之前
updated() {}, // 生命周期 -更新之后
beforeDestroy() {}, //声明周期 - 销毁之前
destroyed() {}, // 生命周期 - 销毁完成
activated() {}, // 如果页面有keep-alive 缓存功能 这个函数会触发 
}
</script>
<style scoped>
/* //@import url();引入公共css类 */

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

注意如果列表上有图片要展示需要使用 el-image 组件，但是这个组件对element-ui的版本有要求注意查看版本如果版本太低可以手动改版本，在 package.json 中修改

shell

"element-ui": "2.13.2",

改完之后重新安装

shell

cnpm install

添加

点添加按钮

java

   add(){
      //添加按钮触发
      this.$router.push({
        path:"/home/userAdd"
      })

    },

跳转到添加页面，记得配置路由

java

<template>
  <div>
    <el-form ref="addUserForm" :model="user" label-width="80px">
      <h3>添加用户</h3>
      <el-form-item label="姓名" prop="name">
        <el-col :span="12">
          <el-input v-model="user.name"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-radio v-model="user.sex" label="1">男</el-radio>
        <el-radio v-model="user.sex" label="2">女</el-radio>
      </el-form-item>

      <el-form-item label="生日" prop="birthday">
        <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('addUserForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ;

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      user: {},
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSubmit(){
        this.axios.post("http://localhost:8088/user/add",this.user)
        .then(resp=>{
            if(resp.data.code==200){
                  this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                setTimeout(()=>{
                  this.$router.push("/home/userManage")
                },2000)  
            }        
        })  
        .catch(error=>{

        })  
    }
  },
  //生命周期 -创建完成 （可以访问当前this 实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 -创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 -更新之后
  beforeDestroy() {}, //声明周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive 缓存功能 这个函数会触发
};
</script>
<style scoped>
/* //@import url();引入公共css类 */
</style>

编辑

点编辑按钮打开编辑页面并把 id 传过去

java

 handleClickEdit(row){
      //编辑按钮触发的方法
        console.log('edit')
        this.$router.push({
        path:"/home/userEdit",
        query:{
          id: row.id    // 路由传参第二种方式
        }
      })
    },

打开编辑页面根据传过来的 id 查询用户信息回显到表单页面

先接受传过来的id ，查询用户

java

  mounted() {
    // 获取路由跳转携带的参数
    let id = this.$route.query.id;

    this.getUserById(id);
  },

java

    getUserById(id){
        //根据 id 查询用户信息
        this.axios.get(`http://localhost:8088/user/findById/${id}`)
        .then(resp=>{
                this.user = resp.data.data.user;
        })
        .catch(error=>{

        })
    },

回显到表单页面

java

<el-form ref="editUserForm" :model="user" label-width="80px">
      <h3>编辑用户</h3>

      <el-form-item label="编号" prop="id">
        <el-col :span="12">
          <el-input v-model="user.id"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-col :span="12">
          <el-input v-model="user.name"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
             <el-col :span="4">
        <el-radio v-model="user.sex" label="男" >男</el-radio>
        <el-radio v-model="user.sex" label="女" >女</el-radio>
                 </el-col>
      </el-form-item>

      <el-form-item label="生日" prop="birthday">
             <el-col :span="2">
        <el-date-picker v-model="user.birthday" type="date" placeholder="选择日期">
        </el-date-picker>
                 </el-col>
      </el-form-item>

      <el-form-item label="注册日期" prop="registtime">
        <el-date-picker v-model="user.registtime" type="date" readonly="true" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit('editUserForm')"
          >提交</el-button
        >
      </el-form-item>
    </el-form>

修改之后提交表单

java

 onSubmit(formName){
        this.axios.post("http://localhost:8088/user/update",this.user)
        .then(resp=>{
            if(resp.data.code==200){
                  this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                setTimeout(()=>{
                  this.$router.push("/home/userManage")
                },2000)  
            }        
        })  
        .catch(error=>{

        })  
    }

删除

删除按钮

shell

  <el-button
              @click="handleClickDelete(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >

shell

handleClickDelete(row){
        //根据 id 删除 手机信息
        axios.get(`http://localhost:8088/phone/delete/${row.phoneId}`)
        .then((resp)=>{
          if(resp.data.code==200){
                debugger
                
                    // 弹出信息提示
                  this.$message({
                  message: resp.data.message,
                  type: "success",
                });
                //重新加载列表
               this.getPhones();
            }else{
                vm.$message({
                  message: resp.data.message,
                  type: "error",
                });
            }
        })
        .catch((error)=>{

        })
      },