vue+springboot 前后分离简单crud的基础流程

vuedemo

vue create 项目名

创建一个空的vue2的项目

交由git托管

在文件夹中使用git init 来交给git管理

然后连接远程仓库

$ git remote add origin    [email protected]:kang369/company-test.git

git remote add origin 仓库地址

git pull 拉取仓库中已经存在的代码

拉取的时候可能会发生错误可以使用

$ $git pull origin master --allow-unrelated-histories

拉取远程仓库中的所有代码

然后将所有的文件添加到缓存区，

git add 文件

然后提交到本地仓库 git commit -m“注释”

然后将本地仓库中的数据push到远程仓库

git push -u origin master

此时就可以在远程仓库中看到提交的代码了

编写vuedemo

需要使用的插件

vuex 用于跨组件信息传递， npm i --save vuex@3 ————放在store文件夹下

elm插件，前端元素 npm i element-ui -S

vuerouter，路由跳转 npm i [email protected] ————放在router文件夹下

数据方面先由自己伪造一些

axios，跨服务器获取数据 npm install axios

然后创建各个组件所需要使用的文件夹

首先配置路由

//引入vue核心
import Vue from "vue";
//引入路由
import VueRouter from "vue-router";
//将路由组件添加到vue核心中
Vue.use(VueRouter)

const router= new VueRouter({
    mode:'history',
    //routes存储的数据对象是一个数组，其中的存储元素类型为对象
    routes:[
        {
        //    
        }
    ]
})

//暴露
export default router

将编写好的路由配置文件添加到main.js这个核心配置中，

import Vue from 'vue'
import App from './App.vue'
//导入路由的配置文件
import router from "@/router";

Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  //将路由注册到核心配置文件中
  router
}).$mount('#app')

配置vuex

//引入vue核心
import Vue from "vue";
//引入vuex
import vuex from "Vuex";

Vue.use(vuex)

//创建vuex的四大核心

const state={
//        用于存储数据，类似于数据库
};
const actions={
//    用于调用mutations中的方法，类似于service
};
const mutations={
//    真正操作state中数据的地方，类似于mapper
};
const getters={
//    传递比较复杂的需要计算处理之后的数据
}

//创建并暴露一个store实例
new vuex.Store({
    state,
    actions,
    mutations,
    getters
})

安装elmui

先使用npm安装npm i element-ui -S

然后在main.js中 进行配置，然后在使用全局引用

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)；
Vue.use(Element, { size: 'small', zIndex: 3000 });

安装axios

使用axios进行跨服务器读取数据

即前端页面和后端数据存储在不同的服务器上,安装之后需要在main.js中，引入axios

import axios from "axios";
//设置全局的axios
Vue.prototype.$axios = axios
//设置基本路径
axios.defaults.baseURL='/api'

然后在vue.config.js中添加代理服务器，即受到以某个开头的链接的时候，就走代理服务器

devServer: {
  proxy: {
    '/api': {
        // 匹配所有以 '/api1'开头的请求路径
      target: 'http://localhost:8081',// 代理目标的基础路径
      changeOrigin: true, //开启代理服务器
      pathRewrite: {'^/api': ''} //将链接中的/api重写
    }
  }
}

前后端分离的CRUD

在组件中的使用

注意这里使用that是为了避免一种加载的异常

列表的加载

  created() {
        const that=this
        axios.get('/user/list').then(res=>{
            that.tableData1=res.data;
        }).catch(function (error) {
            console.log(error)
        })
    },
}

这样就会将该链接转发到指定的代理服务器，通过then回调，使用进而将后端返回的数据存储在data中的对应数据

添加

通过axios发送带有带有参数的请求到后端

	
		data(){
            return{
                user:{
                    email:'',
                    username:'',
                    password:''
                }
            }
        },

addUser(){
    const that=this;
    this.$axios.post('/user/add',that.user).then(res=>{//这里是直接将user实体作为参数进行传递
        alert(res.data)
        this.$router.push('/')  //点击过弹窗之后，跳转到指定的页面
    }),err=>{
        console.log(err)
    }
}

当输入添加的实体新不包含id的时候，需要注意，

需要在后端的id上添加一个注解，让其自动的增加，以此来保证数据的完整性

@TableId(value = "id",type = IdType.AUTO)
private String id;

删除

