【VUE】【VUE-CLI】【bootstrap】【jeecgboot】干部任免表前端

于 2021-11-26 16:50:32 发布
阅读量635 收藏 1
点赞数 1
分类专栏： web 文章标签： apache maven java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45156425/article/details/121560313
版权

第一次看这个前后端分离项目的朋友，请先看上篇的后端构建
【jeecg boot】【PowerDesigner】使用PD创建数据库，并使用jeecg生成代码来创建一个干部任命表单

下面开始按照步骤讲解前端VUE的构建过程。
在构建前后端分离项目时，我们需要明白很重要的一点：后端代码仅仅提供接口，将所有数据的处理包装在接口内，打个比方，后端代码就相当于你们家自来水的水管，水从哪里来不用管，我们只需要将水龙头打开就好，而水龙头就相当于前端代码，我们的水龙头只需要去接上对应的水管，并且用螺丝固定就可以实现功能，前端代码也是如此，需要在后端代码的controller层中找到对应的url（也就是水管位置），才能往外传递出正确的数据

使用VUE-CLI创建一个新项目，并且命名为renmianbiao_1

如何使用VUE-CLI在cmd中创建新项目我之前博客里有说过这里就不再赘述了
【vue】如何通过vue-cli（vue脚手架）在cmd新建一个vue工程
在这里插入图片描述

打开package.json，引入我们需要使用到的一些依赖，点击运行npm install

在这里插入图片描述

接下来进入src/assets,删除用不上的logo和src/components包中的范例文件HelloWorld，同时进入src/router将index.js文件中的路由配置清空

在这里插入图片描述

进入src/main.js,完成对axios的引入

axios的作用是对网页进行通信和异步刷新，具体内容大家可以去看官方文档
axios官方文档
在这里插入图片描述

我们在项目的根目录下，即和src平级的目录下建立vue.config.js配置文件，因为我们使用了bootstrap框架，而bootstrap又依赖于jQuery，所有我们需要在配置文件里配置好jQuery的相关信息。

在这里插入图片描述

在main.js中引入bootstrap

在这里插入图片描述

在完成配置文件的配置后，我们开始编写核心页面代码

在src下建一个views包，在views包下建分别再建一个family和information包，包内分别存放干部的家庭成员信息页面（Add.vue）和干部信息页面(Show.vue)

在这里插入图片描述

在views包下再建立一个主页面index.vue,这个页面是登录系统后的首页

在这里插入图片描述

完成三个vue页面的代码,我们可以使用之前项目的css样式，再配合上html，进行快速开发

index.vue
index.vue页面需要在<router-link to="/information/show">干部信息</router-link>中配置其他两个页面的跳转信息

<template>
  <div id="container">
    <div id="top">
      <div id="logo">干部任免表</div>
    </div>

    <div id="main">

      <div id="left">
        <ul class="er">
          <li>
            <router-link to="/information/show">干部信息</router-link>
          </li>

          <li>
            <router-link to="/family/add">家庭主要成员及重要社会关系</router-link>
          </li>
        </ul>

      </div>

      <div id="right">
        <router-view/>
      </div>

    </div>


    <div id="bottom"></div>

  </div>
</template>

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




<!--css样式可以复制之前项目中的样式-->
<style scoped>
* {
  margin: 0;
  padding: 0;
}

#top, #bottom {
  clear: both;
  /*  height: auto;*/
  background: #337ab7;
  height: 80px;
}

#top #logo {
  color: #fff;
  font-size: 30px;
  font-weight:bold;
  padding: 15px 0 0 40px;
}

#main {
  margin-top: 10px;
  overflow: hidden;
}

a {
  color: #fff;
  text-decoration: none;
}

#left {
  width: 240px;
  float: left;
  height: 460px;
  padding-left: 20px;
}

#right {
  width: 800px;
  float: left;
  height: 460px;
}


