springboot+vue-cli脚手架开发-实现用户增删改查

最新推荐文章于 2024-08-08 08:22:19 发布

鲸鱼姐

最新推荐文章于 2024-08-08 08:22:19 发布

阅读量1.2k

点赞数 1

分类专栏： vue springboot

本文链接：https://blog.csdn.net/zhaolulu916/article/details/111408626

版权

springboot 同时被 2 个专栏收录

57 篇文章 4 订阅

订阅专栏

vue

10 篇文章 3 订阅

订阅专栏

一.脚手架使用

1.vue 脚手架安装axios

npm install axios —save-dev

2.在main.js配置axios

import axios from ‘axios’

Vue.prototype.$http=axios; //修改内部的$http为axios

3.使用axios

在需要发送异步请求的位置 this.$http.get(“url”).then((res)==>{}) this.$http.post(“url”).then((res)==>{})

二.脚手架开发

1.main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$http=axios;   //修改内部的$http为axios


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2. App.vue

<template>
  <div id="app">
    <a href="#/home">主页</a>
    <a href="#/user">用户</a>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.在components新建Home.vue

<template>
  <div>
    <h1>欢迎进入我们的网站</h1>
  </div>
</template>
<script>
   export default{
   name: "Home"
   }
</script>

<style scoped>
</style>

4.在router里的main.js添加路由

默认路由的home组件，用户列表路由为user，userAdd和userEdit为user的子路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/Home"
import User from "../components/User"
import Student from "../components/Student"
import UserAdd from "../components/UserAdd"
import UserEdit from "../components/UserEdit"


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: "/home"
    },
    {
          path: '/home',
          component: Home
    },
    {
          path: '/user',
          component: User,
          children:[
          {
          path:'userAdd',component:UserAdd},
           {
          path:'userEdit',component:UserEdit}
          ]
    },
    {
          path: '/student',
          component: Student
    }
  ]
})

5.在components新建User.vue

<template>
  <div>
    <h1>用户列表</h1>
    <table border="1">
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>工号</th>
        <th>部门</th>
        <th>操作</th>
      </tr>
      <tr v-for="user,index in users" :key="user.id">
        <td>{{user.id}}</td>
        <td>{{user.username}}</td>
        <td>{{user.sex}}</td>
        <td>{{user.employeeNum}}</td>
        <td>{{user.department}}</td>
        <td>
          <a href="javascript:;" @click="deleteUser(user.id)">删除</a>&nbsp;&nbsp;<a :href="'#/user/userEdit?id='+user.id">修改</a>
        </td>
      </tr>
    </table>
    <a href="#/user/userAdd">添加</a>
    <router-view></router-view>
  </div>
</template>
<script>
   export default{
   name: "User",
   data(){
   return{
      users:[]
      }
   },
   methods:{

       findAll(){

       this.$http.get("http://localhost:8091/getAllUsers").then((res)=>{
       console.log(res.data);
       this.users=res.data;
            });
       },
       deleteUser(id){
          let _this=this;
            if(window.confirm("确定要删除这条记录吗?")){
            this.$http.get("http://localhost:8091/deleteVueUser?id="+id).then((res)=>{
                console.log(res.data);
               if(res.data.success)
              {
                //更新页面列表
                this.findAll();
              }
              });

              }
       }
   },
   components:{},
   created(){
      this.findAll();
   },
   watch:{ //用来监听
     $route:{   //用来监听路由 oldVal变化之前的路由
         handler: function(val,oldVal){
            console.log(val);
            if(val.path=='/user'){
            this.findAll();
            }
         },
         //深度观察监听
         deep:true
   }
   }
   }
</script>

<style scoped>
</style>

6.新建UserAdd.vue

<template>
  <div>
    <h1>用户添加信息</h1>
    <form action="">
      用户名：<input v-model="user.username" type="text"><br>
      性别:<input v-model="user.sex" type="text"><br>
      工号:<input v-model="user.employeeNum" type="text"><br>
      部门:<input v-model="user.department" type="text"><br>
      <input type="button" value="添加用户信息" @click="saveUser">
    </form>
  </div>
</template>
<script>
   export default{
   name: "Student",
   data(){
   return {
   user:{}
   }
   },
   methods:{
            //保存用户信息
          saveUser(){
          let _this=this;
          console.log(this.user);
           this.$http.post("http://localhost:8091/addVueUser",this.user).then((res)=>{
          console.log(res.data);
           if(res.data.success)
           {
            this.$router.push("/user"); //切换路由
           }
          });
          }
   }
   }
</script>

<style scoped>
</style>

7.新建UserEdit.vue

<template>
  <div>
    <h1>用户修改信息</h1>
    <form action="">
      用户名：<input v-model="user.username" type="text"><br>
      性别:<input v-model="user.sex" type="text"><br>
      工号:<input v-model="user.employeeNum" type="text"><br>
      部门:<input v-model="user.department" type="text"><br>
      <input type="button" value="修改用户信息" @click="saveUser">
    </form>
  </div>
</template>
<script>
   export default{
   name: "UserEdit",
   data(){
   return {
   user:{
       id:"",
     }
   }
   },
   methods:{
         //查找用户
         findOneUser()
         {
           this.$http.get("http://localhost:8091/findVueUser?id="+this.user.id).then((res)=>{
          console.log(res.data);
             this.user=res.data;
          })
         },
         //保存用户信息
          saveUser(){
          this.$http.post("http://localhost:8091/addVueUser",this.user).then((res)=>{
          if(res.data.success)
          {
          this.$router.push("/user"); //切换路由
          }
          });
          }
   },
   created(){
     console.log("修改组件中获取id:"+this.$route.query.id);
      this.user.id=this.$route.query.id;
      this.findOneUser();
   },
    watch:{ //用来监听
     $route:{   //用来监听路由 oldVal变化之前的路由
         handler: function(val,oldVal){
            console.log(val);
         },
         //深度观察监听
         deep:true
   }
   }
   }
</script>

<style scoped>
</style>

三后台开发

后台开发内容使用的是本人此篇文章的后台代码《springboot+vue+bootstrap实现用户增删改查》

四界面效果

在浏览器地址栏输入localhost:8080/

1.主界面

2.用户列表及添加用户

3. 修改用户

五. vue-cli打包部署

1. 在前端项目根目录执行

npm run build

注意：vue脚手架打包的项目必须在服务器上（nodejs)运行不能直接双击运行

2. 在打包之后项目中出现dist目录，dist目录就是vue脚手架生产目录或者说是直接部署目录

3. 将dist目录放在springboot项目里的static下

4. 将dist/index.html的scipt地址

<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.af5bb4aa014b023afb65.js></script>
<script type=text/javascript src=/static/js/app.a87df335f47955d44d6f.js></script>

都改为，添加/dist/

<script type=text/javascript src=/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/dist/static/js/vendor.af5bb4aa014b023afb65.js></script>
<script type=text/javascript src=/dist/static/js/app.a87df335f47955d44d6f.js></script>

5.在浏览器输入以下地址访问

localhost:8091/dist/index.html