问卷调查项目的实现以及收获
这一次是本团队的二轮考核项目，相较于一轮考核，两者之间的复杂程度跨度巨大，对我而言，前端独立实现一个网页可能不会遇到很多问题，但是只有前端实现某一个项目是无法实现更多更复杂的功能的，因此你需要和后端合力实现，起初我和后端的理解都认为是他给接口，我渲染的两点一线的操作，直到后面，我错了，由于沟通不当导致后期渲染出现了阻碍，严重影响了实现时常，多花了一个星期处理这件事。
前期准备
前期我们需要有element-ui、axios以及vue-router作为主要的插件，用来实现页面内容、页面结构、页面与页面之间的切换以及与后台交互，本次的项目是基于Vue.js，通过vue-cli（脚手架）搭建的一个简单的项目，主要功能就是提供一个问卷调查，实现基本的判断，实现前后端交互，体验前后端交互的技巧与困难。
vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化的、基于组件的路由配置；路由参数、查询、通配符；基于 Vue.js 过渡系统的视图过渡效果；细粒度的导航控制；带有自动激活的 CSS class 的链接；HTML5 历史模式或 hash 模式，在 IE9 中自动降级；自定义的滚动条行为。
本次的项目页面与页面之间的联系也是通过vue-router来实现的
- 问卷部分
- Login 登陆界面
- Personal_info 个人信息界面
- Course_cm 课程评价界面
- Graduation_cm 毕业评价界面
- Suggestion 建议界面
- 后台部分
- back 后台管理界面
- info 后台个人信息界面
routes: [
{
path: '/Login',
component: Login
},
{
path: '/Personal_info',
component: Personal_info
},
{
path: '/Graduation_cm',
component: Graduation_cm
},
{
path: '/Course_cm',
component: Course_cm
},
{
path: '/Suggestion',
component: Suggestion
},
{
path: '/back',
name: back,
component: back,
},
{
path: '/info',
name: info,
component: info,
query:{
stuid:undefined
}
},
//优先显示的界面
{
path: '/',
redirect:'/Login'
},
]
Element-UI组件库
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，整个ui风格简约，很实用，使用demo组件可以快速实现体验交互细节，快速开发
本次的页面设计主要使用了element-ui的布局容器来实现对页面的整体布局，通过它提供的各类选项框来对问卷选项进行设置，配合Vue.js中的v-for的指令可以实现对一套完整的问卷题目进行动态生成，即后台如果有需要，则可以修改其中的对象，达到增删题目或者改查题目的需求。
axios http库
Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。
功能：
1.从浏览器中创建 XMLHttpRequest
2.从 node.js 中创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防止 XSRF 攻击
其中我主要用到了，post和get请求
1.post请求
postHandle(object2){
var test2 = object2
let data = {ename:test2.ename, requireid:test2.requireid,
reqsmid:test2.reqsmid, stuid: Vue.prototype.$stuid} axios.post('http://192.168.2.67:8080/Graduation/text/doRequirement.do',data,{})
console.log(test2)
},
2.get请求
allGet() {
//从后端获取数据
var stuid = this.$route.query.stuid
var that = this;
axios.get("http://192.168.2.67:8080/Graduation/text/all.do",{
params:{
stuid
}
})
.then(function (response) {
that.tecour = response.data.tecour
that.tereq = response.data.tereq
that.students = response.data.students
that.suggest = response.data.suggest
})
.then(res => console.log(res))
.catch(err => console.log(err))
},
以上的内容后面再细说
实现过程
关键的选项渲染部分
此处是毕业评价的部分，无需绘制表格
<div id="Graduation_cm_form">
<span v-for="b_title in requirements" class="Graduation_span">
<h2>毕业要求：{{b_title.requireid}}</h2>
{{b_title.name}}
<div v-for="l_title in b_title.requirementsmall">
<span class="Graduation_span">
{{l_title.reqsmid}}{{l_title.requirename}}
<div class="Graduation_cm_juz">
<el-radio-group style="flex-direction: unset" v-model="l_title.ename" @change="postHandle(l_title)">
<el-radio label="完全达到" class="answer-1">完全达到</el-radio>
<el-radio label="达到" class="answer-1">达到</el-radio>
<el-radio label="基本达到" class="answer-1">基本达到</el-radio>
<el-radio label="基本未达到" class="answer-1">基本未达到</el-radio>
<el-radio label="完全未达到" class="answer-1">完全未达到</el-radio>
</el-radio-group>
</div>
</span>
</div>
</span>
</div>
其中由于使用的是双重循环来实现对大题目和小题目的渲染，因此数据结构必须是嵌套的关系，由于开始的时候和后端搭档沟通不当，导致数据结构是分层关系，我所学的技能不能支持我进行对json格式进行二次处理，因此就让后端搭档帮忙重构了一次数据结构，也是这一部分导致了后期她的工作量攀升，我感到十分抱歉。
部分数据结构
data(){
return{
stuid:Vue.prototype.$stuid,
requirements:[
{
name: undefined,
requireid:undefined,
requirementsmall:[
{
requireid:undefined,
reqsmid:undefined,
requirename:undefined,
ename:undefined
}
]
}
]
}
其实后来发现，并不需要后端给我每个题目的id和小题目的id，可以通过先前在上文贴出来的代码中的index进行输出序号，只需要让index++就好
<span v-for="(tereq,index) in tereq" :key="index" class="Graduation_span">
<h2>毕业要求：{{index+1}}</h2>
{{tereq.name}}
<div v-for="(l_title,index1) in tereq.requirename" :key="index1">
<span class="Graduation_span">
{{index+1}}.{{index1+1}}{{l_title.require}}
本来想通过vue-router来实现单页面中的选项卡的切换，但是发现element-ui有现成的组件，因此就用了element-ui的组件来实现，以下是info的例子
<el-container id="back-box1">
<el-header id="back-box2">
<span>后台管理界面</span>
</el-header>
<div id="info_box">
<el-tabs>
<el-tab-pane label="个人信息" name="first">
<div class="personal_input">
//
</div>
</el-tab-pane>
<el-tab-pane label="毕业评价" name="second">
<div id="Graduation_cm_form">
<span v-for="(tereq,index) in tereq" :key="index" class="Graduation_span">
<h2>毕业要求：{{index+1}}</h2>
{{tereq.name}}
<div v-for="(l_title,index1) in tereq.requirename" :key="index1">
<span class="Graduation_span">
{{index+1}}.{{index1+1}}{{l_title.require}}
<div class="Graduation_cm_juz">
<el-radio-group style="flex-direction: unset" v-model="l_title.ename">
<el-radio label="完全达到" class="answer-1">完全达到</el-radio>
<el-radio label="达到" class="answer-1">达到</el-radio>
<el-radio label="基本达到" class="answer-1">基本达到</el-radio>
<el-radio label="基本未达到" class="answer-1">基本未达到</el-radio>
<el-radio label="完全未达到" class="answer-1">完全未达到</el-radio>
</el-radio-group>
</div>
</span>
</div>
</span>
</div>
</el-tab-pane>
<el-tab-pane label="课程评价" name="third">
<div id="Course_cm_form">
<div id="Course_form_tital">
<span>课程类型</span>
<span>课程名称</span>
<span>支撑程度</span>
</div>
<div id="Course_form_component">
<ul v-for="(tecour,index) in tecour" :key="index">
<div class="leftpart">
<span>{{tecour.disname}}</span>
</div>
<li v-for="(i,index1) in tecour.coursename" :key="index1">
<div class="rightpart">
<div class="subject">
<div>
{{i.cours}}
</div>
</div>
<div class="selectlist">
<el-radio-group v-model="i.assname">
<el-radio class="selectRadio" label="非常高">非常高</el-radio>
<el-radio class="selectRadio" label="较高">较高</el-radio>
<el-radio class="selectRadio" label="一般">一般</el-radio>
<el-radio class="selectRadio" label="较低">较低</el-radio>
<el-radio class="selectRadio" label="非常低">非常低</el-radio>
</el-radio-group>
</div>
</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="建议" name="fourth">
<div class="suggestion">
<h1>四、建议</h1>
<el-input type="textarea" :rows="10" placeholder="请输入内容" id="textarea" v-model="suggest.sugname"
maxlength="500"></el-input>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-container>
总结
通过这一次的考核，基本熟知了element-ui的布局容器的使用方法，以及别的组件的使用技巧，重点是明白了自己的不足，由于没有学会axios的封装以及封装后的接口正确的使用方式，导致后期对接口的维护比较繁琐，每一次的重建都要自己主动去到每一个页面修改代码，而不是直接修改接口文件的代码，此外，和后端的沟通十分重要，在前期有着合理的项目安排以及设计，对后期的实现减少遇阻的可能性。
值得注意
前后端交互的过程免不了遇到跨域请求的问题，后端只需要再加上一个注解，允许跨域请求，前端就可以正常访问了，如果出现400之类的报错，请检查自己的数据结构是否和后端不匹配。
扫一扫
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
