创建服务器 express ,mongodb实现表格增删改查
程序员文章站
2022-03-07 21:15:01
Long Time No See废话不多说,直接开整前提是 Vscode 软件1、首先,建立一个文件夹2、然后,在文件夹里创建一个 public 文件夹,此文件夹用来放置静态文件3、在静态文件夹里创建静态资源4、静态资源创建完毕后,右键创建的第一个文件夹,在集成终端中打开ps:集成终端为 node.js5、在打开的集成终端中,输入 npm init -y +回车 创建 json 文件6、再输入 npm install express mongoose -S 安装 express 和 mon...
Long Time No See
废话不多说,直接开整前提是 Vscode 软件
1、首先,建立一个文件夹
2、然后,在文件夹里创建一个 public 文件夹,此文件夹用来放置静态文件
3、在静态文件夹里创建静态资源
4、静态资源创建完毕后,右键创建的第一个文件夹,在集成终端中打开
ps:集成终端为 node.js
5、在打开的集成终端中,输入 npm init -y +回车 创建 json 文件
6、再输入 npm install express mongoose -S 安装 express 和 mongoose
7、安装完成之后,在刚开始创立的文件夹下创建一个 服务器 ,一般命名为qpi.js,然后就可以开始敲代码了
服务器代码
JavaScript连接服务器代码
html代码
Css代码
顺序
一、首先写出接口文档,比如这个
一、静态资源发布 。http://127.0.0.1:4399 返回 index.html
二、接口文档
1、添加商品
接口地址:/addgoods
请求方式:POST
上传数据:imgsrc 图片地址、msg 简介、price 价格、 type 类别(1,2,3)
返回响应:
成功:{"err_code":"添加成功"}
失败:{"err_code":"no"}
2、返回所有商品
接口地址:/allgoods
请求方式:GET
上传数据:
返回响应:
成功:{"err_code":"显示成功","info":[]}
失败:{"err_code":"no"}
3、删除商品
接口地址:/delone
请求方式:GET
上传数据:id 商品唯一id
返回响应:
成功:{"err_code":"删除成功"}
失败:{"err_code":"no"}
4、修改-通过id 查询 修改的商品数据
接口地址:/findone
请求方式:GET
上传数据:id 商品唯一id
返回响应:
成功:{"err_code":"查找成功","info":{}}
失败:{"err_code":"no"}
5、修改
接口地址:/editgoods
请求方式:POST
上传数据: id: imgsrc 图片地址、msg 简介、price 价格、 type 类别(1,2,3)
返回响应:
成功:{"err_code":"修改成功"}
失败:{"err_code":"no"}
二、创建服务器,并写出接口
三、链接服务器
html代码
<div class="div">
<h1>商品后台管理系统</h1>
<form>
<label for="imgsrc">图片地址</label>
<input type="text" id="imgsrc">
<label for="msg">简介</label>
<input type="text" id="msg">
<label for="price">价格</label>
<input type="text" id="price">
<select name="" id="type">
<option value="1">电脑</option>
<option value="2">冰箱</option>
<option value="3">手机</option>
</select>
<input type="button" value="添加" id="add" name=""/>
<!-- 添加一个输入框,用于确认修改时的id值,可默认隐藏 -->
<input type="text" name="" id="_id"/>
<input type="button" name="" id="edit" value="确认修改"/>
</form>
<table>
<thead>
<tr>
<th>图片</th>
<th>简介</th>
<th>价格</th>
<th>类别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<!-- <tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>
<span>修改</span>
<span>删除</span>
</th>
</tr> -->
</tbody>
</table>
</div>
Css样式代码
.div{
width: 100vw;
}
h1{
text-align: center;
}
table,th,td{
border: 1px solid blue;
border-collapse: collapse;
}
table{
table-layout: auto;
}
#tbody span{
cursor: pointer;
}
table{
width: 80vw;
}
table img{
width: 50px;
height: 50px;
}
#_id,#edit{
display: none;
}
JavaScript代码
//添加
var add=document.getElementById( "add" );
add.onclick=function(){
var imgsrc=document.getElementById( "imgsrc" ).value;
var msg=document.getElementById( "msg" ).value;
var price=document.getElementById( "price" ).value;
var type=document.getElementById( "type" ).value;
var xhr=new XMLHttpRequest();
xhr.open( "POST","/addgoods",true );
xhr.setRequestHeader( "Content-type","application/x-www-form-urlencoded" )
xhr.send( `imgsrc=${ imgsrc }&msg=${ msg }&price=${ price }&type=${ type }` )
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
xhr.responseText;
let obj=JSON.parse( xhr.responseText );
if( obj.err_code=="添加成功" ){
//==展示表格,稍后再议
shows()
}else{
alert( "添加失败" )
}
}
}
}
var Arr=[ "电脑","冰箱","手机" ]
//渲染2--1
function showTr( obj ){
var tr="";
for( let i in obj.info ){
tr+=`
<tr>
<th>
<img src="${ obj.info[i].imgsrc }" alt=""/>
</th>
<th>${ obj.info[i].msg }</th>
<th>${ obj.info[i].price }</th>
<th>${ Arr[ obj.info[i].type-1 ] }</th>
<th>
<span οnclick="change( '${ obj.info[i]._id }' )">修改</span>
<span οnclick="del( '${ obj.info[i]._id }' )">删除</span>
</th>
</tr>
`
}
document.getElementById( "tbody" ).innerHTML=tr
}
//显示再表格中2--2
function shows(){
var xhr=new XMLHttpRequest();
xhr.open( "GET","/allgoods",true )
xhr.send();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText );
if( obj.err_code=="显示成功" ){
showTr( obj );
}else{
alert( "服务器没了" )
}
}
}
}
window.onload=function(){
shows()
}
//3、删除商品
function del( id ){
var xhr=new XMLHttpRequest();
xhr.open( "GET",`/delone?id=${ id }`,true )
xhr.send();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText )
if( obj.err_code=="删除成功" ){
shows()
}else{
alert( "删除失败" )
}
}
}
}
//4、修改
//4-1、根据id查找
function change( id ){
//点击修改时,确认修改显示,添加隐藏
document.getElementById( "edit" ).style.display="block";
document.getElementById( "add" ).style.display="none"
var xhr=new XMLHttpRequest();
xhr.open( "GET",`/findone?id=${ id }`,true )
xhr.send()
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText )
if( obj.err_code=="查找成功" ){
//将值返回到表单中
document.getElementById( "_id" ).value=obj.info._id
document.getElementById( "imgsrc" ).value=obj.info.imgsrc;
document.getElementById( "msg" ).value=obj.info.msg
document.getElementById( "price" ).value=obj.info.price
document.getElementById( "type" ).value=obj.info.type
}else{
alert( "就这?" )
}
}
}
}
//4-2、确认修改
var edit=document.getElementById( "edit" )
edit.onclick=function(){
//点击确认修改时,隐藏该按钮,添加按钮再显示
document.getElementById( "edit" ).style.display="none";
document.getElementById( "add" ).style.display="block"
//获取返回表单的值
var id=document.getElementById( "_id" ).value
var imgsrc=document.getElementById( "imgsrc" ).value
var msg=document.getElementById( "msg" ).value
var price=document.getElementById( "price" ).value
var type=document.getElementById( "type" ).value
var xhr=new XMLHttpRequest();
xhr.open( "POST","/editgoods",true )
xhr.setRequestHeader( "Content-type","application/x-www-form-urlencoded" )
xhr.send( `id=${ id }&imgsrc=${ imgsrc }&msg=${ msg }&price=${ price }&type=${ type }` )
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
let obj=JSON.parse( xhr.responseText );
if( obj.err_code=="修改成功" ){
shows()
}else{
alert( "快改!" )
}
}
}
}
## 服务器代码
//载入 rxpress 模块,创建服务器
const express=require("express");
const app=express();
//静态资源
app.use( express.static( "public" ) );
//加入 POST 必备两句话
app.use( express.json() );
app.use( express.urlencoded( { extended:true } ) );
//载入 mongoose 模块
const mongoose=require("mongoose");
//连接数据库
mongoose.connect( "mongodb://127.0.0.1:27017/myJd",{ useUnifiedTopology: true,useNewUrlParser: true } )
//创建 骨架
let Schema=new mongoose.Schema( {
"imgsrc":String,
"msg":String,
"price":Number,
"type":String
} )
//生成 集合以及数据模型
let datasModel=mongoose.model( "datas",Schema );
//添加商品
app.post( "/addgoods",function( req,res ){
let imgsrc=req.body.imgsrc;
let msg=req.body.msg;
let price=req.body.price;
let type=req.body.type;
datasModel.create( {
"imgsrc":imgsrc,
"msg":msg,
"price":price,
"type":type
},function( err ){
if( err ){
res.send( { "err_code":"添加失败" } )
}else{
res.send( { "err_code":"添加成功" } )
}
} )
} )
//显示所有商品
app.get( "/allgoods",function( req,res ){
datasModel.find( {},function( err,data ){
if( err ){
res.send( { "err_code":"溜了溜了" } )
}else{
res.send( { "err_code":"显示成功","info":data } )
}
} )
} )
//删除商品
app.get( "/delone",function( req,res ){
let id=req.query.id
datasModel.deleteOne( { "_id":id },function( err ){
if( err ){
res.send( { "err_code":"爷错了,快改" } )
}else{
res.send( { "err_code":"删除成功" } )
}
} )
} )
//修改
//1、通过id 查询需要修改的数据
app.get( "/findone",function( req,res ){
const id=req.query.id;
datasModel.findOne( { "_id":id },function( err,data ){
if( err ){
res.send( { "err_code":"爷又错了!快改!" } )
}else{
res.send( { "err_code":"查找成功","info":data } )
}
} )
} )
//2、修改==
app.post( "/editgoods",function( req,res ){
let id=req.body.id;
let imgsrc=req.body.imgsrc;
let msg=req.body.msg;
let price=req.body.price;
let type=req.body.type;
datasModel.updateOne( { "_id":id },{ $set:{
"imgsrc":imgsrc,
"msg":msg,
"price":price,
"type":type
} },function( err ){
if( err ){
res.send( { "err_code":"哎!又错了!" } )
}else{
res.send( { "err_code":"修改成功" } )
}
} )
} )
app.listen( 4399 )
????,搞定,今天的分享也结束了
我后天会稍微介绍一下 node 和 express
大家拜拜~~
本文地址:https://blog.csdn.net/Qi_JC/article/details/111936766