springboot+vue

springboot+vue总结

今天来总结一下前几天学的springboot+vue

首先呢vue是用来绘制前段界面的类似于html，springboot是后端数据处理，这两个将前后端分离，只需要留出对应接口就可以以实现基于端口的前后数据互通，当然这个数据互通我是用的是传统的axios请求

首先是前端的绘制，一般情况下都会有表单，表单里面有输入框，按钮等等，对文本框有表单验证和数据绑定，对按钮有点击事件，首先是对文本框的数据绑定，方法就是在表单的设置model="***"，这相当于给定了

一个json花括号外面的名称，然后在item里设置prop="****",这相当于键名，然后在input框里设置v-model="****",这相当于对应prop键的value名。r然后是表单校验，在表单里设置rules="****",然后在脚本里的对应rules里面添加required:true,message:'not null'，trigger:'blur'

按钮的点击事件设为方法methods：{}的内容，如果要提交表单的话就按如下格式先把绑定的参数保存到一个对象里，然后向后端发送这个对象，发送的位置通过设置一个api包来实现

首先创建一个包，报名设为api，在api下新建一个book.js，在这个js下写函数（可以理解为前后端的中间人）格式如下

在methods设置参数后调用写好的中间人函数就能发送数据了。

<template>
  <h3 class="dialog-head">新增书本信息</h3>
  <div class="mod-body">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="书本图片" prop="picture">
        <el-upload
            class="upload-demo"
            action="http://localhost:8569/book/upload"
            :on-preview="handlePreview"
            :on-success="handleAvatarSuccess"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="书名" prop="name">
        <el-input v-model="dataForm.name" type="input" placeholder="请填写书名" style="width:350px"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="auth">
        <el-input v-model="dataForm.auth" type="input"  placeholder="请填写作者姓名" style="width:350px"></el-input>
      </el-form-item>
      <el-form-item label="介绍" prop="introduce">
        <el-input v-model="dataForm.introduce" type="textarea" :rows="2" placeholder="请填写介绍"></el-input>
      </el-form-item>
      <el-form-item label="定价" prop="price">
        <el-input v-model="dataForm.price" type="input" placeholder="请填写定价" style="width:350px"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publish">
        <el-input v-model="dataForm.publish" type="input" placeholder="请填写出版社" ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dataFormSubmit()">确定添加</el-button>
              </span>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {addBookInfo} from '@/api/book'
export default {
  //import 引入的组件  需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
      // eslint-disable-next-line no-unused-vars
    var validateContent = (rule, value, callback) => {
      if (!this.dataForm.content && !/\S/.test(value)) {
        callback(new Error('内容不能为空'))
      } else {
        callback()
      }
    }
    //这里存放数据
    return {
      fileList:[],
      param:{},
      dataList:[],
      dataForm:{
        price:'',
        name:'',
        picture:'',
        auth:'',
        publish:'',
        introduce:'',
      },
      pickerOptions: {},

      dataRule:{
        name:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        auth:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        introduce:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        publish:[
          {required:true,message:'不能为空',trigger:'blur'}
        ],
        price:[
          {required:true,message:'不能为空',trigger:'blur'}
        ]
      }
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    //表单提交
    dataFormSubmit(){
      this.$refs['dataForm'].validate((valid) => {
        if(valid){
          console.log("进入dataFormSubmit方法了");
          this.param = {
            'picture':this.dataForm.picture,
            'name':this.dataForm.name,
            'introduce':this.dataForm.introduce,
            'publish':this.dataForm.publish,
            'auth':this.dataForm.auth,
            'price':this.dataForm.price,
          }
          addBookInfo(this.param).then((resp)=>{
            console.log("调用addBookInfo接口返回的数据是:",resp.data);
            const {code,message} = resp.data
            if(code ==='00000'){
              this.$message({
                message:'操作成功',
                type:'success',
                duration:1500,
                onClose:()=>{
                  this.dataForm={};
                  this.$router.push({path:'/'})
                }
              })
            }
          }).catch((error)=>{
            console.log(error);
          });
        }
      })
    },

    //上传图片
      // eslint-disable-next-line no-unused-vars
    handleRemove(file, fileList) {
      // console.log(file, fileList);
      // console.log("图片上传成功返回的访问路径是:",file.response.data);
      // console.log("此时dataForm里面picture路径是:",this.dataForm.picture);
    },
      // eslint-disable-next-line no-unused-vars
    handlePreview(file) {
      // console.log("图片上传成功返回的访问路径是:",file.response.data);
      // console.log(file);
    },
    handleAvatarSuccess(res, file) {
      console.log("图片上传成功返回的访问路径是:",file.response.data);
      this.dataForm.picture = file.response.data
      // console.log("此时dataForm里面picture路径是:",this.dataForm.picture);
    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.dialog-footer{
  margin-left: 70%;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

 

export function addBookInfo(param){
    return requset({
        url: `/book/add-one-book`,
        method: 'post',
        data:param
    })
}

import axios from 'axios'


axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: 'http://localhost:8569',
    // 超时
    timeout: 10000
})

设置好端口和就会发送数据到对应端口的后端服务