当前端只传递回来一个值时，如果使用一个实体来接收的话，可能报415错误，这时就需要使用如下接收方式

//前端
 <template slot-scope="scope">
<el-button
             size="mini"
             type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 </el-table-column>
 
      handleDelete(index, row) {
     //这里的index是当前按钮所处记录的索引值，row是获取当前按钮所在的记录的详细数据
                console.log(index);
                const userid=row.id;
                alert(userid)
                    //这里只需要传递一个id返回给后端即可
                axios.post('/user/delete',userid).then(res=>{
                    alert(res.data)
                    this.$router.push('/')
                }),err=>{
                    console.log(err)
                }
            }
//后端

@PostMapping("/delete")
public String deleteUser(@RequestBody String id){
    System.out.println("+++++++++++++++++"+id);
    boolean b = userService.removeById(id);
    if (b){
        return new String("删除成功");
    }else {
        return new String("删除失败");
    }
}

修改

需要携带数据，跳转到新的页面，这就涉及到了路由带参跳转

命名路由
{
      name: "editCom",
      path: '/edit',
      component: editCom
}


带参的时候可以采用命名路由跳转传参，————params必须搭配命名路由使用
// 命名的路由   params相当与发送了一次post请求，请求参数则不会显示，并且刷新页面之后参数会消失
this.$router.push({ name:'Login', params: { id: this.id } )

通过this.$router.push（参数）

push的后边可以跟对象，也可以跟字符串，

//按钮页


<el-button
             type="primary"
             size="mini"
             @click="handleEdit(scope.$index, scope.row)">  编辑	</el-button>

methods：{
    
handleEdit(index, row) {
    console.log(index, row);
    console.log(row)
	//这里采用push（对象的形式）来传递参数
    this.$router.push({name:'editCom',params:{id:row.id,email:row.email,password:row.password,username:row.username}})
},
}

//信息回显——修改页面
<div>
        id：  <el-input v-model="user.id" placeholder="email"></el-input>
        请输入邮箱：  <el-input v-model="user.email" placeholder="email"></el-input>
        请输入用户名：  <el-input v-model="user.username" placeholder="username"></el-input>
        请输入密码：  <el-input v-model="user.password" placeholder="password"></el-input>
        <el-row>
            <el-button type="primary" @click="edit">更新</el-button>
        </el-row>
    </div>
		//这里利用钩子，created阶段可以读取操作到data中的数据 利用$route或链接中的参数
	created() {
            const that=this
            that.user.id=this.$route.params.id
            that.user.email=this.$route.params.email
            that.user.username=this.$route.params.username
            that.user.password=this.$route.params.password
   },

查找

<el-input v-model="searchData" placeholder="请输入id进行查询"></el-input>
<el-button
        type="primary"
        size="mini"
        @click="searchM(searchData)">查找</el-button>
 data() {
            return {   
                tableData1: [
                    {
                        id:1,
                        email:'[email protected]',
                        username:'jk',
                        password:'123'
                    }
                ]   
            }
        },

searchM(item){   
	axios.post('/user/search',item).then(res=>{
     //注意后端返回的数据要是一个集合，然后将请求响应的数据赋值给
       this.tableData1=res.data
	})
},    

后端代码

@PostMapping("/search")
public List<User> searchUser(@RequestBody String id){
    User user = userService.getById(id);
    LinkedList<User> users = new LinkedList<>();
    if (user!=null){
         users.add(user);
         return users;
}

关于VUE报错

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

：重复点击导航时，控制台出现报错 ，虽然不影响功能使用，但也不能坐视不管。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s8tSz7Xo-1659409832959)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20220704105853291.png)]

解决方案：

方案一：只需在 router 文件夹下，添加如下代码：

// src/router/index.js
Vue.use(Router)
const router = new Router({
  routes
})
 
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

Required request body is missing: public错误

在后端使用Requestbody时需要使用post提交，不能使用get提交，

如果使用get提交就会出现这个问题，修改为使用post提交即可

解决方案：

方案一：只需在 router 文件夹下，添加如下代码：

// src/router/index.js
Vue.use(Router)
const router = new Router({
  routes
})
 
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

Required request body is missing: public错误

在后端使用Requestbody时需要使用post提交，不能使用get提交，

如果使用get提交就会出现这个问题，修改为使用post提交即可