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

第一次看这个前后端分离项目的朋友，请先看上篇的后端构建
【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路由的配置