.yi {
  width: 160px;
  height: 40px;
  background: #337ab7;
  color: #fff;
  margin-top: 5px;
  border-radius: 3px;
  text-align: center;
  line-height: 40px;
}

.er {
  list-style: none;
  width: 200px;
}

.er li {
  margin-top: 2px;
  text-align: center;
  background: #337aae;
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}
</style>

Show.vue

<template>
  <div class="row pre-scrollable">
    <div id="container">


      <form class="form-horizontal" @submit.prevent="add">


        <div class="form-group">
          <label class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入姓名" v-model="form.name">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">年龄</label>
          <div class="col-sm-10">
            <input type="number" class="form-control" placeholder="请输入年龄"
                   v-model="form.age">
          </div>

        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">性别</label>
          <div class="col-sm-10">
            <input type="radio" value="男" v-model="form.gender"/>男<input type="radio" value="女" v-model="form.gender"/>女
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">民族</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入民族"
                   v-model="form.race">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">籍贯</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入籍贯" v-model="form.fromwhere">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">出生地</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入出生地" v-model="form.birthplace">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">入党时间</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" v-model="form.partytime">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">参加工作时间</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" v-model="form.worktime">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">健康状况</label>
          <div class="col-sm-10">
            <input type="radio" value="优秀" v-model="form.hlthcdt"/>优秀
            <input type="radio" value="良好" v-model="form.hlthcdt"/>良好
            <input type="radio" value="合格" v-model="form.hlthcdt"/>合格
            <input type="radio" value="不合格" v-model="form.hlthcdt"/>不合格
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">专业技术职务</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入专业技术职务" v-model="form.occup">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">熟悉专业有何专长</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入专业和专长" v-model="form.goodat">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">学位学历</label>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">全日制教育</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入获得学位" v-model="form.goodat">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">毕业院校及专业</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入毕业院校及专业" v-model="form.goodat">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">在职教育</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入获得学位" v-model="form.goodat">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">毕业院校及专业</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入毕业院校及专业" v-model="form.goodat">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">现任职务</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入现任职务" v-model="form.nowoccup">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">拟任职务</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入拟任职务" v-model="form.fuoccup">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">拟免职务</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入拟免职务" v-model="form.funoccup">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">个人简历</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入个人简历" v-model="form.cv">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">出生年月</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" placeholder="请输入出生年月" v-model="form.birthdate">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">填表时间</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" placeholder="请输入填表时间" v-model="form.filltime">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">填表人</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入填表人" v-model="form.fillpeople">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">呈报单位</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入呈报单位" v-model="form.department">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">计算年龄时间</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入计算年龄时间" v-model="form.calagetime">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">奖惩情况</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入奖惩情况" v-model="form.priceinfo">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">年度考核</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入年度考核" v-model="form.annualresult">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">任免理由</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入任免理由" v-model="form.occupreason">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">创建日期</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" placeholder="请输入创建日期" v-model="form.create_time">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">创建人</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入创建人" v-model="form.create_by">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">修改日期</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" placeholder="请输入修改日期" v-model="form.update_time">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">更新人</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入更新人" v-model="form.update_by">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">所属部门</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入所属部门" v-model="form.sys_org_code">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">身份证号</label>
          <div class="col-sm-10">
            <input type="int" class="form-control" placeholder="请输入身份证号" v-model="form.person_id">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </div>


      </form>


    </div>
  </div>
</template>

<script>
/*导入Index模块*/
import Index from "@/views/Index";

