欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript简单商品管理器实现,node包的删除,安装与更新

程序员文章站 2022-03-13 12:39:29
...

简单商品管理器实现

  • 下列代码实现了简单商品管理器,商品的添加,移动,删除,替换等基本功能
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. /* ! 12列栅格布局组件 */
  11. .row {
  12. display: grid;
  13. grid-template-columns: repeat(12, 1fr);
  14. gap: 0.5em;
  15. }
  16. .row > * {
  17. background-color: lightcyan;
  18. border: 1px solid #000;
  19. box-sizing: border-box;
  20. margin: 0.5em 0;
  21. }
  22. .col-md-1 {
  23. grid-column: span 1;
  24. }
  25. .col-md-2 {
  26. grid-column: span 2;
  27. }
  28. .col-md-3 {
  29. grid-column: span 3;
  30. }
  31. .col-md-4 {
  32. grid-column: span 4;
  33. }
  34. .col-md-5 {
  35. grid-column: span 5;
  36. }
  37. .col-md-6 {
  38. grid-column: span 6;
  39. }
  40. .col-md-7 {
  41. grid-column: span 7;
  42. }
  43. .col-md-8 {
  44. grid-column: span 8;
  45. }
  46. .col-md-9 {
  47. grid-column: span 9;
  48. }
  49. .col-md-10 {
  50. grid-column: span 10;
  51. }
  52. .col-md-11 {
  53. grid-column: span 11;
  54. }
  55. .col-md-12 {
  56. grid-column: span 12;
  57. }
  58. .header {
  59. background-color: skyblue;
  60. height: 3em;
  61. display: flex;
  62. align-items: center;
  63. }
  64. img{
  65. width: 5em;
  66. height: 5em;
  67. }
  68. .addcommodity{
  69. background-color: skyblue;
  70. display: flex;
  71. flex-direction: column;
  72. position: fixed;
  73. top: 200px;
  74. left: 600px;
  75. border: 1px solid #000;
  76. gap: 0.5em;
  77. }
  78. .repcommodity{
  79. background-color: skyblue;
  80. display: flex;
  81. flex-direction: column;
  82. position: fixed;
  83. top: 200px;
  84. left: 600px;
  85. border: 1px solid #000;
  86. gap: 0.5em;
  87. }
  88. h1{
  89. align-self: center;
  90. }
  91. button{
  92. height: 3em;
  93. }
  94. .show {
  95. display: block;
  96. }
  97. .hide {
  98. display: none;
  99. }
  100. </style>
  101. <body>
  102. <div class="commodity header">
  103. <button onclick="addcommodity2()">增加商品</button>
  104. </div>
  105. <div class="row container">
  106. </div>
  107. <div class="addcommodity hide" >
  108. <h1>添加商品</h1>
  109. <div class="" style="display: flex;">
  110. <label for="comname">商品名称</label>
  111. <input type="text" name="comname" id="comname" class="comname" placeholder="请输入商品名称">
  112. </div>
  113. <div class="" style="display: flex;">
  114. <label for="comnimg">图标路径</label>
  115. <input type="text" name="comimg" id="comname" class="comimg" placeholder="请输入商品图标路径">
  116. </div>
  117. <div class="add" style="align-self: center;">
  118. <button onclick="addcom(this.parentNode.parentNode)">添加</button>
  119. <button onclick="cancle(this.parentNode.parentNode)">取消</button>
  120. </div>
  121. </div>
  122. <div class="repcommodity hide" >
  123. <h1>替换商品</h1>
  124. <div class="" style="display: flex;">
  125. <label for="comname2">商品名称</label>
  126. <input type="text" name="comname2" id="comname2" class="comname2" placeholder="请输入商品名称">
  127. </div>
  128. <div class="" style="display: flex;">
  129. <label for="comnimg2">图标路径</label>
  130. <input type="text" name="comimg2" id="comname2" class="comimg2" placeholder="请输入商品图标路径">
  131. </div>
  132. <div class="rep" style="align-self: center;">
  133. <button onclick="repcom(this.parentNode.parentNode)">添加</button>
  134. <button onclick="cancle(this.parentNode.parentNode)">取消</button>
  135. </div>
  136. </div>
  137. <script>
  138. let nowreplace
  139. function repcom(ele)
  140. {
  141. let comname=document.querySelector(".comname2");
  142. let comimg=document.querySelector(".comimg2");
  143. console.log(comname.value);
  144. console.log(comimg.value);
  145. if (comname.value.length==0)
  146. {
  147. alert("商品名称不能为空");
  148. return false;
  149. }
  150. if (comimg.value.value==0)
  151. {
  152. alert("商品图标不能为空");
  153. return false;
  154. }
  155. let result=`
  156. <div>
  157. <img src=${comimg.value} />
  158. <div>
  159. <button onclick="del(this.parentNode.parentNode)">删除</button>
  160. <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
  161. <button onclick="next(this.parentNode.parentNode)">向后</button>
  162. <button onclick="prev(this.parentNode.parentNode)">向前</button>
  163. </div>
  164. </div>
  165. `
  166. nowreplace.insertAdjacentHTML("beforebegin",result);
  167. nowreplace.remove();
  168. let addcom=document.querySelector(".repcommodity");
  169. addcom.classList.remove("show");
  170. addcom.classList.add("hide");
  171. }
  172. function replacecom(ele)
  173. {
  174. nowreplace=ele;
  175. console.log("执行函数");
  176. let addcom=document.querySelector(".repcommodity");
  177. console.log(addcom);
  178. addcom.classList.remove("hide");
  179. addcom.classList.add("show");
  180. }
  181. function cancle(ele){
  182. ele.classList.remove("show");
  183. ele.classList.add("hide");
  184. }
  185. function addcom(ele){
  186. let comname=document.querySelector(".comname");
  187. let comimg=document.querySelector(".comimg");
  188. console.log(comname.value);
  189. console.log(comimg.value);
  190. if (comname.value.length==0)
  191. {
  192. alert("商品名称不能为空");
  193. return false;
  194. }
  195. if (comimg.value.value==0)
  196. {
  197. alert("商品图标不能为空");
  198. return false;
  199. }
  200. let result=`
  201. <div>
  202. <img src=${comimg.value} />
  203. <div>
  204. <button onclick="del(this.parentNode.parentNode)">删除</button>
  205. <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
  206. <button onclick="next(this.parentNode.parentNode)">向后</button>
  207. <button onclick="prev(this.parentNode.parentNode)">向前</button>
  208. </div>
  209. </div>
  210. `
  211. let container=document.querySelector(".container");
  212. container.insertAdjacentHTML("beforeend",result);
  213. let addcom=document.querySelector(".addcommodity");
  214. addcom.classList.remove("show");
  215. addcom.classList.add("hide");
  216. }
  217. function addcommodity2(){
  218. console.log("执行函数");
  219. let addcom=document.querySelector(".addcommodity");
  220. console.log(addcom);
  221. addcom.classList.remove("hide");
  222. addcom.classList.add("show");
  223. }
  224. const mycommodity=[
  225. "commodity/commodity1.jpeg",
  226. "commodity/commodity2.jpeg",
  227. "commodity/commodity3.jpeg",
  228. "commodity/commodity4.jpeg",
  229. "commodity/commodity5.jpeg",
  230. "commodity/commodity6.jpeg",
  231. "commodity/commodity7.jpeg",
  232. "commodity/commodity8.jpeg",
  233. "commodity/commodity9.jpeg",
  234. "commodity/commodity10.jpeg",
  235. ];
  236. let container=document.querySelector(".container");
  237. htmlstr=mycommodity.reduce((acc,imgs)=>{
  238. let result=`
  239. <div>
  240. <img src=${imgs} />
  241. <div>
  242. <button onclick="del(this.parentNode.parentNode)">删除</button>
  243. <button onclick="replacecom(this.parentNode.parentNode)">替换</button>
  244. <button onclick="next(this.parentNode.parentNode)">向后</button>
  245. <button onclick="prev(this.parentNode.parentNode)">向前</button>
  246. </div>
  247. </div>
  248. `
  249. return acc+result;
  250. },"");
  251. console.log(htmlstr);
  252. container.insertAdjacentHTML("afterBegin",htmlstr);
  253. function addcommodity()
  254. {
  255. }
  256. function del(ele){
  257. return confirm("是否删除") ? ele.remove():false;
  258. }
  259. function next(ele)
  260. {
  261. let nextele=ele.nextElementSibling;
  262. if (nextele==null)
  263. {
  264. alert("已经是最后一张了");
  265. return false
  266. }
  267. nextele.after(ele);
  268. }
  269. function prev(ele)
  270. {
  271. let prevnode=ele.previousElementSibling;
  272. if (prevnode==null)
  273. {
  274. alert("已经是第一张了");
  275. return false;
  276. }
  277. prevnode.before(ele);
  278. }
  279. </script>
  280. </body>
  281. </html>

node包的删除与安装

  • npm使用npc install packname来安装指定包,使用参数--save-S指定改包为生产依赖,使用参数--save-dev-D来指定该包为开发依赖
  • 包会自动下载到node_modules目录中,如果目录不存在会自动创建
  • 并会创建或更新package-lock.json文件,锁定当前版本
  • 当再次安装时,会直接安装package-lock.json中的指定的版本
  • npm使用 npm uninstall packagenpm uni package来卸载已经安装的包

node包的更新

npc更新包主要有以下步骤

  • 1.使用npm outdated packname命令来查看是否有可更新的包
  • 2.使用npm i -g npm-check-updates来安装更新包需要使用的插件
  • 3.使用npm list -g来查看包是否更新成功
  • 4.使用npm-check-updates查看用更新插件来检查可更新的包的列表
  • 5.使用ncu -u packname来更新最新的包在packjson中的版本号
  • 6.最后使用npm install来安装最新的包