仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

这篇具有很好参考价值的文章主要介绍了仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一,开发前的准备

第一步,初始化项目
创建package.json

首先,新建一个空文件夹项目,在空文件上按shift键同时鼠标右击,打开命令终端窗口
仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

npm init

仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程
第二步,安装项目依赖

Parcel 快速部署工具,官网:https://parceljs.org/docs/
仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来是一个很好的选择。

NPM安装

npm install --save-dev parcel

项目所需其他工具依赖:

  • pretty-print-json 打印和游览漂亮json的工具 https://pretty-print-json.js.org/
    仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

  • copy-to-clipboard 复制内容到剪切板 https://www.npmjs.com/package/copy-to-clipboard

  • gotpl 一个轻量级、高性能的JavaScript模板引擎。 https://www.npmjs.com/package/gotpl

安装上面三个依赖工具

npm i pretty-print-json copy-to-clipboard gotpl  

仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程
最终目录结构:
仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

二,在项目目录中分别创建三个文件:index.html index.css index.js

修改index.html如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>问卷调查编辑工具</title>
    <link rel="stylesheet" href="index.css" />
    <script type="module" src="index.js"></script>
  </head>
  <body>
    <h1>欢迎使用问卷调查编辑工具!</h1>
  </body>
</html>

三,修改package.json文件:

{
  "name": "questionnaire-design",
  "version": "1.0.0",
  "description": "调查问卷设计",
  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "author": "tigerhhzz",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.8.3"
  },
  "dependencies": {
    "copy-to-clipboard": "^3.3.3",
    "gotpl": "^8.4.5",
    "pretty-print-json": "^1.4.1"
  }
}

四,运行项目:

仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程
运行成功:
仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程

访问http://localhost:1234
仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程文章来源地址https://www.toymoban.com/news/detail-400856.html

到了这里,关于仿造问卷星--开发一套调查问卷设计工具(1/3)--完整流程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp + node.js 开发问卷调查小程序

    前后端效果图 后端:nodejs 12.8 ; mongoDB 4.0 前端:uniapp 开发工具:HBuilderX 3.99 前端首页代码 index.vue 后台管理部分页面代码 charts.vue 后端使用 nodejs + mongoDB 搭建服务 程序入口文件 app.js 对原始数据按题目名称进行分组,然后追加需要用到的字段,再把处理好的数据发给前端进行

    2024年01月18日
    浏览(49)
  • 基于web的问卷调查系统的设计与实现 毕业设计开题报告

     博主介绍 :《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月04日
    浏览(43)
  • 计算机毕业设计 | SpringBoot+vue校园问卷调查系统(附源码)

    在进入21世纪以后,互联网得到了蓬勃的发展,电子问卷调查也开始逐渐流行起来。传统纸质问卷和电子问卷相比较后,传统问卷还存在很多弊端: 问卷分发起来比较困难,并且分发试卷耗费大量的金钱和时间; 当调查的主题不同时,题目也不尽相同,传统纸质问卷,题目变

    2024年02月01日
    浏览(51)
  • 89基于java的在线调查问卷系统设计与实现(含配套lun文,可参考做毕设)

    本章节给大家带来一个基于java在线调查问卷系统设计与实现,可适用于基于java在线校园调查问卷,基于java校园问卷调查系统,java问卷调查系统,校园在线问卷调查,校园在线调查问卷系统设计,调查问卷管理系统,基于Javaweb实现在线调查问卷系统,网上调查问卷系统,网

    2024年02月08日
    浏览(45)
  • 基于selenium实现自动填写问卷星的问卷调查

    废话不多说,直接上解决方案: 没用用过selenium的小朋友记得先安装配置一下: 谷歌浏览器驱动的安装及selenium的安装与使用 - 知乎  防止有人不看参数说明,再写一遍: 注意:由于时间有限,目前我只做了单选和多选这两类选择题的自动填写,后续有时间的话会继续更新其

    2024年02月04日
    浏览(52)
  • 调查问卷平台哪家好?

    在如今的数字化时代,问卷调查已成为企业和组织了解顾客需求、员工满意度以及市场趋势的重要工具。然而,在众多的在线调查工具中, 为什么我们要选择Zoho Survey? 1、多种问卷题型: Zoho Survey提供丰富多样的问题类型,包括单选题、多选题、文本题、评分题等。用户可

    2024年02月11日
    浏览(38)
  • 微信小程序调查问卷案例

           通过开发一个“调查问卷”的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中。参考界面如图1所示。 步骤1 :新建一个微信小程序项目 步骤2 :在小程序项目的pages/index/index.json文件中设置导航栏

    2023年04月25日
    浏览(72)
  • 调查问卷Type Form的集成

    Typeform是一家制作线上调查问卷的公司。 Muñoz 和 David Okuniev两人于2012年创作出一个更加动态、更具交互性的用户调查工具,每次只提一个问题,并且根据用户的回答为其呈现下一个问题,像和朋友间的对话一样,让用户在不知不觉中就完成了问卷。 Typeform将帮你获得有关产品

    2024年02月10日
    浏览(80)
  • 医院患者满意度调查问卷示例

    以下是一个简单的医院患者满意度调查问卷示例,供参考。请注意,实际的问卷可能需要根据医院的特定需求和目标进行定制。 个人信息(可选): 您的年龄: [填写您的年龄]岁 您的性别: [选择性别] 男性 / 女性 / 其他 1. 您在本次就诊中对医疗护理的满意度: 非常满意

    2024年02月01日
    浏览(48)
  • 求免费好用的问卷调查平台!

    在当今信息时代,了解客户需求和市场趋势对企业的发展至关重要。而问卷调查是一种常见、有效的数据收集方式。本文将介绍一款 专业好用的问卷调查工具 ——Zoho Survey。我们将从功能特点、用户体验、数据分析和安全性四个方面来探讨它为用户带来的价值。 Zoho Survey提供

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包