export default {
  name: "Add",
  components: {Index},
  data() {
    return {
      form: {
        name: null,
        age: null,
        gender: null,
        race: null,
        fromwhere: null,
        birthplace: null,
        partytime: null,
        worktime: null,
        hlthcdt: null,
        occup: null,
        goodat: null,
        ftimedu: null,
        graduni: null,
        ptimedu: null,
        nowoccup: null,
        fuoccup: null,
        funoccup: null,
        cv: null,
        birthdate: null,
        filltime: null,
        fillpeople: null,
        department: null,
        calagetime: null,
        priceinfo: null,
        annualresult: null,
        occupreason: null,
        create_time: null,
        create_by: null,
        update_time: null,
        update_by: null,
        sys_org_code: null,
        person_id: null,

      },
    }
  },
  methods: {

    add: function () {
      this.axios.post('http://localhost:8080/jeecg-boot/renmianbiao/people/add', this.form)
        .then(function (res) {
          //将js对象转化成字符串输出成弹窗信息
          alert(JSON.stringify(res));
          if (res.data.success == true) {
            this.$router.push({name: "InformationShow"});
          } else {
            alert(res.data.message);
          }
        }.bind(this))
    },

  },

}
</script>

<style scoped>
#container {
  width: 600px;
  margin: 10px auto;

}
</style>

Add.vue

<template>
  <div class="row pre-scrollable">
    <div id="container">

      <form class="form-horizontal" @submit.prevent="add">


        <div class="form-group">
          <label class="col-sm-2 control-label">姓名</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入姓名" v-model="form.name">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">出生日期</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" v-model="form.birthdate">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">称谓</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入称谓" v-model="form.relation">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">政治面貌</label>
          <div class="col-sm-10">
            <input type="radio" value="中共党员" v-model="form.politface"/>中共党员
            <input type="radio" value="共青团员" v-model="form.politface"/>共青团员
            <input type="radio" value="群众" v-model="form.politface"/>群众
            <input type="radio" value="其他党派人士" v-model="form.politface"/>其他党派人士

          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">工作单位及职务</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入工作单位及职务"v-model="form.occupy">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">创建日期</label>
          <div class="col-sm-10">
            <input type="date" class="form-control"v-model="form.create_time">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">创建人</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入创建人" v-model="form.create_by">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">修改日期</label>
          <div class="col-sm-10">
            <input type="date" class="form-control"v-model="form.update_time">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">更新人</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入更新人" v-model="form.update_by">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">所属部门</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="请输入所属部门" v-model="form.sys_org_code">
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">身份证号</label>
          <div class="col-sm-10">
            <input type="int" class="form-control" placeholder="请输入身份证号" v-model="form.family_id">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </div>


      </form>

    </div>
  </div>
</template>

<script>
export default {
  name: "Add",
  data() {
    return {
      form: {
        name: null,
        birthdate: null,
        relation: null,
        politface: null,
        occupy: null,
        create_time: null,
        create_by: null,
        update_time: null,
        update_by: null,
        sys_org_code: null,
        family_id: null,
        dep: {
          id: null
        }
      },
    }
  },
  methods: {
    add: function () {
      this.axios.post('http://localhost:8080/jeecg-boot/renmianbiao/family/add', this.form)
        .then(function (res) {
          alert(JSON.stringify(res));
          if (res.data.success == true) {
            this.$router.push({name: "FamilyAdd"})
          } else {
            alert(res.data.message);
          }
        }.bind(this))
    },

  },
}
</script>

<style scoped>
#container {
  width: 600px;
  margin: 10px auto;
}
</style>

注意： 因为show和add页面需要和后端做交互，将数据进行持久化，所以我们需要将后端代码跑起来，在swagger接口文档中找到我们需要用到的方法对应的url，在前端提交表单后再通过url将表单传递到后端
在这里插入图片描述
在每个需要和后端做数据交换的vue文件中都需要写
在这里插入图片描述

Add.vue的操作方式相同，这里不再赘述

通过配置反向代理服务器解决跨域问题

在vue.config.js配置文件中，通过ProxyTable配置反向代理，使浏览器将axios发送的带’api’前缀的请求发送到前端代理服务器，再通过前端代理服务器发送给后端服务器，避免了跨域无法访问的问题。
在这里插入图片描述

完成router包下index.js路由的配置

在这里插入图片描述

蛋蒸
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蛋蒸

大哥大嫂过年好，打个赏再走叭

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值