在Django应用中使用jquery-editable-select的零基础求助

一、NPM和Bower是什么？ #

• NPM：Node.js的包管理工具，和Python里的PIP本质一样，都是用来快速下载、管理第三方包的工具——只不过NPM管前端（JS、CSS这类）的包，PIP管Python的包。它需要依赖Node.js环境，就像用PIP得先装Python一样。
• Bower：曾经的前端包管理工具，现在已经基本被NPM淘汰了，不用花精力研究，重点看NPM就行。

二、怎么安装NPM？ #

1. 先装Node.js：下载对应系统的安装包完成安装后，NPM会自动附带安装（类似装Python时PIP默认跟着装）。
2. 验证安装：打开终端/命令行，输入node -v和npm -v，能显示版本号就说明安装成功。

三、在Django里用jquery-editable-select的两种简单方案 #

方案1：直接下载文件（新手友好，不用NPM） #

不用折腾包管理工具，直接去jquery-editable-select的代码仓库里找dist文件夹，下载jquery-editable-select.min.js和jquery-editable-select.min.css两个文件。

• 把JS文件放到Django项目的static/js目录，CSS文件放到static/css目录（没有的话自己新建这两个文件夹）。
• 在你的模板文件里按顺序引入：

  <!-- 先引入本地的jQuery（去jQuery官网下载文件放到static/js里） -->
  <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
  <!-- 引入插件的CSS和JS -->
  <link rel="stylesheet" href="{% static 'css/jquery-editable-select.min.css' %}">
  <script src="{% static 'js/jquery-editable-select.min.js' %}"></script>
  <!-- 初始化插件，替换成你自己的选择器 -->
  <script>
    $(document).ready(function() {
      $('select.your-select-element').editableSelect();
    });
  </script>
  

方案2：用NPM安装（更规范的做法） #

1. 打开终端，进入你的Django项目根目录，执行npm init -y，这会生成一个package.json文件，类似Python的requirements.txt，用来记录安装的包信息。
2. 执行npm install jquery-editable-select --save，安装插件。
3. 安装完成后，插件的CSS和JS文件在node_modules/jquery-editable-select/dist/目录下，把这两个文件复制到Django的static文件夹里，之后的引入和初始化步骤和方案1一致。

四、注意事项 #

• 这个插件必须依赖jQuery，一定要先引入jQuery再引入插件的JS，否则会报错。
• 作为Django新手，建议先从方案1开始，先把插件跑通，熟悉流程后再尝试方案2。

内容的提问来源于stack exchange，提问作者Nico44044