海创软件组-20200628-Vue学习过程中的记录

问卷调查项目的实现以及收获

这一次是本团队的二轮考核项目，相较于一轮考核，两者之间的复杂程度跨度巨大，对我而言，前端独立实现一个网页可能不会遇到很多问题，但是只有前端实现某一个项目是无法实现更多更复杂的功能的，因此你需要和后端合力实现，起初我和后端的理解都认为是他给接口，我渲染的两点一线的操作，直到后面，我错了，由于沟通不当导致后期渲染出现了阻碍，严重影响了实现时常，多花了一个星期处理这件事。

前期准备

前期我们需要有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之类的报错，请检查自己的数据结构是否和后端不匹配。