javascript简单商品管理器实现,node包的删除,安装与更新
程序员文章站
2022-03-13 12:39:29
...
简单商品管理器实现
- 下列代码实现了简单商品管理器,商品的添加,移动,删除,替换等基本功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* ! 12列栅格布局组件 */
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 0.5em;
}
.row > * {
background-color: lightcyan;
border: 1px solid #000;
box-sizing: border-box;
margin: 0.5em 0;
}
.col-md-1 {
grid-column: span 1;
}
.col-md-2 {
grid-column: span 2;
}
.col-md-3 {
grid-column: span 3;
}
.col-md-4 {
grid-column: span 4;
}
.col-md-5 {
grid-column: span 5;
}
.col-md-6 {
grid-column: span 6;
}
.col-md-7 {
grid-column: span 7;
}
.col-md-8 {
grid-column: span 8;
}
.col-md-9 {
grid-column: span 9;
}
.col-md-10 {
grid-column: span 10;
}
.col-md-11 {
grid-column: span 11;
}
.col-md-12 {
grid-column: span 12;
}
.header {
background-color: skyblue;
height: 3em;
display: flex;
align-items: center;
}
img{
width: 5em;
height: 5em;
}
.addcommodity{
background-color: skyblue;
display: flex;
flex-direction: column;
position: fixed;
top: 200px;
left: 600px;
border: 1px solid #000;
gap: 0.5em;
}
.repcommodity{
background-color: skyblue;
display: flex;
flex-direction: column;
position: fixed;
top: 200px;
left: 600px;
border: 1px solid #000;
gap: 0.5em;
}
h1{
align-self: center;
}
button{
height: 3em;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
<body>
<div class="commodity header">
<button onclick="addcommodity2()">增加商品</button>
</div>
<div class="row container">
</div>
<div class="addcommodity hide" >
<h1>添加商品</h1>
<div class="" style="display: flex;">
<label for="comname">商品名称</label>
<input type="text" name="comname" id="comname" class="comname" placeholder="请输入商品名称">
</div>
<div class="" style="display: flex;">
<label for="comnimg">图标路径</label>
<input type="text" name="comimg" id="comname" class="comimg" placeholder="请输入商品图标路径">
</div>
<div class="add" style="align-self: center;">
<button onclick="addcom(this.parentNode.parentNode)">添加</button>
<button onclick="cancle(this.parentNode.parentNode)">取消</button>
</div>
</div>
<div class="repcommodity hide" >
<h1>替换商品</h1>
<div class="" style="display: flex;">
<label for="comname2">商品名称</label>
<input type="text" name="comname2" id="comname2" class="comname2" placeholder="请输入商品名称">
</div>
<div class="" style="display: flex;">
<label for="comnimg2">图标路径</label>
<input type="text" name="comimg2" id="comname2" class="comimg2" placeholder="请输入商品图标路径">
</div>
<div class="rep" style="align-self: center;">
<button onclick="repcom(this.parentNode.parentNode)">添加</button>
<button onclick="cancle(this.parentNode.parentNode)">取消</button>
</div>
</div>
<script>
let nowreplace
function repcom(ele)
{
let comname=document.querySelector(".comname2");
let comimg=document.querySelector(".comimg2");
console.log(comname.value);
console.log(comimg.value);
if (comname.value.length==0)
{
alert("商品名称不能为空");
return false;
}
if (comimg.value.value==0)
{
alert("商品图标不能为空");
return false;
}
let result=`
<div>
<img src=${comimg.value} />
<div>
<button onclick="del(this.parentNode.parentNode)">删除</button>
<button onclick="replacecom(this.parentNode.parentNode)">替换</button>
<button onclick="next(this.parentNode.parentNode)">向后</button>
<button onclick="prev(this.parentNode.parentNode)">向前</button>
</div>
</div>
`
nowreplace.insertAdjacentHTML("beforebegin",result);
nowreplace.remove();
let addcom=document.querySelector(".repcommodity");
addcom.classList.remove("show");
addcom.classList.add("hide");
}
function replacecom(ele)
{
nowreplace=ele;
console.log("执行函数");
let addcom=document.querySelector(".repcommodity");
console.log(addcom);
addcom.classList.remove("hide");
addcom.classList.add("show");
}
function cancle(ele){
ele.classList.remove("show");
ele.classList.add("hide");
}
function addcom(ele){
let comname=document.querySelector(".comname");
let comimg=document.querySelector(".comimg");
console.log(comname.value);
console.log(comimg.value);
if (comname.value.length==0)
{
alert("商品名称不能为空");
return false;
}
if (comimg.value.value==0)
{
alert("商品图标不能为空");
return false;
}
let result=`
<div>
<img src=${comimg.value} />
<div>
<button onclick="del(this.parentNode.parentNode)">删除</button>
<button onclick="replacecom(this.parentNode.parentNode)">替换</button>
<button onclick="next(this.parentNode.parentNode)">向后</button>
<button onclick="prev(this.parentNode.parentNode)">向前</button>
</div>
</div>
`
let container=document.querySelector(".container");
container.insertAdjacentHTML("beforeend",result);
let addcom=document.querySelector(".addcommodity");
addcom.classList.remove("show");
addcom.classList.add("hide");
}
function addcommodity2(){
console.log("执行函数");
let addcom=document.querySelector(".addcommodity");
console.log(addcom);
addcom.classList.remove("hide");
addcom.classList.add("show");
}
const mycommodity=[
"commodity/commodity1.jpeg",
"commodity/commodity2.jpeg",
"commodity/commodity3.jpeg",
"commodity/commodity4.jpeg",
"commodity/commodity5.jpeg",
"commodity/commodity6.jpeg",
"commodity/commodity7.jpeg",
"commodity/commodity8.jpeg",
"commodity/commodity9.jpeg",
"commodity/commodity10.jpeg",
];
let container=document.querySelector(".container");
htmlstr=mycommodity.reduce((acc,imgs)=>{
let result=`
<div>
<img src=${imgs} />
<div>
<button onclick="del(this.parentNode.parentNode)">删除</button>
<button onclick="replacecom(this.parentNode.parentNode)">替换</button>
<button onclick="next(this.parentNode.parentNode)">向后</button>
<button onclick="prev(this.parentNode.parentNode)">向前</button>
</div>
</div>
`
return acc+result;
},"");
console.log(htmlstr);
container.insertAdjacentHTML("afterBegin",htmlstr);
function addcommodity()
{
}
function del(ele){
return confirm("是否删除") ? ele.remove():false;
}
function next(ele)
{
let nextele=ele.nextElementSibling;
if (nextele==null)
{
alert("已经是最后一张了");
return false
}
nextele.after(ele);
}
function prev(ele)
{
let prevnode=ele.previousElementSibling;
if (prevnode==null)
{
alert("已经是第一张了");
return false;
}
prevnode.before(ele);
}
</script>
</body>
</html>
node包的删除与安装
- npm使用
npc install packname
来安装指定包,使用参数--save
或-S
指定改包为生产依赖,使用参数--save-dev
或-D
来指定该包为开发依赖 - 包会自动下载到
node_modules
目录中,如果目录不存在会自动创建 - 并会创建或更新
package-lock.json
文件,锁定当前版本 - 当再次安装时,会直接安装
package-lock.json
中的指定的版本 - npm使用
npm uninstall package
或npm 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
来安装最新的包
上一篇: javascript得dom编程初体验