记第一次前后端分离

最新推荐文章于 2022-02-23 16:10:42 发布

学不会_

最新推荐文章于 2022-02-23 16:10:42 发布

阅读量93

点赞数

分类专栏： JAVAWEB

本文链接：https://blog.csdn.net/CSDNkai/article/details/113759182

版权

JAVAWEB 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

SpringBoot + Vue

后端

spring:
  datasource:
    url: jdbc:mysql://localhost:3307/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath:dao/*.xml
  type-aliases-package: com.example.entity
server:
  port: 8181

跨域解决

package com.example.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
               .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPtIONS")
               .allowCredentials(false)
               .allowedHeaders("*");
   }
}

前端

<template>
<div>
  <table>
    <tr>
      <td>编号</td>
      <td>图书名称</td>
      <td>作者</td>
    </tr>
    <tr v-for="item in books">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.author}}</td>
    </tr>
  </table>
</div>

</template>

<script>
export default {
  name: "Book",
  data(){
    return {
      books: [
        {
          id: 1,
          name: 'java',
          author: 'zhangsan'
        }
      ]
    }
  },created() {
    const _book = this;
    axios.get('http://localhost:8181/book/findAll').then(function (resp) {
        _book.books = resp.data
    })
  }
}
</script>

<style scoped>

</style>

结合ElementUI

安装插件
在这里插入图片描述
新建一个Index.vue作为主入口

<template>
  <el-container style="height: 600px; border: 1px solid #eee">
    <!--左侧菜单-->
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!--左侧菜单内容-->

      <el-menu router :default-openeds="['0','1']">
        <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
          <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
          <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path" :class="$route.path==item2.path?'is-active':'' ">{{item2.name}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>
  <el-main>
    <router-view></router-view>
  </el-main>

    </el-container>
  </el-container>

</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>

安装router，在index.js配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import PageOne from "@/views/PageOne";
import PageTwo from "@/views/PageTwo";
import pageThree from "@/views/pageThree";
import pageFour from "@/views/pageFour";
import Index from "@/views/Index";
import App from "@/App";


Vue.use(VueRouter)

const routes = [

  {
    path: "/",
    name: "图书管理",
    component: Index,
    redirect:"/pageOne",
    children: [

      {
        path: "/pageOne",
        name: "查询书籍",
        component: PageOne
      },
      {
        path: "/pageTwo",
        name: "添加书籍",
        component: PageTwo

      },
      {
        path: "/pageThree",
        name: "修改书籍",
        component: pageThree
      },
      {
        path: "/pageFour",
        name: "删除书籍",
        component: pageFour

      }
    ]
  },


]

const router = new VueRouter({
  routes
})

export default router

查询页面

pageOne

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import PageOne from "@/views/PageOne";
import PageTwo from "@/views/PageTwo";
import pageThree from "@/views/pageThree";
import pageFour from "@/views/pageFour";
import Index from "@/views/Index";
import App from "@/App";


Vue.use(VueRouter)

const routes = [

  {
    path: "/",
    name: "图书管理",
    component: Index,
    redirect:"/pageOne",
    children: [

      {
        path: "/pageOne",
        name: "查询书籍",
        component: PageOne
      },
      {
        path: "/pageTwo",
        name: "添加书籍",
        component: PageTwo

      },
      {
        path: "/pageThree",
        name: "修改书籍",
        component: pageThree
      },
      {
        path: "/pageFour",
        name: "删除书籍",
        component: pageFour

      }
    ]
  },


]

const router = new VueRouter({
  routes
})

export default router

添加

    @PostMapping("add")
    public String add(@RequestBody Book book) {

        int add = this.bookService.add(book);
        if (add == 1){
            return "success";
        }else {
            return "error";
        }


    }

    <!--添加前三项-->
    <insert id="add" parameterType="Book">
        insert into library.book(name, author)
        values (#{name}, #{author})
    </insert>

<template>
<el-form style="width: 45% "  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

<el-form-item label="书名" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
</el-form-item>
 <el-form-item label="作者" prop="author">
   <el-input v-model="ruleForm.author"></el-input>
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
   <el-button @click="resetForm('ruleForm')">取消</el-button>
 </el-form-item>
</el-form>
</template>
<script>
export default {
 data() {
   return {
     ruleForm: {
       name: '',
       author: '',

     },
     //校验功能
     rules: {
       name: [
         { required: true, message: '请输入书名', trigger: 'blur' },
         { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
       ],
       author: [
         { required: true, message: '请输入作者', trigger: 'change' }
       ],

     }
   };
 },
 methods: {
   submitForm(formName) {
     const _this = this
     this.$refs[formName].validate((valid) => {
       if (valid) {
         axios.post('http://localhost:8181/book/add',this.ruleForm).then(function (resp){
           if (resp.data == 'success'){
             _this.$message("添加成功")
             _this.$router.push('/pageOne')
           }
         })
       } else {
         console.log('error submit!!');
         return false;
       }
     });
   },
   resetForm(formName) {
     this.$refs[formName].resetFields();
   }
 }
}
</script>


<style scoped>

</style>

修改

点击查询页面中的修改按钮，跳转到修改页面，此时应该是带着数据“ row.id ",这里的逻辑是，在查询页面，先通过后台的通过Id查询，这里的id通过pageOne传递到pageThree，然后pageThree通过axios传递参数到后台查询，并展示到前台。

<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>

传递到修改页面

 methods: {
    handleClick(row) {
      this.$router.push({
        path: '/pageThree',
        query: {
          id:row.id
        }
      })
    }

pageThree接收并传递到后台，接收后台数据

  created() {

    const _this = this
    axios.get('http://localhost:8181/book/queryById/'+this.$route.query.id).then(function (resp){
        _this.ruleForm = resp.data
    })

在这里插入图片描述
然后是修改，首先后台定义修改方法

    /*通过id修改*/
    @PostMapping("update")
    public String update(@RequestBody Book book){
        Book book1 =  bookService.update(book);
        if (book1 != null){
            return "success";
        }else {
            return "error";
        }
    }

点击修改按钮，携带数据传递到后台方法并返回数据，再返回到查询页面

    submitForm(formName) {
     const _this = this
     this.$refs[formName].validate((valid) => {
       if (valid) {
         axios.post('http://localhost:8181/book/update',this.ruleForm).then(function (resp){
           if (resp.data == 'success'){
             _this.$message("修改成功")
             _this.$router.push('/pageOne')
           }
         })
       } else {
         console.log('error submit!!');
         return false;
       }
     });
   }

删除

deleteMapping


   /*删除*/
   @DeleteMapping("delete/{id}")
   public void delete(@PathVariable("id") Integer id){
       bookService.deleteById(id);
   }

前台处理

    deleteClick(row) {
     const _this = this
     this.$confirm('是否确定删除<'+row.name+'>?','提示',{
       confirmButtonText:'确定',
       cancelButtonText:'取消',
       type:"warning"
     }).then(() => {
       axios.delete('http://localhost:8181/book/delete/'+row.id).then(function (){
         _this.$message("删除成功",'消息',{
           confirmButtonText: "确定",
         }),
             //自动刷新页面
             window.location.reload()

       })
     })

   }

学不会_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记第一次前后端分离

SpringBoot + Vue后端spring: datasource: url: jdbc:mysql://localhost:3307/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root password: root driver-class-name: com.mysql.cj.jdbc.Drivermybati
复制链接

扫一扫