山东大学软件学院创新实训——飞讯（十二）

目录

一.目标概述

二.功能设计与实现

问卷首页

（1）界面设计

（2）功能实现

问卷详情页

（1）界面设计

 （2）功能实现

问卷二维码

（1）界面设计

 （2）功能实现

回答详情

（1）界面设计

 （2）功能实现

可视化

（1）界面设计

 （2）功能实现

三.总结

---

一.目标概述

接下来，我们需要完成问卷功能，对于问卷功能，我负责问卷的展示部分，以及问卷整体的后端，另外一位同学负责问卷的创建和回答的前端界面。因此，本次的目标是完成问卷的展示前端和后端功能。

二.功能设计与实现

问卷首页

（1）界面设计

问卷首页可以查看已经创建的问卷和可以创建问卷

（2）功能实现

主要是对问卷表进行增加和查询

@RequestMapping("/findQuestionaire")
    public JsonResult<Object> findQuestionaire(@RequestBody Map<String,String> map){
        String userid = map.get("userid");
        List<Questionaire> questionaireList = questionaireService.findQuestionaire(userid);
        JsonResult<Object> jsonResult = new JsonResult<Object>("200", (Object) questionaireList,"获取问卷成功");
        //System.out.println(jsonResult);
        return jsonResult;
    }

    @RequestMapping("/findQuestionnairename")
    public JsonResult<Object> findQuestionnairename(@RequestBody Map<String,String> map){
        int questionnaireId = Integer.parseInt(map.get("questionnaireId"));
        List<Questionaire> questionaireList = questionaireService.findQuestionairename(questionnaireId);
        JsonResult<Object> jsonResult = new JsonResult<Object>("200", (Object) questionaireList,"获取问卷成功");
        //System.out.println(jsonResult);
        return jsonResult;
    }

@RequestMapping("/createQuestionaire")
    public JsonResult<Object> createQuestionaire(@RequestBody Map<String,String> map){
        if (!map.containsKey("userid") || map.get("userid").equals("") || map.get("userid") == null){
            return new JsonResult<Object>("400","缺少userid");
        }
        if (!map.containsKey("name") || map.get("name").equals("") || map.get("name") == null){
            return new JsonResult<Object>("400","缺少name");
        }
        String userid = map.get("userid");
        String name = map.get("name");



        int res = questionaireService.createQuestionaire(userid,name);
        if (res == ResCondition.questionnare_success){
            JsonResult<Object> jsonResult = new JsonResult<Object>("200",(Object) name,"创建问卷成功");
            return jsonResult;
        }
        else {
            JsonResult<Object> jsonResult = new JsonResult<Object>("400",(Object) name,"创建问卷失败");
            return jsonResult;
        }
    }

问卷详情页

（1）界面设计

可以查看问卷的内容

 （2）功能实现

根据问卷id查询相应的问题

@RequestMapping("/findQuestion")
    public JsonResult<Object> findQuestion(@RequestBody Map<String,String> map){
        String questionnaireIds = map.get("questionnaireId");
        System.out.println(questionnaireIds);
        int questionnaireId = Integer.parseInt(questionnaireIds);
        List<Question> questionList = questionaireService.findQuestion(questionnaireId);
        JsonResult<Object> jsonResult = new JsonResult<Object>("200", (Object) questionList,"获取问卷详情成功");
        //System.out.println(jsonResult);
        return jsonResult;
    }

问卷二维码

（1）界面设计

采用qrcode工具生成二维码

 （2）功能实现

import uQRCode from '../../uni_modules/Sansnn-uQRCode/js_sdk/u-qrcode';
	
	export default {
		data() {
			return {
				questionnaireId:0,
				text: 'http://124.221.248.254/reply/#/?questionnaireId=' + this.questionnaireId,
				size: 255
			};
		},
		onLoad(options) {
			this.questionnaireId = options.questionnaireId
			console.log(this.questionnaireId);
		},
		onReady() {
			this.text = 'http://http://124.221.248.254/reply/#/?questionnaireId=' + this.questionnaireId;
		    const ctx = uni.createCanvasContext('qrcode');
		    const uqrcode = new uQRCode(
		      {
		        text: this.text,
		        size: this.size
		      },
		      ctx
		    );
		    uqrcode.make();
		    uqrcode.draw();
		  },
		methods:{
			backOne: function(){
				uni.navigateBack({
					delta:1,
				})
			},
		}
	}

回答详情

（1）界面设计

展示回答的答案

 （2）功能实现

@RequestMapping("/findAnswer")
    public JsonResult<Object> findAnswer(@RequestBody Map<String,String> map){
        String questionnaireIds = map.get("questionnaireId");
        int questionnaireId = Integer.parseInt(questionnaireIds);
        List<Question> questionList = questionaireService.findAnswer(questionnaireId);
        JsonResult<Object> jsonResult = new JsonResult<Object>("200", (Object) questionList,"获取问卷结果成功");
        //System.out.println(jsonResult);
        return jsonResult;
    }

可视化

（1）界面设计

采用ucharts进行可视化

 （2）功能实现

getServerData() {
	      setTimeout(() => {
			
			
			
			for (let i = 0; i < this.answerList.length; i++) {
				let answerInfoList = this.answerList[i].answerInfoList;
				let data = [];
				for (let j = 0; j < answerInfoList.length; j++) {
					let isin = false;
					for (let k = 0; k < data.length; k++) {
						if(data[k].name == answerInfoList[j].content){
							data[k].value = data[k].value + 1;
							isin = true;
							break;
						}
					}
					if(!isin){
						let info = {
							name: answerInfoList[j].content,
							value: 1
						};
						data.push(info);
					}
				}
				let series = [];
				series.push({data});
				let res = {
					series:series
				}
				this.resList.push(res);
				console.log(this.resList);
			}
			

						for (let i = 0; i < this.resList.length; i++) {
							let chartDataJson = JSON.parse(JSON.stringify(this.resList[i]));
							this.chartDataList.push(chartDataJson);
						}
						//this.chartData = JSON.parse(JSON.stringify(this.resList[0]));
	      }, 500);
	    },

三.总结

    通过这一次实训实践，我完成了问卷的展示部分，下一次，继续完成问卷的创建和回答部分。